これからプログラミングを始めるにあたって、一つだけ絶対に用意してほしい道具があります。
それが「コードエディタ」です。
料理人が自分専用の包丁を持つのと同じように、エンジニアも自分専用のエディタを持ちます。
今回は、世界中のエンジニアが愛用している無料のエディタ、「Visual Studio Code（VS Code）」をあなたのパソコンに入れましょう！
1. VS Codeって何？
Microsoft社が開発した、高機能なプログラム記述ソフトです。
- 無料： WindowsでもMacでも無料で使えます。
- 軽い： 動作がサクサク軽快です。
- 拡張機能： スマホのアプリのように、後から便利な機能を追加できます。
2. インストール手順
まずは本体をダウンロードしましょう。
- VS Codeの公式サイトにアクセスします。
- 真ん中にある青いボタン「Download for Windows（またはMac）」をクリックします。
- ダウンロードされたファイルを開き、画面の指示に従って「次へ」「完了」と進んでください。
（設定は全部そのままでOKです！）
3. 最初にやるべき「日本語化」
インストールしたばかりのVS Codeは英語表記です。
これだと少し怖いので、拡張機能を使って日本語にしましょう。
- VS Codeを開きます。
- 左側のアイコンメニューの一番下、四角形が崩れたようなマーク（Extensions）をクリックします。
- 検索バーに「Japanese」と入力します。
- 地球儀のアイコンの「Japanese Language Pack for Visual Studio Code」が出てくるので、「Install」を押します。
- 右下に「Restart（再起動）」というボタンが出るので、それをクリックします。
再起動してメニューが日本語になっていれば成功です！
4. これだけは入れておけ！「Live Server」
Webサイトを作る際、コードを保存するたびにブラウザの更新ボタンを押すのは面倒ですよね。
「Live Server（ライブサーバー）」という機能を入れると、コードを保存した瞬間にブラウザが自動で更新されるようになります。
導入手順
- さっきと同じ「拡張機能（四角いマーク）」をクリック。
- 検索バーに「Live Server」と入力。
- 紫色の電波塔のようなアイコンのものを「インストール」。
使い方
HTMLファイルを開いた状態で、画面右下の「Go Live」という文字をクリックすると、勝手にブラウザが立ち上がります。
今後の学習は基本的にこの機能を使って行います。
5. 便利な初期設定（自動保存）
「せっかく書いたのに保存し忘れて消えた！」という事故を防ぐために、自動保存をONにしておきましょう。
- 左上の「ファイル」メニューをクリック。
- 「自動保存」をクリックしてチェックを入れる。
これで、文字を打って手を止めた瞬間に勝手に保存してくれるようになります。
6. 最初の儀式「Hello World」
最後に、ちゃんと動くかテストしてみましょう。
- デスクトップなどに「my_program」という空のフォルダを作ります。
- VS Codeを開き、「ファイル」→「フォルダーを開く」で、さっきのフォルダを選びます。
- 左側のメニューにフォルダ名が出るので、その横の「新しいファイル（紙に＋のマーク）」を押します。
- 名前に「index.html」と入力してEnter。
- 真っ白な画面に、半角で「!」（ビックリマーク）を一文字だけ打って、Tabキーを押してください。
<!DOCTYPE html>
<html lang="en">
<head> ... </head>
<body>
</body>
</html>一瞬でHTMLの雛形が入力されたはずです！
これがVS Codeのパワー「Emmet（エメット）」機能です。
あとは <body> と </body> の間に <h1>Hello World</h1> と書いて、右下の「Go Live」を押してみましょう。
ブラウザに文字が表示されれば、準備完了です！
まとめ
- プログラミングには VS Code を使う。
- まずは 「日本語化」 と 「Live Server」 を入れる。
- 「自動保存」 をONにしておくと安心。
これで、エンジニアと同じ開発環境が整いました。
道具が揃ったところで、いよいよ次回からプログラミングの世界へ飛び込みましょう！