「パソコンは用意できた。でも、次は何を入れればいいの？」
いざWebアプリ開発を始めようとすると、「Node.js」「Git」「コマンドライン」といった謎の横文字が次々と現れます。
多くの初心者がここで、「なんか難しそう……」と怖気づいてしまいます。
でも、安心してください。
これらは全て、あなたが快適に開発をするための「便利な道具」であって、怖いものではありません。
今回は、これからインストールするツールたちが「開発現場でどんな役割を持っているのか」を、建築に例えて解説します。
全体像がわかれば、次回のインストール作業も迷わずに進められますよ。
1. Webアプリ開発は「建築」のようなもの
そもそも、Webアプリ開発とは何でしょうか？
それは、ソースコード（テキスト）を書いてアプリを作り、ユーザーから見える（使える）状態にすることです。
これは、「木材を加工してお店を建てる工程」によく似ています。
もちろん、ノコギリなどの基本的な道具があれば時間をかけて建物を建てることは可能です。
しかし、木材をひとつひとつ手作業で切っていては、完成までに何年もかかってしまいますよね。
そこで、プロの現場では作業を楽にするために「電動ノコギリ」や「自動組立機」などの便利ツールを使います。
プログラミングにおけるツールもこれと同じ。「楽をするため」に導入するのです。
2. 必須インストール！これが開発の「4つの神器」
それでは、具体的にインストールすべき4つのツールを紹介します。
これらはWindowsでもMacでも共通して必要な「世界標準」のセットです。
- 🛠️ 作業台 ＝ コードエディタ (VSCodeなど)
実際に木材（ソースコード）を切ったり組み立てたりする場所です。 - 🔋 電動工具のバッテリー ＝ Node.js
これがないと、最新の便利な電動工具（フレームワークなど）が動きません。動力源です。 - 🔮 セーブポイント ＝ Git (ギット)
現実ではあり得ませんが、「失敗した！昨日の状態に戻そう」ができる魔法のセーブ機能です。 - ✨ 検査場 ＝ Google Chrome
作ったお店（アプリ）を確認する場所です。
① 作業台：VSCode (Visual Studio Code)
まず最初に必要なのが、コードを書くための「作業台」です。
Windows標準の「メモ帳」でも書けますが、それは「机のない場所で膝の上で作業する」ようなもの。効率が悪すぎます。
現在、世界で最も使われている作業台が「VSCode」です。
入力ミスを赤線で教えてくれたり、コマンド入力を補助してくれたりと、初心者を助けてくれる機能が満載です。
🤖 未来の主役：Google AntiGravityについて
最近は、AIがコードを書いてくれる次世代エディタ「Google AntiGravity」も登場しています。
当ブログでは、将来的に初心者の方にはこの「AntiGravity」を推奨していく予定ですが、まずは基礎となるVSCodeで「コードを書く感覚」に慣れておきましょう。
② バッテリー：Node.js (ノード・ジェイエス)
初心者が一番「？」となるのがこれです。
本来、JavaScriptというプログラムはWebブラウザの中でしか動きません。それを「パソコン本体でも動くようにしたもの」がNode.jsです。
イメージとしては、パソコンに「Web開発専用のコンセント（動力源）」を増設するようなものです。
これを入れることで、自分のPC上でWebサーバーを動かしたり、モダンな開発ツールを使ったりできるようになります。
③ セーブ機能：Git (ギット)
プログラミングは失敗の連続です。コードを1行書き換えただけで、画面が真っ白になった……なんて日常茶飯事。
そんな時、Gitを使っていれば「昨日の動いていた状態まで時間を巻き戻す」ことができます。
「GitHub（ギットハブ）」という言葉も聞くと思いますが、Gitは「道具」、GitHubは「セーブデータの保存場所（クラウド）」です。まずは自分のPCにGitという道具を入れる必要があります。
④ 展示場：Google Chrome
「え、EdgeやSafariじゃダメなの？」と思うかもしれません。
普段使いは好きにしてOKですが、Webアプリ開発中はChromeを使ってください。
理由は単純で、Chromeには「検証ツール（デベロッパーツール）」という強力な機能があり、世界中のエンジニアがこれを基準に開発しているからです。「ChromeでバグがなければOK」というのが一つの基準になります。
3. 最初から入っているツール
最後に、自分で入れなくてもPCに最初から入っている重要なツールを紹介します。
これらは、上記の4つの道具をインストールしたり設定したりするときに使います。
| 役割 | Windowsの場合 | Macの場合 |
|---|---|---|
| 指令室 （CUIツール） | PowerShell （パワーシェル） 青や黒の画面。ここでコマンドを打ち込みます。 | Terminal （ターミナル） 白や黒の画面。Mac開発の基本となる場所です。 |
| Webブラウザ | Edge Chromeをダウンロードするために使います。 | Safari Chromeをダウンロードするために使います。 |
💡 「黒い画面」は怖くない！
これからPowerShellやターミナルといった「黒い画面」を使って、キーボードだけでPCを操作する場面が出てきます。
一見、映画のハッキングシーンのようで怖く感じるかもしれませんが、やっていることは「マウスでフォルダをダブルクリックする代わりの文字入力」のようなものです。
まとめ：次回、いよいよインストール！
今回は、これから仲間になる「4つの神器」とその役割を紹介しました。
- VSCode： 木材を切る作業台
- Node.js： 動力を生むバッテリー
- Git： 安心のセーブ機能
- Chrome： 完成品を見せる展示場
これらの道具が揃って初めて、効率的なWebアプリ開発（お店づくり）がスタートできます。
次回は、これらのツールを「インストールする手順」を、Windows/Macそれぞれ解説します。