Ruby on Rails チュートリアル
ヘルプ − 困ったときのヒント集
本ページではRailsチュートリアルでよく見かけるエラーや対処法、迷ったときの学習ロードマップなどをまとめています。Railsチュートリアルを進めていて困ったときにご活用ください。
目次
- はじめに
- 学習ロードマップ
- GitHub Codespaces で「読み込みエラー」が表示された
- Visual Studio Code と Docker を使ってローカル環境で開発する
- Render 以外のデプロイ先に挑戦する
- AWS Cloud9 を使って開発する
- AWS Cloud9 から GitHub にアクセスする
- AWS Cloud9 の容量不足を解決する
- AWS Cloud9 が動かなくなったら
- 公式アカウントまとめ
- 公式 YouTube：Railsチュートリアルの歩き方
- 公式リポジトリ：yasslab/sample_apps
- 公式アカウント：@RailsTutorialJP
- 完走者向け読み物ガイド
はじめに
Web技術は日々進化しているため、エラーに遭遇せずに開発を進められることは稀です。すべてのエラーを網羅するのは難しいですが、エラー発生時に役立つ（かもしれない）ヒントを以下にまとめておきました。困ったときはぜひお試しください。
- Sample App 実装例のコードと自分のコードを比較しましたか？
- チュートリアルで使用した gem のバージョン（Rails を含む）を正確に使用していますか？
- エラーメッセージで検索してみましたか？
- RailsのWebサーバを（
Ctrl-Cで）停止して再起動しましたか？ bin/spring stopを使ってSpringを停止してみましたか？bundle installを再実行しましたか？bundle updateを実行してみましたか？heroku logsやheroku logs --tailを使って Heroku のログを調べましたか？sqlite3gem がGemfileの開発環境とテスト環境にのみリストされていることを確認しましたか？- エラーメッセージで検索してみましたか？（大事なことなので２回書きました）
上記ヒントが皆さんのお役に立てば解決すれば嬉しいです。『デバッグ時間をもっと短くしたい』『より早く学びたい』といった場合は、次の学習ロードマップをご参照していただけると幸いです。
学習ロードマップ
よくある学習の流れをまとめたロードマップもあります。『この流れが正解』といったものはありませんが、自分に合った学習計画を立てる場面などでご活用ください。
Rails 7 対応の解説動画は2023年4月から1章ずつ先行リリースされていきます。
☝️ 図中に記載されている各種サービスの概要は、次の通りです。
Progate
対話的に学べるオンラインのプログラミング学習サービスです。初心者向けのコンテンツが特に充実しており、初めてプログラミングをする方にオススメです。『Progate Journey』でプログラミング学習の全体像を把握することもできます。Railsチュートリアル実践入門シリーズ
Railsチュートリアルを進めて『難しい!』と感じた方を対象とした補足コンテンツです。『基礎力を高めたい』『まずは基本を押さえたい』という方にオススメです。RailsチュートリアルWebテキスト
本サイト内で最も売れているコンテンツです。「理解度を高めたい」「もっと速く進めたい」といった場合は、途中から以下の速習パック「Railsチュートリアル解説動画 + AIサポート + トレーニング」に切り替えることもできます 👇Railsチュートリアル解説動画 + AIサポート + トレーニング
イラストと実演付きの解説動画で学べる速習パックです（倍速再生にも対応）。AIがエラーや疑問を補足する『AIサポート』や、大学/大学院で使われている回答付き問題集『トレーニング』も同梱されているため、「素早く学びたい」「理解度を高めたい」という場面でオススメです。質問対応サポート付き解説動画【提供: ShareWis】
現役Rubyエンジニアのサポート付きで学べる、解説動画の質問対応付きサービスです。後半の章ほど難しくなっていきますが、サポートを受けながらしっかり学ぶことができます。コミュニティサポート付き解説動画【提供: TechCommit】
コミュニティ型の学習支援サービスです。独学での学習が不安な方にオススメです。（【Railsチュートリアルコラボ】Rails学習支援追加パックでお申し込みください。）Ruby on Railsガイド
トピック毎に体系化された、1,600ページを超えるRailsの大型リファレンスです。Railsチュートリアルを完走し、プロダクト開発の実践に入った方々を対象として、各機能の詳しい使い方を解説する辞書型サービスです。『もっと生産的に開発したい』という方向けにProプランやTeamプラン、電子書籍版も提供しています。読み物ガイド
Railsチュートリアル完走者を対象とした『読み物ガイド』も用意しています。『完走後ってどうしたらいいの？』とお悩みの場面でお役に立てば嬉しいです 😌💖
上記の他、YouTubeチャンネルやnoteマガジンもあります。『Ruby/Rails学習者の統計データ』や『３ヶ月でWebサービスを開発した話』、『医者からエンジニアになった話』などを公開しているので、ぜひご購読ください！📺✅
GitHub Codespaces で「読み込みエラー」が表示された
GitHub Codespaces で rails server を実行した場面などで、「シンプルブラウザーは開いたけど何も表示されない」という場合があります。これは必要な Cookie が許可されていない場合に起こります。以下の例を参考に、サードパーティの Cookie を許可すると解決することがあります。
以下の方法で解決しない場合でも、1.3.2 rails server セクションを参考にして、ブラウザウィンドウを開けば結果を表示できます。
Google Chrome - Webビューの読み込みエラー
Google Chromeでは、Error: Could not register service workers: NotSupportedError ... などが表示され、「シンプルブラウザーは開いたけど何も表示されない」という場合があります。以下の例を参考に設定を行ってみましょう。
-
Chrome の設定を開いて、メニューの「プライバシーとセキュリティ」から「サードパーティ Cookie」の設定ページに移動します
-
ページ下部の「動作のカスタマイズ」にある追加ボタンをクリックすると、ポップアップが開きます
-
[*.]github.divと入力し、追加します
-
設定が完了しました！
Firefox - Webビューの読み込みエラー
Firefoxでシンプルブラウザーの画面が表示されない場合は、アドレスバーにある強化型トラッキング防止機能のアイコンをクリックし、「オフ」にすることでプレビューが表示されるようになります。
上記の機能をオフにしても解決しない場合は、シンプルブラウザーではなく「新規ウィンドウでサイトを開く」をクリックしてください。ブラウザの別タブで画面が表示され、こちらの画面でも現在の状態をご確認いただけます。
参考記事
Visual Studio Code と Docker を使って開発する
Visual Studio Code と Docker を使って、クラウド IDE ではなくローカルマシンに開発環境を用意する方法です。開発構築の準備が無事に完了すると、1.3 最初のアプリケーションから読み進められます。
具体的な手順は次の通りです。
必要なものをインストールする
- Docker Desktop for Windows/Mac.からDockerをインストールします。詳しくはこちらから。
- Visual Studio Codeをインストールします。
- Remote Development extension packというVScodeの拡張をインストールすることで、VScode内でDockerを起動することができます。
- GitHubのアカウントをお持ちでない場合は、1.2.1を参考にアカウントを作成しておきましょう。
devcontainerの起動する
- 自分のアカウントにdevcontainer for Rails Tutorial 7と同じ内容のリポジトリを作成します。devcontainer for Rails Tutorial 7にある「Use this template」をクリックするとリポジトリを作成するページが表示されます。「Repository name」に任意のリポジトリ名を入力して「Private」オプションを選択し、最後に「Create repository from template」をクリックしてください。
- 作成したリポジトリを
git cloneを使い、ローカル環境にダウンロードします。以下のコードをターミナルで実行すると、作成したリポジトリがダウンロードされます。$ git clone https://github.com/<あなたのGitHubアカウント名>/<設定したリポジトリ名>.git上記の方法で失敗する方は、作成したリポジトリからZIPでダウンロードすることもできます。
- VSCodeを起動し、ダウンロードしたリポジトリを開きます。
- 左下のボタンをクリックし、メニューを開きます。
- Reopen in Container を実行します。繋がらない場合はDockerが起動しているか確認してみましょう。
- 右上のボタンからTerminalを開きます。
- コマンドを実行し完了になります。リスト 1.4まで完了している状態です。お疲れ様でした。
また、devcontainer を起動した後に、rails newで作成したディレクトリを「ファイル」の「開く」から選択するとプロジェクトの表示を切り替えられます。
Render 以外のデプロイ先に挑戦する
本文で紹介している以外にも、さまざまなプラットホームでRailsアプリケーションをデプロイ出来ます。本セクションは、本文とは異なるプラットホームでCloud9からデプロイする方法を紹介します。
fly.io にデプロイする
fyl.ioは、コマンドラインインターフェースで操作を行いたい場合におすすめです。クレジットカード情報を登録すると最大3つのアプリと合計3GBまでのデータベースを無料で利用できます。（初回のデータベース作成はカード情報を登録しなくても行えます。詳しくは公式ページからご確認ください。）
-
Cloud9で
flyコマンドを使えるようにするため、ターミナルで下記のコマンドを実行してflyctlのインストールと設定を行います。以降、コマンドの実行はすべてターミナルで行います。$ curl -L https://fly.io/install.sh | sh $ echo 'FLYCTL_INSTALL="/home/ubuntu/.fly"' >> $HOME/.bash_profile $ echo 'PATH="$FLYCTL_INSTALL/bin:$PATH"' >> $HOME/.bash_profile $ source $HOME/.bash_profile > /dev/null $ flyctl version # 表示されるバージョンは異なる場合があります flyctl v0.0.425 linux/amd64 Commit: a1d61bdc BuildDate: 2022-10-29T21:08:47Z -
flyctl auth loginを実行してターミナルに表示されたURLクリックすると、アカウントを持っていない場合サインインページが表示されます。GitHubアカウントかEmailで登録しましょう。続いてクレジットカードの登録画面が表示されます。クレジットカードの登録は後から行うことも可能ですが、2回目以降のデータベースの作成には登録が必要なので、ここで登録しておくと良いでしょう。
-
最初のデプロイを行う前に、まずアプリケーションの作成を行います。
fly launchを実行するとターミナル上にさまざまな質問が表示されるので答えていきます。# 空白のままEnter ? Choose an app name (leave blank to generate one): # 矢印でカーソルを移動させ Tokyo を選択して Enter ? Choose a region for deployment: [Use arrows to move, type to filter] # y（yes）を打って Enter ? Would you like to set up a Postgresql database now? (y/N) # 一番上の「Development - Single node（無料プラン）」 が選択されている状態で Enter ? Select configuration: [Use arrows to move, type to filter]全て答えるとアプリの作成が始まります。ローカルのフォルダに
.dockerignore、Dockerfile、fly.toml、lib/tasks/fly.rakeが作成され、ターミナルにNow: run 'fly deploy' to deploy your Rails app.と表示されたら成功です。作成されたファイルはコミットしてプッシュしておきましょう。 - 準備ができたら
fly deployでデプロイを実行します。成功すると下記のようなメッセージが表示されます。失敗した場合はfly logsでログを確認し、原因を探してみましょう。Release v1 created ==> Monitoring deployment 1 desired, 1 placed, 1 healthy, 0 unhealthy [health checks: 1 total, 1 passing] --> v1 deployed successfully -
デプロイされたアプリケーションを開くには
fly openを実行します。cloud9では自動でブラウザを開けないため「Error」の表示がでますが、URLをクリックすればブラウザが開いてアプリケーションが表示されます。
参考記事
AWS Cloud9 を使って開発する
AWS Cloud9 を使って開発する方法です。AWSアカウントががない場合は、初めにアカウントを作成します。AWSアカウントを既にお持ちの場合は、AWSにログインしてください。AWSには無料利用枠がありますが、悪用防止のためクレジットカード情報の入力が必須です。コマンドなどの詳しい説明は省略していますが、完了すると本文の1.3.3から学習を進められます。
AWS Cloud9 環境を用意する
- AWSコンソールに行き、検索ボックスから “Cloud9” と入力して、Cloud9の開発環境を作成するためのページ移動します。
- Cloud9の管理ページを開けるようになったら、 ドロップダウンメニューから住所に近いリージョンを選択し、“Create environment” をクリックして進みます。
- Detailsセクションでは「rails-tutorial」を含む名前などの情報を適宜入力し 、Environment Typeでは“New EC2 instance”を選択します。
- 次のNew EC2 instanceの設定では、PlatformのドロップダウンメニューからUbuntu Serverを選択します。
- 次のNetwork settingsはAWS Systems Manager(SSM) を選択していることを確認し、VPS settingsやTags-optionalはデフォルトのまま“Create”をクリックします。このとき、「“root”ユーザーになっている」という警告が表示されるかもしれませんが、この段階では無視して構いません。
- 上の手順で“Create”をクリックすると管理ページに移動します。しばらくするとメッセージが表示されるので、openをクリックして作成したクラウドIDEを開きましょう。
- 最後に、作成したCloud9環境で右上の歯車アイコンをクリックして［Project Settings］を開き、［Soft Tabs］設定で値を「2」に変更し、［On Save, Strip Whitespace］設定もオンにしておくことをオススメします。
環境構築を行う
- GitHub Codespaces のRailsチュートリアル用のテンプレートページで、Gemfile や Gemfile.lockから使用するRubyGemのバージョンを確認しておきます。
- Rubyのバージョンを確認し、使用したいバージョンと異なる場合はインストールします。ここでは
rvm（Ruby Version Manager）を利用した Ruby のインストール方法を紹介します。バージョンは手順1で確認したものを入力してください。# Rubyのバージョンを確認する $ ruby -v # rvmをインストールする $ rvm get stable # バージョン 3.2.2 のRubyをインストールする $ rvm install 3.2.2 # バージョン 3.2.2 のRubyをデフォルトで使用する $ rvm --default use 3.2.2 - Railsのインストール時間を短縮するため、時間のかかるRubyドキュメントをインストールしないようにする設定を追加します。ワークスペース環境のディスク容量を追加するコマンドも実行しておくと良いでしょう。
# Rubyドキュメントをスキップする設定を.gemrcファイルに追加する $ echo "gem: --no-document" >> ~/.gemrc # Cloud9環境のディスク容量を追加する $ source <(curl -sL https://cdn.learnenough.com/resize) - 手順1で確認したバージョンを指定して Rails と bundler をインストールし、アプリを作成します。（bundler のバージョンはGemfile.lockの最下部にある BUNDLED WITH 部分です。）
# バージョンを指定してRailsをインストールする $ gem install rails -v 7.0.4.3 # bundlerのバージョンを指定してインストールする $ gem install bundler -v 2.4.12 # environmentディレクトリ でアプリケーションを作成する $ cd ~/environment $ rails _7.0.4.3_ new hello_app --skip-bundle - rails newを実行すると、さまざまなファイルとディレクトリが作成されます。作成されたファイルから
Gemfileをエディタで開き、 Railsチュートリアル用のテンプレートページのGemfile と同じ内容に一新します。Gemfileの変更を保存したら、コマンドを実行してgemをインストールします。インストールがうまくいかない場合はbundle upodateを試してみましょう。
# アプリのディレクトリに移動する $ cd hello_app/ # Gemfileを更新後、下記コマンドでgemをインストールする $ bundle _2.4.12_ install Fetching source index for https://rubygems.org/ . . . # 一部のシステムで必要となるLinuxデプロイプラットフォーム向けのコマンドを実行する $ bundle _2.4.12_ lock --add-platform x86_64-linux - ローカルWebサーバーへの接続を許可するため、
config/environments/development.rbファイルをエディタで開き、以下を参考にconfig.hosts.clearを追記します。
- 以下のコマンドでRailsサーバーを実行します。この時、ターミナルタブをもうひとつ開いてそこでコマンドを実行すると、最初に開いたタブで引き続きコマンドを実行できるので便利です。サーバーが立ち上がったら 1.Previewを開いて［Preview Running Application］をクリックし、 2.プレビューのタブからブラウザウィンドウを開きます。ここまで完了すると本文の1.3.3より学習を進められます。お疲れ様でした。
# アプリのディレクトリに移動しコマンドを実行する $ cd ~/environment/hello_app/ $ rails server
参考記事
AWS Cloud9 から GitHub にアクセスする
GitHubにSSH鍵を使って接続する方法です。GitHubアカウントがない場合は、初めにアカウントを作成します。
1. SSH鍵の登録方法
-
公開鍵をクリップボードにコピーします。既に公開鍵を作成している場合は、catコマンドを使って公開鍵を表示できます。
まだ作成していない場合はコマンドを実行しても No such file or directory と表示されます。その場合は「Git - SSH 公開鍵の作成」を参考に公開鍵・暗号鍵を作成してください。
$ cat ~/.ssh/id_rsa.pub - 公開鍵を追加するには、GitHubで右上にあるプロフィール画像をクリックしドロップダウンメニューから「Settings」をクリック、次に左サイドバーから「SSH and GPG keys」をクリックします。
-
右上の「New SSH key」をクリックして、表示されたページで任意の鍵の名前を入力し、catコマンドで出力した公開鍵をコピー＆ペーストします。
-
最後に「Add SSH key」をクリックするとページが移動し、追加した公開鍵を確認できます。
2. GitHubをリモートoriginに追加する方法
GitHubでリポジトリを作成した後に表示される画面では、「SSHオプション」を選択してコマンドを表示させてください。
ターミナルで下記のコマンドを実行し、GitHubをリモートoriginに追加します
$ git remote add origin git@github.com:<あなたのGitHubアカウント名>/hello_app.git
参考記事
AWS Cloud9 の容量不足を解決する
Cloud9 で開発していると、デフォルトで設定されている Amazon EBS ボリューム容量では足りなくなってしまうことがあります。本セクションでは、使わなくなったファイルの削除方法や EBS ボリュームを増やす方法を紹介します。（Amazon EBS の無料利用枠については公式ページからご確認ください。）
0. 第3章に入ったら hello_app, toy_app は削除しよう
sample_app だけを使います。第1章で作った hello_app と、第2章で作った toy_app は削除しても大丈夫です。容量不足が不安になってきたら、まずは hello_app と toy_app を削除してみましょう。（ソースコードを残しておきたい方は、事前に GitHub に push しておきましょう）
1. EBS ボリュームの確認方法
df -h コマンドで、現在の容量を確認します。 /dev/xvda1 の列の Use が100%になると、動作しなくなることもあります。（動作しなくなってしまった場合は、新しい environment を作成した方が早いかもしれません。）
$ df -h
Filesystem Size Used Avail Use% Mounted on
.
.
/dev/xvda1 9.8G 8.2G 1.5G 85% /
There was an error while trying to write to `/home/ubuntu/environment/sample_app/.bundle/config`. There was insufficient space remaining on the device.
hello_appやtoy_appを削除しても構わない方は、この時点で削除して容量を少し空けておきましょう。
2. EBS ボリュームを増やす方法
- Amazon EC2 コンソールを開きます。
- 「ボリューム」を選択し、変更するボリュームを選択します。（複数あって分からない場合は、「インスタンス」の「実行中のインスタンス」の中から
aws-cloud9から始まる Name のインスタンス ID をコピーし、ボリューム内で検索するとよいでしょう。） - 上部にある「アクション」ボタンから「ボリュームの変更」を選択し、サイズを AWS が定める最大無料枠に設定し、変更します。（執筆時点では
30でしたが、念のため確認しておくことをオススメします） - 「インスタンス」にいき、該当のインスタンスを選択後、画面上部にある「アクション」ボタンから「インスタンスの状態」→「再起動（停止中なら開始）」をします。
- 「Cloud9」に戻り、ターミナルからボリュームの拡張をします。現在のインスタンスに割り当てられているブロックデバイスの情報を確認するには、
lsblkコマンドで表示します。ルートボリュームである/dev/xvdaは拡張されていますが、/dev/xvda1はまだ元のままです。ボリュームを拡張させるには以下のコマンドを使います。$ lsblk . . xvda 202:0 0 30G 0 disk └─xvda1 202:1 0 8G 0 part$ sudo growpart /dev/xvda 1$ lsblk . . xvda 202:0 0 30G 0 disk └─xvda1 202:1 0 30G 0 part / - 最後にファイルシステムを拡張します。ファイルシステムを拡張するには、以下のコマンドを使います。
$ sudo resize2fs /dev/xvda1$ df -h Filesystem Size Used Avail Use% Mounted on . . /dev/xvda1 30G 8.2G 21G 27% /
参考記事
AWS Cloud9 が動かなくなったら
Cloud9 がうまく動かない原因にはさまざまな理由が考えられますが、上部にオレンジの帯で「This is taking longer than expected.」から始まるメッセージが表示されている場合は、インスタンスの再起動を行ってみましょう。
インスタンスの再起動
- Amazon EC2 コンソール を開き、左側のナビゲーションバーから「インスタンス」を選択します（この時、上部のメニューで作成した Cloud9 と同じリージョンが表示されているか確認し、リージョンが違う場合はドロップダウンメニューから選択しておきます）。
-
再起動したいインスタンスにチェックを入れ、「インスタンスの状態」メニューから「インスタンスを再起動」をクリックします。
- 確認画面が表示されるので、右下の「再起動」をクリックすると、再起動が実行されます。
また、同時に複数のインスタンスを使用している場合、現在使用しているインスタンス以外を停止してみましょう。
参考記事
公式アカウントまとめ
Railsチュートリアルの公式アカウントは以下の通りです。公式の最新情報を知りたい場面などでお役立てください。
公式動画：Railsチュートリアルの歩き方
Railsチュートリアルの全体像を俯瞰したいときや、完走後のイメージを掴みたい場面でご活用ください。
公式リポジトリ：yasslab/sample_apps
GitHub 上で公開しているRailsチュートリアルの実装例です。Railsのバージョン毎にそれぞれディレクトリが分けられているので、学習中のバージョンに合わせて適宜ご参照ください。
公式アカウント：@RailsTutorialJP
完走者向け読み物ガイド
Railsチュートリアル完走者を対象とした『読み物ガイド』も用意しています。『完走後ってどうしたらいいの？』とお悩みの場面でご活用ください 🗺✨
読み物ガイドをみる
Railsチュートリアルは YassLab 社によって運営されています。
コンテンツを継続的に提供するため、書籍・動画・質問対応サービスなどもご検討していただけると嬉しいです。
研修支援や教材連携にも対応しています。note マガジンや YouTube チャンネルも始めたので、よければぜひ遊びに来てください!