Web制作を始めるときに、まず必要になるのが 「コードを書くためのエディタ」。
その中でも圧倒的におすすめなのが Visual Studio Code（VS Code） です。
「インストール？ダウンロードと何が違うの…」
「英語表示だと頭が痛くなる…」
そんな不安を持っている初心者さんでも心配はいりません。
・Mac／Windowsへのインストール手順
・日本語化の方法
・新規ファイル作成とブラウザ表示方法
この記事の手順どおりに進めれば、コードが書ける準備が整います。
一緒に進めていきましょう！
VS Codeとは？初心者におすすめされる理由
Visual Studio Code（VS Code）は、Microsoftが開発・提供している無料のコードエディタです。
一般的な「エディタの良さ」に加えて、VS Codeだからこその強みがあります。
- 圧倒的な拡張性
VS Codeは、Web制作だけでなくPython・React・AI開発など、幅広い分野に対応できます。学習を進めるうちにやりたいことが増えても、その都度拡張機能を追加するだけで長く使えます。 - 世界最大級のコミュニティ
利用者が非常に多いため、エラーや疑問が出ても検索すれば解決方法がほぼ必ず見つかります。QiitaやYouTubeなど、日本語の情報も豊富で初心者が安心して学習できます。 - 常に最新に進化し続ける
Microsoft公式が毎月アップデートを提供しており、セキュリティも機能面も常に進化中。長く使っても時代遅れになりません。 - 学習教材との相性が抜群
YouTubeやUdemyの入門講座でも「VS Codeを使って解説」されることが多く、教材と同じ環境で学べるのは大きな安心材料です。
こうした理由から、初心者でも安心して選べるNo.1エディタとして支持されています。
エディタって何？という方はこちら👇
初心者にもわかる！テキストエディタとは？基本と役割を解説
ダウンロードとインストールの違いを整理しよう
「ダウンロードとインストールって何が違うの？」
ふとそんな疑問が出てきた方は、実は初心者の頃のわたしと同じです😂
ダウンロード
インターネット上にあるファイルを、自分のPCにコピーして持ってくる作業のことです。
たとえば、公式サイトからVS Codeをダウンロードすると、PCの「ダウンロード」フォルダに設置用ファイル（インストーラ）が保存されます。
この時点ではまだ、VS Codeは使える状態になっていません。
インストール
ダウンロードしたファイルを実行して、PCに組み込む作業のことです。
インストーラを起動すると、必要な部品が自動的にPC内の正しい場所に配置され、VS Codeがアプリとして起動できるようになります。
「インストーラ＝インストール用のファイル」のことです。
ダウンロードはVS Codeを箱のまま持ってくること。
インストールはその箱を開けて、中身を配置して使えるようにするイメージかな！
初心者の頃は、わからない単語があると一つひとつ調べて、理解してから次に進んでいました。わからないことがあると、どうしても手が止まってしまうんですよね。
次のセクションでは、実際にVS Codeを「ダウンロードしてからインストールする」方法を書いていきます。
VS Codeのインストール方法【Mac/Windows対応】
Macの場合
①公式サイトにアクセス https://code.visualstudio.com/
②Download for macOS と書かれたボタンをクリック
③ページが切り替わり、自動でダウンロードが始まります。
④ダウンロードが終わったらFinder（ファインダー）を開きましょう。
⑤ダウンロードフォルダをクリックして、ダウンロードされたZIPファイルをダブルクリックして解凍
⑥Visual Studio Codeアプリがダウンロードされたら、
⑦アプリをドラッグ&ドロップして「アプリケーション」フォルダへ移動しておきましょう
⑧アプリケーションフォルダの中に移動できたら、Visual Studio Codeアプリをダブルクリック
Macは「ドラッグ＆ドロップ」で完結するのでとてもシンプル。「難しそう」と思っていた人も、きっと拍子抜けするくらい簡単に感じるはずです。
Windowsの場合
①公式サイトにアクセス https://code.visualstudio.com/
②Download for Windows と書かれたボタンをクリック
③ページが切り替わると、「名前を付けて保存」するためのウィンドウが開くので、ダウンロードする場所を決めます。今回はダウンロードフォルダを選択して、保存ボタンをクリックしましょう
④ダウンロードされたZIPファイルをダブルクリックして解凍
⑤「使用許諾契約書の同意」するためのウィンドウが開くので、同意するを選択してから次へをクリック
⑥インストール先を指定するウィンドウが開くので、別のフォルダを選択する場合は参照ボタンをクリックしインストールする場所を選択してから、次へをクリック
⑦スタートメニューフォルダーの指定ウィンドウが開くので、ショートカットを作成する場所を指定して、次へをクリック
⑧インストール準備完了のウィンドウが開くので、デスクトップ上にアイコンを作成するを選択して、次へをクリック
⑨セットアップウィザードの完了ウィンドウが開くので、設定を確認してインストールをクリック
⑩完了をクリック
たいていの場合はインストール先の設定変更が不要なので、インストーラの案内通りに進めるだけ。PC初心者でも迷わず完了できます。
VS Codeを日本語化する方法
インストールが終わった直後のVS Codeは、初期状態ではすべて英語表示になっていますが、日本語化できるのでご安心を！しかも日本語化はたったの数ステップで完了します。
①VS Codeを起動
②左のサイドバーにある四角いアイコンのExtensions（拡張機能）をクリック
③検索欄に「Japanese Language Pack」と入力
④「Japanese Language Pack for Visual Studio Code」を選択し、Install（インストール）をクリック
⑤「Change Language and Restart」という青いボタンをクリックしてVS Codeを再起動
これで操作メニューがすべて日本語になるので、安心して使い始められます。
ここまでできれば、もうVS Code初心者の最初の壁はクリアです🙆♀️
VS Codeで最初のファイルを作ってみよう
せっかくなので、簡単なHTMLファイルを作って「エディタでコードを書く体験」をしてみましょう。
1. 新しいファイルを作成
①VS Codeを起動します
②ショートカットキー：Mac→「command（⌘）+ N」、Windows→「Ctrl + N」で新規ファイルを作成
③右下に表示されている「プレーンテキスト」をクリック
④「html」と入力してすぐ下に「HTML」が出てくるのでクリック
⑤Untitled-1というファイルが開き、右下にあった「プレーンテキスト」部分が「HTML」に変更されていると、HTMLファイルとして扱える状態です。
2. コードを書き込む
⑥以下のコードをコピーしてUntitled-1ファイル内に貼り付けましょう
<!DOCTYPE html>
<html>
<body>
<h1>Hello World!</h1>
</body>
</html>3. ファイルを保存
⑦ショートカットキー：Mac→「command（⌘）+ S」、Windows→「Ctrl + S」でファイルを保存
⑧デスクトップなど分かりやすい場所を選択し、ファイル名を index.html と入力して保存します
4. 開いてみる
⑨デスクトップに保存した index.html をダブルクリックするとブラウザが開き、画面に「Hello World!」と表示されます。
「自分でファイルを作ってコードを書き、ブラウザに表示できた！」という体験ができましたね！
まとめ｜VS Codeを準備できたら次のステップへ
この記事では、
- Mac／Windowsへのインストール手順
- 日本語化の方法
- 新規ファイル作成とブラウザ表示方法
を一通り紹介しました。
ここまでできたら、もうWeb制作を始める準備はバッチリです。
自信を持って次のステップに進んでいきましょう！
noteでも発信中！