カテゴリー
サインイン 新規登録

間違いや改善の指摘

内容の技術的な誤り・誤字脱字やミスのご報告・解説やトピックの追記/改善のご要望は教材をさらに良くしていく上でとても貴重なご意見になります。

少しでも気になった点があれば、ご遠慮なく投稿いただけると幸いです🙏

実際には誤りではなく勘違いであっても、ご報告いただけることで教材のブラッシュアップにつながります。

質問ポリシー①

教材受講者みなさんのスムーズな問題解決のために、心がけていただきたいことがあります。

教材の内容に関する質問を投稿しましょう

教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。

その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。

0-6

(付録) Visual Studio Codeの導入方法

このパートでは開発を進める上で必要なエディタVisual Studio Codeを紹介します。
初心者の方へのおすすめなツールなので、ご自身で慣れているエディタを既にお使いであればこのパートは読み飛ばしても構いません。
初めてテキストエディタを使う方は是非参考にしてください。

※)今回のパートが対応するOSはmacOSです。

※)既にエディタがある方はこちらのパートを読み飛ばして構いません。

テキストエディタ

プログラミングをしていく上で必要であるテキストエディタを準備します。

テキストエディタとは、テキストファイルを作成・編集・保存するためのソフトウェアです。

Visual Studio Code

本教材ではVisual Studio CodeというMicrosoftが開発したオープンソースのテキストエディタの導入方法を説明していきます。
Visual Studio Codeは通称VSCodeと呼ばれ無料で利用できます。

Visual Studio Codeの導入方法

以下のリンクからVisual Studio Codeをダウンロードしてください。

Visual Studio Codeのダウンロードページ

image

ダウンロードが完了したらダウンロードしたファイルを展開してください。
そのあと展開したファイルをアプリケーションフォルダに移動してください。
移動させる方法色々ありますが、下記の動画ではFinderを2つ開いてドラック&ドロップで移動させています。
(Finderを2つ開くには、Finderを開いた状態でcommand + Nを押すことで2つ開くことができます。)

image

アプリケーションフォルダに移動できたら、Visual Studio Codeを起動してください。
下記の画面のようになっていればうまく導入ができています。

image

Visual Studio Codeをカスタマイズ

デフォルトでもプログラミングはできますが、より開発しやすくするためにカスタマイズをしていきます。

※)カスタマイズに関してはお好みで設定されて大丈夫です。

まず、command + ,を押して設定画面を開きます。

image

検索ボックスにsettings.jsonと打ち込んでEnterを押してください。
Edit in settings.jsonというリンクが表示されますのでそれをクリックします。

image

すると下のような画面になります。これはsettings.jsonという設定ファイルに直接書き込みできるモードです。

image

次にsettings.jsonファイルに以下のコードをコピーして、すでに書いてあるコードに上書きして保存してください。command + Sで保存できます。(下記に示しているコードは、特に理解する必要はありません。)

javascript
123456789101112131415161718
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" }

上記のコードを追加したら下記の画像のように空白文字に「・・・・」と表示されていればカスタマイズがうまくできています。

image

今回カスタマイズした内容はVisual Studio Codeを使っていくなかでお好みに変更されても構いません。

拡張機能の追加

より開発しやすくするために拡張機能を追加していきます。
追加する拡張機能は以下の3つです。

拡張機能 機能の概要
Ruby Visual Studio Codeに対するRuby言語とデバッグサポートを提供
Japanese Language Pack for Visual Studio Code Visual Studio Codeを日本語に対応したUIを提供
vscode-icons ファイルやフォルダにアイコンを追加

では拡張機能を追加していきます。下記の画像のように左側にあるアイコンをクリックしてください。

image

すると拡張機能のMARKETPLACEが表示されるので、検索バーからインストールしたい拡張機能を検索しましょう。

image

まずは試しにRubyと検索してみましょう。

すると下記の画像のようにRubyの拡張機能が表示されるのでインストールしてください。

image

これでRubyの拡張機能がインストールできました。同じやり方で他の拡張機能もインストールしてみましょう。

全てインストールできたらVisual Studio Codeを再起動してください。再起動することで拡張機能が使えるようになります。

おわりに

これで今回のパートは終了です。おつかれさまでした。

現在のパート (0)
全パート (4)
みんなで助け合おう!
現在のパートのディスカッション 全0件