「プログラミングを始めたいけれど、どこにコードを書けばいいの？」
「英語のソフトは難しそうで不安……]
Web制作やプログラミングを始める際、最初にぶつかる壁が「開発環境の構築」です。
世の中にはたくさんの「コードを書くための道具（テキストエディタ）」がありますが、現在、世界中のエンジニアから圧倒的な支持を得ている、Microsoftが開発した「Visual Studio Code（通称：VSCode）」です。
この記事では、完全初心者の方に向けて、VSCodeのインストール方法から、最初に必ずやっておきたい「日本語化」の設定まで、どこよりも丁寧に解説します。
なぜ初心者にもVSCodeがおすすめなのか？
「パソコンに最初から入っている『メモ帳』じゃダメなの？」と思う方もいるかもしれません。結論から言うと、メモ帳でもコードは書けますが、VSCodeを使うと学習効率が10倍変わります。
VSCodeが選ばれる理由は、主に3つあります。
- 無料で高機能：これほど強力なツールが、誰でも無料で使えます。
- 入力サポート（予測変換）：コードを数文字打つだけで、候補を予測して表示してくれます。打ち間違い（タイポ）が激減します。
- 拡張機能が豊富：スマホアプリのように、自分好みの機能（日本語化や便利なショートカットなど）を後から追加できます。
プロの現場でも標準的に使われているツールなので、今のうちに慣れておけば、将来エンジニアとして働く際にもそのまま知識が役立ちます。
VSCodeのインストール手順（Windows/Mac共通）
それでは、さっそく準備を進めていきましょう。まずは公式サイトからソフトをダウンロードします。
ステップ１：公式サイトへアクセス
ブラウザで「VSCode」と検索するか、以下の公式サイトへアクセスします。
Visual Studio Code 公式サイト
ステップ２：インストーラーのダウンロード
トップページにある青いボタン「Download for Windows（Macの場合は Download for macOS）」をクリックしてください。自動的にダウンロードが始まります。
ステップ３：インストールを実行
ダウンロードしたファイルを開き、画面の指示に従って進めます。
- 使用許諾契約の同意：「同意する」にチェックを入れて「次へ」を押します。
- インストール先の指定：基本的にはそのままで大丈夫です。
- 追加タスクの選択：ここで「デスクトップ上にアイコンを作成する」にチェックを入れておくと、次回から起動しやすくなるのでおすすめです。
最後に、「インストール」ボタンを押し、完了したら「Visual Studio Codeを実行する」にチェックを入れたまま「完了」をクリックしましょう。
英語から日本語へ！メニューの日本語化設定
VSCodeを初めて起動すると、画面がすべて「英語」で表示されているはずです。英語が得意な方ならそのままでも良いですが、初心者のうちは日本語にしておいた方が操作ミスを防げます。
VSCodeの最大の特徴である「拡張機能」を使って、一瞬で日本語化してみましょう。
手順：Japanese Language Packの導入
- 「Extensions（拡張機能）」アイコンをクリック
画面の左端にある、「4つの四角形が並んだアイコン（一番下のアイコンのすぐ上あたり）をクリックします。 - 「Japanese」と検索
左上の検索ボックスに「Japanese」と入力してください。 - インストールを実行
地球のようなアイコンの「Japanese Language Pack for Visual Studio Code」が表示されるので、青色の「Install」ボタンをクリックします。 - VScodeを再起動
インストールが終わると、右下「Change Language and Restart（言語を変更して再起動）」というボタンが出てきます。これをクリックすると、VSCodeが一度閉じて、再び開いた時にはメニューがすべて日本語になっています。
※すでにインストールしているため、「Install」ボタンは「アンインストール」で表示されています。
これだけで、一気に使いやすくなったはずです！
知っておくと得する！初心者向けの初期設定
日本語化ができたら、さらに使いやすくするために以下の2点を確認しておきましょう。
①「自動保存」をオンにする
プログラミングでは、書いたコードを保存（Ctrl + S / Cmd + S）しないとブラウザに反映されません。初心者はこの保存を忘れがちです。
・設定方法：左下の歯車アイコンをクリック ＞「設定」を選択 ＞ 検索欄に「Auto Save」と入力 ＞「afterDelay」に変更。
これで、コードを打つたびに自動で保存されるようになります。
②ファイルの拡張子を表示する
HTMLを書くときは「index.html」、CSSを書くときは「style.css」のように、ファイル名の後ろに「.html」などの文字（拡張子）を付ける必要があります。
お使いのパソコンの設定で、拡張子が非表示になっているとトラブルの元になります。WindowsやMacのフォルダ設定から「ファイル名拡張子を表示する」設定になっているか確認しておきましょう。
Webサイト制作の「第一歩」を踏み出そう
環境が整ったら、試しに何か書いてみましょう！
- フォルダを作る：デスクトップなどに「my-site」という空のフォルダを作ります。
- VSCodeで開く：VSCodeの画面に、そのフォルダをドラッグ＆ドロップします。もしくは「新しいフォルダーを開く」から選択しましょう。
- ファイルを作る：左側のエクスプローラー（書類アイコン）で「新しいファイル」をクリックし、「index.html」という名前でつくります。
ここに以下のコードを打ち込んで、ファイルをブラウザで開いてみてください。あなたのパソコンで、あなたが作ったファイルが表示されるはずです。
<!DOCTYPE html>
<html>
<body>
<h1>Hello World!</h1>
</body>
</html>まとめ：自分だけの「開発室」が完成！
お疲れ様でした！これで、あなたのパソコンは立派な「開発環境」へと進化しました。
- VSCodeは、世界中のエンジニアが愛用する最強のツール。
- 日本語化することで、操作のハードルがぐっと下がる。
- 自動保存などの設定で、ケアレスミスを防げる。
道具が揃うと、何だかやる気が湧いてきませんか？
「環境構築」は、多くの独学者が最初につまずくポイントですが、あなたは無事にそれをクリアしました。
ここから先は、いよいよ具体的なコードの書き方を学んでいくステージです。
