【5分で構築】VSCodeでプログラミングの開発環境を整える

プログラミングをする際に必要なモノは以下のもので十分です。

  1. テキストエディタ
  2. ブラウザ
  3. シェル

テキストエディタは、この世には数多く存在しており、どれを使うかによって開発効率が圧倒的に変わってきますVisual Studio Code(略してVSCode)を否定するプログラマは、きっと江戸時代からやって来たに違いありません。こんなに素晴らしいエディターは数少ないのではないでしょうか。

また、シェルに関して言えば、あとあと必ず必要になってきます。HTMLやCSS、JavaScriptだけ、というのであれば必要ありませんが、Ruby on RailsやDjangoなどのフレームワークなどを使い、規模の大きいプログラムを作る際には必ず必要になってきます。

このように、プログラミングをするときに必要なあらゆる要素を一つのアプリケーションにまとめたものを「統合開発環境」などと呼んだりします。

Visual Studio Codeでの開発の様子↓↓

Visual Studio Code
VSCodeによる開発環境

あなたがシェフだとします。普通の家庭のキッチンでも料理を作ることは可能でしょう。しかし、すべてがシステマティックに整った、プロ用の厨房なら、作業効率がぐんと上がり、さらにおいしく、さらに早く料理を提供できます。
それと同じく、VSCodeは、プロ仕様のシステマティックなテキストエディタなのです。

Visual Studio Codeのインストール

  1. VSCodeのインストールはこちらからできます
  2. OSを選択しファイルをダウンロードしたら、クリックして開きます。
    クリックするとウィンドウが表示されますが、すべて「次へ」ボタンを押せば大丈夫です。
  3. インストールボタンを押します。

シェルのセッティングをする

VSCodeをインストールしたら、シェルをセッティングします。
シェルでは、プログラミングを実行できるほか、コマンドでファイルを作ったりプログラミングに必要なモノをインストールできたりします。

コマンドを打ち込むだけでいろんなことができるので、プログラマーには必須のツールだね!

実は、VSCodeを立ち上げて「Ctrl + @」を押すだけで(Macの場合は「Control + `」)シェルが立ち上がります。

Windowsの場合はデフォルトでPower Shellというのが立ち上がり、MacはBashというシェルが立ち上がります。
シェルは、種類によって使われるコマンドが異なり、開発者の中でPower Shellを使う方はあまりいないようです。
ですので、Windowsをお使いの方は、Bashが使えるように設定すると開発効率が飛躍的に上がります。

WindowsでBashを設定

  1. マイクロソフトストアで「Ubuntu」と検索してインストール
  2. VSCodeのsettings.jsonファイルの中に“terminal.integrated.shell.windows”: “C:\\Windows\\System32\\bash.exe”,と書き込む

もう少し詳しく見てみましょう。
マイクロソフトストアで、Ubuntuと検索すると次のようなアプリが出てくると思います。

Bashアプリ
Bashを使えるようにするアプリです

20.04LTSというのが今最新のモノで、Ubuntuアプリを入れることで、Windowsの中でもBashが使えるようになります。UbuntuというのはLinuxの一種で、開発者がよく使うLinux系のコマンドを使えるようになります。

次に、VSCodeを立ち上げ、左下の歯車マークから「Settings」というのをクリックしてみてください。
そうすると、上のほうに検索フォームが出てくると思うので、「Shell」と検索してみてください。
次に「Terminal › Integrated › Automation Shell: Windows」というところの「Edit in settings.json」をクリックしてください。

Bashの設定
Edit in settings.jsonというところをクリックしてください

すると、jsonファイルが開かれ、編集できるようになるので、{}の中に、「”terminal.integrated.shell.windows”: “C:\\Windows\\System32\\bash.exe”,」と入力して保存してください。(Ctrl+Sで保存できます)

以上でWindowsでBashが使えるようになりました。

まとめ

プログラミングをする際に必要な基本的なツールは

  1. テキストエディタ
  2. ブラウザ
  3. シェル

でした。Visual Code Studioは非常に高機能なテキストエディタで、ブラウザ以外に必要なモノはすべてそろっています。
また、HTMLとCSSを開発する際に、リアルタイムでブラウザ上に反映させるような機能もついていたりします。

また、シェルとは、映画とかでプログラマーらしき人が黒い画面で何やらコマンドを打っていたりする、あの黒い画面です。
コマンドでファイルやディレクトリを作ったり、移動したり、転送したり、その他必要なモノをインストールしたりする、必須のツールです。
シェルにもいろんな種類がありますが、Linux系のコマンドを打てるシェルが最もよく、多くの開発者が使っているので、Windowsの方は、Linux系のUbuntuのアプリを入れる必要がありました。