前のパートに戻る 完了して次のパートへ  

  0-2 開発を進める上で必要なツール(Mac)

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

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

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

Windowsの方は「0-4 Cloud9を利用する手順」でCloud9の導入方法を記載しておりますのでこちらを参考にしてください。

Cloud9を利用する手順

テキストエディタ


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

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

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で保存できます。(下記に示しているコードは、特に理解する必要はありません。)

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



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


拡張機能の追加


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

● 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内にあるターミナルを利用してコマンドを実行することもできます。

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

お疲れ様でした。

議論

0 質問

このコースの評価は?