ゼロからホームページ

知識ゼロからホームページを作ってかっこいいWEBデザインができるようになるまでの道のり

初心者向け!Visual Studio Codeのダウンロード方法

初心者向け!Visual Studio Codeのダウンロード方法

知識ゼロから自分でホームページを作りたい!パソコンの次に用意するものはテキストエディタというものらしい。調べてみたら、Visual Studio Codeが人気らしいから使ってみたい。

でも、ダウンロードやインストールはどうしたらいいのかと困っていませんか?

今回は、Visual Studio Codeのダウンロード方法からパソコンへのインストール、ソフトを日本語化する方法について、私と同じ初心者の方に向けて丁寧に解説します。

テキストエディタ について

文字や記号を書いたテキストを編集し、コーディングをするために使うツールがテキストエディタです。

コーディングに便利な優れた無料のテキストエディタのなかでも、Visual Studio Codeはエンジニアから初心者の方まで幅広く人気があります。

Visual Studio Codeについて

 Visual Studio Codeアイコン画像

Visual Studio Code(ビジュアル・スタジオ・コード)はMicrosoft社が開発・提供しているテキストエディタです。VSCodeとも呼ばれています。

Microsoft社製ですが、WindowsでもMacでも使用可能で人気のテキストエディタです。

Visual Studio Codeのダウンロード方法

Visual Studio Codeをダウンロードする手順は3つです

箇条書きだと簡単に見えるけど、それがうまくできないから困っているんだよ!と悩んでいる私と同じ初心者の方のために、私が使用しているWindows版について順番にゆっくり解説していきます。(Macは所持していないため)

VSCodeの公式サイトへ行こう

Visual Studio Code公式サイトトップ画像

まず、Microsoft社のVisual Studio Code公式サイトへアクセスします。

公式サイトへのリンク↓

azure.microsoft.com

公式サイトへアクセスしたら、上記画像の青い枠で囲んだ場所と同じところをクリックしてください。

VSCodeインストーラーをダウンロードしよう

Visual Studio Codeインストーラー画像

公式サイトトップ画面でさきほどクリックした場所から、上記の画面になったでしょうか?画像の青い枠で囲んだ場所と同じ部分をクリックしてください。

Visual Studio Codeダウンロード画像

パソコンのダウンロードフォルダにダウンロードされたインストーラーをダブルクリックして起動しましょう。

ダウンロードしたVSCodeの設定をしよう

Visual Studio Code規約画像

ダウンロードしたVisual Studio Codeの規約に同意します。

画像の青い枠で囲んだ「同意する」の丸の中にチェックを入れて、「次へ」ボタンをクリックしてください。

次の画面で表示されるフォルダの場所については、表示されている場所のまま特に変更せずにそのままで問題ありません。

Visual Studio Codeファイル保存場所画像

フォルダの場所は変更せずに「次へ」ボタンを押してください。

Visual Studio Codeスタート追加選択画像

Windowsのスタートメニューにショートカットを作成するかどうかについてのチェックボックスがありますが、ここも表示された画面のまま特に変更しないで問題ありません。

「次へ」ボタンを押しましょう。

Visual Studio Code追加タスク選択画像

「デスクトップ上にアイコンを作成する」など、たくさんのチェックボックスが表示されました。最初にチェックが入っているのは下から2つ分だけです。

上記の選択画面が表示されたら、今後の作業がしやすくなるように、すべての項目にチェックを入れて「次へ」ボタンを押して進みましょう。

Visual Studio Codeインストール準備完了画像

上記の画面が表示されたらインストール準備が完了です。「インストール」ボタンをクリックしてください。

インストール中のバーが表示されるので少し待ちましょう。

Visual Studio Codeセットアップウィザード完了画像

Visual Studio Codeのインストールが終わると上記の画面が表示されます。

「完了」ボタンを押しましょう。「完了」ボタンを押すとインストールの画面が閉じて、Visual Studio Codeが自動的に起動します。

以上でVisual Studio Codeのダウンロードから、インストールの設定までが完了しました。

Visual Studio Codeを日本語化しよう

Visual Studio Code起動画像

さて、ここまで順調に作業が進んできました。起動した画面を見てもうお気づきの方もいらっしゃるかと思います。「操作画面が全部英語表示だ、これは困ったぞ!」と私は頭をかかえました。

Visual Studio Codeの初期設定は英語です。英語が得意な方や、英語表記でも抵抗のない方は英語表記のまま使っていただければ問題ありません。

英語が苦手な方でも初心者の方でも大丈夫、VSCodeは日本語化できます!

Visual Studio Codeを日本語化する方法について解説します。あと少し、一緒にがんばっていきましょう。

Visual Studio Code日本語化操作画像

画面左側の縦長のバーの下の方に表示されている、青い枠で囲んだ四角いアイコン「拡張機能(Extensions)」をクリックします。

アイコンをクリックしたあとで、画面上の方に表示された「拡張機能(Extensions)」のボックスの中に半角英字で「Japanese」と入力してください。

Visual Studio Code日本語化拡張機能インストール画像

地球儀のマークの「Japanese Language Pack for Visual Studio Code」を選択すると、画面中央に大きく表示されますので、青い枠で囲んだ「install」ボタンをクリックしてください。

インストールが完了したら、画面右下に「Restart」という青いボタンが表示されますので、「Restart」のボタンを押してVisual Studio Codeを再起動してください。

追記:公式サイトの更新状況によっては「Restart」という青いボタンではなく、英語表記で「日本語に翻訳してVSCodeを再起動しますか?」という意味の言葉が出るかもしれません。英語で「再起動」を意味する表現が出たら、その場所をクリックしてください。

Visual Studio Code日本語化完了画面

Visual Studio Codeが再起動しました。上記の画面のように日本語の表記になっていたら成功です!

以上でVisual Studio Codeの日本語化が完了しました。ここまでおつかれさまでした!

まとめ:Visual Studio Codeを使ってみよう!

今回は、人気のテキストエディタVisual Studio Codeのダウンロード方法からパソコンへのインストール、ソフトを日本語化する方法を解説しました。

Visual Studio Codeはエンジニアから初心者の方まで愛用されています。

これからホームページを制作するために、HTMLやCSSJavaScriptを扱っていくときには、ぜひVisual Studio Codeを使ってみてください。

いまはまだ初心者で慣れないことばかりかもしれませんが、スキルアップしたときにもずっと使えるテキストエディタです。少しずつ慣れて使いこなしていきましょう!