実装の速さは、すでに AI の側に移りました。だからこそ人間の側に残るのは、何を作るかを決める力と、出てきたものを疑う力です。そのどちらも、土台の構造を知っていることを前提にしています。
この資料が想定していること
すべてを覚える必要はありません。必要なのは「層の名前と並び順」、そして困ったら一段下を疑うという手つきです。普段は一番上の層で作業していい。ただし詰まったとき、一段ずつ下へ降りて切り分けられること ── この能力が差になります。
言葉を持っているかどうかが、そのまま解像度になります。「なんか動きません」としか言えない状態と、「Node のプロセスが 3000 番ポートを掴んだまま終了していない」と言える状態では、AI から返ってくるものがまるで違います。
CONTENTS
本編 ── 全6部
- 第 1 部 シェル入門 ── ターミナルの中で何が起きているか 黒い画面に文字を打って Enter を押すと、そこで何が起きているのか。カーネル・シェル・プロセスという言葉を一つずつ。半世紀前に生まれた設計原則が、なぜ今も残っているのかまで。 GUI/CLI · bash · zsh · PowerShell · Unix の設計原則
- 第 2 部 開発スタック入門 ── OS から Next.js まで OS、JavaScript、Node.js、npm、React、Next.js。それぞれ別の話に見えて、実は一本の積み木として重なっています。設計する側が、その並びを知っておくための資料。 OS · JavaScript · Node.js · npm · React · Next.js · 7層構造
- 第 3 部 実例編 ── 具体例で追う開発スタック 第1部・第2部の層構造を、実際に動くコマンドと出力で追います。同じ集計をシェル1行・スクリプト・Web画面の3通りで作り、「どの層で作るか」の判断軸まで。 npm run dev の8段階 · awk · エラーの切り分け · Python か Web アプリか
- 第 4 部 Node と Next.js の内側 ── 仕組みから理解する 第2部が「何であるか」なら、こちらは「どう動いているか」。挙動の理由がわかると、AI が出したコードの誤りを見抜けるようになります。 イベントループ · async/await · semver · レンダリング4方式 · Server Components
- 第 5 部 コンテキストとトークン ── Claude Code の費用構造 なぜ長いセッションは高くなるのか。なぜ切り替えたほうが安く、なぜ切りすぎても損なのか。プロンプトキャッシュの仕組みから、実務の判断基準まで。 プロンプトキャッシュ · プレフィックス一致 · TTL · /clear と /compact の使い分け
- 第 6 部 寿命の長い3つ ── HTTP・正規表現・SQL フレームワークが何度入れ替わっても残り続ける3つ。どれも半世紀前後を生き延びていて、覚える量は驚くほど少ない。学習の投資対効果が、他とは比較になりません。 HTTP · ステータスコード · 正規表現 · SQL · N+1 · インデックス
HOW TO READ
読み方
通読を前提にしていません
- ①順番に読むなら第1部から。層の下から上へ積み上がる構成になっています。
- ②手を動かしたいなら第3部（実例編）から。実際のコマンドと出力で追えます。
- ③費用が気になるなら第5部だけで用が足ります。結論は第8章にあります。
- ④いま一番効くものを1つだけなら第6部の正規表現。今日から使えて、効果が即座に出ます。
- ⑤各章は要点の先出しから始まります。まず3〜4行だけ読めば、その章が何の話かはわかります。
OVERVIEW
まず全体像から ── DX入門（社内研修）
「そもそもWebアプリとは何か」「手元・公開・本番データの3つの場所」「内製と外注の線引き」まで、DXの全体像を一枚で見渡す研修資料です。シリーズを読む前の見取り図として、ここから始めるのが分かりやすいと思います。
社内研修資料 AI開発 DX入門 Webアプリの全体像／開発の3つの場所／データベース／git・GitHub／Claude Code・Codex／Vercel／情報セキュリティ／社労士事務所のAI活用ユースケース／用語集 研修資料を見る →RELATED
あわせて読む ── 開発基礎ガイド
実際に手を動かして開発に参加するときの、具体的な操作手順はこちらにまとめています。
生成AI・DX推進のご相談
自社の業務にどう当てはめるか、どこから着手するか。社労士としての実務目線でご一緒します。初回相談は無料です。