更新日:
【Rails】 Macにテキストエディタ（VSCode）の準備をしよう
この記事では、プログラムを記述するのに必要な「テキストエディタ」の導入を行います。
この記事を読むことで、以下のことが学べます。
- テキストエディタとは
- テキストエディタが開発に必要な理由
- １番人気のテキストエディタである「VSCode」の導入・設定方法
実際に手を動かして、開発に必要なテキストエディタを準備していきましょう！
※この記事は、macOSをご利用の方向けになります。VSCodeは無料です。
テキストエディタとは何か学ぼう
テキストエディタの特徴や役割について把握しておきましょう。
エディタとは
エディタとは、データの編集を行うためのアプリケーションのことです。
データのファイルを開く・編集・保存することができます。
テキストファイルを編集する場合は「テキストエディタ」、画像ファイルを編集する場合は「グラフィックエディタ」のようにデータの種類や用途によって呼ばれ方が変わります。
テキストエディタとは
テキストエディタとは、文字や記号だけで構成されたテキストファイルの編集を行うためのアプリケーションです。
プログラミング言語も編集できる
プログラミングでは、プログラミング言語（コンピュータに指示を伝えるための言語）を使います。
プログラミング言語は、文字と記号だけで構成されるテキストデータなので「テキストエディタ」で編集を行うことができます。
プログラミング用のテキストエディタの必要性
Macには簡単な文章を作成できる「テキストエディット」というアプリケーションが標準で搭載されています。
こちらもテキストエディタになります。
このような標準のテキストエディタを使ってプログラミングすることも可能ですが、文章作成のための必要最低限の機能しか搭載されていないためプログラミングには不向きです。
そのため「プログラミング用のテキストエディタ」を用意する必要があります。
プログラミング用のテキストエディタには、シンタックスハイライト（特定のコードに色を付ける機能）や入力補完（入力内容を予測して候補を表示する機能）があります。
このような便利な機能を活用することで、正確かつ効率的に開発を進めることができます。
- テキストエディタは、文字・記号で構成されたファイルの編集ができる
- プログラミング言語も文字・記号なので、テキストエディタで編集ができる
- プログラミング言語とは、コンピュータに指示を伝えるための言語のこと
VSCodeをインストールしよう
初心者におすすめの「VSCode」というテキストエディタを導入します。
VSCode（visual studio code）とは
VSCodeとは、Microsoft社が開発・提供しているソースコードエディタ（プログラミング用のテキストエディタ）です。
以下の理由により、プログラマから高い人気を誇るエディタです。
- 動作が軽い
- 豊富な拡張機能でカスタマイズ性が高い
- ドキュメントがしっかりしている
初期状態でも機能が充実しているので、ベテランの方だけではなく初心者でも扱いやすいエディタです。
VSCodeのインストール手順
MacにVisual Studio Code（VSCode）をインストールする手順は、以下の通りです。
ここからは、実際に手を動かしながらインストールしていきます。
1.公式サイトからVSCodeをダウンロードする
まずは「Visual Studio Codeの公式サイト」へアクセスし、以下の画面で「Download Mac Universal」をクリックします。
以下の画面に切り替わり、自動でダウンロードが開始されます。
ダウンロードしたファイルは左下に表示されるので、ダブルクリックして解凍します。
解凍したファイルは「Visual Studio Code.app」という名前で、ダウンロードフォルダにあるよ！
2.解凍したファイルをアプリケーションに移動する
次にFinderのダウンロードフォルダを開いて、「Visual Studio Code.app」をサイドメニューの「アプリケーション」へドラッグ＆ドロップします。
以下のように「アプリケーション」に「Visual Studio Code.app」があれば、ドラッグ＆ドロップができています。
ドラッグ＆ドロップとは、対象にカーソルを合わせてクリックしながら画面上を移動させて、希望の位置で離す操作のことです。
※以下の画面が表示された場合は「認証」をクリックし、管理者のログイン情報を入力してください。
3.VSCodeを起動する
Finderのアプリケーションを開いて、「Visual Studio Code.app」をダブルクリックします。
以下のような警告文が表示される場合がありますが、「開く」をクリックします。
以下の初期画面が表示されたら、VSCodeの起動は完了です！
次回からのアクセスを素早くできるように「Dock」に追加しよう
4.VSCodeをDockに追加する
以下のように、VSCodeを「右クリック > オプション > Dockに追加」します。
5.不要なファイルを削除する
ダウンロードフォルダにある「VSCode-darwin-universal.zip」は、今後必要ないので削除しておきましょう。
右クリックで「ゴミ箱に入れる」か、「command＋ deleteキー」で削除できます。
これで「VSCodeのインストール」は完了です。
次は「VSCodeの基本的な使い方」について学習していきましょう！
VSCodeの基本的な使い方を確認しよう
VSCodeの画面構成や基本操作について把握しておきましょう。
VSCodeの画面構成
VSCodeの基本的な画面構成は、以下のように４つの要素で構成されています。
各要素の役割は、以下の表の通りです。
| 名称 | 説明 |
|---|---|
| 1. アクティビティバー | 主要機能がアイコンで表示される（初期状態では7つ） |
| 2. サイドバー | アクティビティバーで選択した内容が表示される |
| 3. エディタ | ファイルを編集するメインエリア |
| 4. ステータスバー | プロジェクトやファイルの情報が表示される |
ほかにもデバッグ情報やターミナルを開く「パネル」という画面があります。
VSCodeの基本ショートカットキー
VSCodeの基本的な操作は、ショートカットキーで行えます。
| 操作 | ショートカットキー |
|---|---|
| 新しくファイルを作成する | command + N |
| ファイルを保存する | command + S |
| ファイルを閉じる | command + W |
| ファイルを開く | command + O |
| ファイルを検索する | command + P |
例）以下のようにアクティビティバーの１番上にある「EXPLORER」をクリックして、command + Nを実行すると、新しいファイルを作成することができます。
次は、開発効率を格段に上げてくれる「拡張機能の導入」を行います！
VSCodeに便利な拡張機能を導入しよう
VSCodeは初期状態でも機能が充実していますが、拡張機能を導入することでより効率的に作業が行えます。
拡張機能の追加方法
拡張機能の追加や削除などの管理は、以下の画面のアクティビティバーの上から５番目にある「EXTENSIONS」で行います。
拡張機能の追加は、とても簡単です。
以下のように「EXTENSIONS」の検索窓に追加したい拡張機能の名前を入力して、検索結果から「Install」ボタンをクリックするだけです。
それでは実際に拡張機能を追加していきましょう。
VSCodeを日本語化しよう
動画のように「EXTENSIONS」の検索窓に「Japanese Language Pack for Visual Studio Code」を入力（もしくはコピー&ペースト）して、検索結果の表示から「Install」ボタンをクリックします。
インストール後に右下へ表示される「Restart」をクリックして再起動させます。
再起動後、以下のように日本語でメニューなどが表示されます。
基本的な拡張機能
先程の日本語化と同じ手順で、以下の拡張機能を追加しておきましょう。
| 追加する拡張機能 | 説明 |
|---|---|
| Trailing Spaces | 余計な半角スペースを強調表示 |
| EvilInspector | 全角スペースのみを強調表示 |
| Auto Rename Tag | 開始タグの修正時、自動で終了タグを変更 |
| Code Spell Checker | 英単語のスペルチェック |
| Ruby | Ruby言語のサポート、「VSCode Ruby」が自動でインストールされる（ruby・erbファイルを強調表示） |
今回紹介した拡張機能は基本的なものです。
VSCodeの操作に慣れてきたら、自分の作業に適した拡張機能を必要に応じて追加していきましょう。
これで「拡張機能の導入」は完了です。
次は「VSCodeの設定」をしていきましょう！
VSCodeの設定をしよう
VSCodeの設定画面は、以下の動画のようにアクティビティバーの「管理 > 設定」をクリックするか、command＋ ,で開きます。
ファイルの自動保存
command + Sでも上書き保存ができますが、以下のように設定画面の「Files: Auto Save」の「off」を「afterDelay」に変更するだけで自動保存が可能になります。
- off - 自動保存が無効になります。
- afterDelay - 「Auto Save Delay」の設定時間が経過すると、自動で保存します。（デフォルトは1000 ms）
- onFocusChange - 別ファイル選択後、自動で保存します。
- onWindowChange - 別ウィンドウ選択後、自動で保存します。
インデント幅の変更
デフォルトのインデントは「半角スペース４つ」になっていますが、Rubyのコーディング規約に合わせて「半角スペース２つ」に変更しておきます。
以下のように設定画面の「Editor: Tab Size」の「４」を「２」に変更します。
以下のようにステータスバーでも随時変更することができます。
設定ファイル（settings.json）
設定画面で行った設定は、settings.jsonというファイルに保存されます。
設定画面の右上のアイコンをクリックすると、settings.jsonファイルを開くことができます。
こちらのファイルを直接編集して設定を行うこともできます。
VSCodeの操作に慣れてきたらsettings.jsonファイルを編集した方が早いので、開き方は覚えておきましょう。
さいごに
この章では「テキストエディタ」の特徴や役割を学び、VSCodeのインストール、拡張機能の導入、設定を行いました。これで開発効率が上がるエディタを使って、プログラミングを行うことができます。
次の章では、プログラムを実行するのに必要な「ターミナル」の使い方や「ファイル管理」の知識を学びます。
本章のまとめ
- テキストエディタは、「文字や記号だけで構成されたテキストファイル」の編集が行えるアプリケーションのこと
- 標準のテキストエディタは、プログラミングには不向きなのでプログラミング用のエディタが必要になる
- プログラミング用のテキストエディタでは、便利な機能で正確かつ効率的に開発を進められる
