Skip to main content

Web エンジニア基礎知識ガイド

Web アプリケーションを作るために必要な知識は、ひとつのフレームワークの中には収まりません。CSS が要素の幅をどう計算するか、ブラウザとサーバーの間で何がキャッシュされるか、データベースが同時アクセスをどう捌くか。シェルが環境変数を子プロセスへどう渡すか、遅い処理をどの型に当てはめれば速くなるか、利用者が増えたときに構成のどこから壊れるか。複数の表をまたぐクエリで件数がなぜ合わなくなるか、1 本のスレッドで通信もタイマーもどう捌いているか、同じ日付や同じ文字が数え方でなぜ変わるか。これらはどれも、特定のライブラリを覚えても身につかない層にあります。

このガイドは、その層を 42 章で体系化します。

このガイドについて​

普段の開発では、フレームワークが土台を隠してくれます。隠れている間は困りませんが、隠れていたものが表に出てくる場面があります。レイアウトが意図せず崩れたとき、キャッシュのせいで古いデータが表示されたとき、同時更新でデータが壊れたとき。原因を絞り込めるかどうかは、下の層を知っているかで決まります。

本ガイドが扱うのは、次の 2 つです。

  • 仕組みの説明 — 何がどういう順序で動いて、その結果どうなるか
  • 判断の手順 — 観測できる事実から、どこに原因があるかをどう絞り込むか

とくに 2 つ目を重視します。「Core Web Vitals の 3 指標の定義」を覚えることと、「LCP は良好で INP だけが悪い計測結果から原因を推定する」ことは別のスキルだからです。前者は本を読めば済みますが、後者は指標同士の関係を理解していないとできません。

対象読者​

  • Web 開発の実務経験が数ヶ月から数年あり、フレームワークは使えるが下の層に不安がある人
  • 分野をまたいだ基礎知識を、断片ではなく体系として整理したい人
  • 障害対応やレビューで「なぜそうなるか」を説明する側に回りたい人

**各章の冒頭に、先に読んでおくと理解しやすい章を前提知識として挙げてあります。**そこに挙げた章を押さえていれば、どの章から入ってもかまいません。

前提知識​

必須度知識補足
必須HTML と CSS で画面を作った経験文法の暗記は要りません
必須何らかの言語でプログラムを書いた経験コード例は TypeScript ですが、概念は言語を問いません
推奨Web アプリケーションの開発または運用の経験実務での失敗を思い出せると理解が早くなります

SQL とシェルコマンドは、その章の中で必要な範囲を説明します。SQL の読み書きそのものは第 12 部が 2 章を使って扱います。

章立て​

全 42 章を 14 の部に分けています。

第 1 部 ブラウザと CSS​

章扱うこと
01 ボックスモデルwidth が何を指すか。box-sizing で変わる計算、マージンの相殺、背景が描かれる範囲
02 セレクタとカスケード結合子の違い、疑似クラスと疑似要素、詳細度の計算、どのスタイルが最終的に勝つか

第 2 部 UI とレンダリング​

章扱うこと
03 宣言的 UI と命令的 UI状態から UI を導く書き方と、DOM を直接操作する書き方の違い
04 レンダリングパターンCSR と SSR と SSG と ISR。どこで HTML を作るかの選択と、その代償
05 楽観的更新レスポンスを待たずに UI を進める手法。失敗時のロールバックと、使ってはいけない場面

第 3 部 パフォーマンス​

章扱うこと
06 Core Web VitalsLCP と INP と CLS の定義。指標の組合せから原因を絞り込む手順
07 HTTP キャッシュと CDNCache-Control の各ディレクティブ。リソースの性質からキャッシュ設計を決める手順

第 4 部 コンピュータサイエンスの基礎​

章扱うこと
08 計算量O 記法の読み方。時間計算量と空間計算量、代表的なオーダーの感覚
09 二分探索ソート済み配列を半分ずつ削るアルゴリズム。実装の落とし穴と適用条件
10 データ構造の選び方配列、連結リスト、スタック、キュー、ハッシュマップ、木。操作ごとの得手不得手
11 ビット演算論理積とシフトでフラグを扱う。マスクの作り方と、実際の使いどころ
12 デザインパターンStrategy と Singleton と Observer と Abstract Factory。名前で設計を共有する

第 5 部 ネットワーク​

章扱うこと
13 TCP/IP階層モデル、IP と TCP と UDP の役割分担、ポート番号の決まり方
14 DNS名前解決の流れ、ゾーンと委任、TTL とキャッシュ、いわゆる浸透の正体
15 HTTPリクエストとレスポンスの構造、標準メソッド、安全性と冪等性、ステータスコード

第 6 部 セキュリティ​

章扱うこと
16 認証と認可誰であるかの確認と、何を許すかの判断。401 と 403 を分けるもの
17 Web アプリの主要な攻撃と対策XSS、CSRF、SQL インジェクションなど。攻撃の成立条件から対策を導く

第 7 部 データベース​

章扱うこと
18 トランザクションACID の 4 つの性質。コミットとロールバックが何をどこまで取り消すか
19 ロックと分離レベル共有ロックと排他ロック、4 つの分離レベル、楽観ロックと悲観ロック、デッドロック
20 インデックス検索が速くなる仕組みと、その代わりに払うコスト。複合インデックスのカラム順序

第 8 部 実務の作法​

章扱うこと
21 シェルの基本標準入出力、パイプ、リダイレクト。コマンドをつなぐという発想
22 シェルスクリプトと環境変数変数と環境変数の違い、export と子プロセスへの継承、実行方法の使い分け
23 エラーハンドリング正常系と準正常系と異常系の区別。どこで捕まえ、誰に何を伝えるか
24 リトライと冪等性再送してよい失敗の見分け方。バックオフとジッタ、冪等キーが保証すること

第 9 部 信頼の境界​

ブラウザが持つ境界は 1 つではありません。オリジンとクッキーのスコープは一致せず、証明書が保証する範囲もまた別です。この不一致から事故が生まれます。

章扱うこと
25 オリジンと CORSオリジンの 3 つ組。同一オリジンポリシーが遮るのは読み取りで、送信は遮らない
26 クッキー属性とスコープ。Domain がサブドメインへ広がること、SameSite の判定単位
27 TLS と証明書証明書が担うのは同一性の保証。チェーンの検証と、終端の位置が変えるもの

第 10 部 アルゴリズムの型​

**第 4 部の続きです。**あちらが計算量とデータ構造という土台を扱ったのに対し、ここでは「遅いコードを見たときに、どの型へ書き換えるか」を扱います。分野を横断する道具ですが、第 4 部の計算量とデータ構造は前提にします。

章扱うこと
28 再帰と分割統治基底ケースと再帰ステップ。再帰木で手数を数える。マージソートとクイックソートの違い
29 グラフと探索隣接リスト、幅優先と深さ優先の使い分け、依存関係の順序づけと循環の検出
30 動的計画法部分問題の重なり。メモ化と表埋め、状態と遷移の設計
31 配列を走査する型two pointer、スライディングウィンドウ、累積和、単調スタック

第 11 部 システム設計​

ここまでの部が個々の技術の仕組みを扱ったのに対し、この部はそれらをどう組み合わせるかを扱います。負荷が増えたときに何台をどう並べ、どこが壊れたら何が止まるかを決める話です。答えが 1 つに決まらない領域なので、選んだ理由を言えることが到達点になります。

**この部は、他の部で扱った内容を前提にします。**どれを先に読むかは各章の冒頭に挙げてあります。

章扱うこと
32 規模の見積もり利用者数から秒あたりのリクエスト数とデータ量を出す。1 台で足りると言い切れる条件
33 スケールの方向垂直と水平、状態を外へ出す手順、ロードバランサーの配り方、キャッシュとキューへの逃がし方
34 可用性と冗長化単一障害点の見つけ方。可用性の掛け算、待機系の型、切り替え時間、縮退運転
35 データの分散レプリケーションとシャーディング。書いた直後に読めない理由、分割キーの偏り、CAP の読み方
36 構成図とトレードオフ箱と線が表すもの、描かないものの選び方、同じ要件に複数の正解があること

第 12 部 SQL の読み書き​

第 7 部の続きです。あちらがトランザクションとインデックスというデータベースの仕組みを扱ったのに対し、ここではクエリそのものの読み書きを扱います。件数が合わない、金額が 2 倍になる、NULL で行が消える。どれもエラーにならない種類の失敗です。

章扱うこと
37 結合と集計SELECT の評価順序、内部結合と外部結合を行の増減で捉える、GROUP BY の粒度、NULL の三値論理
38 サブクエリとウィンドウ関数サブクエリを置ける 3 つの位置、EXISTS、CTE、行を畳まずに集計する道具と順位付け

第 13 部 並行処理​

「同時に動いている」の中身を扱います。1 本のスレッドの上で待ち時間を捌く仕組みと、本当に別々に動かすときの分かれ目です。第 3 部の応答性と第 7 部の競合は、どちらもこの層から説明できます。

章扱うこと
39 イベントループタスクとマイクロタスクの順序、await の続きが動く位置、長いタスクが描画と操作を止める仕組み
40 プロセスとスレッド何を分けて何を共有するか、環境変数のコピーが一方向な理由、共有メモリでの競合、シグナルによる終了

第 14 部 値の表現​

同じ値の書き表し方が複数あるとき、どこで食い違うかを扱います。表し方の違いは目に見えないので、多くの場合「数が合わない」「並びが違う」が唯一の手がかりになります。

章扱うこと
41 日時とタイムゾーン瞬間と地方時と期間の区別、オフセットとタイムゾーンの違い、日付の境界、カレンダー計算の落とし穴
42 文字コード文字集合と符号化方式、4 通りの数え方、正規化、照合順序、バイトで効く上限

各章の構成​

すべての章を同じ形で構成します。

節書くこと全章にあるか
この章で学ぶことその章を読み終えたときにできるようになることあり
前提知識先に読んでおくと理解しやすい章あり
本文仕組みの説明と判断の手順。図と表とコード例を使いますあり
この章で扱わないこと既存ガイドが深く扱っている範囲と、その参照先該当する章のみ
記述で答えるときの骨子文章で説明を求められたときの答案の組み立て方認証と認可・攻撃と対策・エラーハンドリング・構成図とトレードオフの 4 章のみ
よくある誤解その分野で実際につまずかれている点と、正しい理解あり
確認問題理解を確かめる設問。解答と解説を折りたたみで付けますあり
まとめその章の要点あり
関連リファレンス深掘り先の既存ガイドと、一次ソースへのリンクあり
次に読む次の章と、関連する他の部の章への導線あり

既存ガイドとの関係​

このサイトには、技術スタックごとの詳しいガイドがすでにあります。本ガイドはそれらと競合せず、土台の説明を引き受けて、深掘りは各ガイドへ送ります。

たとえばトランザクションの章では ACID の意味とロールバックの射程を扱い、Laravel での DB::transaction() の書き方はバックエンドのガイドへ送ります。デザインパターンの章では 4 つの代表パターンの語彙をそろえ、TypeScript でそのパターンが要るかどうかの判定はデザインパターンのガイドへ送ります。

どの章がどこへ送るかは、各章の「この章で扱わないこと」に書きます。

読み方​

頭から順に読む必要はありません。**先に読んでおくべき章がある場合は、各章の冒頭に前提知識として挙げてあります。**次のような選び方ができます。

  • 苦手分野から埋める — 章立ての表を見て、説明できない項目がある章から読む
  • 困っている問題から入る — レイアウトが崩れるなら第 1 部、表示が遅いなら第 3 部、データがおかしいなら第 7 部。処理が終わらないなら第 10 部、利用者が増えて捌けないなら第 11 部、クエリの結果が合わないなら第 12 部。画面が固まるなら第 13 部、日付や文字が思ったとおりに扱われないなら第 14 部
  • 通しで読む — 第 1 部から第 9 部までは、フロントエンドからバックエンド、その下の層へと降りていきます。**第 10 部から第 14 部は、他の部で扱った内容を使います。**各章が前提に挙げる章を先に読むと内容がつながります