すでにメンバーの場合は

無料会員登録

GitHubアカウントで登録 Pikawakaが許可なくTwitterやFacebookに投稿することはありません。

登録がまだの方はこちらから

Pikawakaにログイン

GitHubアカウントでログイン Pikawakaが許可なくTwitterやFacebookに投稿することはありません。

Rails

【Rails】 Macにテキストエディタ(VSCode)の準備をしよう

ぴっかちゃん
ぴっかちゃん

この記事では、プログラムを記述するのに必要な「テキストエディタ」の導入を行います。

この記事を読むことで、以下のことが学べます。

  • テキストエディタとは
  • テキストエディタが開発に必要な理由
  • 1番人気のテキストエディタである「VSCode」の導入・設定方法

実際に手を動かして、開発に必要なテキストエディタを準備していきましょう!

※この記事は、macOSをご利用の方向けになります。VSCodeは無料です。

テキストエディタとは何か学ぼう

テキストエディタの特徴や役割について把握しておきましょう。

エディタとは

エディタとは、データの編集を行うためのアプリケーションのことです。

エディタ

データのファイルを開く・編集・保存することができます。

テキストファイルを編集する場合は「テキストエディタ」、画像ファイルを編集する場合は「グラフィックエディタ」のようにデータの種類や用途によって呼ばれ方が変わります。

テキストエディタとは

テキストエディタとは、文字や記号だけで構成されたテキストファイルの編集を行うためのアプリケーションです。

テキストエディタ

プログラミング言語も編集できる

プログラミングでは、プログラミング言語(コンピュータに指示を伝えるための言語)を使います。

プログラミング言語は、文字と記号だけで構成されるテキストデータなので「テキストエディタ」で編集を行うことができます。

プログラミング言語もテキストデータ

プログラミング用のテキストエディタの必要性

Macには簡単な文章を作成できる「テキストエディット」というアプリケーションが標準で搭載されています。

こちらもテキストエディタになります。

テキストエディット

このような標準のテキストエディタを使ってプログラミングすることも可能ですが、文章作成のための必要最低限の機能しか搭載されていないためプログラミングには不向きです。

そのため「プログラミング用のテキストエディタ」を用意する必要があります。

プログラミング用のテキストエディタには、シンタックスハイライト(特定のコードに色を付ける機能)や入力補完(入力内容を予測して候補を表示する機能)があります。

エディタの比較

このような便利な機能を活用することで、正確かつ効率的に開発を進めることができます。

ポイント
  1. テキストエディタは、文字・記号で構成されたファイルの編集ができる
  2. プログラミング言語も文字・記号なので、テキストエディタで編集ができる
  3. プログラミング言語とは、コンピュータに指示を伝えるための言語のこと

VSCodeをインストールしよう

初心者におすすめの「VSCode」というテキストエディタを導入します。

VSCode(visual studio code)とは

VSCodeとは、Microsoft社が開発・提供しているソースコードエディタ(プログラミング用のテキストエディタ)です。

VSCodeロゴ

以下の理由により、プログラマから高い人気を誇るエディタです。

  • 動作が軽い
  • 豊富な拡張機能でカスタマイズ性が高い
  • ドキュメントがしっかりしている

初期状態でも機能が充実しているので、ベテランの方だけではなく初心者でも扱いやすいエディタです。

VSCodeのインストール手順

MacにVisual Studio Code(VSCode)をインストールする手順は、以下の通りです。

ここからは、実際に手を動かしながらインストールしていきます。

ぴかわかさん

1.公式サイトからVSCodeをダウンロードする

まずは「Visual Studio Codeの公式サイト」へアクセスし、以下の画面で「Download Mac Universal」をクリックします。

VSCodeの公式サイト

以下の画面に切り替わり、自動でダウンロードが開始されます。

ファイルを解凍

ダウンロードしたファイルは左下に表示されるので、ダブルクリックして解凍します。

ぴっかちゃん

解凍したファイルは「Visual Studio Code.app」という名前で、ダウンロードフォルダにあるよ!

2.解凍したファイルをアプリケーションに移動する

次にFinderのダウンロードフォルダを開いて、「Visual Studio Code.app」をサイドメニューの「アプリケーション」へドラッグ&ドロップします。

アプリケーションフォルダへドラッグ&ドロップする

以下のように「アプリケーション」に「Visual Studio Code.app」があれば、ドラッグ&ドロップができています。

「アプリケーション」に「Visual Studio Code.app」がある状態

※以下の画面が表示された場合は「認証」をクリックし、管理者のログイン情報を入力してください。

認証表示

管理者情報を入力

3.VSCodeを起動する

Finderのアプリケーションを開いて、「Visual Studio Code.app」をダブルクリックします。

Visual Studio Code.appをクリック

以下のような警告文が表示される場合がありますが、「開く」をクリックします。

警告文

以下の初期画面が表示されたら、VSCodeの起動は完了です!

初期画面

ぴっかちゃん

次回からのアクセスを素早くできるように「Dock」に追加しよう

4.VSCodeをDockに追加する

以下のように、VSCodeを「右クリック > オプション > Dockに追加」します。

Dockに追加

5.不要なファイルを削除する

ダウンロードフォルダにある「VSCode-darwin-universal.zip」は、今後必要ないので削除しておきましょう。

右クリックで「ゴミ箱に入れる」か、「command+ deleteキー」で削除できます。

zipファイルを削除

これで「VSCodeのインストール」は完了です。
次は「VSCodeの基本的な使い方」について学習していきましょう!

ぴかわかさん

VSCodeの基本的な使い方を確認しよう

VSCodeの画面構成や基本操作について把握しておきましょう。

VSCodeの画面構成

VSCodeの基本的な画面構成は、以下のように4つの要素で構成されています。

VSCodeの画面構成

各要素の役割は、以下の表の通りです。

名称 説明
1. アクティビティバー 主要機能がアイコンで表示される(初期状態では7つ)
2. サイドバー アクティビティバーで選択した内容が表示される
3. エディタ ファイルを編集するメインエリア
4. ステータスバー プロジェクトやファイルの情報が表示される

VSCodeの基本ショートカットキー

VSCodeの基本的な操作は、ショートカットキーで行えます。

操作 ショートカットキー
新しくファイルを作成する command + N
ファイルを保存する command + S
ファイルを閉じる command + W
ファイルを開く command + O
ファイルを検索する command + P

例)以下のようにアクティビティバーの1番上にある「EXPLORER」をクリックして、command + Nを実行すると、新しいファイルを作成することができます。

新しくファイルを作成する方法

次は、開発効率を格段に上げてくれる「拡張機能の導入」を行います!

ぴかわかさん

VSCodeに便利な拡張機能を導入しよう

VSCodeは初期状態でも機能が充実していますが、拡張機能を導入することでより効率的に作業が行えます。

拡張機能の追加方法

拡張機能の追加や削除などの管理は、以下の画面のアクティビティバーの上から5番目にある「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,で開きます。

VSCodeの設定画面を開く

ファイルの自動保存

command + Sでも上書き保存ができますが、以下のように設定画面の「Files: Auto Save」の「off」を「afterDelay」に変更するだけで自動保存が可能になります。

ファイルの自動保存

インデント幅の変更

デフォルトのインデントは「半角スペース4つ」になっていますが、Rubyのコーディング規約に合わせて「半角スペース2つ」に変更しておきます。

以下のように設定画面の「Editor: Tab Size」の「4」を「2」に変更します。

タブサイズ変更

以下のようにステータスバーでも随時変更することができます。

タブサイズ変更2

設定ファイル(settings.json)

設定画面で行った設定は、settings.jsonというファイルに保存されます。

設定用jsonファイル

設定画面の右上のアイコンをクリックすると、settings.jsonファイルを開くことができます。

こちらのファイルを直接編集して設定を行うこともできます。

VSCodeの操作に慣れてきたらsettings.jsonファイルを編集した方が早いので、開き方は覚えておきましょう。

ぴかわかさん

さいごに

この章では「テキストエディタ」の特徴や役割を学び、VSCodeのインストール、拡張機能の導入、設定を行いました。これで開発効率が上がるエディタを使って、プログラミングを行うことができます。

次の章では、プログラムを実行するのに必要な「ターミナル」の使い方や「ファイル管理」の知識を学びます。

本章のまとめ

  • テキストエディタは、「文字や記号だけで構成されたテキストファイル」の編集が行えるアプリケーションのこと
  • 標準のテキストエディタは、プログラミングには不向きなのでプログラミング用のエディタが必要になる
  • プログラミング用のテキストエディタでは、便利な機能で正確かつ効率的に開発を進められる

1

わかった!