7日目 Visual Studio codeのインストール＆Ruby向け拡張機能の導入②
昨日の続きです。昨日についてはこちら↓
昨日はVisual Studio Codeをインストールしましたが、今日はそのVisual Studio Codeにて、Rubyで開発を進めていくための拡張機能の導入を行います。
拡張機能とは、Visual Studio Code単体だけでは実現できないもの（例：英語から日本語に切り替えたい、コードを書くときに自動補完してほしい等）を、どこかの誰かが作った機能のことであり、Visual Studio Codeをもっと便利で使いやすくしてくれるものです。
拡張機能はVisual Studio CodeのMarketplaceと呼ばれる場所からダウンロード可能です。詳しくは以下の解説をご参考ください。
今回、導入する拡張機能は以下の通りです。なお、RubyやRailsなど、特定の拡張機能をインストールすると、自動的に他の拡張機能もインストールされることがありますが、その他の拡張機能の名前については、後述します。
・Japanese Language Pack for Visual Studio Code
⇒Visual Studio Codeの表示言語を英語から日本語への切り替えが可能。
・Ruby
⇒Rubyでコードを書くときの言語サポートを行う。
・Rails
⇒Railsを用いて開発を行うときのサポートを行う。
・Git Graph
⇒GitのコミットグラフをVisual Studio Codeで見ることができる。
なお、今回のVisual Studio Codeの拡張機能の導入する際には、インストール直後であり、日本語の表示機能（Japanese Language Pack for Visual Studio Code）も含めて未導入状態で始めるものとします。
（以下のように日本語ではなく、英語が表示されているものとします。）
表示言語を日本語にする
まず、表示言語を英語から日本語に切り替える拡張機能を導入してみます。既に日本語へと切り替えている方は、飛ばして、次の
それには、Visual Studio Code起動時の画面の左側にあるサイドバーを利用します。
サイドバーには以下のように5つのアイコンがあり、それぞれ専用のビューがあり、アイコンをクリックすることで、アイコンの選択に応じたビューへと切り替わり、Visual Studio Codeの画面左側の表示内容が変わります。
今回は、拡張機能の導入を行ないますので、以下のように□（四角）のブロックが4つある絵が表示されているアイコンをクリックします。
そうすると、以下のように「拡張機能」ビューへと表示が切り替わります。
そしたら、以下の写真のように、最上部の「EXTENSIONS」の検索入力ボックスのところに「Japanese」と入力してみてください。
すると、以下のように、「Japanese」という文字列の名前が付いた拡張機能の一覧が、検索結果として出てきます。この検索結果のうち、「Japanese Language～」（地球儀のアイコン）のところが、表示言語を日本語に切り替える拡張機能であり、今回のインストール対象です。
そこで、以下のように「Install」ボタンをクリックします。
すると、「Install」ボタンを押したところが「Installing」という表示に切り替わり、
ほどなくして、以下のように「Installing」という表示が消え、代わりに歯車のアイコンが表示されていれば、インストール完了です。
画面全体を見てみると、画面右側が「Japanese Language Pack for Visual Studio Code」という拡張機能を説明するものになっていると思います。
また、画面右下に、「In order to user VS Code in Japanese, VS Code needs to restart.」というメッセージが表示されているかと思いますが、日本語への実際の切り替えは、Visual Studio Codeを再起動後に有効になるため、「Restart」ボタンをクリックします。
「Restart」ボタンを押すと、Visual Studio Codeが再起動されて、以下の画面のように、英語から日本語へと表示言語を切り替えることができます。
拡張機能の導入
1. Rubyのインストール
プログラミング言語のRubyと同じ名前の「Ruby」という拡張機能がありますが、Rubyを使って、Visual Studio Code上でコードを書く場合は、必ず入れたほうが良いといってもいいくらいの拡張機能だと思います。
拡張機能「Ruby」のインストールは、前述の見出し「表示言語を日本語にする」と同様の手順にて行うことができます。
まず、Visual Studio Codeの画面左側サイドビューの「拡張機能」ビューへと切り替えるアイコン（□（四角）のブロックが4つある絵が表示されているもの）をクリックして、画面左側の表示を「拡張機能」ビューへと切り替えておきます。
そしたら、以下の写真中の①、②の通り、「拡張機能」ビューの上部にある検索入力バーに「Ruby」と入力し、その検索結果として出てきた中から、赤い宝石の絵が表示されているところの「インストール」ボタンを押します。
「インストール」ボタン押下後、以下の写真のように「Ruby」（赤い宝石の絵が表示されている箇所）の右下の「インストール」表示が消えて、代わりに歯車のアイコンが表示されていれば、インストールが完了します。
ちなみに、拡張機能「Ruby」をインストールすると、同時に、その下の「VS Code Ruby」も自動的にインストールされて、「インストール済」というメッセージに歯車のアイコンが表示されるようになります。
参考：Marketplace上の場所
2. Railsのインストール
今度は、「Rails」という拡張機能のインストールを行います。こちらはRuby on Rails用のスニペットやナビゲーションなどのサポートが付いており、Ruby on railsを使った開発をスムーズに進めやすくするものです。
拡張機能「Rails」のインストールは、前述の見出し「1. Ruby（＆VSCode Ruby）のインストール」と同様の手順にて行うことができます。
まず、Visual Studio Codeの画面左側サイドビューの「拡張機能」ビューへと切り替えるアイコン（□（四角）のブロックが4つある絵が表示されているもの）をクリックして、画面左側の表示を「拡張機能」ビューへと切り替えておきます。
「拡張機能」ビューへと切り替えたら、以下の写真中の①、②の通り、「拡張機能」ビューの上部にある検索入力バーに「Rails」と入力し、その検索結果として出てきた中から、「Rails」と表示されているところの「インストール」ボタンをクリックします。（※「Rails」の名前が沢山ついているものがありますが、「Rails」という名前しか書かれていないところの「インストール」ボタンです。）
「インストール」ボタン押下後、以下の写真のように「Rails」の右下の「インストール」表示が消えて、代わりに歯車のアイコンが表示されていれば、インストールが完了します。
ちなみに拡張機能「Rails」をインストールすると、自動的に以下の2つの拡張機能もインストールされます。
・Slim
・vscode-gemfile
上記2つの拡張機能が入っているどうか確認する際には、以下のように、「拡張機能ビュー」上部の、四本の横線とその右下に「×」の絵が描かれているアイコンをクリックします。
すると、以下のように現時点でのVisual Studio Codeのインストール済拡張機能の一覧が表示されますが、「Slim」と「vscode-gemfile」もインストールされていることを確認できます。
参考：Marketplace上の場所
3. Git Graphのインストール
最後に、「Git Graph」という拡張機能のインストールも行います。こちらはGitというソースコードのバージョン管理を行うシステムを利用する際に、その管理状況をわかりやすく視覚化することができます。こちらも、前述の1,2と同じ手順でインストールすることができます。
Gitについては本記事では詳しく触れませんが、別途、どこかの記事である程度Gitの詳細に触れることができればと思います。
まず、Visual Studio Codeの画面左側サイドビューの「拡張機能」ビューへと切り替えるアイコン（□（四角）のブロックが4つある絵が表示されているもの）をクリックして、画面左側の表示を「拡張機能」ビューへと切り替えておきます。
「拡張機能」ビューへと切り替えたら、以下の写真中の①、②の通り、検索入力バーに「git」と入力し、その検索結果として出てきた中から、「Git Graph」と表示されているところの「インストール」ボタンをクリックすれば、インストール完了です。
参考：Marketplace上の場所
おわりに
ここまでで拡張機能の導入は終わりです。最後に、今回の記事で参考にしたものを載せます。
また、今回導入したそれぞれの拡張機能についての詳細は、今回の記事では深く触れませんが、詳しく知りたい方は、本記事のどこかに貼ってある参考リンクをみていただくか、ネットから検索して調べていただけましたら幸いです。
今回もお疲れ様でした。
次回は、開発環境が整ってきたので、Railsで必要最低限のアプリだけを作っておいて、herokuに上げられる状態にできるようにやってみようと思います。
次のターンへと続きます。
この記事が気に入ったらサポートをしてみませんか？