PHP

【10分でわかる】MacにVisual Studio Codeをダウンロードとインストールする方法(画像多め)

ペンタゴン

コードを編集するのに最近よく使われるようになったVisual Studio Codeを使いたいんだけど。インストールの仕方を簡単に分かりやすく教えてほしいな〜

そのお悩み、私が解決します。

  • プログラミング技術ブログ【SUGAWAYA BLOG】管理人
  • 工場勤務からWEB業界への転職を経験
  • 現役WEBエンジニア
  • 普段からPHPやSQLを使用している

この記事では、Macに簡単にVisual Studio Codeをインストールする方法を紹介しています。ずっと前から気になっていいたVisual Studio Codeをこの機会に導入してみるのはいかがでしょうか。また、この記事では拡張機能の追加の方法も解説していますので、ぜひ参考にしてみてください!

Visual Studio Codeとは?

Visual Studio Codeとは無料で使うことのできるテキストエディタの一つです。テキストエディタとは、プログラミングのコードを編集するアプリケーションのことをいいます。

Macにも最初からインストールされている「テキストエディット」もテキストエディタの一つになります。

なぜVisual Studio Codeなのか?

結論、使いやすいからです。プログラミングは大量のコードを一生懸命書かなくてはいけません。全部書いていては大変な負担になります。

HTML参考
CSS参考

そこで、Visual Studio Codeの出番です。Visual Studio Codeを使えば予測してコードを自動で挿入してくれたり、定型構文を簡単なコマンドで挿入してくれたりと、作業が捗ります。なのでVisual Studio Codeを薦めています。

インストール方法

それでは、Visual Studio Codeをインストールしていきましょう。

まずは公式のダウンロードページにアクセスします。

VSCODEダウンロードページ

Visual Studio Codeの公式ダウンロードページに来ましたら、「Mac」をクリックしてください。

すると以下の様なページになります。そしてファイルのダウンロードが始まります。

Visual Studio Codeダウンロード開始

ダウンロードが終わりましたら、ダウンロードフォルダを見てみてください。

そこにVisual Studio CodeのZIPファイルがダウンロードされてきていると思います。

Visual Studio Codeダウンロード後

ZIPファイルをダブルクリックしてください。すると解凍されます。

Visual Studio Codeダウンロード後展開

解凍されたファイルをドラックアンドドロップでアプリケーションフォルダに追加します。

Visual Studio Codeアプリケーションに追加

アプリケーションフォルダ内でVisual Studio Codeを見つけてみるとありましたね!

それでは、Visual Studio Codeをダブルクリックして起動させてください。

すると、以下の警告が出ますが「開く」をクリックしてください。

すると以下のような画面になります。

Visual Studio Code起動

これでVisual Studio Codeのインストールは成功し使えるようになりました!

便利な拡張機能を入れる

ここからは、拡張機能を入れてVisual Studio Codeをもっと使いやすくする段階です。

日本語対応にする

Visual Studio Code1

上の画像の矢印で示している、拡張機能ボタンをクリックします。

Visual Studio Code2

検索窓で

Japanese Language Pack for Visual Studio Code

を検索してください。

すると、以下のように検索結果としてJapanese Language Pack for Visual Studio Codeが出ます。

Visual Studio Code3

検索結果で出てきたJapanese Language Pack for Visual Studio Codeをクリックしてください。

すると以下のような画面になります。

Visual Studio Code4

上の画像の矢印部分の「install」ボタンを押してください。

そうしましたら以下の画面になります。

Visual Studio Code5

矢印のところのように「uninstall」に変わったと思います。

こうなれば、インストールできた証拠ですので、一旦ここでVisual Studio Codeを終了させてください。

そして、すぐに再起動させてください。

Visual Studio Code6

これで、完全に表示が日本語になりましたので確かめてみてください。

まとめ

ここまで、Visual Studio Codeのダウンロード、インストール、拡張機能のインストールについて解説してきました。

拡張機能については、数多く存在していて、ブログでは紹介しきれないので

学習する言語によって必要になったら追加するようにしましょう。

また、Visual Studio Codeについて詳しくなりたい場合はブログやユーチューブで数多の人が紹介してくれていますので必要に応じて参考しながら学習してみてください。

体系的に学ぶ場合は書籍がおすすめです。当ブログでは以下の書籍を推奨しています。

Visual Studio Codeを学ぶためのおすすめ書籍