開発環境の準備は、学習の「最初の壁」
プログラミングを始めようと思ったとき、最初にぶつかるのが「PC環境の準備」です。何をインストールすればいいのか、どんなPCが必要なのか。ここで迷って数日間を無駄にする人が非常に多いのが現実です。
この記事では、初心者が最短でプログラミング学習を始められるPC環境の作り方を、ステップバイステップで解説します。
PCの選び方
MacとWindows、どちらを選ぶべきか
結論から言うと、Web開発を学ぶならMacがおすすめです。理由は以下の通りです。
| 項目 | Mac | Windows |
|---|
| ターミナル | Unix系で実務環境に近い | WSL2の導入が必要 |
| 開発ツールの対応 | ほぼすべて対応 | 一部対応が遅れることがある |
| 価格 | 高め | 選択肢が広い |
| デザイン作業 | Sketch等のMac専用ツールあり | Figma等で代替可能 |
ただし、すでにWindowsを持っているなら、わざわざMacを買う必要はありません。WSL2（Windows Subsystem for Linux）を使えば、Windows上でもLinux環境を構築できます。
スペックの目安
プログラミング学習に必要なPCスペックは、それほど高くありません。
- メモリ: 8GB以上（16GBあれば快適）
- ストレージ: SSD 256GB以上
- CPU: Intel Core i5 / Apple M1以上
- 画面サイズ: 13インチ以上
中古のMacBook Air（M1チップ以降）でも十分に学習を始められます。
必要なツールのインストール
1. テキストエディタ（VS Code）
Visual Studio Code（VS Code）は、プロのエンジニアも使う無料のエディタです。プログラミング学習では、これ一択と言っても過言ではありません。
インストール後に入れておくべき拡張機能は以下の通りです。
- Prettier — コードの自動整形
- ESLint — JavaScriptのエラー検知
- Live Server — HTMLファイルをブラウザでリアルタイムプレビュー
- Japanese Language Pack — 日本語化
2. ブラウザ（Google Chrome）
開発者ツール（DevTools）が充実しているGoogle Chromeを使いましょう。HTMLやCSSの検証、JavaScriptのデバッグに欠かせません。
3. ターミナル
Macの場合は標準の「ターミナル」アプリ、Windowsの場合は「PowerShell」または「WSL2」を使います。
ターミナルは最初は怖く感じるかもしれませんが、エンジニアにとって最も重要なツールの一つです。基本的なコマンドだけでも早めに覚えましょう。
cd — ディレクトリの移動ls（Mac）/ dir（Windows） — ファイル一覧の表示mkdir — フォルダの作成
環境構築からサポートする実践型スクールで学びませんか？
4. Git
バージョン管理ツールのGitは、プログラミング学習の初期段階から使い始めることをおすすめします。
- Macの場合：Xcodeコマンドラインツールに含まれている
- Windowsの場合：Git for Windowsをインストール
GitHubアカウントも同時に作成しておきましょう。学習の記録をGitHubに残す習慣は、将来のポートフォリオ作りに直結します。
5. Node.js
JavaScriptの実行環境であるNode.jsは、フロントエンド・バックエンド問わず必要になります。
バージョン管理のために、直接インストールするのではなく、nvm（Node Version Manager）を使ってインストールすることをおすすめします。
開発環境構築の手順
すべてのツールをインストールしたら、実際にプロジェクトを作ってみましょう。
- デスクトップに
projectsフォルダを作成する
- VS Codeでそのフォルダを開く
index.htmlファイルを作成する- HTMLの基本構造を書く
- Live Serverで表示を確認する
ブラウザに「Hello, World!」が表示されたら、開発環境の構築は完了です。
よくあるトラブルと対処法
「コマンドが見つかりません」エラー
PATHが正しく設定されていない場合に発生します。ターミナルを再起動するか、PATHの設定を確認しましょう。
VS Codeが日本語にならない
Japanese Language Packをインストール後、VS Codeを再起動する必要があります。
Gitの初期設定を忘れている
Gitを使い始める前に、ユーザー名とメールアドレスの設定が必要です。これを忘れるとコミット時にエラーが出ます。
HTML/CSSで初めてのWebページを作ろう
最初の成功体験を得るための実践ガイド
何から学ぶべきか
プログラミング学習の最初の一歩を解説
プログラミングの始め方
完全未経験からプログラミングを始めるための最初の一歩
開発環境の構築は、最初は面倒に感じるかもしれません。しかし、この作業を乗り越えることが、エンジニアとしての最初のステップです。一つずつ丁寧に進めていきましょう。
ゆめさく
