IT/Web基礎
1〜2時間 入門Webが動く仕組みを理解する。プログラミングの前に必ず押さえたい教養。
概要
IT/Web基礎とは、WebサイトやWebアプリがどのように動いているかを理解するための知識です。サーバ、クライアント、HTTP、ネットワークといった用語を知っておくと、その後のプログラミング学習がスムーズになります。
多くのプログラミングスクールでは、最初にこの基礎を学びます。知らなくても簡単なページは作れますが、複雑なものを作ろうとすると「なぜ動かないのか」が分からず挫折しがち。最初に押さえておくと後が楽です。
- Webページが表示される仕組み（クライアントとサーバ）
- HTTP/HTTPSとは何か
- ブラウザの役割
- HTML・CSS・JavaScriptの役割の違い
詳細解説
クライアントとサーバ
Webでは「クライアント」（あなたのパソコン・スマホ）が「サーバ」（データを置いている遠くのコンピュータ）に「このページをください」とリクエストを送り、サーバがHTMLなどのファイルを返します。ブラウザがそのHTMLを解釈して画面に表示します。
- あなたがURLを入力 → ブラウザがサーバにリクエスト → サーバがHTMLを返す → ブラウザが表示
- クライアント=依頼する側、サーバ=提供する側
- 1つのサーバが多数のクライアントに応答する
- サーバとクライアントを混同する
- 「サーバ」を特別な機械だと思う → 普通のPCでもサーバになれる
HTTPとHTTPS
HTTPはサーバとクライアントがデータをやり取りするための「約束事」（プロトコル）です。HTTPSは暗号化された安全な版。URLの先頭がhttps://なら通信が暗号化されています。
- http://example.com → 暗号化なし
- https://example.com → 暗号化あり（ padlock マーク）
- 今はHTTPSが標準。HTTPは非推奨になりつつある
- フォーム送信などは必ずHTTPSで
- HTTPとHTMLを混同する
- HTTPSを「別の仕組み」だと思う → HTTPの暗号化版
HTML・CSS・JavaScriptの役割
HTMLは「構造」（見出し、段落、リンクなど何があるか）。CSSは「見た目」（色、サイズ、レイアウト）。JavaScriptは「動き」（クリックで反応、入力を受け取るなど）。3つが協力して1つのWebページになります。
- HTML: <h1>タイトル</h1> で見出しを定義
- CSS: h1 { color: blue; } で青くする
- JavaScript: ボタンクリックでアラート表示
- まずHTMLで骨組み、CSSで装飾、JSで動き
- 役割を分けると保守しやすい
- HTMLで見た目を頑張ろうとする → CSSに任せる
- 全部JavaScriptで書こうとする → 構造はHTMLで
実践手順
- 1 開発者ツール（DevTools）を開く 2分
今見ているこのページの裏側（HTML）を覗いてみましょう。プロのエンジニアが毎日使うツールです。
- 画面のどこかで右クリックし、「検証」または「要素を調査」を選択
- 画面右側（または下部）に謎のコードが並んだパネルが出る
- Elements（要素）タブが選ばれていることを確認
キャリア・実務での位置づけ
IT/Web基礎は、Webデザイナー・フロントエンドエンジニア・バックエンドエンジニア・SREのいずれを目指す場合も共通の前提知識です。技術選定の会議で「HTTP」「CDN」「DNS」が出てきたときに置いていかれないための教養としても機能します。
業界での具体例
- ECサイト: ブラウザが商品ページHTMLを取得し、画像CDNから画像を読み込む
- SaaS: HTTPSでAPIにログインし、JSONでダッシュボードデータを取得
- メディア: HTML/CSS/JSが配信され、広告タグが非同期で読み込まれる
おすすめ学習プラン
1日目: クライアント/サーバとHTTPを理解 → 2日目: DevToolsでNetworkタブを触る → 3日目: 環境構築ステップへ進む。
前提知識・準備
プログラミング経験は不要。ブラウザ（Chrome推奨）があれば開始できます。
面接で聞かれやすいポイント
- HTTPとHTTPSの違いを説明できますか？
- クライアントとサーバの役割は？
- DNSは何を解決しますか？
完了チェックリスト
- Networkタブでリクエスト/レスポンスを確認した
- 404と500の意味を説明できる
- 次の「環境構築」ステップへ進む準備ができた
よくある質問
- 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演習がスムーズになります。
- Networkタブの404/500の意味は？
- 404はURLが存在しない、500はサーバー側エラーです。開発中は最もよく見るエラーなので、早めに覚えておくとトラブルシュートが速くなります。
① 解説を読んだ。次は② 次のステップへ。
Webの仕組みが分かりました。
次は環境構築。ブラウザとエディタを用意して、最初のHTMLを書いてみましょう。