第1章 思考の整理
はじめに
この章は、第1章全体の振り返りを行い、次の「開発環境構築」へ進むための橋渡しを目的としています。
MDN Curriculum では、学習の初期段階に「Getting started」を置き、その中に Environment setup を独立した学習項目として位置づけています。
つまり、Web の仕組みや構造を理解したあとに、実際に手を動かすための環境を整える流れは、学習設計として自然です。
また、MDN Learn web development は、初学者に対して、まず Web の基本的な仕組みや背景を学び、その後に環境構築へ進むことを案内しています。
これは、道具を先に入れることよりも、なぜその道具が必要なのかを理解してから準備するほうが、学習全体がつながりやすいからです。
この章では、第1章で扱った内容を順番に整理し、それぞれがどのようにつながっていたのかを確認します。
そのうえで、まだ手元に足りていないものを明確にし、次章で何を整えるべきかを見通せる状態を目指します。
この章で学ぶこと
- 第1章で学んだ内容の整理。
- 各章のつながりの再確認。
- 理解したことと、まだ実践できないことの区別。
- 次章で何を準備するのかの見通し。
- 開発環境構築がなぜ必要なのかの理解。
1. 第1章で何を学んだのか
第1章では、まず Webアプリケーションとは何か という全体像から始めました。
MDN は Web の学習導線の中で、Web の仕組みや標準を先に理解することを重視しており、How the web works では、ブラウザーがページへアクセスしたときに何が起きるかを俯瞰して説明しています。
つまり、第1章の出発点は、「Webアプリを構成する個別技術の暗記」ではなく、「そもそも何が動いているのか」を知ることでした。
次に、Webアプリケーションの基本構造として、フロントエンド、バックエンド、データベースという役割分担を整理しました。
この理解があることで、画面、処理、保存が一体ではなく、異なる責務として分けて考えられるようになります。これは、その後のクライアント・サーバモデルやアーキテクチャの理解にもつながる土台です。
そのうえで、クライアント・サーバモデル、HTTP、Fetch API、WebSocket、MCPサーバーやAI Agent の位置づけを通して、画面とサーバーがどのように結ばれるのかを学びました。
Web の仕組みは、単に HTML を見ることではなく、通信、データ取得、更新、状態管理が組み合わさって成り立っていることを確認しました。
さらに、要件定義から運用までの開発プロセスを学び、実装だけが開発ではないことを確認しました。MDN の Workflows and processes は、学習者に対してワークフロー全体を意識することを促しており、コードを書いたあとにどう確かめ、どう公開し、どう維持するかまでを含めて考える必要があると示しています。
そのあと、Webサービス設計における役割分担を整理し、企画、設計、実装、品質保証、運用、セキュリティ、AI 支援と人間監督の違いを確認しました。ここでは、肩書きを覚えることではなく、誰が何を決め、何を守るかという責務の分離が大切だと理解しました。
続いて、SPA、SSR、SSG、ISR などのアーキテクチャを学び、どこで HTML を生成するのか、いつ生成するのか、どのような課題にどの方式が向くのかを比較しました。これは、技術名を覚えるためではなく、設計判断の軸を持つための学習でした。
最後に、既存リポジトリを clone して構造を読む視点を学びました。README、依存関係、起動方法、入口ファイル、ルーティング、1機能の流れを追うことで、他人の設計や責務配置を読み解く練習を行いました。
GitHub は clone、code navigation、code search といった機能を通じて、既存コードの理解を支えています。
まとめ
- 第1章では、Webアプリの全体像、基本構造、通信、開発プロセス、役割分担、アーキテクチャ、既存コード分析を順に学びました。
- それぞれは独立した知識ではなく、Webアプリを理解し、設計し、実装し、運用するための土台としてつながっています。
- 第1章の役割は、実装に入る前に「何が、なぜ、どうつながっているか」を整理することでした。
2. 第1章の知識はどうつながっているのか
第1章の内容は、単なる章の寄せ集めではありません。最初に Webアプリケーションの全体像を学んだのは、そのあとに出てくるフロントエンド、バックエンド、データベース、HTTP、アーキテクチャといった用語を、ばらばらに理解しないためでした。MDN の学習導線も、Getting started modules を入口に置き、そのあとで Core modules へ進む構成になっています。
全体像をつかんだあとに、基本構造を学ぶことで、「画面」「処理」「保存」という責務の違いが見えてきます。そして、その責務がどのように通信で結ばれるかを理解するために、クライアント・サーバモデルや HTTP を学びました。これは、画面に見える変化の背後で何が起きているかを説明できるようにするためです。
さらに、通信の理解があることで、設計や実装の判断ができるようになります。どこでデータを取得するか、どこで処理するか、どこで HTML を作るかというアーキテクチャの話は、通信の仕組みが分からないと理解しにくいです。そこから、開発プロセスや役割分担の話へ進むと、「何を誰がどの順で進めるのか」が見えやすくなります。
最後に、既存コードの構造分析を置いたのは、理論を知っただけで終わらせないためです。既存コードを読むと、全体像、構造、通信、役割分担、アーキテクチャが、実際のリポジトリではどう配置されるのかが見えてきます。ここまで来て初めて、第1章の知識が一つの流れとしてつながります。
flowchart TB
A[Webアプリ全体像] --> B[基本構造]
B --> C[通信の仕組み]
C --> D[開発プロセス]
D --> E[役割分担]
E --> F[アーキテクチャ]
F --> G[既存コード分析]
G --> H[開発環境構築]
まとめ
- 第1章は、全体像から具体へ進む順番で構成されていました。
- 構造、通信、設計、役割、アーキテクチャ、既存コード分析は、すべて互いに接続しています。
- このつながりを理解すると、次に環境構築を学ぶ意味も見えやすくなります。
3. まだ足りないものは何か
第1章で、多くの概念は理解できました。しかし、まだ実際には手を動かしていません。つまり、理解したことと、実際に使えることのあいだには差があります。
MDN は Getting started modules の中で、Environment setup を独立したモジュールとして置き、そこではソフトウェアの導入、ファイルシステム、コマンドライン、コードエディタなどを学ぶようにしています。これは、概念理解だけでは実装に入れないからです。
実際に Web 開発を始めるには、少なくとも次のようなものが必要です。
- コードエディタ
- モダンブラウザー
- ターミナル / コマンドライン
- ランタイムや必要な実行基盤
- パッケージ管理の理解
- ファイルシステムの基本
- Git / GitHub の基礎
- ローカルで動かすための環境
MDN の Installing basic software は、コードエディタとモダンブラウザーを最初に導入すべきものとして案内しています。また、Command line crash course は、開発ではターミナルでコマンドを実行する場面が避けられないと説明しています。
つまり、第1章を終えた今の段階では、「何を作るのか」「どうつながっているのか」は分かってきましたが、「それを自分の手元で再現する土台」はまだ十分に整っていません。次章の役割は、その差を埋めることです。
まとめ
- 理解したことと、実際に動かせることは別です。
- 次章では、コードを書く、動かす、確認するための土台を整えます。
- 環境構築は単なる準備ではなく、今後の実践を可能にする前提条件です。
4. 次章「開発環境構築」では何を学ぶのか
次章では、学習と実装の土台を整えることを目的とします。MDN の Environment setup モジュールは、コンピューターの基本、ファイルシステム、Web の閲覧、コマンドライン、コードエディタといった項目を並べています。
これらは直接コードを書く技術ではありませんが、実装を支える土台です。
次章で扱う代表的な内容は、次のように整理できます。
- Next.jsに関する基本ソフトウェアの導入
- コマンドラインの基礎
- ファイルとフォルダの扱い
- コードエディタの準備
- ローカルでの実行確認
- GitHub リポジトリの取得
- 以後の教材を再現できる状態づくり
ここで重要なのは、環境構築を「一度だけやる面倒な作業」と考えないことです。実際には、環境構築を通じて、ファイルの扱い、コマンドの実行、ソフトウェア導入、ローカル確認という、開発の基礎動作を学びます。MDN でも、Command line crash course や Installing basic software は、環境構築を学習の一部として位置づけています。
まとめ
- 次章では、理論を実践へ移すための土台を整えます。
- 扱うのは、エディタ、コマンドライン、ファイル、ローカル実行、GitHub 取得などです。
5. 次章への接続
ここまでで、第1章の知識は一通りそろいました。しかし、まだ「知識として知っている」段階です。次に必要なのは、その知識を手元で確かめられる状態にすることです。
MDN Learn は、Getting started のあとに実際のモジュール学習へ進む流れを提供しており、その前提として environment setup を置いています。
環境構築が終わると、次のことができるようになります。
- サンプルコードを手元で動かす
- 既存リポジトリを clone して検証する
- エディタでコードを書いて保存する
- ターミナルで必要なコマンドを実行する
- ローカル環境で画面の変化を確認する
つまり、次章は「理論から実践へ移るための扉」です。第1章の理解があることで、単なるインストール手順ではなく、なぜその準備が必要なのかを理解しながら進められるようになります。
まとめ
- 次章は、第1章の理解を手元で再現可能にする章です。
- 環境構築が終わると、実際の演習やサンプル検証が可能になります。
- ここで初めて、「分かった」が「できる」へ近づきます。
6. 第１章のまとめ
- 第1章では、Webアプリの全体像、基本構造、通信、開発プロセス、役割分担、アーキテクチャ、既存コード分析を学びました。