教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。
その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。
このパートでは開発を進める上で必要なエディタVisual Studio Codeを紹介します。
初心者の方へのおすすめなツールなので、ご自身で慣れているエディタを既にお使いであればこのパートは読み飛ばしても構いません。
初めてテキストエディタを使う方は是非参考にしてください。
※)今回のパートが対応するOSはmacOSです。
※)既にエディタがある方はこちらのパートを読み飛ばして構いません。
プログラミングをしていく上で必要であるテキストエディタを準備します。
テキストエディタとは、テキストファイルを作成・編集・保存するためのソフトウェアです。
本教材ではVisual Studio CodeというMicrosoftが開発したオープンソースのテキストエディタの導入方法を説明していきます。
Visual Studio Codeは通称VSCodeと呼ばれ無料で利用できます。
以下のリンクからVisual Studio Codeをダウンロードしてください。
ダウンロードが完了したらダウンロードしたファイルを展開してください。
そのあと展開したファイルをアプリケーションフォルダに移動してください。
移動させる方法色々ありますが、下記の動画ではFinderを2つ開いてドラック&ドロップで移動させています。
(Finderを2つ開くには、Finderを開いた状態でcommand + N
を押すことで2つ開くことができます。)
アプリケーションフォルダに移動できたら、Visual Studio Codeを起動してください。
下記の画面のようになっていればうまく導入ができています。
デフォルトでもプログラミングはできますが、より開発しやすくするためにカスタマイズをしていきます。
※)カスタマイズに関してはお好みで設定されて大丈夫です。
まず、command + ,
を押して設定画面を開きます。
検索ボックスにsettings.json
と打ち込んでEnter
を押してください。
Edit in settings.json
というリンクが表示されますのでそれをクリックします。
すると下のような画面になります。これはsettings.json
という設定ファイルに直接書き込みできるモードです。
次にsettings.json
ファイルに以下のコードをコピーして、すでに書いてあるコードに上書きして保存してください。command + S
で保存できます。(下記に示しているコードは、特に理解する必要はありません。)
javascript123456789101112131415161718 Copied!{
// 差分を横に並べて表示ではなく行内に表示する
"diffEditor.renderSideBySide": false,
// ファイルを保存時に自動フォーマットする
"editor.formatOnSave": true,
// 現在の行を強調表示する
"editor.renderLineHighlight": "all",
// 空白文字を表示する。
"editor.renderWhitespace": "all",
// スペース2個インデント
"editor.tabSize": 2,
// ウィンドウ幅右端で折り返す
"editor.wordWrap": "on",
// ファイル保存時に最新の行を末尾に挿入する
"files.insertFinalNewline": true,
// アイコンテーマの指定
"workbench.iconTheme": "vscode-icons"
}
上記のコードを追加したら下記の画像のように空白文字に「・・・・」と表示されていればカスタマイズがうまくできています。
今回カスタマイズした内容はVisual Studio Codeを使っていくなかでお好みに変更されても構いません。
より開発しやすくするために拡張機能を追加していきます。
追加する拡張機能は以下の3つです。
拡張機能 | 機能の概要 |
---|---|
Ruby | Visual Studio Codeに対するRuby言語とデバッグサポートを提供 |
Japanese Language Pack for Visual Studio Code | Visual Studio Codeを日本語に対応したUIを提供 |
vscode-icons | ファイルやフォルダにアイコンを追加 |
では拡張機能を追加していきます。下記の画像のように左側にあるアイコンをクリックしてください。
すると拡張機能のMARKETPLACEが表示されるので、検索バーからインストールしたい拡張機能を検索しましょう。
まずは試しにRubyと検索してみましょう。
すると下記の画像のようにRubyの拡張機能が表示されるのでインストールしてください。
これでRubyの拡張機能がインストールできました。同じやり方で他の拡張機能もインストールしてみましょう。
全てインストールできたらVisual Studio Codeを再起動してください。再起動することで拡張機能が使えるようになります。
これで今回のパートは終了です。おつかれさまでした。