このトピックスで学べること
VisualStudioCodeをインストールする方法
VisualStudioCodeとは?
ソースコードなどを編集するためのエディタと呼ばれるソフトウェアの一つ
VisualStudioCodeのインストール
- VisualStudioCodeのダウンロードページ(https://azure.microsoft.com/ja-jp/products/visual-studio-code/)から無料でダウンロードできる
- ダウンロードボタンをクリックしてMac版を選択する
- ダウンロードが終了したらFinderを開きZIPファイルをダブルクリック
- VisualStudioCodeのアイコンをアプリケーションフォルダにドラッグ&ドロップ
VisualStudioCodeの日本語化
- 「EXTENSIONS」を開き検索窓に「japanese」と入れると「Japanese Language Pack for VS Code」が出てくるのでクリックする
- 「Install」をクリックしインストールが終わると右下に「Restart Now」のボタンが出るのでクリックする
Visual Studio Code インストールします。
Visual Studio Code はソースコードなどを編集するためのエディタと呼ばれるソフトウェアの一つです。画面を共有します。
はい、「Visual Studio Code」で検索なさってください。 Visual Studio Code (https://azure.microsoft.com/ja-jp/products/visual-studio-code/)ですね。Microsoft社製の Open Source、Microsoft社製とかおかしいですか? Open Source としても開発がされているエディターということになります。無料で利用することが可能です。こちらですね、はい。ダウンロードをクリックします。すると Visual Studio Code のダウンロードする種類が選べますね。 Windows 版ですか?それとも Linux 版ですか?それとも Mac 版ですか?という風になりますので、この Mac 版をクリックします。そうすると、しばらく待つと、このダウンロードが進みます。今、こちらですね。はい、少し時間がかかりますので時を進めます。
はい、それでは、今ダウンロードが終了しました。 Finder を開きます。 Finder を開くと ZIP ファイルがありますのでダブルクリックをして展開します。そうするとアプリケーションのアイコンになりますのでこれをアプリケーションフォルダにドラッグ&ドロップですね。これでインストールが終了しました。
Visual Studio Code ダブルクリックすると、また「開けてもいいですか?」と言われるので開きます。はい、開きますとこのように Visual Studio Code が開きます、ということですね。
はい、そしてこのままでもいいんですけども、ひとまず日本語で使いたいので日本語化だけしときたいと思います。こちらの「EXTENSIONS」というこのルービックキューブみたいなとこですね、ここに行っていただいて「EXTENSIONS」のサーチで「japanese」と入れると、こちらですね「 Japanese Language Pack for VS Code」というものが出てきます。こちらの「Install」をクリックします、はい。インストールが終わりますと「Restart Now」のボタンが出てきますので、こちらをクリックします。
はい、いかがでしょう。このようにインターフェイスが全て日本語になりましたね。この方が見やすいし使いやすいかなと思います。今後さらにここに「エクステンション(追加機能)」を追加してより便利に編集できるようにしながら、ソースコードの編集については Visual Studio Code を使って講座を進めていきます。是非 Visual Studio Code 使ってみてください。
もちろん、その他にも様々な高機能なエディタがありまして「Coda」だったり「IntelliJ」だったり「Sublime Text」だったり様々なものがありますので、お好きなものを使って頂いて結構です。あくまでも私は Visual Studio Code を利用して作業を進めていきますよ、ということでお伝えいたしました。
注)紹介されたエディター:
- Coda 2:https://panic.com/jp/coda/
- 現在、Coda 2 の後継エディター「Nova」(https://nova.app/jp/)もある
- IntelliJ IDEA:https://www.jetbrains.com/ja-jp/idea/
- Sublime Text :https://www.sublimetext.com/