開発を進める上で必要なツール（Mac）

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

※）今回のパートはPCがMacの方を対象としています。

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

テキストエディタ

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

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

Visual Studio Code

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

Visual Studio Codeの導入方法

ではVisual Studio Codeのインストール方法を説明していきます。

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

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

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

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

Visual Studio Codeをカスタマイズ

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

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

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

開いたら、下にスクロールをしていって、Edit in settings.jsonをクリックしてください。クリックしたらsettings.jsonファイルが展開されます。

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

settings.json
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"
}

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

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

拡張機能の追加

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

Copied!
● Ruby
VSCodeに対するRuby言語とデバッグサポートを提供。
● Japanese Language Pack for Visual Studio Code
VSCodeを日本語に対応したUIを提供。
● vscode-icons
ファイルやフォルダにアイコンを追加。

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

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

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

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

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

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

ターミナル

ターミナルとは、コマンドと呼ばれる命令文を用いてMacの操作や設定を行うためのツールです。ターミナルに関しては、Macにはデフォルトで用意されているので、インストールする必要はありません。ターミナルはコマンドを入力する際に利用します。

見た目をかっこよくするためにターミナルをカスタマイズすることもできますが、Hyperというツールもおすすめです。

またVSCodeにもターミナルはあります。下記の動画のようにVSCodeの下部をクリックするとターミナルを表示できます。なのでVSCode内にあるターミナルを利用してコマンドを実行することもできます。

以上で今回のパートは終了です。

お疲れ様でした。