遊戯苑 -Yugien-

This is a site created by an amateur programmer as a memo.

Web Programming

Webプログラミングとは？: ウェブサイトやウェブアプリケーションを構築するためのコードを記述し、ユーザーとインターネット上でインタラクティブに情報をやり取りできる仕組みを作ることを指す。

文書構造／マークアップ

ウェブページの構造を定義するマークアップ言語。
テキスト、画像、リンクなどの要素を配置・表示する土台。

MathML (数学表記のマークアップ)

数式をマークアップするための XML ベースの言語。
ウェブページ上で数学的な記号や式を正しく表示可能。
例： $x = \frac{- b \pm \sqrt{b^{2} - 4 a c}}{2 a}$ のような二次方程式の記述が可能。
主に STEM 分野（科学・技術・工学・数学）のコンテンツで利用される。

Markdown, XML, 他のマークアップ言語

ドキュメント作成やデータ構造の表現など、用途に応じて使い分ける。

ポイント : Webページの「骨組み」を作る工程。MathML を使うことで数式を正しく表現し、STEM 分野のコンテンツに適した表記が可能になる。

プレゼンテーション／スタイリング

HTMLで定義された要素の見た目を制御するためのスタイルシート言語。
色やフォント、レイアウトなどの装飾を設定し、ページを視覚的に整える。

ポイント : Webページのデザインとレイアウトを担う。「見た目」を統一し、ユーザビリティやブランドイメージを高める。

フロントエンド・ロジック／動的処理

JavaScript (TypeScript などの AltJS 含む)

ウェブページに動的な機能やインタラクティブな要素を追加するためのプログラミング言語。
フォームの入力チェックやボタン操作など、実行時にページを変化させられる。

フレームワーク／ライブラリ (React, Vue, Angular など)

コンポーネント指向やデータバインディングを効率良く行う仕組みを提供。
大規模開発や保守性の高いアプリケーション構築に役立つ。

ブラウザAPI

ブラウザが標準で提供する機能をJavaScriptから呼び出すためのインターフェース。
代表的なAPIの例：
DOM (Document Object Model)
- HTMLやXMLドキュメントをプログラムで操作するためのAPI。
- 要素の取得や書き換えが可能。
Fetch API
- ネットワーク経由でリソースを取得・送信するためのモダンなAPI。
- REST APIとの通信や外部リソース取得などに使用。
Web Storage
- localStorageやsessionStorageなど、ブラウザにデータを保存する仕組み。
- ユーザー情報や設定データをクライアント側に保持し、ページ遷移や再訪問時にも利用可能。
- クッキーよりも扱いやすく、より大きな容量を使える場合が多い。
Web Audio API
- オーディオ再生や音声解析など、音に関する高度な操作を行うAPI。

ポイント : フロントエンド側（ブラウザ内）で「動きをつける」「ユーザーが入力したデータを扱う」など、実行時の変化を担当する。

グラフィックス／可視化

SVG (ベクター画像)

テキストベースのXML形式で記述され、拡大縮小しても劣化しないベクター画像をWeb上で扱える標準フォーマットです。

Canvas (ピクセルベース)

JavaScriptからピクセル単位の描画が可能。
ゲームや動的グラフィックスに適する。

WebGL (3D描画)

ブラウザ上で高速な3Dグラフィックスを扱えるAPI。
3DモデルやVR/AR的な表現にも活用できる。

D3.js などの可視化ライブラリ

データを動的にグラフやチャートとして表示する仕組み。

ポイント : 静止画や動的なアニメーション、インタラクティブなグラフなど、視覚表現を強化する領域。

ビルド／ツールチェーン

Webpack, Babel, Vite など

複数のJavaScriptファイルやCSSを一括で最適化・バンドルする。
新しい文法を古いブラウザでも動くようにトランスパイルする機能などがある。

ポイント : 開発を効率化し、最終的に本番公開しやすい形へまとめる裏方的ツール。

サーバーサイド／バックエンド

Node.js, PHP, Python, Ruby など

サーバー上で動作するプログラミング言語。HTTPリクエストを受け取り、レスポンスを返す。
例：

PHP

PHPとは、サーバーサイドで動作し、動的なウェブページやウェブアプリケーションを生成するためのプログラミング言語です。

Python

Pythonとは、読みやすく扱いやすい文法を持ち、幅広い用途で使われる汎用的なプログラミング言語です。

サーバーサイドフレームワーク (例: Express, Django, Rails, Laravel など)

ルーティングやテンプレートエンジン、DB接続などを包括的に支援。
大規模開発を効率化する。

データベース連携 (SQL, NoSQL など)

MySQL, PostgreSQL, MongoDBなどとの連携。
データの保存・検索やユーザー認証処理などを行う。

ポイント : データの保存やビジネスロジックなど、裏側でアプリの根幹を支える機能。

API

API (Application Programming Interface) とは？

ソフトウェア同士が特定の機能やデータをやり取りする際に用いられる、あらかじめ定義された通信手段と規則のことです。

サーバーサイドAPI

例: REST API, GraphQL API など。
クライアント(ブラウザやモバイルアプリ)からのリクエストを処理し、データを返却する仕組み。

外部サービスAPI

例: Google Maps API, Twitter API, Stripe API など。
他社が提供する機能やデータを、自分のサービスに組み込める。

ポイント : Webサービス同士を連携させる「橋渡し」。バックエンドが提供するAPIや外部サービスのAPIなど、フロントエンドから利用するケースも多い。

バージョン管理／ソースコード管理

ソースコードの変更履歴を追跡し、複数人で安全に共同開発を行うためのツール。
ブランチやマージ機能により、並行作業やリリース管理がしやすい。

その他のバージョン管理ツール (Subversion, Mercurial など)

過去には主流だったり、特定のプロジェクトで使われることもある。

ポイント : 変更履歴を管理しながら、チームでの衝突やミスを防止し、生産性を高めるための仕組み。

Text Editor Survey: What text editor are you using?
お使いのテキストエディタを教えてください。

Useful websites and apps

便利なサイトやアプリなど

W3C Markup Validation Service: This validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc.

VBA: VBAは Excelの操作を自動化するマクロ機能で使われているプログラミング言語で「Visual Basic for Applications」の略になります。