「プログラミングを始めたいけれど、どこにコードを書けばいいの？」
「英語のソフトは難しそうで不安……]
Web制作やプログラミングを始める際、最初にぶつかる壁が「開発環境の構築」です。
世の中にはたくさんの「コードを書くための道具（テキストエディタ）」がありますが、現在、世界中のエンジニアから圧倒的な支持を得ている、Microsoftが開発した「Visual Studio Code（通称：VSCode）」です。
この記事では、完全初心者の方に向けて、VSCodeのインストール方法から、最初に必ずやっておきたい「日本語化」の設定まで、どこよりも丁寧に解説します。
なぜ初心者にもVSCodeがおすすめなのか？5つの圧倒的な理由
世の中には多くのテキストエディタが存在しますが、なぜVSCodeが「世界シェアNo.1」であり、初心者からプロまで愛されているのでしょうか？その理由は、単に「高機能だから」だけではありません。
動作が軽く、ストレスフリー
高機能な開発環境（IDE）は動作が重くなりがちですが、VSCodeは非常に軽量に設計されています。低スペックなノートPCでもサクサク動き、文字を入力した際の「遅延（ラグ）」がほとんどありません。この「快適さ」は、学習のモチベーションを維持する上で非常に重要です。
日本語の情報が圧倒的に多い
初心者がツールを使う上で最も怖いのが「使い方がわからず詰まってしまうこと」です。VSCodeは利用者が非常に多いため、困ったことがあっても検索すればすぐに日本語の解説が見つかります。また、メニュー画面自体を日本語化できるため、英語に抵抗がある方でも安心して使い始められます。
「拡張機能」で自分専用のマシンに進化する
VSCodeは、後から「拡張機能（プラグイン）」を追加することで、スマホのアプリのように機能を増やせます。
- HTMLを自動で補完する
- コードの色を自分好みに変える
- プログラムのミスをリアルタイムで指摘してもらう、といったことが、ボタン一つで実現できます。
開発元が巨大IT企業「Microsoft」である安心感
VSCodeはMicrosoft社が開発・運営しています。常にアップデートが繰り返され、最新のプログラミング言語や技術にもいち早く対応します。「せっかく覚えたのにツールが古くなって使えなくなった」という心配がありません。
無料でありながら「プロと同じ環境」が手に入る
これほどまでに強力なツールが、完全に無料で提供されています。現場でバリバリ働いているプロのエンジニアと全く同じ道具を使って学習を始められる。これは、独学でエンジニアを目指す方にとって最大のメリットと言えます。
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のフォルダ設定から「ファイル名拡張子を表示する」設定になっているか確認しておきましょう。
VSCodeを使いこなすための心構え
ショートカットキーは少しずつ覚える
いきなり全てのショートカットを覚える必要はありません。まずは以下の3つだけを指に覚え込ませましょう。
- Ctrl + S：保存（自動保存を設定していても、癖にしておくと安心です）
- Ctrl + Z：元に戻す（「あ！消しちゃった！」という時の救世主）
- Ctrl + F：検索（特定のコードをすぐに見つけ出せます）
自分に合った「テーマ」を見つける
VSCodeは背景色や文字の色（テーマ）を自由に変えられます。
- 目に優しい「ダークモード（黒系）」
- 清潔感のある「ライトモード（白系）」
自分のテンションが上がる色設定を見つけることで、毎日の学習が少し楽しくなります。
Webサイト制作の「第一歩」を踏み出そう
環境が整ったら、試しに何か書いてみましょう！
- フォルダを作る：デスクトップなどに「my-site」という空のフォルダを作ります。
- VSCodeで開く：VSCodeの画面に、そのフォルダをドラッグ＆ドロップします。もしくは「新しいフォルダーを開く」から選択しましょう。
- ファイルを作る：左側のエクスプローラー（書類アイコン）で「新しいファイル」をクリックし、「index.html」という名前でつくります。
ここに以下のコードを打ち込んで、ファイルをブラウザで開いてみてください。あなたのパソコンで、あなたが作ったファイルが表示されるはずです。
<!DOCTYPE html>
<html>
<body>
<h1>Hello World!</h1>
</body>
</html>まとめ：自分だけの「開発室」が完成！
今回は、初心者向けエディタの「Visual Studio Code」の魅力やインストール方法について解説しました。
- VSCodeは、世界中のエンジニアが愛用する最強のツール。
- 日本語化することで、操作のハードルがぐっと下がる。
- 自動保存などの設定で、ケアレスミスを防げる。
プログラミング学習は、環境構築が一番の難関だと言われることもあります。しかし、一度このVSCodeという「最高の相棒」を整えてしまえば、あとはコードを書くことに集中するだけです。
ぜひ、あなた専用にカスタマイズしたVSCodeで、楽しい開発ライフをスタートさせてください！
