遊戯苑 -Yugien-

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

Web Programming

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

文書構造／マークアップ

HTML

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

MathML

数式をセマンティックに記述し、Webブラウザ上で拡大縮小やアクセシビリティに優れた形で表示・利用できるようにするためのXMLベースのマークアップ言語です。

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

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

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

CSS

HTML要素の見た目を整えるスタイルシート言語
レイアウトや配色、フォント、アニメーションなどの視覚効果

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

JavaScript (TypeScript などの AltJS 含む)

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

ブラウザAPI

ブラウザが標準で提供する機能をJavaScriptから呼び出すためのインターフェース。
代表的なAPIの例：
DOM (Document Object Model)
- HTMLやXMLドキュメントをプログラムで操作するためのAPI。
- 要素の取得や書き換えが可能。
Drag and Drop API
- ブラウザ上でドラッグ＆ドロップ操作を実装できるAPI
- 例: ファイルをドラッグしてアップロード、要素の並び替えなどを直感的に実装
File API
- <input type="file"> や Drag and Drop で取得したファイルのメタ情報（ファイル名・サイズ・種類など）を扱うためのAPI
- File インターフェイスや Blob オブジェクト、FileList などを含む
FileReader API
- ユーザーがブラウザ上でローカルファイルの内容を読み取れるAPI
- テキストファイルの内容を表示したり、画像ファイルをプレビューしたりするケースで使用
- Drag and Drop API、File API と組み合わせることで、ドラッグされたファイルの中身を即時プレビューできる
Fetch API
- ネットワーク経由でリソースを取得・送信するためのモダンなAPI。
- REST APIとの通信や外部リソース取得などに使用。
Web Storage
- localStorageやsessionStorageなど、ブラウザにデータを保存する仕組み。
- ユーザー情報や設定データをクライアント側に保持し、ページ遷移や再訪問時にも利用可能。
- クッキーよりも扱いやすく、より大きな容量を使える場合が多い。
Web Audio API
- オーディオ再生や音声解析など、音に関する高度な操作を行うAPI。

Web Components

Web Componentsとは

ブラウザ標準の仕組みを使って独自のHTML要素を定義・カプセル化し、フレームワークに依存しない再利用可能なUIパーツを作れる技術です。

カスタム要素 (Custom Elements)

<my-element>のような自作タグを定義できる
他のプロジェクトやページに流用しやすい

Shadow DOM

コンポーネントごとにスコープを隔離し、CSSやDOM構造を他から干渉されにくくする
大規模開発での名前衝突防止や保守性向上に貢献

HTML Templates

<template>タグを利用した再利用可能な断片の作成
コンポーネント化と組み合わせて動的に生成／レンダリング

フレームワーク／ライブラリ

React, Vue, Angular など

データバインディングやコンポーネント指向を本格的に導入しやすい
大規模・高機能なUI構築に向いている

Web Components との連携

フレームワーク内部で独自の仕組みがある一方、Web Componentsを組み込んで使うことも可能

グラフィックス／可視化

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 など)