🌐
IT/Web基礎
1〜2時間 入門Webが動く仕組みを理解する。プログラミングの前に必ず押さえたい教養。
概要
これは何？
IT/Web基礎とは、WebサイトやWebアプリがどのように動いているかを理解するための知識です。サーバ、クライアント、HTTP、ネットワークといった用語を知っておくと、その後のプログラミング学習がスムーズになります。
なぜ重要？
多くのプログラミングスクールでは、最初にこの基礎を学びます。知らなくても簡単なページは作れますが、複雑なものを作ろうとすると「なぜ動かないのか」が分からず挫折しがち。最初に押さえておくと後が楽です。
何を学ぶか
- Webページが表示される仕組み（クライアントとサーバ）
- HTTP/HTTPSとは何か
- ブラウザの役割
- HTML・CSS・JavaScriptの役割の違い
詳細解説
クライアントとサーバ
Webでは「クライアント」（あなたのパソコン・スマホ）が「サーバ」（データを置いている遠くのコンピュータ）に「このページをください」とリクエストを送り、サーバがHTMLなどのファイルを返します。ブラウザがそのHTMLを解釈して画面に表示します。
例:
- あなたがURLを入力 → ブラウザがサーバにリクエスト → サーバがHTMLを返す → ブラウザが表示
Tips:
- クライアント=依頼する側、サーバ=提供する側
- 1つのサーバが多数のクライアントに応答する
よくある間違い:
- サーバとクライアントを混同する
- 「サーバ」を特別な機械だと思う → 普通のPCでもサーバになれる
HTTPとHTTPS
HTTPはサーバとクライアントがデータをやり取りするための「約束事」（プロトコル）です。HTTPSは暗号化された安全な版。URLの先頭がhttps://なら通信が暗号化されています。
例:
- http://example.com → 暗号化なし
- https://example.com → 暗号化あり（ padlock マーク）
Tips:
- 今はHTTPSが標準。HTTPは非推奨になりつつある
- フォーム送信などは必ずHTTPSで
よくある間違い:
- HTTPとHTMLを混同する
- HTTPSを「別の仕組み」だと思う → HTTPの暗号化版
HTML・CSS・JavaScriptの役割
HTMLは「構造」（見出し、段落、リンクなど何があるか）。CSSは「見た目」（色、サイズ、レイアウト）。JavaScriptは「動き」（クリックで反応、入力を受け取るなど）。3つが協力して1つのWebページになります。
例:
- HTML: <h1>タイトル</h1> で見出しを定義
- CSS: h1 { color: blue; } で青くする
- JavaScript: ボタンクリックでアラート表示
Tips:
- まずHTMLで骨組み、CSSで装飾、JSで動き
- 役割を分けると保守しやすい
よくある間違い:
- HTMLで見た目を頑張ろうとする → CSSに任せる
- 全部JavaScriptで書こうとする → 構造はHTMLで
実践手順
- 1 開発者ツール（DevTools）を開く 2分
今見ているこのページの裏側（HTML）を覗いてみましょう。プロのエンジニアが毎日使うツールです。
- 画面のどこかで右クリックし、「検証」または「要素を調査」を選択
- 画面右側（または下部）に謎のコードが並んだパネルが出る
- Elements（要素）タブが選ばれていることを確認
よくある質問
- HTTPとHTTP/3って何が違うの？
- HTTP/1とかHTTP/2はTCPっていう「確実にお届けします！」って方式だったんだけど、HTTP/3はUDP（QUIC）っていう「とりあえず爆速で投げるわ！」って方式に変わってて、通信がブチブチ切れる環境でも復活が劇的に早くなってるらしいです。（知らんけど）
- なんでWebサーバーとDBサーバーって分けるの？一緒にすればよくね？
- セキュリティ的にもヤバいし、アクセス集中した時に「Webサーバーだけ3台に増やそうぜ！」みたいな小回りが効かなくなるからです。RPGでいうと前衛（Web）と後衛（DB）に分ける感じ。一緒にすると全体攻撃で一発全滅します。
- なんかCORSエラーって出て画面真っ赤になったんだけど…
- 出たー！みんなのトラウマCORSエラー！これはブラウザ先輩が「ちげーオッサンのサイト（別ドメイン）から勝手にデータ取ってくんな！」って防衛してる現象です。最初はビビるけど、APIやるなら絶対通る道なので後でじっくり戦いましょう。
- 404とか500とか、あの数字なんなの？
- ステータスコードですね。400番台（404とか）は「お前（ユーザー）が見に行く場所間違えてるぞ」っていうエラーで、500番台は「俺（サーバー）がバグって死んだわ、すまん」っていうエラーです。どっちのせいか切り分けるのに超大事！
① 解説を読んだ。次は② 次のステップへ。
Webの仕組みが分かりました。
次は環境構築。ブラウザとエディタを用意して、最初のHTMLを書いてみましょう。