はじめに
多くの初心者にとって、Ruby on Rails の開発環境構築は難しい作業です。
Ruby on Rails は Ruby という言語で動作するフレームワークです。
そのため、Ruby on Rails を動作させるためにはまず Ruby をインストールする必要があります。
Ruby のインストール方法はまず Mac と Windows で異なり、さらに OS やバージョンによっても異なる場合があります。
しかし、本当はこのような事前準備ではつまづきたくありませんよね。
そこで、今回は GitHub Codespaces を使って Ruby on Rails の開発環境を構築してみましょう。
GitHub Codespacesとは
GitHub Codespaces は、2022年に一般提供された GitHubを通して利用できる統合開発環境[IDE)です。
AWS の Cloud9 を使ったことがある方はイメージしやすいかもしれません。
Cloud9 と同様、GitHub Codespacesは、ブラウザ上で動作する開発環境となります。
ただ、Cloud9 と異なるのはその手軽さと、VSCode との連携が簡単であるということです。
GitHubから起動することができれば、いつでもどこでもすぐに開発作業が可能です。
また、GitHub Codespacesは、Visual Studio Code (以下、VSCode）と完全に統合されており、ブラウザだけでなくローカル（PC）の VSCode からも操作することができます。
GitHub Codespacesの特徴
GitHub Codespacesはクラウド上に開発環境を構築し、クラウド上だけで完結できる開発環境です。
開発者はデバイスや場所に依存せず、どこからでも同じコードの編集や実行が可能になります。
また、VSCodeと完全に統合されているため、普段使っている VSCode の拡張機能や設定をそのまま利用することができます。
例えばコードの補完、シンタックスハイライト、リファクタリング、デバッグといった機能はもちろんのこと、拡張機能をインストールしてカスタマイズすることも可能です。
詳細は公式のドキュメントも参照してください。
https://docs.github.com/ja/codespaces
GitHub Codespacesのメリット
1. 開発環境を自分で用意しなくて済む
GitHub Codespacesを使うメリットの一つは、開発環境を自分で用意しなくて済むということです。
これまでは、開発環境を構築するために、PCにソフトウェアをインストールする必要があり、さらにその際にはOSやバージョンによってインストール方法が異なることがありました。
しかしCodespacesを使用するとその必要がありません。
特に、冒頭に説明したような PC ごとに手順が異なる場合がある環境構築方法も、Codespacesを使えばその必要がありません。
2. GitHub リポジトリをどこからでも操作できる
インターネットさえあえれば GitHub リポジトリ自体にはどこからでもアクセスできます。
しかし、通常は開発環境を構築した PC からしか開発作業を行うことができません。
そこで、GitHub Codespacesを使えば開発環境を構築した PC に依存せず、どこからでも開発作業を行うことができます。
例えば複数の PC を持っていたり、または会社の PC と自宅の PC があったりする場合、どちらの PC からでも開発作業を行うことができます。
3. 自分の開発環境を他の人に共有できる
GitHub Codespacesを使えば、他の人と共有しながら開発作業を行うことができます。
個人的に、プログラミング初心者や学習者にとってはこれが一番のメリットだと考えています。
普通はローカルのPCで開発を行い、何かエラーが出た場合はそのエラー内容をスクリーンショットや Zoom などで共有し、先輩やメンターの指示を受けながらトラブルシューティングをします。
もしくは、相手にも同じ開発環境を準備してもらうこともありますが、どちらも手間と時間がお互いにかかります。
しかし、GitHub Codespacesを使えば、お互いに同じ開発環境を動かせるため、簡単に状況を共有しながら開発作業を行うことができます。
例えば自分のリポジトリをメンターに共有し、メンターが Codespaces を使ってアプリケーションを動かしながら、一緒にデバッグすることもできます。
昨今、ペアプログラミングやモブプログラミングといった開発手法が注目されていますが、GitHub Codespacesを使えばそれらの手法をより簡単に実践できるようになるでしょう。
もちろん、勝手に第三者が行えるわけではなく、リポジトリ所有者（自分）が専用のURLリンクを相手に渡すなど、準備をすることではじめて共有されますのでご安心ください。
詳細は、以下の公式ドキュメントをご参照ください。
GitHub Codespaces の料金
GitHub Codespacesは非常に便利なサービスですが、その利用には料金が発生します。
ただし、ある程度までなら無料で使えます。
以下、主要ポイントを簡潔にまとめてみました。
無料で使える範囲
- 個人用アカウント：毎月15GBのストレージと120コア時間が無料。
- GitHub Pro：毎月20GBのストレージと180コア時間が無料。
※通常の利用範囲であれば、コア時間＝使用時間という理解でOKです。
料金がかかるケース
- 時間超過: 無料で使えるコア時間を超えた場合、追加料金がかかります。
- ストレージ超過: 無料ストレージを超えると、その分料金が発生します。
注意点
- 自動削除: 使っていない環境は自動的に削除されますが、ストレージは自動的には削除されません。
- 組織アカウント: 無料プランではGitHub Codespacesの無料使用は含まれません。
使用量に応じた通知
使用量が75%, 90%, 100%に達すると、メールとVS Code内で通知が来ます。必要に応じて通知をオフにできます。
月のリセット
毎月の使用量は翌月にリセットされます。リセット前に使用制限を超えた場合、GitHub Codespacesの使用は一時停止されます。
このように、GitHub Codespacesの料金は非常に柔軟ですが、使い方によっては費用がかかる場合があります。計画的に使い、無駄な料金を避けましょう。
詳しくは
使用状況の確認
Codespaces の使用状況は、以下のURLからいつでも確認することが出来ます。
https://github.com/settings/billing
どうしても無料範囲で使いたい場合には都度確認し、課金が発生しそうであれば Codespaces を使わないようにしましょう。
GitHub Codespacesの利用方法
それではまず、基本的な GitHub Codespaces の使い方を見ていきましょう。
GitHub リポジトリを作成
まず、GitHubアカウントでログインします。
その後、左上の「Repositories」をクリックします。
すると、リポジトリの一覧が表示されます。右上の「New」をクリックして、新しいリポジトリを作成します。
適当なリポジトリ名を入力して、「Create repository」をクリックします。
今回は「codespaces-test」というリポジトリを作成しました。
これでリポジトリを作成できました。
GitHubとローカルを同期
次に、ローカルにリポジトリをクローンして、リモート（GitHub）とローカル（PC）を同期します。
リポジトリ作成後に表示されている「Quick setup — if you’ve done this kind of thing before」の項目にある「…or create a new repository on the command line」のコマンドをコピーします。
私の場合は以下のようにコマンドが表示されていました。
echo "# codespaces-test" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/tmasuyama1114/codespaces-test.git
git push -u origin mainデスクトップに適当なフォルダを作成し、その中でコマンドを実行します。
cd ~/Desktop
mkdir codespaces-test
cd codespaces-test
# 以下、表示されていたコマンドを実行これで、ローカルにリポジトリが同期され、さらに README.md が作成されます。
先ほど開いていたGitHubのリポジトリページをリロードすると、 README.md が作成されていることが確認できます。
GitHub Codespacesを起動
GitHub Codespacesの利用は簡単です。
GitHubのリポジトリページにアクセスし、右上の「Code」をクリックします。
次に右側の「Codespaces」というタブをクリックします。
最初は Codespace がまだ作られていないので「Create Codespace on main」をクリックします。
これで、デフォルトの main リポジトリブランチを元に Codespace が作成されます。
少し待つと、以下のように Codespace が起動し、VSCode と同じような画面が表示されます。
Codespacesの使い方
では、試しにコードを書いてみましょう。
エクスプローラー（フォルダ・ファイル一覧）のあたりで右クリックし、「新しいファイル（New File）」をクリックします。
すると、新しいファイルを作れますので「test.rb」というファイルを作成します。
ファイルを作成したら、以下のコードを入力します。
puts "Hello World!"
これで Codespace を用いて Ruby ファイルが作成されました。
Codespace のターミナル操作
普通は専用の環境を構築しないとターミナルで Ruby を実行することはできませんが、Codespace ではその必要がありません。
試しに先ほど作成した test.rb を実行してみましょう。
Codespace の画面下部に見えている「ターミナル」欄に以下のコマンドを入力します。
ruby test.rbすると、test.rb に書かれている通りに Hello World! と表示されます。
最初から Ruby がインストールされているので、そのまま実行できるのです。
試しに ruby -v と入力してみると、Ruby のバージョンが表示されることから Ruby を実行できることがわかります。
$ ruby -v
ruby 3.2.2 (2023-03-30 revision e51014f9c0) [x86_64-linux]環境構築はパソコンによって手順が違うことがあり、初心者にとっては難しい作業です。
しかし Codespace を使えば、環境構築の手間を省くことができます。
Codespace での変更をコミット
先ほどファイルの作成とコードの実行を行いましたが、この状態ではまだリポジトリに変更が反映されていません。
ローカルで作業するときと同様、コミットを行う必要があります。
では、先ほど作成した test.rb をコミットしてみましょう。
以下のコマンドを Codespace のターミナルで実行するため、コピーしてターミナルに Cmd + V (Windows は Ctrl + V) でペーストします。
git add test.rb
git commit -m "add test.rb"
git pushなお、この時にお使いのブラウザによってはクリップボードからのペーストを許可するかどうかを聞かれることがありますので「許可する」を選択してください。
さらに、Codespace 上でターミナルにペーストするかどうかを聞かれます。
都度選択するのは面倒なので「今後このメッセージを表示しない」を選択肢、その後「貼り付け」を選択しましょう。
コマンドを貼り付けて Enter キーで実行していくと、以下のようにコミットが完了します。
通常であれば、コミットやプッシュを行うためには Git の設定、ならびに SSH 鍵の設定も必要ですが、Codespace ではそれらの設定を行わなくてもコミットやプッシュができます。
初心者がつまづきやすいポイントを排除してくれているので、とても便利ですね。
@tmasuyama1114 ➜ /workspaces/codespaces-test (main) $ git add test.rb
@tmasuyama1114 ➜ /workspaces/codespaces-test (main) $ git commit -m "add test.rb"
[main b88b7eb] add test.rb
1 file changed, 1 insertion(+)
create mode 100644 test.rb
@tmasuyama1114 ➜ /workspaces/codespaces-test (main) $ git push
Enumerating objects: 4, done.
Counting objects: 100% (4/4), done.
Delta compression using up to 2 threads
Compressing objects: 100% (2/2), done.
Writing objects: 100% (3/3), 311 bytes | 311.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
To https://github.com/tmasuyama1114/codespaces-test
de57643..b88b7eb main -> mainこれで、GitHub上のリポジトリに戻ってリロードすると、 test.rb が反映されていることが分かります。
拡張機能を用いてローカルの VSCodespace と同期する
これまで見てきた通り、Codespace はブラウザで VSCode のようにコードを編集することができます。
しかし、ブラウザの場合は普段使い慣れた VSCode とは少し違う点があります。
例えば Cmd + W (Windows は Ctrl + W) でファイルのタブを閉じようとすると、ブラウザのタブが閉じてしまいます。
そのため、普段使い慣れた VSCode で開発したいという場合もあるでしょう。
そんな時のために、Codespace とローカルの VSCode を同期する方法があります。
まず、VSCode のマーケットプレイスから「GitHub Codespaces」をインストールします。
「codespaces」検索すれば出てきますので、インストールしてください。
インストールできたら GitHub の Codespace 画面に戻ります。
そして左上のハンバーガーメニュー（横線3本）をクリックし、「Open in VS Code Desktop」をクリックします。
すると、VSCodeを開くことを確認するメッセージがブラウザで表示されるので、許可してください。
その後、VSCode が起動します。
初回では、GitHub にログインするように求められるので、画面の指示に従ってログインしてください。
起動とログインが完了すると、先ほどまでブラウザで開いていた Codespace をローカルの VSCode で開くことができます。
なお、ターミナルを起動したい時は通常と同じく、VSCode 自体のメニューから「ターミナル (Terminal)」→「新しいターミナル (New Terminal)」を選択します。
ちなみに、先ほど編集した test.rb も反映されているはずですが、もし反映されていなければ「git pull」コマンドで同期してください。
補足：リポジトリページから直接 VSCode で Codespace を起動する方法
一度ブラウザ版の Codespace を起動しなくても、いきなり VSCode で起動することもできます。
まずはリポジトリページの「Code」から Codespaces タブを選択し、起動したことがある Codespace の「…」をクリックし、「Open in …」を選択します。
そして「Open in Visual Studio Code」を選択すると、そのまま VSCode で Codespace を開けます。
VSCode に使い慣れている人は、この起動方法がおすすめです。
GitHub Codespaces で Ruby on Rails の環境を構築する方法
Ruby を使えることが分かったので、次は Ruby on Rails を Codespace にインストールしてみましょう。
Ruby on Rails のインストール
以下のコマンドを Codespace のターミナルで実行します。
gem install railsこれで Ruby on Rails がインストールされました。
インストール完了後に rails -v と入力してみると、Ruby on Rails のバージョンが表示されることからインストールできていることが分かります。
$ rails -v
Rails 7.0.7.2Rails アプリケーションの作成
では、実際に Rails アプリケーションを作成してみましょう。
【ハンズオン】Ruby on Rails 7 実践開発入門ガイド！現場レベルまでスキルアップと同様、TailwindCSS も試してみたいので TailwindCSS 用のオプションを付けて Rails アプリケーションを作成します。
また、RSpec でテストを書くことも多いので、オプションに --skip-test を付けて Minitest のテストをスキップします。
rails new . --css tailwind --skip-test通常は rails new sample_app のようにプロジェクト名を指定して作成しますが、今回は既にリポジトリを作成しているので、カレントディレクトリに作成するように . を指定していることに注意してください。
また、コマンドを実行すると今回はたまたま既に作成してある README.md と重複 (conflict) しているため、上書きするかどうかを聞かれます。
今回は y を入力して上書きします。
$ rails new . --css tailwind --skip-test
exist
conflict README.md
Overwrite /workspaces/codespaces-test/README.md? (enter "h" for help) [Ynaqdhm] Yコマンドを実行すると、通常の Rails 作成時と同じく、いくつかのファイルが作成されることが分かります。
Codespace でも問題なく Rails の環境を構築できました。
Rails アプリケーションの起動
それでは、Rails アプリケーションを起動してみましょう。
rails sすると、ターミナルに以下のように表示されます。
@tmasuyama1114 ➜ /workspaces/codespaces-test (main) $ rails s
=> Booting Puma
=> Rails 7.0.7.2 application starting in development
=> Run `bin/rails server --help` for more startup options
Puma starting in single mode...
* Puma version: 5.6.7 (ruby 3.2.2-p53) ("Birdie's Version")
* Min threads: 5
* Max threads: 5
* Environment: development
* PID: 17411
* Listening on http://127.0.0.1:3000
* Listening on http://[::1]:3000
Use Ctrl-C to stopローカルで Rails アプリケーションと同様、http://localhost:3000 にアクセスすると Rails の画面が表示されます。
TailwindCSS の確認
また、合わせて TailwindCSS が使えることも確認してみましょう。
(TailwindCSS を使わない場合は読み飛ばしてください)
まずは、一旦 Ctrl + C で Rails サーバを停止します。
次に Rails サーバ起動と同時に TailwindCSS のビルドも行えるよう、以下のコマンドを実行します。
bin/dev今度はターミナルの表示が以下のように変わり、TailwindCSS のビルドが行われており、ローカルで環境を構築する場合と何ら変わりなく動作することが分かります。
@tmasuyama1114 ➜ /workspaces/codespaces-test (main) $ bin/dev
04:52:53 web.1 | started with pid 18318
04:52:53 css.1 | started with pid 18319
04:52:54 web.1 | => Booting Puma
04:52:54 web.1 | => Rails 7.0.7.2 application starting in development
04:52:54 web.1 | => Run `bin/rails server --help` for more startup options
04:52:54 web.1 | Puma starting in single mode...
04:52:54 web.1 | * Puma version: 5.6.7 (ruby 3.2.2-p53) ("Birdie's Version")
04:52:54 web.1 | * Min threads: 5
04:52:54 web.1 | * Max threads: 5
04:52:54 web.1 | * Environment: development
04:52:54 web.1 | * PID: 18318
04:52:54 web.1 | * Listening on http://127.0.0.1:3000
04:52:54 web.1 | * Listening on http://[::1]:3000
04:52:54 web.1 | Use Ctrl-C to stop
04:52:55 css.1 |
04:52:55 css.1 | Rebuilding...
04:52:56 css.1 |
04:52:56 css.1 | Done in 697ms.Rails プロジェクトの作成をコミット
最後に、Rails プロジェクトの作成をコミットしておきましょう。
パソコン上の VSCode から操作しているように見えますが、実際には GitHub Codespaces 上で push しているため、SSH 鍵の設定などはここでも不要です。
git add .
git commit -m "create rails project"
git pushpush 完了後、GitHub のリポジトリページをリロードすると、先ほど作成した Rails プロジェクトが反映されていることが分かります。
ブラウザ版 Codespace で Rails アプリケーションを起動する方法
ここまでは、VSCode から Codespace を起動して Rails アプリケーションを起動してきましたが、ブラウザ版 Codespace でも Rails アプリケーションを起動することができます。
次に、GitHub のリポジトリページに戻ります。
そして、右上の「Code」をクリックし、「Codespaces」タブをクリックします。
次に Active となっている Codespace の名前（スクショでは organic giggle というランダムな名前）をクリックすると、再度ブラウザ版 Codespace が起動します。
では、ブラウザ版 Codespace でも Rails アプリケーションを起動してみましょう。
ターミナルで以下のコマンドを実行します。
rails sすると、ローカルの VSCode（ターミナル）で起動した時と同様、3000 番で Rails アプリケーションが起動しますが、ローカルで起動しているわけではにので http://localhost:3000 でアクセスすることは出来ません。
そのため、右下に表示されている「ブラウザーで開く」をクリックして、ブラウザで開きます。
すると、ローカルの VSCode で起動した時と同様、Rails の画面が表示されます。
私の環境の場合は https://organic-giggle-gwrxq9q4rq297p9-3000.app.github.dev/ というURLでアクセスできました。
ちなみに、もし一度開いたタブを閉じてしまった後は、ターミナル横の「ポート」タブを選択し、「ローカルアドレス」内の地球儀アイコンをクリックすると、再度ブラウザで開くことができますので覚えておきましょう。
また、アプリケーションを停止するときは通常と同様、ターミナルで Ctrl + C を入力してあげればOKです。
Codespace の停止方法
ブラウザ（タブ）を閉じても Codespace はすぐには停止しません。
放っておいてもタイムアウト（時間制）で自動的に停止しますが、手動で停止することもできます。
ブラウザ版 Codespace の場合
リポジトリのページで再度「Code」をクリックし、「Codespaces」タブをクリックします。
そして「On current branch」の中で「Active」となっている Codespace の右側にある「…」をクリックし、「Stop codespace」をクリックします。
VSCode（ローカル）版 Codespace の場合
まずは VS Code Command Palette（コマンドパレット）を開きます。
Mac の場合は Shift+Command+P、Windows の場合は Ctrl+Shift+P と入力すると開けます。
「stop」と入力し、オプションの一覧から [codespace: codespace の停止] を選べば、Codespace を停止できます。
