Web開発を始めようとすると、
「まず何をインストールすればいいのか分からない」
という壁にぶつかる人が非常に多くいます。
・エディタは何を使えばいいのか
・サーバーは必要なのか
・WindowsとMacで違いはあるのか
・最初からDockerを使うべきか
ツール選びで迷ってしまい、
本来学ぶべきHTMLやPHPに進めないのは、非常にもったいない状態です。
この記事では、
初心者がWeb開発を始めるために最低限必要なツールと、その選び方を分かりやすく解説します。
ここで紹介する構成をそのまま使えば、安心して次の環境構築に進めます。
この記事で学べること
・Web開発に必要なツールの全体像
・最低限そろえるべきツール
・初心者におすすめの選択肢
・ツール選びで失敗しない考え方
Web開発に必要なツールの全体像
まず、Web開発に必要なツールを大きく分けると、次の4つになります。
・コードを書くためのツール
・動作確認をするための環境
・ブラウザ
・補助ツール（管理・確認用）
すべてを一度に完璧にそろえる必要はありません。
今の学習段階に必要なものだけを用意することが大切です。
コードを書くためのツール（エディタ）
Web開発では、
HTML・CSS・JavaScript・PHPなどのコードを書くために
テキストエディタを使います。
エディタに求められる役割
・コードを見やすく表示する
・入力を補助してくれる
・エラーに気づきやすくする
メモ帳のようなツールでも不可能ではありませんが、
学習効率が大きく下がります。
初心者におすすめのエディタ
VSCode（Visual Studio Code）
・無料
・Windows / Mac 両対応
・拡張機能が豊富
・初心者〜上級者まで幅広く使われている
迷ったら、
まずはVSCodeを選んでおけば問題ありません。
PhpStorm（中級者向け）
・有料
・PHPに特化した高機能エディタ
・補完や解析が非常に強力
本格的にPHPを使うようになったら、
検討する価値があります。
Webサーバー環境（ローカル開発環境）
HTMLだけであれば、
ブラウザで直接ファイルを開くだけでも学習できます。
しかし、
PHPを使うためには
Webサーバー環境が必要になります。
なぜローカル環境が必要なのか
・PHPはサーバー側で実行される
・ブラウザだけでは動かない
・本番環境と同じ動作を再現するため
そのため、
自分のパソコンに
「簡易的なサーバー環境」を用意します。
初心者向けの選択肢
MAMP（主にMac）
・インストールが簡単
・Apache / PHP / MySQL が一括で入る
・初心者でも扱いやすい
XAMPP（主にWindows）
・Windows利用者に定番
・必要なソフトがまとめて入る
・学習用途に十分
このどちらかを使えば、
すぐにPHPの学習を始められます。
ブラウザ（動作確認用）
Web開発では、
**ブラウザは「確認ツール」**として使います。
おすすめは次の2つです。
・Google Chrome
・Microsoft Edge
理由は、
開発者ツールが非常に使いやすいからです。
開発者ツールの重要性
ブラウザの開発者ツールを使うと、
・HTML構造の確認
・CSSの適用状況
・JavaScriptエラー
・通信内容（HTTP）
を確認できます。
これは、
実務でも必須のスキルになります。
データベース（後半で使用）
学習の初期段階では必須ではありませんが、
後半で MySQL を使います。
MAMP / XAMPP には、
最初からMySQLが含まれているため、
別途インストールする必要はありません。
補助ツール（最低限）
学習をスムーズにするために、
次のような補助ツールもあります。
・ファイル管理ツール
・ターミナル（コマンド操作）
・スクリーンショットツール
最初は、
OS標準のものを使えば問題ありません。
Dockerは最初から必要か？
最近は、
Dockerを使った開発環境もよく見かけます。
しかし、
初心者が最初から使う必要はありません。
理由
・仕組みの理解が必要
・エラーの切り分けが難しい
・学習負荷が高い
このサイトでは、
基礎を一通り学んだ後に
選択肢の一つとしてDockerを紹介します。
ツール選びで大切な考え方
ツール選びで最も重要なのは、
学習が止まらないことです。
・設定が簡単
・情報が多い
・エラー例が検索で見つかる
この条件を満たすものを選ぶのが正解です。
このサイトでの推奨構成（まとめ）
このサイトでは、
次の構成を前提に解説を進めます。
・エディタ：VSCode
・ローカル環境：MAMP または XAMPP
・ブラウザ：Google Chrome
この構成であれば、
記事を見ながらそのまま学習できます。
まとめ
Web開発を始めるために必要なツールは、
思っているほど多くありません。
・コードを書くためのエディタ
・PHPが動くローカル環境
・確認用のブラウザ
まずは、
シンプルな構成で学習を始めることが大切です。
次の記事では、
実際にエディタをインストールし、基本設定を行う方法を解説します。
次に読むべき記事
▶ 次の記事：
2-2 VSCode / PhpStormの基本設定とおすすめ拡張
▶ 関連記事：
1-4 ドメイン・DNS・SSLの役割を初心者向けに説明
コメント