もう挫折しない Ruby on Rails チュートリアルのススメ

ワタシは社内で、Ruby on Rails を使った開発に携わっています。
Ruby on Rails の概要把握のため、[Ruby on Rails Tutorial by Michael Hartl](https://railstutorial.jp/) を利用される方が多いと思いますが、完走できずに挫折したという記事をチラホラ見かけます。
色んなエッセンスが詰まっていて、とてもよい教材なのですが、内容がボリューミーなので、マジメにやろうとすると挫折へまっしぐらの状態になってしまうと思いますので、そのようにならないよう、これから始められる方の一助になればと思い、まとめてみました。

## この記事でまとめたチュートリアルの進め方について
チュートリアルのメインは、第3章から第14章までで、Twitterライクなサンプルアプリケーションの構築を経験できます。
第1章は、チュートリアルの概要とgitの使い方、第2章は肩慣らしのためのおもちゃのアプリケーションの構築についてですので、前提知識があれば、飛ばしていただいて問題ないかと思われます。

チュートリアル中では、AWS Cloud9 / Heroku / Bitbucket　などの環境が利用されていますが、私は Windows Subsystem for Linux（ Ubuntu 18.04 の環境です。）を使ってローカル開発環境で進めました。
参考として、[各章の最終状態を github にアップロード](https://github.com/y-kimura-39ra/rails_tutorial_wsl) いたしました。

チュートリアルの挫折回避のため、以下を遵守しています。

* チュートリアル中の『演習』のコードは一部書き換えが必要であったり、元の状態に戻したりして進める必要があるため、すべて飛ばしています。
* 各章の最終状態は、rails test を実行して、エラーが出ない状態になることとしています。
* とにかくサンプルアプリケーションが動作する状態になることだけを目標としています。
* コードの意味や、演習は、2周目以降にじっくり考えることにして、とにかくコードのコピペのみで全体を俯瞰するよう進めています。
* コードをコピペする場合は、前略や中略がされていない限りは、色付きの差分のみをコピペするより、ファイルの内容全体をコピペしています。（色付きでない箇所にも変更が入っている場合が散見されます）

## 検証環境について
参考までに、チュートリアルを検証したワタシの環境を載せておきます。
下記の環境で [github の Setup](https://github.com/y-kimura-39ra/rails_tutorial_wsl#setup) を実行した状態です。

* [Windows Subsystem for Linux（WSL）Ubuntu 18.04](https://www.microsoft.com/ja-jp/p/ubuntu-1804/9n9tngvndl3q)

## [第3章 ほぼ静的なページの作成](https://railstutorial.jp/chapters/static_pages?version=5.1#cha-static_pages)
home / help / about といった静的なページの作成についてのチュートリアルです。

rails server でローカルWebサーバー起動後に以下のリンクを確認しています。
http://localhost:3000/static_pages/home
http://localhost:3000/static_pages/help
http://localhost:3000/static_pages/about
http://localhost:3000

[第3章の Initialize repository でコミットしてから、第3章の最終状態の差分です。](https://github.com/y-kimura-39ra/rails_tutorial_wsl/compare/master..static-pages)

## [第4章 Rails風味のRuby](https://railstutorial.jp/chapters/rails_flavored_ruby?version=5.1#cha-rails_flavored_ruby)
この章の大部分が rails console について割かれています。
rails console の箇所は、流し読み程度で大丈夫だと思います。

[第3章の最終状態と第4章の最終状態の差分です。](https://github.com/y-kimura-39ra/rails_tutorial_wsl/compare/static-pages..rails-flavored-ruby)

## [第5章 レイアウトを作成する](https://railstutorial.jp/chapters/filling_in_the_layout?version=5.1#cha-filling_in_the_layout)
BootstrapとカスタムCSSを利用して、サンプルアプリのページのスタイルをきれいに整形するチュートリアルです。

rails server でローカルWebサーバー起動後に以下のリンクを確認しています。
http://localhost:3000
http://localhost:3000/about
http://localhost:3000/signup

[第4章の最終状態と第5章の最終状態の差分です。](https://github.com/y-kimura-39ra/rails_tutorial_wsl/compare/rails-flavored-ruby..filling-in-layout)

## [第6章 ユーザーのモデルを作成する](https://railstutorial.jp/chapters/modeling_users?version=5.1#cha-modeling_users)
ユーザーを登録するためのフォームとそのフォームのバリデーションについてのチュートリアルです。
rails console の箇所は、流し読みで結構ですが、第7章以降を進めるために [6.3.4 ユーザーの作成と認証](https://railstutorial.jp/chapters/modeling_users?version=5.1#sec-creating_and_authenticating_a_user) にて、User.create で、新規ユーザーを1人作成しておく必要があります。

[第5章の最終状態と第6章の最終状態の差分です。](https://github.com/y-kimura-39ra/rails_tutorial_wsl/compare/filling-in-layout..modeling-users)

## [第7章 ユーザー登録](https://railstutorial.jp/chapters/sign_up?version=5.1#cha-sign_up)
第6章のチュートリアルを元に、実際に、サンプルアプリのユーザーのページと、ユーザーの登録ページを作成するチュートリアルです。
[7.3.4 失敗時のテスト の演習](https://railstutorial.jp/chapters/sign_up?version=5.1#sec-exercises_a_test_for_invalid_submission) のコードなどそのままコピペすると rails test でエラーが吐かれるので、演習部分のコードを誤ってコピペしないように注意します。
『[7.4.3 実際のユーザー登録](https://railstutorial.jp/chapters/sign_up?version=5.1#sec-the_first_signup)』で登録するメールアドレス example@railstutorial.org と任意のパスワードはこの後のチュートリアルでも使用しますので、控えておくと便利です。
『7.5.1 本番環境でのSSL』から『7.5.3 本番環境へのデプロイ』は、本番環境上での設定についてですので、飛ばしていただいて構いません。

rails server でローカルWebサーバー起動後に以下のリンクを確認しています。
http://localhost:3000
http://localhost:3000/users/1
http://localhost:3000/signup
http://localhost:3000/users

[第6章の最終状態と第7章の最終状態の差分です。](https://github.com/y-kimura-39ra/rails_tutorial_wsl/compare/modeling-users..sign-up)

## [第8章 基本的なログイン機構](https://railstutorial.jp/chapters/basic_login?version=5.1#cha-basic_login)
登録済みのユーザーのためのログインページとログイン中のユーザーに関するセッションについてのチュートリアルです。

rails server でローカルWebサーバー起動後に以下のリンクを確認しています。
http://localhost:3000/login
http://localhost:3000/users/1

[第7章の最終状態と第8章の最終状態の差分です。](https://github.com/y-kimura-39ra/rails_tutorial_wsl/compare/sign-up..basic-login)

## [第9章 発展的なログイン機構](https://railstutorial.jp/chapters/advanced_login?version=5.1#cha-advanced_login)
ログアウトしていなければ、ブラウザを閉じた状態でもログイン状態を維持できるようトークンを利用するチュートリアルです。

rails server でローカルWebサーバー起動後に以下のリンクを確認しています。
http://localhost:3000/login

[第8章の最終状態と第9章の最終状態の差分です。](https://github.com/y-kimura-39ra/rails_tutorial_wsl/compare/basic-login..advanced-login)

## [第10章 ユーザーの更新・表示・削除](https://railstutorial.jp/chapters/updating_and_deleting_users?version=5.1#cha-updating_showing_and_deleting_users)
ログインしているユーザーが自分のプロフィールを更新できるようになり、ユーザー一覧のページを作成するチュートリアルです。
第10章あたりから、コードの記述量が多くなり、略されている箇所が増えてきますので、少々コードの追記箇所が解りにくくなってきます。

rails server でローカルWebサーバー起動後に以下のリンクを確認しています。
http://localhost:3000/users/1/edit
http://localhost:3000/users
http://localhost:3000/users?page=2

[第9章の最終状態と第10章の最終状態の差分です。](https://github.com/y-kimura-39ra/rails_tutorial_wsl/compare/advanced-login..updating-users)

## [第11章 アカウントの有効化](https://railstutorial.jp/chapters/account_activation?version=5.1#cha-account_activation)
新規登録ユーザーにアクティベーションを追加するチュートリアルです。
『11.2.2 送信メールのプレビュー』は、『[ローカル環境で開発している場合](https://railstutorial.jp/chapters/account_activation?version=5.1#code-development_email_settings)』のコードをコピペします。

『[11.2.4 ユーザーのcreateアクションを更新](https://railstutorial.jp/chapters/account_activation?version=5.1#sec-updating_create)』でさらにもう一人、新規にユーザーを登録します。
登録時には、コンソール上の『**<font color="red">Welcome to the Sample App! Click on the link below to activate your account:</font>**』に表示されるリンクを踏んでアクティベーションを済ませておきます。忘れると次の第12章のパスワード再設定が進められなくなりますので、要注意です。

『11.4 本番環境でのメール送信』は、本番環境上での設定についてですので、飛ばしていただいて構いません。

rails server でローカルWebサーバー起動後に以下のリンクを確認しています。
http://localhost:3000/rails/mailers/user_mailer/account_activation
http://localhost:3000/rails/mailers/user_mailer/account_activation.txt
http://localhost:3000
http://localhost:3000/users/101

[第10章の最終状態と第11章の最終状態の差分です。](https://github.com/y-kimura-39ra/rails_tutorial_wsl/compare/updating-users..account-activation)

## [第12章 パスワードの再設定](https://railstutorial.jp/chapters/password_reset?version=5.1#cha-password_reset)
登録済みユーザーが、ログインパスワードを忘れてしまった場合の、パスワードリセットを実装するチュートリアルです。
『[12.3.3 パスワードの再設定をテストする](https://railstutorial.jp/chapters/password_reset?version=5.1#sec-exercises_password_reset_test)』の演習箇所は少々長いので、誤ってコードをコピペしないように注意します。
『12.4 本番環境でのメール送信 (再掲)』は、本番環境上での設定についてですので、飛ばしていただいて構いません。

rails server でローカルWebサーバー起動後に以下のリンクを確認しています。
http://localhost:3000/login
http://localhost:3000/password_resets/new
http://localhost:3000/rails/mailers/user_mailer/password_reset
http://localhost:3000/rails/mailers/user_mailer/password_reset.txt

[第11章の最終状態と第12章の最終状態の差分です。](https://github.com/y-kimura-39ra/rails_tutorial_wsl/compare/account-activation..password-reset)

## [第13章 ユーザーのマイクロポスト](https://railstutorial.jp/chapters/user_microposts?version=5.1#cha-user_microposts)
『13.2.2 マイクロポストのサンプル』で [rails db:seed を実行した後](https://railstutorial.jp/chapters/user_microposts?version=5.1#code-sample_microposts) はメールアドレスが example@railstutorial.org の Example User は、[第11章 アカウントの有効化 リスト 11.4](https://railstutorial.jp/chapters/account_activation?version=5.1#code-seed_users_activated) の通りにログインパスワードが **foobar** に書き換えられますので、注意が必要です。

『13.4.1 基本的な画像アップロード』で [bundle installを実行](https://railstutorial.jp/chapters/user_microposts?version=5.1#code-gemfile_carrierwave) した後に、**bundle update** も実行しておきます。
実行しないと私の環境では、rails test 実行時に、下記エラーが出力されていました。

```
ERROR["test_should_redirect_create_when_not_logged_in", MicropostsControllerTest, 0.010672800010070205]
 test_should_redirect_create_when_not_logged_in#MicropostsControllerTest (0.01s)
NameError:         NameError: uninitialized constant Micropost::PictureUploader
            app/models/micropost.rb:4:in `<class:Micropost>'
            app/models/micropost.rb:1:in `<top (required)>'
```

それでも解消されない場合、[Railsチュートリアル中にNameError: uninitialized constant Micropost::PictureUploaderが出た時の対処法](https://qiita.com/yokoyan/items/0f82fc3eede75cd6db55) を参考にしてみてください。

[『13.4.3 画像のリサイズ』](https://railstutorial.jp/chapters/user_microposts?version=5.1#sec-image_resizing) では、**sudo yum install -y ImageMagick** の代わりに下記を実行します。

```
# apt install -y imagemagick
```

『13.4.4 本番環境での画像アップロード』は、本番環境上での設定についてですので、飛ばしていただいて構いません。

rails server でローカルWebサーバー起動後に以下のリンクを確認しています。
http://localhost:3000/users/1
http://localhost:3000/users/5
http://localhost:3000/users/1?page=2
http://localhost:3000

[第12章の最終状態と第13章の最終状態の差分です。](https://github.com/y-kimura-39ra/rails_tutorial_wsl/compare/password-reset..user-microposts)

## [第14章 ユーザーをフォローする](https://railstutorial.jp/chapters/following_users?version=5.1#cha-following_users)
他のユーザーをフォローする、フォローを解除する、フォローしているまたはされている状態を確認できるように実装するチュートリアルです。
[リスト 14.37: JavaScriptが無効になっていたときのための設定 ](https://railstutorial.jp/chapters/following_users?version=5.1#code-degrade_gracefully) の箇所は、バージョンによる差異なのか記述内容がチュートリアルのものと異なっているようでしたので、追記箇所のみを追記するようにしています。

rails server でローカルWebサーバー起動後に以下のリンクを確認しています。
http://localhost:3000
http://localhost:3000/users/2
http://localhost:3000/users/5
http://localhost:3000/users/1/following
http://localhost:3000/users/1/followers
http://localhost:3000/users/5/followers

[第13章の最終状態と第14章の最終状態の差分です。](https://github.com/y-kimura-39ra/rails_tutorial_wsl/compare/user-microposts..following-users)

## おわりに
ざっと詰まりそうな箇所を、一通り、取り上げてみましたが、いかがでしたでしょうか。
1週目はざっと流して、全体的な流れはつかめたかと思いますので、2周目はじっくり腰を据えて、演習問題に取り組みながら、進めていただける下地ができたかと思われます。

## 参考サイト
[Ruby on Rails Tutorial by Michael Hartl](https://railstutorial.jp/)
[Railsチュートリアル中にNameError: uninitialized constant Micropost::PictureUploaderが出た時の対処法](https://qiita.com/yokoyan/items/0f82fc3eede75cd6db55)