- 投稿日：2026/02/15
- 更新日：2026/02/21
.png)
今回のゴール
プログラミングを書くための道具 「VS Code（ブイエス・コード）」 をパソコンにインストールして、起動するところまでやっていきます！
目次
１．はじめに ― プログラミングって何が必要なの？
２．VS Codeって何？
３．VS Codeをインストールしよう
・Windows の場合
・Mac の場合
４．VS Codeを日本語化しよう
５．動作確認：ファイルを作って保存してみよう
６．ミニチャレンジ！
７．今回のまとめ
８．次回予告
はじめに ― プログラミングって何が必要なの？
「プログラミングを始めたいけど、何を準備すればいいか分からない…」
そう思っている方、安心してください。必要なものは たった2つ だけです。
１．ブラウザ（Google Chrome や Safari など）
２．コードエディタ（プログラムを書くための専用メモ帳のようなもの）
「え、それだけ？」と思いませんでしたか？ そう、 それだけ なんです。
高いソフトを買う必要もないし、ハイスペックなパソコンも要りません。今持っているパソコンとブラウザ、そして今回インストールする無料のエディタがあれば、プロと同じ環境でプログラミングを始められます。
ちなみに、ブラウザはもうお持ちですよね（この記事をパソコンで読めている時点でOKです！）。なので、今回やることは コードエディタを入れるだけ。とてもシンプルです。
VS Codeって何？
今回インストールする「コードエディタ」の名前は Visual Studio Code。略して VS Code（ブイエス・コード） と呼ばれています。
VS Codeの特徴をざっくり紹介すると、こんな感じです。
・完全無料 で使える（ずっと0円！）
・Microsoft（マイクロソフト） が作っている、信頼できるソフト
・世界中のプログラマに一番使われているエディタ
・Windows でも Mac でも使える
・コードに色がついて見やすくなる（シンタックスハイライトという機能）
・日本語にも対応している
「プログラマが使っている道具」って聞くと、なんだかワクワクしますよね。しかもそれが無料で手に入る。すごい時代です！
💡TipsVS Codeは、プロの開発現場でもシェアNo.1のエディタです。Stack Overflow（スタックオーバーフロー）という世界最大のプログラマ向けコミュニティの調査でも、毎年トップの人気を誇っています。つまり、今回インストールするだけで 「プロと同じ道具」 が自分のパソコンに入るということです。最初から本物の道具を使えるのは、大きなアドバンテージですね！
VS Codeをインストールしよう
さっそくインストールしていきましょう！ Windows と Mac で手順が少し違うので、自分のパソコンに合った方を読んでくださいね。
▼ Windows の場合
手順① ダウンロードページを開く
ブラウザで以下のURLにアクセスしてください。
https://code.visualstudio.com/
VSCodeの公式サイトが開きます。英語のサイトですが、大丈夫です。ボタンを1つ押すだけなので安心してください。
手順② インストーラーをダウンロードする
ページの真ん中あたりに、大きな青いボタンがあります。「Download for Windows」と書かれているボタンをクリックしましょう。
クリックすると、自動的にファイルのダウンロードが始まります。ファイル名は「VSCodeUserSetup-x64-（バージョン番号）.exe」のような名前になっているはずです。
手順③ インストーラーを実行する
ダウンロードが終わったら、そのファイルをダブルクリックして開きましょう。ブラウザの下部やダウンロードフォルダに表示されているはずです。
「このアプリがデバイスに変更を加えることを許可しますか？」という画面が出たら「はい」をクリックしてください。
手順④ インストールを進める
セットアップ画面が出てきます。基本的には、以下のように進めればOKです。
１．「使用許諾契約書の同意」→ 「同意する」を選んで「次へ」
２．「インストール先の指定」→ そのまま「次へ」 （変えなくて大丈夫です！）
３．「スタートメニューフォルダーの指定」→ そのまま「次へ」
４．「追加タスクの選択」→ そのまま「次へ」 （チェックはデフォルトのままでOK）
５．「インストール準備完了」→ 「インストール」をクリック
インストールが始まるので、少し待ちましょう。
手順⑤ インストール完了！
「Visual Studio Code セットアップウィザードの完了」という画面が出たら、 「完了」 をクリックしましょう。「Visual Studio Codeを実行する」にチェックが入っていれば、自動的にVS Codeが起動します。
おめでとうございます！ Windowsへのインストールはこれで完了です！ 🎉
▼ Mac の場合
手順① ダウンロードページを開く
ブラウザで以下のURLにアクセスしてください。
https://code.visualstudio.com/
VS Codeの公式サイトが開きます。英語のサイトですが、心配いりません。
手順② インストーラーをダウンロードする
ページの真ん中あたりに、大きな青いボタンがあります。「Download for Mac」と書かれているボタンをクリックしましょう。
（もしボタンに「Mac」ではなく別のOS名が表示されていたら、ボタンの横にある小さな矢印「▼」をクリックして「Mac」を選んでください）
クリックすると、ZIPファイルのダウンロードが始まります。
手順③ アプリをインストールする
ダウンロードが終わったら、ダウンロードされたZIPファイルをダブルクリックして展開（解凍）しましょう。すると「Visual Studio Code.app」というアプリが出てきます。
この 「Visual Studio Code.app」を「アプリケーション」フォルダにドラッグ＆ドロップ してください。これだけでインストールは完了です！
「アプリケーション」フォルダの開き方がわからない場合：Finder（ファインダー）を開いて、左側のサイドバーに「アプリケーション」という項目があります。そこにドラッグ＆ドロップしましょう。
手順④ VS Codeを起動する
「アプリケーション」フォルダに入れた「Visual Studio Code」をダブルクリックして起動しましょう。
初回起動時に「インターネットからダウンロードされたアプリケーションです。開いてもよろしいですか？」と聞かれることがありますが、「開く」 をクリックすれば大丈夫です。
おめでとうございます！ Macへのインストールはこれで完了です！ 🎉
VS Codeを日本語化しよう
VS Codeを起動すると、画面が全部英語になっていると思います。「うわ、英語だ…」とびっくりするかもしれませんが、大丈夫です。すぐに日本語にできます！
手順① 拡張機能メニューを開く
VS Codeの画面の左側に、アイコンが縦に並んでいますよね。その中から、 四角が4つ並んだようなアイコン（ブロックみたいな形）をクリックしてください。上から数えて5番目くらいにあります。
これが「拡張機能（Extensions）」メニューです。拡張機能というのは、VS Codeに便利な機能を追加できるプラグイン（追加パーツ）のことです。
手順② 日本語パックを検索する
拡張機能メニューが開くと、上の方に検索バー（入力欄）があります。そこに以下のように入力しましょう。
Japanese Language Pack
検索結果に「Japanese Language Pack for Visual Studio Code」という項目が出てくるはずです。Microsoft が作っている公式の日本語パックですね。
手順③ インストールする
「Japanese Language Pack for Visual Studio Code」の横にある、青い 「Install」ボタン をクリックしましょう。
インストールが終わると、画面の右下あたりに「Change Language and Restart（言語を変更して再起動）」というボタンが表示されます。このボタンをクリックしてください。
VS Codeが再起動されて、メニューが日本語に変わっていたら成功です！
これでVS Codeが日本語になりました！ 🎉
もし右下のボタンが出なかった場合も心配しなくて大丈夫です。一度VS Codeを閉じて、もう一度開き直してみてください。それだけで日本語になっていることが多いですよ。
動作確認：ファイルを作って保存してみよう
最後に、VS Codeがちゃんと使えるか確認しておきましょう。やることはシンプルです。 「新しいファイルを作って、保存する」 それだけ！
手順① フォルダを作る
まず、パソコンのデスクトップに練習用のフォルダを作りましょう。
・Windows： デスクトップで右クリック → 「新規作成」→「フォルダー」を選んで、名前を 「programming」 にしてください
・Mac： デスクトップで右クリック（またはトラックパッドを2本指タップ）→「新規フォルダ」を選んで、名前を 「programming」 にしてください
これが、これからプログラミングのファイルを入れていくための作業フォルダになります。
手順② VS Codeでフォルダを開く
VS Codeに戻って、画面上のメニューから 「ファイル」→「フォルダーを開く」 をクリックしましょう（英語のままなら「File」→「Open Folder」です）。
さっきデスクトップに作った 「programming」 フォルダを選んで、「開く」をクリックしてください。
VS Codeの左側に「PROGRAMMING」というフォルダ名が表示されたらOKです！
Macの場合： 「このフォルダー内のファイルの作成者を信頼しますか？」という確認が出ることがあります。自分で作ったフォルダなので、「はい、作成者を信頼します」をクリックして大丈夫です。Windowsでも同じ表示が出る場合があります。
手順③ 新しいファイルを作る
VS Codeの左側パネル（「エクスプローラー」と呼ばれるエリア）に、「PROGRAMMING」というフォルダ名が表示されていますよね。
その フォルダ名のあたりにマウスを持っていくと、小さなアイコンがいくつか表示されます。その中の 「新しいファイル」アイコン（紙にプラスマークがついたような形）をクリックしてください。
ファイル名を入力できるようになるので、以下のように入力してEnterキーを押しましょう。
test.txt
画面の右側にファイルの編集エリアが開きます。
手順④ 何か書いて保存する
開いたファイルに、好きな文字を入力してみましょう。たとえば、こんな感じです。
こんにちは！VS Codeの準備ができました！
入力したら、保存しましょう。
Windows： 画面上のメニューから「ファイル」→「保存」をクリック
Mac： 画面上のメニューから「ファイル」→「保存」をクリック
保存できましたか？ ファイル名のタブに「●」マーク（丸い点）が付いていたら、まだ保存されていない合図です。保存すると「●」が消えるので、消えていればOKです！
手順⑤ 確認してみよう
デスクトップの「programming」フォルダを開いてみると、 「test.txt」 というファイルができているはずです。ダブルクリックして開いて、さっき書いた文字が表示されたら大成功です！
ここまでできたら、もう立派にスタートラインに立っています！ おめでとうございます！ 🎉
✏️ ミニチャレンジ！
ここまでの流れがうまくいった方は、もう1つだけやってみましょう。
チャレンジ① ：もう1つファイルを作ってみよう
さっきと同じ手順で、今度は 「hello.txt」 という名前のファイルを作って、好きなメッセージを書いて保存してみてください。
「ファイルを作って → 書いて → 保存する」という流れは、プログラミングで何百回とやる基本動作です。今のうちに手を慣らしておきましょう！
チャレンジ② ：ファイルを消してみよう
VS Codeの左側パネルで「test.txt」を右クリックすると、メニューが出てきます。その中の 「削除」 を選ぶと、ファイルを消すことができます。
作ったり消したり、自由にできることを確認してみてくださいね。（「hello.txt」は消しても消さなくてもOKです。次回以降は新しいファイルを作るので大丈夫です！）
💡 Tips
今やった「フォルダを開いて、ファイルを作って、保存する」という操作は、プロのプログラマも毎日やっている基本中の基本です。現場ではプロジェクトごとにフォルダを分けて管理するのが一般的です。今回「programming」というフォルダを作ったように、 ファイルをフォルダで整理する習慣 は、最初から身につけておくとあとで本当にラクになりますよ！
今回のまとめ
今回やったことを振り返ってみましょう。
プログラミングに必要な道具は「ブラウザ」と「コードエディタ」の2つだけ と知った世界中のプログラマが使っている VS Code をインストールしたVS Codeを 日本語化 して使いやすくした実際にファイルを 作成・編集・保存 して、VS Codeが動くことを確認した
ここまでできた方は、もう 「プロと同じ道具を持ったプログラマの卵」 です！
まだ1行もプログラムを書いていないのに、ちゃんと前に進んでいます。この「準備をする」こと自体がとても大事な一歩なので、ぜひ自分を褒めてあげてくださいね！
次回予告
次回 【第2回】 では、いよいよ HTMLを書いて、ブラウザに文字を表示させます！
自分が書いたコードが画面に表示される瞬間は、本当にワクワクしますよ。「プログラミングって楽しい！」を初めて体感できる回になるので、ぜひ楽しみにしていてください！
👉 次回予告：「はじめてのHTML ― ブラウザに文字を表示しよう」
