01-supplement.md

ウェブ開発の基礎知識

このセクションでは、ウェブ開発の基本的な概念について説明します。これからウェブ開発を学ぶ方は、まずこちらを読んでおくと理解が深まります。

ウェブサイトの仕組み

クライアントとサーバー

ウェブサイトは「クライアント」と「サーバー」の対話で成り立っています。

• クライアント：あなたが使っているブラウザ（Chrome、Safari、Firefoxなど）
• サーバー：ウェブサイトのデータを保存し、提供するコンピューター

基本的な流れ

1. ユーザーがブラウザでURLを入力する（例：https://example.com）
2. ブラウザ（クライアント）がそのURLのサーバーにリクエストを送る
3. サーバーがリクエストを処理し、HTMLなどのデータを返す
4. ブラウザがそのデータを解釈して画面に表示する

ウェブサイトを構成する3つの言語

HTML（HyperText Markup Language）

HTMLは「何を表示するか」を定義します。ウェブページの構造を作るための言語です。

<h1>これは見出しです</h1>
<p>これは段落です。</p>
<img src="image.jpg" alt="画像の説明">

• <h1>、<p>、<img> などの「タグ」を使って、テキストや画像などの要素を定義します
• タグは開始タグ（<h1>）と終了タグ（</h1>）のペアで使います（一部例外あり）
• タグには「属性」を追加できます（例：src="image.jpg"）

CSS（Cascading Style Sheets）

CSSは「どのように表示するか」を定義します。色、サイズ、配置などのスタイルを指定します。

h1 {
  color: blue;
  font-size: 24px;
}

• セレクタ（h1）と宣言ブロック（{ color: blue; }）で構成されます
• プロパティ（color）と値（blue）のペアで指定します

JavaScript

JavaScriptは「どのように動作するか」を定義します。ボタンをクリックしたときの動作など、インタラクティブな要素を作るための言語です。

document.getElementById("button").addEventListener("click", function() {
  alert("ボタンがクリックされました！");
});

• ユーザーの操作に応じて内容を変更したり、データを取得したりできます
• 現代のウェブサイトでは非常に重要な役割を果たしています

ウェブ開発の進化

静的ウェブサイト vs 動的ウェブサイト

• 静的ウェブサイト：すべてのユーザーに同じ内容を表示する
• 動的ウェブサイト：ユーザーやタイミングによって表示内容が変わる

フロントエンドとバックエンド

• フロントエンド：ユーザーが直接見る部分（HTML、CSS、JavaScript）
• バックエンド：サーバー側の処理（データベース、ビジネスロジックなど）

モダンウェブ開発のツール

現代のウェブ開発では、効率的に開発するためのさまざまなツールやフレームワークが使われています。

• フレームワーク：React、Vue.js、Angular（フロントエンド）、Express、Django、Ruby on Rails（バックエンド）
• ビルドツール：Webpack、Vite
• パッケージマネージャー：npm、yarn

用語集

用語	説明
URL	Uniform Resource Locator。ウェブ上のリソースの場所を示す文字列（例：https://example.com）
HTTP	HyperText Transfer Protocol。ウェブブラウザとサーバー間の通信プロトコル
API	Application Programming Interface。ソフトウェア同士が通信するための仕様
DOM	Document Object Model。HTMLドキュメントをツリー構造で表現したもの
レスポンシブデザイン	様々な画面サイズに対応するデザイン手法
コンポーネント	再利用可能なUIの部品