2-2 開発環境構築の全体像と流れ

Web開発学習ロードマップ

前の記事では、
開発環境とは何か、なぜ必要なのか を整理しました。

ここからは、
実際に環境構築に入っていきますが、
その前に 必ず理解しておいてほしいこと があります。

それは、

「これから何を、どんな順番で準備していくのか」

という 全体像 です。

この全体像を知らないまま進むと、

・今どの作業をしているのか分からない
・エラーが出たときに戻れない
・用語だけが増えて混乱する

という状態になりがちです。

この記事では、
開発環境構築の流れを“地図”として整理 します。


この記事で学べること

・開発環境構築の全体の流れ
・何をインストールするのか
・それぞれの役割
・この後の記事の位置づけ


開発環境構築のゴールを確認する

まず、
2章のゴールを明確にします。

2章を終えた時点で、
次の状態になることが目標です。

・PHPファイルを作成できる
・ブラウザからアクセスできる
・PHPが実行されて結果が表示される
・エラーが出たときに確認できる

この状態を作るために、
環境構築を行います。


開発環境に必要な構成要素(再整理)

PHPの開発環境は、
次の要素で構成されています。

・Webサーバー
 → ブラウザからのアクセスを受け取る

・PHP
 → プログラムを実行する

・データベース
 → データを保存する(後の章で使用)

これらが連携して、
1つの開発環境になります。


なぜまとめてインストールするのか

初心者のうちは、

「Webサーバー」
「PHP」
「データベース」

を、
1つずつ個別に用意するのは大変です。

そのため、

・MAMP
・XAMPP

といった、
必要なものをまとめたツール を使います。

これにより、

・設定ミスが減る
・すぐに動かせる
・学習に集中できる

というメリットがあります。


開発環境構築の全体の流れ

ここで、
2章全体の流れを整理します。


ステップ① 環境構築ツールを用意する

まずは、
自分のOSに合ったツールを使います。

・Mac
 → MAMP

・Windows
 → XAMPP

これが、
開発環境の土台になります。


ステップ② サーバーを起動する

ツールをインストールしたら、

・Webサーバー
・PHP

を起動します。

この時点で、
自分のPCが簡易サーバーとして動く
状態になります。


ステップ③ PHPが動くか確認する

次に行うのが、
動作確認 です。

・PHPファイルを作成
・ブラウザからアクセス
・実行結果を確認

この確認ができて、
初めて「環境ができた」と言えます。


ステップ④ ブラウザで確認・デバッグする

環境が動いたら、

・表示結果を見る
・エラーを見る
・開発者ツールを使う

といった、
確認・調査の方法 を学びます。


この流れを飛ばしてはいけない理由

環境構築でよくある失敗は、

・インストールだけして満足する
・動作確認をしない
・エラーの見方を知らない

というケースです。

これでは、

「動いているのか、動いていないのか分からない」

状態になります。

必ず「確認」まで行う
という意識が重要です。


2章の各記事の役割

ここで、
2章の記事の役割を整理します。

・2-1
 → 開発環境の考え方

・2-2
 → 全体像と流れ(この記事)

・2-3
 → MAMP(Mac)環境構築

・2-4
 → XAMPP(Windows)環境構築

・2-6
 → PHP動作確認

・2-7
 → ブラウザ開発者ツール

この順番には、
すべて意味があります


なぜMacとWindowsで分けているのか

理由はシンプルです。

・操作方法
・画面
・設定

が、
OSによって違うからです。

自分のOSに合った記事だけを
確実に進めれば問題ありません


この章を終えた後の姿をイメージする

2章を終えた時点では、

・PHPファイルを作って
・ブラウザで開いて
・結果を確認できる

という状態になっています。

これは、
3章以降の
HTML / CSS / PHP 学習の
スタートライン です。


まとめ

開発環境構築は、

・手順をなぞる作業
ではなく
・Web開発の土台を作る作業

です。

全体像を理解したうえで進めることで、

・今どこにいるか
・何のためにやっているか

を見失わずに学習できます。


次に読むべき記事

▶ 次の記事
2-3 MAMPとは?MacでのPHP開発環境構築手順

▶ 関連記事
2-4 XAMPPとは?WindowsでのPHP開発環境構築手順

コメント