Hamlとは

Hamlとは、HTMLを簡潔かつ簡単に記述できるマークアップ言語。

Railsで使用する場合の手順

1. Hamlを導入

Gemfileの一番下にコードを記述すると、すべての環境でhamlが使用できる。
記述後は、bundle installを忘れずに 。

Gemfile

gem 'haml-rails'

2. erbファイルをHamlに変換

rails newにより、erbファイルがすでに作成されているので
拡張子がerbのファイルをhamlに変換する。

一括変換する方法

ターミナルから以下のコマンドを実行。

$ rails haml:erb2haml

ここで、

Would you like to delete the original .erb files? (This is not recommended unless you are under version control.) (y/n)

と聞かれたら、状況に応じてy/nを選択する。

元のerbファイルを削除して構わなければ yを選択しよう。

scaffold

MVCアーキテクチャではmodel,view,controlerが組み合わさって一つのリソースと考える。scaffoldを使うとリソース単位で自動生成してくれる。
scaffoldをしてサーバーを立ち上げると、その時点からuserリソースを扱える。/users/newとかできる。

migration file

これはrailsとDBが全く別物だから、migration fileに書いて〜を保存するスペース作ってくれない？とお願いをしなければいけない。なので、rails generate scaffold User name:string email:stringなどの指示を出した後はrails db:migrateをしないとDBにリソースを保存することができない。ちなみに、rails db:migrateをせずにrails sをすると、　migration pending(DBに何かお願いすることあるんじゃないの？）というエラーを出してくれる。rails db:migrateはべきとうせいである。つまり何度実行しても追加したmigration fileがなければ何も起こらない。

resources

これはルーティングのパッケージ版。本来　/users => user#indexなど基本のルーティングがパッケージングされてる。

actionのデフォルトview

例えばindexアクションを呼び出した時、renderなどのviewを呼び出す指示が書いてないことがほとんど。その場合は、アクション名からapp/views/users/index.html.erbが呼び出される仕組みになっている。

indexアクションの場合。

後半戦

bundle exec

このコマンドはgem fileを読み込んだ上でexec以下のコマンドを実行するというもの。 ex)bundle exec rails --version

テーブルの関連付け

class User < ApplicationRecord
  has_many :microposts
end

class Micropost < ApplicationRecord
  belongs_to :user
  validates :content, length: { maximum: 140 }
end

これによって、User.first.micropostsなどが実行できる。

そもそもなんで上記のコマンドでテーブルが結合される？

これはrailsのデフォルトによるもの。
micropostsテーブルにはuser_idというカラムがある。
model名_idというカラムがあり、結合すると、model名（ここではusersテーブル）のidカラムと自動的に結合してくれるから。

validation

class Micropost < ApplicationRecord
  validates :content, length: { maximum: 140 }
end

これによって投稿の文字数を140文字に制限することができる。

heroku注意点

上記のようにテーブルを作った状態でherokuにアップしようとすると、エラーになってしまう。
それはmigrationfileが開発用には適用されたが、本番環境では適応されていないから。開発環境用のDBと本番環境用のDBが違うことから起きる。

そのため、　heroku run rails db:migrate　としてあげる。

つまり、migrationfileを一つでも作ったら、git push heroku masterをした後に上記のコマンドを実行しなければいけないということ。

また、DBは違えど、Active RecordによってSQLが適切に書かれるのでそこを気にする必要はない。

はじめに

DockerとRailsを使った開発環境でpryのeditコマンドが効かなかったので対処してみたときの記録です。

※Docker環境下での話です。ローカルでは普通に動作しましたので、割愛します。

この記事が役に立つ方

• あれ？なんかeditコマンド効かなくね？と思っている方

この記事のメリット

• Docker環境下でpryのeditコマンドが使えるようになる

環境

• macOS Catalina 10.15.1
• zsh: 5.7.1
• Ruby: 2.6.5
• Rails: 5.2.3
• Docker: 19.03.5
• docker-compose: 1.24.1

pryのeditコマンドとは？

以下、公式のWikiです。
Editor integration · pry/pry Wiki · GitHub

The edit command is used to invoke your default editor. This command will load your file once you have finished editing it (unless you pass the -n or --no-reload flag to edit).

pryの画面でそのままデフォルトのエディタを開き、ファイルの編集が出来るコマンドです。

これまでpryの画面上からファイルをいじったりはしていなかったのですが、デバッグ効率が上がるかなと思ったので導入します。

【事前準備】

こちらのドキュメントに従ってDocker環境下でgem pry-railsを使うための準備は済ませておきました。

Using pry-rails with Docker · GitHub

上記ドキュメントの流れは以下の通りです。

docker-compose.yml

app:
  tty: true
  stdin_open: true

上記設定を追加。
↓

Gemfile

group: :development
  gem 'pry-rails'
end

gemを追加。
↓

docker-compose build

ビルド。
↓

docker-compose up

起動。
↓

docker ps

RailsアプリのCONTAINER IDかNAMESを確認
↓

docker attach `CONTAINER ID`か`NAMES`

↓

binding.pry
※好きなところで

これで普通にpryでデバッグ可能な状態になります。

とりあえずeditコマンド使ってみようとする

※Docker環境下です。

とりあえずeditコマンドを叩いてみます。

[1] pry(main)> edit
Error: Please set Pry.config.editor or export $VISUAL or $EDITOR

するとエラー発生。
Pry.config.editorか、環境変数$VISUALか$EDITORを設定してねという内容。

先程のWikiの、Setting the default editorのくだりに設定方法が記載されていたので、その通りに進めてみます。

1. ~/.pryrcを作成・設定

pryの設定ファイルは.pryrcです。
今回はなかったので作成しました。

以下設定方法についてです。
Editor integration · pry/pry Wiki · GitHub

今回エディタはvimを使いたかったので、以下のように設定。

~/.pryrc

Pry.config.editor = proc { |file, line| "vim #{file}:#{line}" }

該当のファイルと行に飛んでくれる仕様に例にならってみましたが、うまくいきません。

ローカルの設定ファイルは読み込まれないんですね。

2.Railsアプリのディレクトリ内に.pryrcを配置する。

下記記事を参照し、Railsアプリのルートディレクトリに.pryrcを配置してみることにしました。

docker-compose上のRailsのデバッグを行う - My External Storage

./.pryrc

Pry.config.editor = proc { |file, line| "vim #{file}:#{line}" }

※設定は先程と同様です。

もう一回試します。

[1] pry(main)> edit
Error: `vim ファイル名:行数` gave exit status: 127

別のエラー発生。
惜しい！コマンド自体は正しそうに見えますが、127なるエラーが。

何これ？と思って調べると、
「コマンドが見つからない、もしくはタイポ」
らしいと判明。

...ということは、そもそもvimがない？

3.vimをインストールする

なければいくらコマンドが正しくても、どうしようもないですよね。

調べると、こちらの記事を発見しました。
Docker — docker コンテナの中で vim が使えない場合 - Qiita

Dockerfile

apt-get install vim

上記を追記。
↓

docker-compose build

↓

docker-compose up

↓
rails cなどでpry起動。

[1] pry(main)> edit
#=>vim起動

無事起動！

おわりに

最後まで読んで頂きありがとうございました

vimがないという環境もあるのかとびっくりしましたが、ローカルとDocker環境の境目を意識するいい経験になりました

これでデバッグ効率が上がりそうです

参考にさせて頂いたサイト（いつもありがとうございます）

• ruby on rails - Setting a default editor in Pry - Stack Overflow
• Editor integration · pry/pry Wiki · GitHub
• Using pry-rails with Docker · GitHub
• docker-compose上のRailsのデバッグを行う - My External Storage
• Docker — docker コンテナの中で vim が使えない場合 - Qiita

cloneしたgemfileのバージョンにrailsのバージョンを合わせたい

該当のバージョンをインスール

$ gem install -v 5.2.1 rails

エラーが起きる

gem install -v  5.2.1 rails
ERROR:  Error installing rails:
        The last version of sprockets (>= 3.0.0) to support your Ruby & RubyGems was 3.7.2. Try installing it with `gem install sprockets -v 3.7.2` and then running the current command again
        sprockets requires Ruby version >= 2.5.0. The current ruby version is 2.4.2.198.

rubyのバージョンを変更したので、それに合わせて

gemのアップデート
$ gem update --systems
新しくインストールしたrubyの環境にbundleを入れる
$ gem install bundler

そして先ほどのエラー文を読むと

gem install sprockets -v 3.7.2

してください。となっていたのでこれを実行する。

もう一度

$ gem install -v 5.2.1 rails

rake

namespace :foo do
  task bar: :environment do |task|
    date = if ENV['ON'].present?
             Date.parse(ENV['ON'])
           else
             Time.current.in_time_zone('Tokyo').to_date.yesterday
           end

    Alice.run!(on: date)
  end
end

spec

require "rails_helper"
require "rake"

describe 'foo' do
  before(:all) do
    @rake = Rake::Application.new
    Rake.application = @rake
    Rake.application.rake_require('bar', [Rails.root.join('lib', 'tasks', 'foo')])
    Rake::Task.define_task(:environment)
  end

  before(:each) do
    @rake[task].reenable
  end

  describe  do
    let(:task) { 'foo:bar' }

    context 'when now is beggining of day at JST' do
      before do
        travel_to '2020-01-01 00:00:00'.in_time_zone('Tokyo')
      end

      it do
        expect(Alice).to receive(:run!).with(on: Date.new(2019, 12, 31))
        @rake[task].invoke
      end
    end

    context 'when now is end of day at JST' do
      before do
        travel_to '2020-01-01 23:59:59'.in_time_zone('Tokyo')
      end

      it do
        expect(Alice).to receive(:run!).with(on: Date.new(2019, 12, 31))
        @rake[task].invoke
      end
    end

    context 'when specify target date' do
      before do
        travel_to '2020-01-01 00:00:00'.in_time_zone('Tokyo')
        allow(ENV).to receive(:[]).with('ON').and_return('2020-02-01')
      end

      it do
        expect(Alice).to receive(:run!).with(on: Date.new(2020, 02, 01))
        @rake[task].invoke
      end
    end
  end
end

Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/2780

MacOSの状態を確認

Catalina以降の場合とMojave以前の場合で環境構築の設定が異なります。

OSがMojave以前の場合の環境構築

❶Command Line Toolsを用意

Command Line ToolsはWebアプリケーション開発に必要なソフトウェアをダウンロードするために必要な機能です。

$ xcode-select --install

❷Homebrewを用意

$ cd  #ホームディレクトリに移動
$ pwd #ホームディレクトリにいるかどうか確認
$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"  #コマンドを実行

※処理に時間がかかる可能性のある操作です。

「Press RETURN to continue or any other key to abort」と表示されたら、「続けるにはエンターキーを、やめるにはそれ以外の入力をしてください」という意味ですので、エンターキーを入力します。

「Password:」と表示されたら、PCを開く際に求められるパスワードを入力します。ターミナル上で文字は表示されませんが、間違いなく入力はされています。パスワードを入力し終わったらエンターキーを押します。

$ brew -v  #Homebrewがインストールされているか確認
Homebrew 1.8.0

$ brew update  #Homebrewを最新状態にする

$ sudo chown -R `whoami`:admin /usr/local/bin  #Homebrewの権限を変更

❸新しいバージョンのRubyをインストール

$ brew install rbenv ruby-build  #Homebrewを用いてrbenvとruby-buildをインストール

$ echo 'eval "$(rbenv init -)"' >> ~/.bash_profile  #PCにおけるどこのディレクトリからも使用できるようにする

$ source ~/.bash_profile  #bash_profileの変更を反映

$ brew install readline  #readlineをインストール

$ brew link readline --force  #どこからも使用できるように

# rbenvを利用してRubyをインストール
$ RUBY_CONFIGURE_OPTS="--with-readline-dir=$(brew --prefix readline)"
$ rbenv install 2.5.1

$ rbenv global 2.5.1  #利用するRubyのバージョンを指定

$ rbenv rehash  #rbenvを読み込んで変更を反映

$ ruby -v  #Rubyのバージョンを確認

先ほどインストールした2.5.1であることが表示されれば完了です。

❹MySQLを用意

MySQLは、Webアプリケーションにおけるデータを蓄積する場所のこと。

# MySQLのインストール
$ brew install mysql@5.6
$ brew reinstall https://raw.githubusercontent.com/Homebrew/homebrew-core/f171f1c74/Formula/mysql@5.6.rb

※処理に時間がかかる可能性のある操作です。

# MySQLの自動起動設定
$ mkdir ~/Library/LaunchAgents 
$ ln -sfv /usr/local/opt/mysql\@5.6/*.plist ~/Library/LaunchAgents
$ launchctl load ~/Library/LaunchAgents/homebrew.mxcl.mysql\@5.6.plist

# mysqlのコマンドをどこからでも実行できるようにする
$ echo 'export PATH="/usr/local/opt/mysql@5.6/bin:$PATH"' >> ~/.bash_profile
$ source ~/.bash_profile

# mysqlのコマンドが打てるか確認する
$ which mysql

# 以下のように表示されれば成功
/usr/local/opt/mysql@5.6/bin/mysql

❺Railsを用意

Railsというフレームワークを用いて、Rubyでアプリケーションを作成します。

$ gem install bundler  #bundlerをインストール

$ gem install rails --version='5.2.3'  #Railsをインストール

※処理に時間がかかる可能性のある操作です。

$ rbenv rehash  #rbenvを再読み込みしておく

$ rails -v  #Railsが導入できたか確認

Mojave以前の場合は、これにてWebアプリケーション開発のための環境構築は完了です。

OSがCatalina以前の場合の環境構築

# zshをデフォルトに設定
$ chsh -s /bin/zsh

# ログインシェルを表示
$ echo $SHELL

# 以下のように表示されれば成功
/bin/zsh

もしecho $SHELLコマンドで、/bin/zshと表示されなかった方は、一度ターミナルを閉じて再度開いた上でもう一度echo $SHELLコマンドを実行します。（“$”が“%”になっている可能性もあります）

❶Command Line Toolsを用意

$ xcode-select --install  #Command Line Toolsをインストール

❸Homebrewを用意

$ cd  #ホームディレクトリに移動
$ pwd #ホームディレクトリにいるかどうか確認
$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"  #コマンドを実行

※処理に時間がかかる可能性のある操作です。

「Press RETURN to continue or any other key to abort」と表示されたら、「続けるにはエンターキーを、やめるにはそれ以外の入力をしてください」という意味ですので、エンターキーを入力します。

「Password:」と表示されたら、PCを開く際に求められるパスワードを入力します。ターミナル上で文字は表示されませんが、間違いなく入力はされています。パスワードを入力し終わったらエンターキーを押します。

$ brew -v  #Homebrewがインストールされているか確認

$ brew -v
Homebrew 2.1.13

$ brew update  #Homebrewをアップデート

$ sudo chown -R `whoami`:admin /usr/local/bin  #Homebrewの権限を変更

❸新しいバージョンのRubyをインストール

$ brew install rbenv ruby-build  #Homebrewを用いてrbenvとruby-buildをインストール

$ echo 'eval "$(rbenv init -)"' >> ~/.zshrc  #PCにおけるどこのディレクトリからも使用できるようにする

$ source ~/.zshrc  #zshrcの変更を反映

$ brew install readline  #readlineをインストール

$ brew link readline --force  #どこからも使用できるように

# rbenvを利用してRubyをインストール
$ RUBY_CONFIGURE_OPTS="--with-readline-dir=$(brew --prefix readline)"
$ rbenv install 2.5.1

※処理に時間がかかる可能性のある操作です。

$ rbenv global 2.5.1  #利用するRubyのバージョンを指定

$ rbenv rehash  #rbenvを読み込んで変更を反映

$ ruby -v  #Rubyのバージョンを確認

❹MySQLを用意

# MySQLのインストール
$ brew install mysql@5.6
$ brew reinstall https://raw.githubusercontent.com/Homebrew/homebrew-core/f171f1c74/Formula/mysql@5.6.rb

※処理に時間がかかる可能性のある操作です。

# MySQLの自動起動設定
$ mkdir ~/Library/LaunchAgents 
$ ln -sfv /usr/local/opt/mysql\@5.6/*.plist ~/Library/LaunchAgents
$ launchctl load ~/Library/LaunchAgents/homebrew.mxcl.mysql\@5.6.plist

# mysqlのコマンドをどこからでも実行できるようにする
$ echo 'export PATH="/usr/local/opt/mysql@5.6/bin:$PATH"' >> ~/.zshrc
$ source ~/.zshrc

# mysqlのコマンドが打てるか確認する
$ which mysql

# 以下のように表示されれば成功
/usr/local/opt/mysql@5.6/bin/mysql

❺Railsを用意

$ gem install bundler  #bundlerをインストール

$ gem install rails --version='5.2.3'  #Railsをインストール

$ rbenv rehash  #rbenvを再読み込みしておく

$ rails -v  #Railsが導入できたか確認

Catalina以降の場合は、これにてWebアプリケーション開発のための環境構築は完了です。

require 'active_support/core_ext'


# No Time.zone setting

Time.use_zone(nil) { Time.current }
# => 2019-11-29 07:38:04 +0900

Time.use_zone(nil) { Time.current.class }
# => Time



# with Time.zone setting
# Time.current class changed Time to ActiveSupport::TimeWithZone

Time.use_zone('UTC') { Time.current }
# => Thu, 28 Nov 2019 22:38:20 UTC +00:00

Time.use_zone('UTC') { Time.current.class }
# => ActiveSupport::TimeWithZone

Time.use_zone('UTC') { Time.zone.now }
# => Thu, 28 Nov 2019 22:38:26 UTC +00:00

Time.use_zone('UTC') { Time.zone.now.class }
# => ActiveSupport::TimeWithZone



require 'active_support/testing/time_helpers'
include ActiveSupport::Testing::TimeHelpers

# Freeze time
Time.use_zone('UTC') { travel_to Time.parse('2020-01-01 00:00') }

Time.use_zone('UTC') { Time.current == Time.zone.now }
# => true


# NOTE
# Time.parse class not changed to ActiveSupport::TimeWithZone

Time.parse('2020-01-01 00:00')
# => 2020-01-01 00:00:00 +0900

Time.parse('2020-01-01 00:00').class
# => Time

Time.use_zone('UTC') { Time.zone.parse('2020-01-01 00:00') }
# => Wed, 01 Jan 2020 00:00:00 UTC +00:00

Time.use_zone('UTC') { Time.zone.parse('2020-01-01 00:00').class }
# => ActiveSupport::TimeWithZone

Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/2778

# REQUIRE : on Ruby

require 'active_support/testing/time_helpers'
# => true

require 'active_support/core_ext'
# => true

include ActiveSupport::Testing::TimeHelpers
# => Object


# Travel to JST beggining of Year

travel_to Time.use_zone('Tokyo') { Time.parse('2020-01-01 00:00') }
# => nil


# JST

Time.use_zone('Tokyo') { Time.current }
# => Wed, 01 Jan 2020 00:00:00 JST +09:00

Time.use_zone('Tokyo') { Time.zone.now }
# => Wed, 01 Jan 2020 00:00:00 JST +09:00

Time.use_zone('Tokyo') { Date.current }
# => Wed, 01 Jan 2020


# UTC


Time.use_zone('UTC') { Time.current }
# => Tue, 31 Dec 2019 15:00:00 UTC +00:00

Time.use_zone('UTC') { Time.zone.now }
# => Tue, 31 Dec 2019 15:00:00 UTC +00:00

Time.use_zone('UTC') { Date.current }
# => Tue, 31 Dec 2019


# Unix Timestamp
# are All same at any Timezone

Time.use_zone('Tokyo') { Time.zone.now.to_i }
# => 1577804400

Time.use_zone('UTC') { Time.zone.now.to_i }
# => 1577804400

Time.now.to_i
# => 1577804400

Time.current.to_i
# => 1577804400


# UTC vs JST near date change line

travel_to Time.use_zone('Tokyo') { Time.parse('2020-01-01 08:59') }

Time.use_zone('UTC') { Date.current }
# => Tue, 31 Dec 2019

travel_to Time.use_zone('Tokyo') { Time.parse('2020-01-01 09:00') }
# => nil

Time.use_zone('UTC') { Date.current }
# => Wed, 01 Jan 2020

Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/2777

require 'active_support/core_ext'


# No Time.zone setting

Time.use_zone(nil) { Time.current }
# => 2019-11-29 07:38:04 +0900

Time.use_zone(nil) { Time.current.class }
# => Time



# with Time.zone setting
# Time.current class changed Time to ActiveSupport::TimeWithZone

Time.use_zone('UTC') { Time.current }
# => Thu, 28 Nov 2019 22:38:20 UTC +00:00

Time.use_zone('UTC') { Time.current.class }
# => ActiveSupport::TimeWithZone

Time.use_zone('UTC') { Time.zone.now }
# => Thu, 28 Nov 2019 22:38:26 UTC +00:00

Time.use_zone('UTC') { Time.zone.now.class }
# => ActiveSupport::TimeWithZone



require 'active_support/testing/time_helpers'
include ActiveSupport::Testing::TimeHelpers

# Freeze time
Time.use_zone('UTC') { travel_to Time.parse('2020-01-01 00:00') }

Time.use_zone('UTC') { Time.current == Time.zone.now }
# => true


# NOTE
# Time.parse class not changed to ActiveSupport::TimeWithZone

Time.parse('2020-01-01 00:00')
# => 2020-01-01 00:00:00 +0900

Time.parse('2020-01-01 00:00').class
# => Time

Time.use_zone('UTC') { Time.zone.parse('2020-01-01 00:00') }
# => Wed, 01 Jan 2020 00:00:00 UTC +00:00

Time.use_zone('UTC') { Time.zone.parse('2020-01-01 00:00').class }
# => ActiveSupport::TimeWithZone

Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/2779

はじめに

このQiitaは、プログラミング未経験の初心者がRailsチュートリアルに取り組み
学んだことを記録、振り返るために書いていきます。

今までやったこと

Progateで

• HTML
• CSS
• Ruby
• Ruby on Rails５
• Git
• CommandLine
• SQL
• HTMLとCSSを学んだ後に一度架空のホームページの見た目だけ作成

PC環境　

• MacBook Pro Mid2012(古いです)

• macOS Mojave ver 10.14.6

エディタ

• Visual Studio Code　ver 1.40.2

最初のアプリケーション

「Hello,World」を表示するプログラム

1.ターミナルでcd..... ホームディレクトリに移動
2.cd environment.....作成したenvironmentディレクトリに移動
3.rails new.....railsアプリの骨組みを作成

ターミナルで

$ rails _5.1.6_ new hello_app

これでrails 5.1.6を使ったhello_appというファイルが作られる

rails newとは

新規ファイルの作成

RsilsはRubyを使ったフレームワークなのである程度必要なファイルなどを自動作成してくれる。

$ rails new blog_app(作りたいプロジェクト名)

これによりblog_appというファイルが作られ、必要なものが中に自動生成される。

rails newのオプション

rails newをする際に様々な条件を付けることができる

Railsのバージョンの指定

railsのバージョンを指定して作成できる

$ rails new _5.1.6_ new blog.app

5.1.6の部分に好きなバージョンを入れることで、そのバージョンで作成できる。

データベースの指定

rails new時、データベースのデフォルトはsqliteになる。
rails new した後に変更することも可能だが、最初から使うデータベースが決まっているなら最初に設定しておける。

$ rails new blog_app -database=mysql

これはMySQLを使うときのコマンド

$rails new blog_app -database=postgresql

これはPostgresqlを使うときのコマンド

そのほかにもrails new するときのオプションはたくさんある

また今度調べよう

Bundler

Bundlerは必要なgemをインストールするコマンド

$ budle

※railsにおけるgemとはrubyのライブラリのこと
rubyに必要な機能の管理場所のようなもの

通常rails newをすると最低限必要なgemは自動でbundlerしてくれる

チュートリアル通りgemの内容を変更し、bundlerを再実行する

gemはテキストエディタでhello_appディレクトリにあるgemfileで触れる

今回は下記の様にgemを書き換える

source 'https://rubygems.org'

gem 'rails',        '5.1.6'
gem 'puma',         '3.9.1'
gem 'sass-rails',   '5.0.6'
gem 'uglifier',     '3.2.0'
gem 'coffee-rails', '4.2.2'
gem 'jquery-rails', '4.3.1'
gem 'turbolinks',   '5.0.1'
gem 'jbuilder',     '2.6.4'

group :development, :test do
  gem 'sqlite3',      '1.3.13'
  gem 'byebug', '9.0.6', platform: :mri
end

group :development do
  gem 'web-console',           '3.5.1'
  gem 'listen',                '3.1.5'
  gem 'spring',                '2.0.2'
  gem 'spring-watcher-listen', '2.0.1'
end

書き換えたらターミナルでbundle

発生したエラー

You have requested:
  spring = 2.0.2 

The bundle currently has spring locked at 2.1.0.
Try running `bundle update spring`

If you are updating multiple gems in your Gemfile at once,
try passing them all to `bundle update`

あなたがリクエストしたのはspring = 2.0.2だけどspring = 2.1.0で設定してるから無理だよ！
変えるならbundle updateしてね！
的なことを言っているので

素直にbundle updateを実行
エラーは治った

そして再度bundle

正常に作動して必要なgemをインストールした

Railsサーバーの立ち上げ

$ rails server

railsはこのコマンドを入れるだけで、ローカルWebサーバーを立ち上げることができる

$ rails s

でもいいらしい

rails s をするときは別ターミナルタブで行った方が他のコマンドも打てるので良い

入力したら

http://localhost:3000/

にアクセスしてみる

サーバーの立ち上げに成功していれば

Yay! You’r on Rails! と可愛らしいイラスト付きで表示が出る。

Railsのサーバーの立ち上げができた

立ち上げること自体は本当に簡単でたった数個の記述で出来た
数行の記述でブログが作れる！みたいな記事もあったので
このお手軽さがrailsが初学者に人気の理由なのかな

Railsチュートリアル自体が最初は細かい部分が省かれている感じなので
rails全体を掴むために疑問点はメモしておき、
確認の１週目ということにして書いてある通りにさくさく進めてみよう

rubyのバージョンアップする時の方法

この記事は私の備忘録として記載していきます。
何か間違っている場合があれば、ご指摘していただけると助かります。

現在の環境

ruby 2.6.3
rails 5.2.3

目的

rubyのバージョンを2.6.5にしたいです。

環境にバージョンがあるか確認します。

$ rbenv install --list

もし、指定したいバージョンがなければ

$ brew upgrade ruby-build

をしてください。

もう一度確認で

$ rbenv install --list

rbenvでインストール

指定したいバージョンがあれば次に、rbenvでインストールをします。

$ rbenv install 2.6.５

インストールされました！！

インストールしたバージョンを使用する時

$ rbenv versions
  system
  2.4.1
  2.5.1
  2.5.3
* 2.6.3 (set by /Users/user_name/hoge/.ruby-version)
  2.6.５

• 環境全体にrubyバージョンを反映したい時

$ rbenv global 2.6.5

• 特定のプロジェクトのみ反映したい時

$ rbenv local 2.6.5

もう一度確認で

$ rbenv versions
  system
  2.4.1
  2.5.1
  2.5.3
  2.6.3 
* 2.6.5(set by /Users/user_name/hoge/.ruby-version)

反映されました。

rubyのバージョンごとにgemをインストールしなければいけないので

$ gem install bundler

インストールできました。
Gemfileに使用するバージョンを書き換えて

$ bundle install --path=vendor/bundle

できました。

rubyのバージョンを上げた後にrailsコマンドを使おうとすると、下記のようになってしまった。

ruby.rb

$ rails --version
rbenv: rails: command not found

The `rails' command exists in these Ruby versions:
  2.6.5

新しくインストールしたrubyの中にrailsというgemが入っていないために起こっているようだ。

目的

新しくインストールしたruby環境にrailsをインストールをする
まず、gemをアップデートします

$ gem update --system

次にbundlerをインストールします

$ gem install bundler

その次にrailsをインストールします

$ gem install rails

バージョンを確認します。

$ rails --version
Rails 5.2.3

バージョンが表示されたらrails コマンドが使えるようになっている

まとめ

初めてのＱiita記事でした。記事一つ書くだけでも長時間かかってしまいました。
本日はバージョンのアップデートやバージョン指定など頻繁にあるので、備忘録としてここに書かせて頂きました。
どんどん記事を書いてアウトプットしていきたいと思います。

この記事は、下記の記事を参考にさせて頂きました。

rbenvでRubyのバージョンを最新安定版にupdate

rbenvでrubyのバージョンを上げたときに The `rails' command exists in these Ruby versions: となる

とても、勉強になりました。ありがとうございます。

Rubyとは

Ruby（プログラミンング言語）

Rubyはプログラミング言語の一つであり、Javaなどの他のプログラミング言語に比べて、少ないソースコードの記述量でプログラムを組めるなどの特徴があります。（Ruby公式サイト）

Ruby on Rails

Ruby on Rails

RubyのWebアプリケーションフレームワークの一つであり、Webアプリケーションフレームワークとは、Webアプリケーションを簡単に作れるようにする骨組みのことです。
フレームワークを使用することで、開発者はより少ない労力で開発を行うことが可能になります。

Rails開発環境の構築

Rails開発ではデータベース(MySQL)やRails自体のインストールなど、まずは開発のできる環境を整える必要があります。（Rails開発環境構築）

• Homebrewのインストール・アップデート
• rbenv・ruby-buildのインストール
• Ruby ver.2.5.1のインストール
• MySQLのインストール
• MySQLのインストール

新規アプリケーションを作成

$ rails new アプリケーション名
# アプリケーションを新規作成

$ rails new アプリケーション名 -オプション名
# オプションを付けてアプリケーションを作成

Gemの追加

Gem

RailsはGem（じぇむ）と呼ばれる便利なrubyライブラリをインストールして利用することで、より簡単にアプリケーション開発をすることができます。gemには開発を効率化してくれたり、会員登録サービスが簡単にできるなど便利なものがたくさんあります。Railsアプリケーションは全てをゼロから作るのではなくgemのライブラリも利用することでより効率的に開発することができます。

Gemfileに追加したら必ずターミナルでbundle installを実行します。

gem 'Gem名'
# Gemの追加

$ bundle install
# Gemをインストール

データベースの作成

データベース

データベースとはたくさんの情報(データ)が入っている箱のようなものです。この中には様々な種類のデータが存在していて、データを格納したり、取り出すことができます。Railsでは運用環境ごとにひとつのデータベースを持っています。

運用環境

運用環境	概要
development	開発環境。通常、開発をする際に使用する環境。
production	本番環境。アプリケーションを実際にリリースする際に使用する環境。
test	テスト環境。アプリケーションの動作をテストする際に使用する環境。

database.ymlファイルの内容に基づいてデータベースを新規作成します。

$ rake db:create
# データベースの作成

# REQUIRE : on Ruby

require 'active_support/testing/time_helpers'
# => true

require 'active_support/core_ext'
# => true

include ActiveSupport::Testing::TimeHelpers
# => Object


# Travel to JST beggining of Year

travel_to Time.use_zone('Tokyo') { Time.parse('2020-01-01 00:00') }
# => nil


# JST

Time.use_zone('Tokyo') { Time.now }
# => 2020-01-01 00:00:00 +0900

Time.use_zone('Tokyo') { Time.current }
# => Wed, 01 Jan 2020 00:00:00 JST +09:00

Time.use_zone('Tokyo') { Time.zone.now }
# => Wed, 01 Jan 2020 00:00:00 JST +09:00

Time.use_zone('Tokyo') { Date.current }
# => Wed, 01 Jan 2020


# UTC


Time.use_zone('UTC') { Time.now }
# => 2020-01-01 00:00:00 +0900

Time.use_zone('UTC') { Time.current }
# => Tue, 31 Dec 2019 15:00:00 UTC +00:00

Time.use_zone('UTC') { Time.zone.now }
# => Tue, 31 Dec 2019 15:00:00 UTC +00:00

Time.use_zone('UTC') { Date.current }
# => Tue, 31 Dec 2019


# Unix Timestamp
# are All same at any Timezone

Time.use_zone('Tokyo') { Time.now.to_i }
# => 1577804400

Time.use_zone('Tokyo') { Time.zone.now.to_i }
# => 1577804400

Time.use_zone('UTC') { Time.now.to_i }
# => 1577804400

Time.use_zone('UTC') { Time.zone.now.to_i }
# => 1577804400

Time.now.to_i
# => 1577804400

Time.current.to_i
# => 1577804400


# Date.today
# Not considered Timezone with Time.zone setting
# its Ruby method refers TZ env

Time.use_zone('Tokyo') { Date.today }
# => Wed, 01 Jan 2020
Time.use_zone('UTC') { Date.today }
# => Wed, 01 Jan 2020

Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/2776

その１ではテーブルの設計図となるマイグレーションファイルにて紹介しましたが今回は「モデルについて」と「アソシエーション (関連性)」をモデルファイルへ記述する方法をカンタンに学んでいきます。

⭐️モデルについて

まずモデルファイルとは
DBとのデータのやりとりをするために重要なファイルとイメージしてください。

ファイルには
モデル(テーブル)間の関係性を記述したり、
DBにあるテーブルに直接データの保存、呼び出しを可能にする機能を基本的に備えています。

上の図では
モデルファイルからDBへ「ActiveRecord」と書かれたパイプや橋のようなものがあり、userやtweetモデルからDB内の同じ名前のテーブルに伸びています。

*ActiveRecordというのは厳密にいうとRailsに標準ライブラリとして採用されているO/Rマッパーのことです。専門用語を使わず簡単に表現すると

DBとアプリケーションとの 「　橋渡し 　or 　通訳　」

のようなものだと思ってください。

もし、モデルがないと

Railsアプリケーションではプログラミング言語「Ruby」を。
DBでは「SQL」をそれぞれ使っているので、言語の違いからそのままではやりとりができません。

そこで

とざっくりなイメージですが、ありがたいことにRailsではモデルファイル(ActiveRecord)が通訳のようにRuby→SQLに、SQL→Rubyにと言語を変換してデータベースとのやりとりを円滑に行ってくれているんです。

⭐️アソシエーション(テーブル間の関連性)

アソシエーションとは、つまり
テーブル同士の関連性のことで、テーブル間にみられる対1や対多などの関係性をモデルファイルに明示しなければいけません。

例えば下のER図の場合

中間テーブルを含む3つのテーブルがあります。
これらの関係性を各テーブルのモデルファイルに記述していきます。

まず
今回のテーブル群のモデルファイルへの記述方法は以下の3パターンを使用します。
(そのほかにもhas_oneやhas_and_belongs_to_manyなどがあり、オプションも存在しますが今回はこちらの３つのみ)

記述方法は

belongs_toやhas_oneの場合は単数、
has_manyなどは複数形で記述します。

実際にuserのモデルファイルに記述するとこのようになります。

またそのほかのモデルファイルにもアソシエーションを記述し、
さらにER図のようにイメージして書くとこのような関係性になります。

中間テーブルcourse_usersにはそれぞれ接続されているテーブルの主キー、つまりは、外部キーuser_idとcourse_idを持っていますのでこのような記述となります。

そして中間テーブルと接続しているテーブルのモデルにはそれぞれアソシエーションとして以下のように記述します。

今回はイメージを含めて基本的なもののみの紹介です。
そのほかにも便利なオプションや外部キー関連の記述もありますので徐々に学んでいきましょう。

⭐️補足:belongs_to

はじめはbelongs_toというのがちょっとわかりづらいと思いますが、考え方としてはテーブル内に外部キーを持っていた場合、そのモデルファイルにはbelongs_toを書くと思ってください。

例えば、
usesテーブルとtweetsテーブルなるものがあり、関係性が図のようだとすると

tweetsテーブルには外部キーであるuser_idを持っています。
モデルファイルには以下のように記入します。

その１ではテーブルの設計図となるマイグレーションファイルにて紹介しましたが今回は「モデルについて」と「アソシエーション (関連性)について」を基礎に学んでいきます。

⭐️モデルについて

まずモデルファイルとは
DBとのデータのやりとりをするために重要なファイルとイメージしてください。

ファイルには
モデル(テーブル)間の関係性を記述したり、
DBにあるテーブルに直接データの保存、呼び出しを可能にする機能を備えています。

上の図では
モデルからDBへ「ActiveRecord」と書かれたパイプや橋のようなものがあり、userやtweetモデルからDB内の同じ名前のテーブルに伸びています。

*ActiveRecordというのはRailsに標準ライブラリとして採用されているO/Rマッパーのことです。

専門用語を使わず簡単に表現すると

DBとアプリケーションとの 「　橋渡し 　or 　通訳　」

のようなものだと思ってください。

もし、モデルがないと

Railsではプログラミング言語「Ruby」を。
DBでは「SQL」をそれぞれ使っているので、言語の違いからそのままではやりとりができません。

そこで

Railsではモデルファイル(ActiveRecord)が通訳のようにRuby→SQLに、SQL→Rubyにと言語を変換してデータベースとのやりとりを円滑に行ってくれているんです。

⭐️アソシエーション(テーブル間の関連性)

アソシエーションとは、つまり
テーブル同士の関連性のことで、テーブル間にみられる対1や対多などの関係性をモデルファイルに明示しなければいけません。

例えば下のER図の場合

中間テーブルを含む3つのテーブルがあります。
これらの関係性を各テーブルのモデルファイルに記述していきます。

今回の記述方法は以下の3パターンを使用します。
(そのほかにもhas_oneやhas_and_belongs_to_manyなどがあり、オプションも存在しますが今回はこちらの３つのみ)

記述方法は

belongs_toやhas_oneの場合は単数、
has_manyなどは複数形で記述します。

実際にuserのモデルファイルに記述するとこのようになります。

またそのほかのモデルファイルにもアソシエーションを記述し、
さらにER図のようにイメージして書くとこのような関係性になります。

中間テーブルcourse_usersにはそれぞれ接続されているテーブルの主キー、つまりは、外部キーuser_idとcourse_idを持っていますのでこのような記述となります。

has_many through

中間テーブルと接続しているテーブルのモデルにはそれぞれアソシエーションとして以下のように記述します。

中間テーブルを通ってその先のインスタンスを複数持っていますよという記述になります。

今回も基礎的な部分を図解を用いて記載致しましたので実際の開発ではモデルファイルにもう少し細かく書いていきます。

今回の記事でモデルに関して少しでもイメージが湧いていただけたのなら幸いです。

⭐️補足:belongs_to

初見ではbelongs_toというのがちょっとわかりづらいと思いますが、考え方としてはテーブル内に外部キーを持っていた場合、そのモデルファイルにはbelongs_toを書くと思ってください。

例えば、
usesテーブルとtweetsテーブルなるものがあり、関係性が図のようだとすると

tweetsテーブルには外部キーであるuser_idを持っています。
モデルファイルには以下のように記入します。

renderメソッドをコントローラーで使う

renderを分かりやすくまとめてくれてる

ビューで使う場合と、コントローラで使う場合で動きが違うっぽい。
ビューで使う場合は(主に？)部分テンプレートとして使う。

 <%# _tweet.html.erbファイルをテンプレートとして使う場合 %>
<%= render partial: ‘tweet’ %>

となるが、
コントローラの場合は、特定のアクションのビューを呼び出す。

render action: :new <%# 同じコントローラ内のnewアクションのビューを呼び出す %>
render template: "review/new" <%# 違うコントローラ内のnewアクションのビューを呼び出す %>

redirect_toと比較して、HTTPリクエストを送らない、のが特徴らしい。

モデルインスタンス.users << current_user で特定のグループのユーザー集合にログインユーザーを追加

モデルインスタンス.save データ保存が成功したか否かを返すメソッド

「if (last_message = messages.last).present?」と記述することで、最新のメッセージを変数last_messageに代入しつつ、メッセージが保存されているかどうかで場合分けを行なう。

if文を省略して1行に書く書き方を三項演算子と呼ぶ

　条件式 ? trueの時の処理 : falseの時の処理

railsにおけるDBの値の表示

まず、DBの値にアクセスするには、コントローラかモデルでインスタンス変数を定義しておく必要がある、と自分は思い込んでいた。

ユーザー管理が必要なサービスでdeviseを適用しているならば、コントローラでのインスタンス変数定義より先にdeviseに関係するインスタンス変数とかローカル変数が定義されており、そのdeviseの変数を介してテーブル(モデル定義時にdeviseオプションをつけたテーブル)にアクセスすることが可能。
更にテーブル(モデル)同士のアソシエーションを繋いで定義しているならば、コントローラでインスタンス変数を定義せずとも、deviseの変数を介してテーブルを参照することができる。current_user.group.messageみたいな表示ができる。

current_user.groups
current_user : device経由でuserモデルを定義した時に、userテーブルと紐づいたインスタンスがcurrent_userをはじめその他の変数に定義されてる
.groups : usersテーブルからアソシエーション定義によって紐づいたgroupsテーブルの情報を取得することができる。

覚えたいことは、ビューで変数を参照したい場合でも必ずしもコントローラでインスタンス変数の定義をする必要はない、ということ。

HTTPリクエストからのルーティング⇨コントローラ⇨ビューについて

アクションに対応するレスポンスとして、ビューを表示するのみ、であったなら
コントローラにアクションメソッドを定義する必要がない。（ちゃんとビューファイルを用意しておけば)ルーティング⇨(コントローラ飛ばして)ビュー、となる。

indexアクションへオプション(通知用メッセージ)付きでリダイレクト

redirect_to ({:action => 'index'}), :notice => 'message'

カラムを追加・削除・編集したい時ってあるよね〜

テーブルを作ったはいいものの後々で必要なカラムが出てくることありますよね？
カラムの洗い出しが甘いって？そのとおり！

ではいってみよう！！

カラムの追加

ターミナルでマイグレーションファイルを作成

rails g migration Addカラム名Toテーブル名 カラム名:型

ターミナル

①
rails g migration AddTitleToTweets title:string

②
rails g migration AddDetialsToTweets title:string date:date
#複数選択も可能
#Detailsの部分は何でもOK

マイグレーションファイル

①
class AddTitleToTweets < ActiveRecord::Migration[5.2]
  def change
    add_column :tweets, :title, :string
  end
end

②
class AddTitleToTweets < ActiveRecord::Migration[5.2]
  def change
    add_column :tweets, :title, :string
    add_column :tweets, :date, :date
  end
end

いざ実行！！

ターミナル

rails db:migrate

カラムの削除

ターミナルでマイグレーションファイルを作成

rails g migration Removeカラム名Fromテーブル名 カラム名:型

ターミナル

rails g migration RemoveTitleFromTweets title:string

マイグレーションファイル

class RemoveTitleFromTweets < ActiveRecord::Migration[5.2]
  def change
    remove_column :tweets, :title, :string
  end
end

いざ実行！！

ターミナル

rails db:migrate

カラム名変更

ターミナルでマイグレーションファイルを作成
rails g migration rename_変更前のカラム名_column_to_テーブル名

ターミナル

rails g migration rename_title_column_to_tweets

changeメソッドの中に追記

rename_column :テーブル名, :変更前の名前, :変更後の名前

マイグレーションファイル

class RenameTitleColumnToTweets < ActiveRecord::Migration[5.2]
  def change
    rename_column :users, :title, :theme
  end
end

いざ実行！！

ターミナル

rails db:migrate

データ型変更

ターミナルでマイグレーションファイルを作成

rails g migration ChangeDatatypeカラム名Ofテーブル名

ターミナル

rails g migration ChangeDatatypeTitleOfTweets

マイグレーションファイル

class ChangeDatatypeTitleOfTweets < ActiveRecord::Migration[5.2]
  def change
  end
end

changeメソッドの中に追記
change_column :テーブル名, :カラム名, :新しいデータ型

マイグレーションファイル

class ChangeDatatypeTitleOfTweets < ActiveRecord::Migration[5.2]
  def change
    change_column :tweets, :title, :text
  end
end

いざ実行！！

ターミナル

rails db:migrate

ではまた！

インデックスとは

カラムにインデックスを設定することで、データ検索を高速化させることができます！

使い方

マイグレーションファイルを作成

ターミナル

rails g migration AddIndexToTweets

マイグレーションファイルに、
add_index :テーブル名, :カラム名を追記

マイグレーションファイル

class AddIndexToTweets < ActiveRecord::Migration[5.2]
  def change
    add_index :tweets, :text
  end
end

複数ver.

マイグレーションファイル

class AddIndexToTweets < ActiveRecord::Migration[5.2]
  def change
    add_index :tweets, [:text, :title]
  end
end

デメリットも

①データを保存・更新する速度が遅くなる
②データベースの容量を使う

インデックスの使い所は、
【格納するデータが多い時】
【データの検索が頻繁に行われる時】

ではまた！

カラムに制約をかけ、予期せぬデータが保存されるのを防ごう

制約	意味
NOT NULL制約	空データはダメよ
一意性制約	他と被るのはダメよ
外部キー制約	外部キーに対応するテーブルのレコードがないとダメよ

NOT NULL制約

空データは禁止
カラムの後ろにnull: falseを追記

マイグレーションファイル

class CreateTweets < ActiveRecord::Migration[5.2]
  def change
    create_table :tweets do |t|
      t.text :text, null: false
      t.timestamps
    end
  end
end

ターミナル

rails db:migrate

これでtextに値がないツイートは作れないようになりました。

一意性制約

他と同じデータは禁止
add_index :テーブル名, :カラム名, unique: trueを追記

マイグレーションファイル

class CreateTweets < ActiveRecord::Migration[5.2]
  def change
    create_table :tweets do |t|
      t.text :text
    end
    add_index :tweets, :text, unique: true
  end
end

ターミナル

rails db:migrate

これで、同じ内容のテキストは保存できなくなりました。
バルスとツイートできるのは１人だけ。早いもの勝ちとなります。

外部キー制約

外部キーに対応するテーブルのレコードがないとダメ
t.references :対応先のテーブル名, foreign_key: trueを追記

マイグレーションファイル

class CreateTweets < ActiveRecord::Migration[5.2]
  def change
    create_table :tweets do |t|
      t.text :text
      t.references :user, foreign_key: true
    end
  end
end

ターミナル

rails db:migrate

これですべてのツイートが誰かしらのユーザーにひも付きます。
迷子のツイートが現れることはありません。

また、テーブル名_idというカラムが自動で生成されます。
今回はuser_idですね。

ではまた！

Railsを学ぶ際の基礎に当たるところをここに記載しておきます。
随時更新予定(2019年11月29日)

DBを操作する言語:SQL

例:Mysql,Sqlite

CRUD
Create/Read/Update/Delete

ActiveRecordとは

Databaseの処理をRubyから簡単に行うための仕組み
SQLをうまく扱うための仕組み　ModelとDBのことをさす(厳密には違う)

例：@contacts = Contanct.all

migrationとは

DBの変更をテキストで残すことができる
それによりgitで他の人と変更を共有することができる

MVCとは

Model
View
Controller

実際の流れ

1.controllerが最初にインターネットの通信を判断する役割。どのモデルに処理を依頼するか考える
2.Modelはデータベースからデータをとる、もしくは入れる。そして再びコントローラに戻る。
3.Modelのデータが取れたらそれを表示する。それを表示するViewをコントローラーが考える。

Railsを学ぶ際の基礎に当たるところをここに記載しておきます。
随時更新予定(2019年11月29日)

DBを操作する言語:SQL

例:Mysql,Sqlite

CRUD
Create/Read/Update/Delete

ActiveRecordとは

Databaseの処理をRubyから簡単に行うための仕組み
SQLをうまく扱うための仕組み　ModelとDBのことをさす(厳密には違う)

例：@contacts = Contanct.all

migrationとは

DBの変更をテキストで残すことができる
それによりgitで他の人と変更を共有することができる

MVCとは

Model
View
Controller

実際の流れ

1.controllerが最初にインターネットの通信を判断する役割。どのモデルに処理を依頼するか考える
2.Modelはデータベースからデータをとる、もしくは入れる。そして再びコントローラに戻る。
3.Modelのデータが取れたらそれを表示する。それを表示するViewをコントローラーが考える。

主なHTTPメソッドとCRUD

HTTPとは
Hypertext Transfer Protocolとは、WebブラウザがWebサーバと通信する際に主として使用する通信プロトコルであり、インターネット・プロトコル・スイートのメンバである。

簡単にいうとホームページのファイルとかを受け渡しするときに使う約束

CRUDは？
DBとのやりとり

HTTPメソッド	CRUD	意味
Get	Select	取得する
Post	Insert	作成する
Put	Update	全更新する
Patch	Update	部分更新する
Delete	Delete	削除する

何が起こったか

db/seeds.rbの中身を変更したら、rails db:seedが失敗するようになりました。

# rails db:seed
rails aborted!
SyntaxError: /var/www/sample_app/db/seeds.rb:5: syntax error, unexpected tIDENTIFIER, expecting ')'
            admin: true)
            ^~~~~
/usr/local/bundle/gems/activesupport-5.1.6/lib/active_support/dependencies.rb:286:in `load'
...略

この後やたら長いスタックトレースが流れてきて面食らいます。

原因

原因は、db/seeds.rbで、単に項目区切りのカンマを入れ忘れていたことでした。db/seeds.rbを以下のように修正します。

db/seeds.rb

  User.create(name:                 "Example User",
              email:                "example@railstutorial.org",
              password:             "foobar",
-             password_confirmation: "foobar"
+             password_confirmation: "foobar",
              admin: true)
  ...略

# rails db:seed

今度こそrails db:seedは成功するはずです。なお、rails db:seedが正常に完了した場合は、シェルに何も表示されません。

イントロダクション

目的

この記事は、Ruby on Rails と React Native で作る web & モバイルアプリ [webアプリ編] の続編です。Ruby on Rails で作った web アプリケーションのリソースを API 経由で React Native アプリケーションから操作します。今回は以下のような web とモバイルの両方に対応したアイパス認証付きのシンプルなタスク管理システムを作っています。

React Native の演習は行いたいけど Ruby on Rails 編には興味がない方は、Ruby on Rails アプリケーションを以下より clone してデプロイするか、今のところは https://zone-web.herokuapp.com/ を生かしているので、こちらを利用してください。

フレームワーク	リポジトリ
Ruby on Rails (web)	https://github.com/ogihara-ryo/zone-web
React Native (mobile)	https://github.com/ogihara-ryo/zone-mobile

想定読者

私自身がまだモバイルアプリケーションを何もリリースしたことのない初学者であるため、初学者による初学者のための演習になっています。写経のみで進めていける演習になっていますが、多少のプログラミング全般の心得は必要になるかもしれません。私は最近 Ruby on Rails で作った web アプリを React Native アプリ対応しようと思っているのですが、この辺りの参考日本語記事が少なくて苦労しているため、同じような立場の人の助けになれれば嬉しく思います。ただ、筆者は前述の通り完全に素人なので、React Native のベストプラクティス等はまるで理解しておらず、とりあえずシンプルに動くものを作る、ぐらいのモチベーションでこの演習を作りました。そのため、技術的に正しくないコードや誤った説明が含まれている可能性があります。何かお気付きのことがありましたら編集リクエストを頂けると嬉しく思います。

もし、この記事を進めていく上で躓いた場合や理解できないことがあった場合は @OgiharaRyo までご連絡頂くか、現在300人ほど参加している技術質問 slack コミュ二ティを運営していますので、こちらで質問して頂ければと思います。(slack 招待リンク)

環境

2019年12月初旬執筆時点の最新版を使用します。

% node -v
v13.3.0

% npm -v
6.13.2

% watchman -v
4.9.0

% expo-cli -V
3.10.2

インストールに関しては先人の知恵と功績によって特に癖はないと思いますが、Mac で Homebrew が入っている環境であれば以下で大体いけます。いけなかったら何とかしてください。

% brew install node
% npm install npm@latest -g
% brew install watchman
% npm install expo-cli --global

React Native アプリケーションの開発

expo init

早速アプリケーションを作っていきましょう。まずは空っぽの React Native アプリケーションを expo init で作成します。Choose a template と言われるので blank のまま return キーで進みます。

% expo init zone-mobile          
? Choose a template: (Use arrow keys)
  ----- Managed workflow -----
❯ blank                 a minimal app as clean as an empty canvas 
  blank (TypeScript)    same as blank but with TypeScript configuration 
  tabs                  several example screens and tabs using react-navigation 
  ----- Bare workflow -----
  minimal               bare and minimal, just the essentials to get you started 
  minimal (TypeScript)  same as minimal but with TypeScript configuration 

次に <The name of your app visible on the home screen> とホームスクリーンに表示するアプリケーションの名前を尋ねられます。ここでは Zone と入力しておきましょう。

? Please enter a few initial configuration values.
  Read more: https://docs.expo.io/versions/latest/workflow/configuration/ › 50% completed
 {
   "expo": {
     "name": "<The name of your app visible on the home screen>",
     "slug": "zone-mobile"
   }
 }

起動確認

早速このまま起動してみましょう。

% expo start

ブラウザーに localhost:19002 が立ち上がります。画面左下に注目してください。

開発中アプリケーションの動作確認方法は大きく分けると、シミュレーターを使う方法と実機を使う方法の2つがあります。Xcode と Command Line Tools をインストール済みのマシンであれば、Run on iOS simulator を選択するとシミュレーターが起動します。シミュレーターから Expo アプリケーションを起動してよしなに操作すれば下記のような画面が表示されます。

実機を使う場合は、お手元のスマホでストアから Expo Client をインストールして、localhost:19002 に表示されているあなた専用の QR コードを読み込めば Expo Client アプリが起動して上記のような画面が表示されます。ちなみに私は通常 iPhone と Pixel の2台の実機を使いながら iOS と Android の両方を並行して動作確認しながら開発しています。

react-navigation

今回開発するアプリケーションは2つの画面を持ちます。1つはログインフォームを持つログイン画面、もう1つはタスク管理を行うメイン画面です。開発のはじめの第一歩としては、ログイン画面とメイン画面を用意して、お互いを行き来できるような実装を行います。前準備として、react-navigation をインストールします。react-navigation は画面間の遷移をハンドリングしてくれるライブラリです。ドキュメント に従って react-navigation 及びその依存ライブラリ react-native-gesture-handler, react-native-reanimated, react-native-screens を expo install します。

% expo install react-navigation react-native-gesture-handler react-native-reanimated react-native-screens

それではナビゲーションを実装していきます。今回は、App.js にナビゲーションを置いて、src/screens/Login.js と src/screens/Main.js を互いに遷移できるようなコードを書いていきます。まずはログイン画面とメイン画面を用意します。ただお互いの画面に遷移するためのボタンが1つだけ置いてある簡素な画面です。Button の onPress イベントで this.props.navigation.navigate('main') のようなメソッドコールを行っているのがポイントです。

src/screens/Login.js

import React from 'react';
import { View, Button } from 'react-native';

export default class Login extends React.Component {
  render() {
    return (
      <View>
        <Button
          title="ログイン"
          onPress={() => {this.props.navigation.navigate('main')}}>
        </Button>
      </View>
    );
  }
}

src/screens/Main.js

import React from 'react';
import { View, Button } from 'react-native';

export default class Main extends React.Component {
  render() {
    return (
      <View>
        <Button
          title="ログアウト"
          onPress={() => {this.props.navigation.navigate('login')}}>
        </Button>
      </View>
    );
  }
}

作った2つの画面をナビゲーターにセットします。今回は、createSwitchNavigator を使用します。

App.js

import React from 'react';
import { StyleSheet, View } from 'react-native';
import { createAppContainer, createSwitchNavigator } from 'react-navigation';

import Login from './src/screens/Login'
import Main from './src/screens/Main'

export default function App() {
  const MainNavigator = createAppContainer(
    createSwitchNavigator({
      login: { screen: Login },
      main: { screen: Main }
    })        
  )

  return (
    <View style={styles.container}>
      <MainNavigator />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

これで2画面を遷移できるアプリケーションになりました。

ログイン

それでは、本格的にログインフォームを実装していきましょう。解説は後にして、一旦全てのコードを一気に実装してしまいましょう。記事内の web アプリケーションの URL は、ご自身のアプリケーションをデプロイされていたら差し替えてください。

src/screens/Login.js

import React from 'react';
import { View, Text, Button, TextInput, ActivityIndicator, StyleSheet } from 'react-native';

export default class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = { accountId: '', password: '', loading: false, failed: false };
  }

  onSubmit() {
    this.setState({ loading: true })
    return (
      fetch(`https://zone-web.herokuapp.com/api/login.json?account_id=${this.state.accountId}&password=${this.state.password}`)
        .then((response) => response.json())
        .then((jsonData) => {
          this.setState({ loading: false })
          if (jsonData['api_token']) {
            this.props.navigation.navigate('main')
          }
          else {
            this.setState({ failed: true })
          }
        })
        .catch((error) => console.error(error))
    )
  }

  loginButton() {
    if (this.state.loading) {
      return <ActivityIndicator size="small" />
    }
    else {
      return <Button title="ログイン" onPress={() => {this.onSubmit()}} />
    }
  }

  render() {
    return (
      <View>
        {this.state.failed && <Text>ログインに失敗しました。</Text>}

        <TextInput
          style={styles.textInput}
          placeholder="アカウントID"
          onChangeText={(accountId) => this.setState({accountId})}
        />

        <TextInput
          secureTextEntry={true}
          style={styles.textInput}
          placeholder="パスワード"
          onChangeText={(password) => this.setState({password})}
        />

        {this.loginButton()}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  textInput: {
    height: 60,
    width: 300,
    paddingLeft: 20,
    margin: 10,
    borderWidth: 1,
    borderRadius: 8,
  }
});

まずは動かしてみましょう。誤ったアカウントIDやパスワードでログインを試みたらエラーメッセージが表示され、正しいアカウントIDとパスワードでログインを試みたらメイン画面へ遷移することを確認してください。

さて、今回実装したのは比較的長いコードではありますが、この Login コンポーネントが何をしているかは、各 state がどのタイミングで更新されて、何に使われているのかを知ることで全容を把握することができます。コードと読み比べてみましょう。

state	更新タイミング	用途
accountId	アカウントIDの TextInput にユーザーが入力する度に onChangeText イベントで現在の値がセットされます。	web アプリケーションのログイン API に与えるパラメーターとしてセットします。
password	パスワードの TextInput にユーザーが入力する度に onChangeText イベントで現在の値がセットされます。	web アプリケーションのログイン API に与えるパラメーターとしてセットします。
loading	web アプリケーションに fetch でリクエストを送る前に true にし、レスポンスを受け取った後に false にします。	ログインボタンが押された後、web アプリケーションと通信している間にログインボタンを ActivityIndicator (いわゆるロード中のクルクル)に差し替えることで、ユーザーに通信中であることを伝えると同時に、ログインボタンを不要に連打されないようにします。
failed	ログイン API を叩いて API トークンが返ってこなかった場合はアカウントIDかパスワードが間違っていたとして true にします。	true の場合にログインに失敗した旨をユーザーに通知します。

APIトークンの保存とログインの永続化

ここまでのコードでは、APIトークンが返ってきた場合はログインに成功したとしてナビゲーターをメイン画面に変更していますが、このAPIトークンは後のタスク操作 API をコールするために使用するのでちゃんと保存しておく必要があります。また、API トークンを一度受け取ってしまえば次回以降のアプリケーション起動時はログイン画面を挟まずにメイン画面を表示した方が親切です。今回は AsyncStorage というキーバリューストレージシステムに API トークンを保存します。

src/screens/Login.js

  import React from 'react';
- import { View, Text, Button, TextInput, ActivityIndicator, StyleSheet } from 'react-native';
+ import { View, Text, Button, TextInput, ActivityIndicator, StyleSheet, AsyncStorage } from 'react-native';

  export default class Login extends React.Component {
    constructor(props) {
      super(props);
      this.state = { accountId: '', password: '', loading: false, failed: false };
    }
+
+   async componentDidMount() {
+     if (await AsyncStorage.getItem('api_token')) {
+       this.props.navigation.navigate('main')
+     }
+   }

    onSubmit() {
      this.setState({ loading: true })
      return (
        fetch(`https://zone-web.herokuapp.com/api/login.json?account_id=${this.state.accountId}&password=${this.state.password}`)
          .then((response) => response.json())
          .then((jsonData) => {
            this.setState({ loading: false })
            if (jsonData['api_token']) {
+             AsyncStorage.setItem('api_token', jsonData['api_token']);
              this.props.navigation.navigate('main')
            }
            else {
              this.setState({ failed: true })
            }
          })
          .catch((error) => console.error(error))
      )
    }

componentDidMount は、コンポーネントがツリーに挿入された直後に呼び出されます。この時、AsyncStorage に既に API トークンが入っていた場合はナビゲーターをメイン画面に切り替えています。

ログアウト

最後に、ログアウトの実装も行いましょう。これはシンプルで、AsyncStorage から API トークンを削除してナビゲーターをログイン画面へ切り替えるだけです。

src/screens/Main.js

  import React from 'react';
- import { View, Button } from 'react-native';
+ import { View, Button, AsyncStorage } from 'react-native';

  export default class Main extends React.Component {
+   logout() {
+     AsyncStorage.removeItem('api_token');
+     this.props.navigation.navigate('login')
+   }

    render() {
      return (
        <View>
          <Button
            title="ログアウト"
-           onPress={() => {this.props.navigation.navigate('login')}}>
+           onPress={() => {this.logout()}}>
          </Button>
        </View>
      );
    }
  }

タスクの CRUD

各処理の雑な解説は後回しにして、まずは完成形です。アクションも DOM のレンダリングも全て同じファイルにまとめているので100行ほどあります。

src/screens/Main.js

import React from 'react';
import { View, FlatList, TextInput, Button, AsyncStorage, ActivityIndicator, StyleSheet } from 'react-native';
import { CheckBox } from 'react-native-elements';

export default class Main extends React.Component {
  constructor(props) {
    super(props);
    this.state = { taskName: '', tasks: [], loading: '', apiToken: '' };
  }

  async componentDidMount() {
    this.setState({ loading: true, apiToken: await AsyncStorage.getItem('api_token') })
    fetch(`https://zone-web.herokuapp.com/api/tasks.json?api_token=${this.state.apiToken}`)
      .then((response) => response.json())
      .then((jsonData) => (this.setState({ loading: false, tasks: jsonData })))
      .catch((error) => console.error(error));
  }

  submitCreateTask() {
    if (!this.state.taskName) return

    this.setState({ loading: true })
    fetch(`https://zone-web.herokuapp.com/api/tasks`, {
      method: 'POST',
      headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
      body: JSON.stringify({ api_token: this.state.apiToken, task: { name: this.state.taskName } })
    })
    .then(response => response.json())
    .then(json => { this.setState({ tasks: this.state.tasks.concat(json), taskName: '', loading: false }) })
    .catch((error) => console.error(error));
  }

  changeFinished(item) {
    item.finished = !item.finished
    this.setState({ loading: true })

    fetch(`https://zone-web.herokuapp.com/api/tasks/${item.id}`, {
      method: 'PATCH',
      headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
      body: JSON.stringify({ api_token: this.state.apiToken, task: { finished: item.finished } })
    })
    .then(response => this.setState({ loading: false }))
    .catch((error) => console.error(error));
  }

  createTaskButton() {
    if (this.state.loading) return <ActivityIndicator size="small" />
    else return <Button title="作成" onPress={() => {this.submitCreateTask()}} />
  }

  renderTasks() {
    if (this.state.loading) return <FlatList />
    else {
      return(
        <FlatList
          data={this.state.tasks}
          keyExtractor={(item) => item.id.toString()}
          renderItem={({ item }) => (
            <CheckBox title={item.name} checked={item.finished} onPress={() => this.changeFinished(item)} />
          )}
        />
      )
    }
  }

  logout() {
    AsyncStorage.removeItem('api_token');
    this.props.navigation.navigate('login')
  }

  render() {
    return (
      <View>
        <View style={styles.form}>
          <TextInput
            style={styles.textInput}
            placeholder="タスク名"
            value={this.state.taskName}
            onChangeText={(taskName) => this.setState({taskName})}
          />

          {this.createTaskButton()}
        </View>

        {this.renderTasks()}

        <View style={styles.logout}>
          <Button title="ログアウト" onPress={() => {this.logout()}} />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  form: { margin: 40 },
  textInput: {
    height: 60,
    width: 300,
    paddingLeft: 20,
    margin: 10,
    borderWidth: 1,
    borderRadius: 8,
  },
  logout: { marginBottom: 20 }
});

react-native-elements の CheckBox を利用するのでインストールします。

% expo install react-native-elements

state

まずはログイン画面と同様に Main コンポーネントの持つ各 state の動きを把握しましょう。

state	更新タイミング	用途
taskName	タスク作成フォームの TextInput にユーザーが入力する度に onChangeText イベントで現在の値がセットされます。また、タスク作成ボタンを押した時に TextInput から現在の値を空にするために空文字列をセットします。	web アプリケーションのタスク作成 API に与えるパラメーターとしてセットします。
tasks	componentDidMount で web アプリケーションのタスク一覧 API からタスク情報を取得してセットします。また、各タスクの完了状態のチェックボックスを操作した時に、該当のタスクの finished の値をチェックボックスの状態に応じて変更します。	タスク一覧の表示に使います。
loading	ログイン画面と同様、web アプリケーションに fetch でリクエストを送る前に true にし、レスポンスを受け取った後に false にします。	ログイン画面と同様、タスク一覧の取得、タスクの作成、タスクの完了状態の更新の API をコールした後、web アプリケーションと通信している間に各種 UI を ActivityIndicator に差し替えることで、ユーザーに通信中であることを伝えると同時に、不要な操作をされないようにします。この挙動は UX を損ねるので気に入らなければ外してしまってユーザーに通信していることを意識させないようにしても良いでしょう。今回は web アプリケーションとやり取りしていることを明示するために操作の度にクルクルが表示されます。
apiToken	componentDidMount で AsyncStorage から API トークンを取り出してセットします。	毎回 await AsyncStorage.getItem('api_token') してストレージアクセスするのは非効率なので、一度 API トークンを取得したら state にキャッシュしています。

表示

まずはタスク一覧の表示についてです。実際の表示部分は下記です。

  renderTasks() {
    if (this.state.loading) return <FlatList />
    else {
      return(
        <FlatList
          data={this.state.tasks}
          keyExtractor={(item) => item.id.toString()}
          renderItem={({ item }) => (
            <CheckBox title={item.name} checked={item.finished} onPress={() => this.changeFinished(item)} />
          )}
        />
      )
    }
  }

ロード中(web アプリケーションとの通信中)は空っぽの FlatList を表示し、ロード中でない場合は tasks に従ってアイテムを表示しています。React Native では、コンポーネントの state が更新された時にそのコンポーネントの render メソッドが実行されます。つまり、loading の state が更新される度にこのコンポーネントの render() が走るため、if に入ってきたり else に入ってきたりするわけですね。この FlatList には this.state.tasks を与えて CheckBox をレンダリングしていますが、this.state.tasks に値が入るのは以下の処理です。

  async componentDidMount() {
    this.setState({ loading: true, apiToken: await AsyncStorage.getItem('api_token') })
    fetch(`https://zone-web.herokuapp.com/api/tasks.json?api_token=${this.state.apiToken}`)
      .then((response) => response.json())
      .then((jsonData) => (this.setState({ loading: false, tasks: jsonData })))
      .catch((error) => console.error(error));
  }

タスクの一覧は componentDidMount で行っています。componentDidMount は、render メソッドによる DOM 挿入直後に呼び出されます。このコンポーネントでは componentDidMount で web アプリケーションからタスク一覧を取得しているのでタスク一覧表じまでの順序としては以下のようになります。

1. 初回の render で 空の FlatList を表示
2. componentDidMount で API からタスクの一覧を取得
3. 取得後に loading と tasks の state が変更されたことで再度 render が実行されてタスク一覧を表示

作成

続いてタスクの作成機能について見ていきましょう。render メソッド内のタスク作成フォーム部分は以下です。

        <View style={styles.form}>
          <TextInput
            style={styles.textInput}
            placeholder="タスク名"
            value={this.state.taskName}
            onChangeText={(taskName) => this.setState({taskName})}
          />

          {this.createTaskButton()}
        </View>

今までと同様、ロード中は ActivityIndicator のクルクルを、ロード中でない場合は作成ボタンをレンダリングします。

  createTaskButton() {
    if (this.state.loading) return <ActivityIndicator size="small" />
    else return <Button title="作成" onPress={() => {this.submitCreateTask()}} />
  }

作成ボタンの onPress イベントで呼ばれるのが以下です。タスク名の入力フィールドに何も入力されていなかった場合は何もせずに終了し、何か入力されていた場合は web アプリケーションのタスク作成 API をコールしています。レスポンスを受けたら、tasks の state に今追加したタスクの情報を詰めて、taskName を空にすることでタスク入力フォームのタスク名入力フィールド(TextInput)を空にしています。

  submitCreateTask() {
    if (!this.state.taskName) return

    this.setState({ loading: true })
    fetch(`https://zone-web.herokuapp.com/api/tasks`, {
      method: 'POST',
      headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
      body: JSON.stringify({ api_token: this.state.apiToken, task: { name: this.state.taskName } })
    })
    .then(response => response.json())
    .then(json => { this.setState({ tasks: this.state.tasks.concat(json), taskName: '', loading: false }) })
    .catch((error) => console.error(error));
  }

更新

最後はチェックボックスの状態を変更した時の完了状態更新処理です。チェックボックスのレンダリング部分は、タスク一覧を表示した時の FlatList の各アイテムの中にあります。

  renderTasks() {
    if (this.state.loading) return <FlatList />
    else {
      return(
        <FlatList
          data={this.state.tasks}
          keyExtractor={(item) => item.id.toString()}
          renderItem={({ item }) => (
            <CheckBox title={item.name} checked={item.finished} onPress={() => this.changeFinished(item)} />
          )}
        />
      )
    }
  }

CheckBox の onPress イベントで呼ばれるのが以下です。引数の item は参照渡しなので、item.finished の論理を反転すると tasks の state が更新されます。

  changeFinished(item) {
    item.finished = !item.finished
    this.setState({ loading: true })

    fetch(`https://zone-web.herokuapp.com/api/tasks/${item.id}`, {
      method: 'PATCH',
      headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
      body: JSON.stringify({ api_token: this.state.apiToken, task: { finished: item.finished } })
    })
    .then(response => this.setState({ loading: false }))
    .catch((error) => console.error(error));
  }

以上で React Native の演習は終了です。

終わりに

今回は2記事構成にて Ruby on Rails アプリケーションと React Native アプリケーションの連携を行いました。冒頭にも書きましたが、技術的に正しくないコードや誤った説明があったかもしれないので、何かお気付きのことがありましたら編集リクエストを頂けると嬉しく思います。React Native アプリケーション開発の日本語入門記事は Firebase を使ってのものが多く、既存の web アプリケーションに API を生やしつつモバイル対応するようなシチュエーションを想定した演習は少なく思えたので、本記事がどなたかの役に立てば嬉しく思います。

Ruby on Rails Advent Calendar 17日目は canecco さんの「ローカル通知に画像を表示する話」です。

ログイン機能

HTTPリクエスト（POST、GETなど）は送信後、リクエストを送信したという記録が残らないため、情報を保存することができない。
ログイン機能を実装するために、sessionメソッドと専用のコントローラを用意する。

Sessionsコントローラ

Sessionsコントローラを作成する。

$ rails generate controller Sessions new

newアクションとビューはログイン画面で使用する。

SessionsコントローラにはUsersコントローラと同様、RESTfulなルーティングを設定する。
resourcesメソッドを使ってもよいが、editやshowなどのアクションは不要なので、必要なルーティングだけを手動で設定する。

config/routes.rb

Rails.application.routes.draw do
  .
  .
  .
  get    '/login',   to: 'sessions#new'
  post   '/login',   to: 'sessions#create'
  delete '/logout',  to: 'sessions#destroy'
  resources :users
end

ルーティングは次のような状態になっている。

Sessionsコントローラ内に、空のcreateアクションとdestroyアクションを作っておく。

また、Sessionsコントローラ用のテストを名前付きルートで書き直しておく。

test/controllers/sessions_controller_test.rb

class SessionsControllerTest < ActionDispatch::IntegrationTest
  test "should get new" do
    get login_path
    assert_response :success
  end
end

ログインフォーム

新規登録フォームと同様に、ログインフォームを作成する。
フォームフィールドはメールアドレスとパスワード用だけでよい。

app/views/sessions/new.html

<% provide(:title, "Log in") %>
<h1>Log in</h1>

<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <%= form_for(:session, url: login_path) do |f| %>

      <%= f.label :email %>
      <%= f.email_field :email, class: 'form-control' %>

      <%= f.label :password %>
      <%= f.password_field :password, class: 'form-control' %>

      <%= f.submit "Log in", class: "btn btn-primary" %>
    <% end %>

    <p>New user? <%= link_to "Sign up now!", signup_path %></p>
  </div>
</div>

form_forメソッドの第一引数は:sessionとなっている（次項）。

ログイン失敗時の処理

ログイン失敗時の処理を書いていく。
ログインフォームから送信された情報は、新規登録の時と同様に、params変数にハッシュとして入っている。

params = { session: { email: "foo@bar.com", password: "foobar" } }

よって、キーを使うことでデータにアクセスできる。

params[:session][:email]
params[:session][:password]

これを使ってcreateアクションを作ると次のようになる。

app/controllers/sessions_controller.rb

  def create
    user = User.find_by(email: params[:session][:email].downcase)
    if user && user.authenticate(params[:session][:password])
      # ユーザーログイン後にユーザー情報のページにリダイレクトする
    else
      # エラーメッセージを作成する
      render 'new'
    end
  end

まず、find_byメソッドを使ってフォームに入力されたメールアドレスと一致するユーザーを探す。
ここで取得したUserオブジェクトは他のところでは使わないので、＠付きのインスタンス変数にする必要はない。
また、メールアドレスは全て小文字で保存されているので、downcaseメソッドを使うことを忘れないようにする。

次に、ユーザーが見つかれば、has_secure_passwordのauthenticateメソッドを使って、送信されたパスワードが正しいかどうかチェックする。
ユーザーが存在し、かつパスワードが合っていれば、ログインしてユーザー情報ページにリダイレクトする。
ユーザーが存在しない、またはパスワードが間違っていれば、エラーメッセージを表示して、ログインページに戻る。

エラーメッセージ

ユーザーの新規登録時には、エラーメッセージは@user.errors.full_messagesに配列として入っており、それをeachメソッドを使って取り出して表示していた。
ログインの場合にはUserオブジェクトのようなものが無いので、flashメソッドを使って表示する。

app/controllers/sessions_controller.rb

  def create
    user = User.find_by(email: params[:session][:email].downcase)
    if user && user.authenticate(params[:session][:password])
      # ユーザーログイン後にユーザー情報のページにリダイレクトする
    else
      flash[:danger] = 'Invalid email/password combination' # 本当は正しくない
      render 'new'
    end
  end

このフラッシュによるエラーメッセージにはバグがある。
フラッシュはページを移動したり再読み込みすると消えるのだが、この場合は直後に再レンダリングしていることが原因で、メッセージが表示されたままになってしまう。
これをテスト駆動開発で解決していく。

ログイン失敗時のテスト

ログイン機能用のテストを作成する。

$ rails generate integration_test sessions_users_login

Sessionsコントローラ用のテストなのに、users_loginという名前は紛らわしいと思ったので、チュートリアルから少し変えている。

フラッシュがちゃんと消えているかも含め、ログイン失敗時のテストを書く。

test/integration/users_login_test.rb

require 'test_helper'

class UsersLoginTest < ActionDispatch::IntegrationTest

  test "login with invalid information" do
    get login_path
    assert_template 'sessions/new'
    post login_path, params: { session: { email: "", password: "" } }
    assert_template 'sessions/new'
    assert_not flash.empty?
    get root_path
    assert flash.empty?
  end
end

手順は次のよう。
①ログインページに移動する。
②ログインページが表示されていることを確認する。
③無効なユーザー情報を持つparamsハッシュを送信する。
④ログインに失敗したために、ログインページが再レンダリングされたことを確認する。
⑤フラッシュによるエラーメッセージの存在を確認する。
⑥適当にページを移動する（今回はルートURL）。
⑦フラッシュによるエラーメッセージが消えていることを確認する。

最後の⑦のところで実際はフラッシュが消えずに残っているので、テストはREDになる。

これを解決するために、flashをflash.nowに書き換える。

app/controllers/sessions_controller.rb

flash.now[:danger] = 'Invalid email/password combination'

flash.nowを使うと、再レンダリングしたページでのみフラッシュが表示されるようになる。

テストがGREENとなることを確認しておく。

ログイン成功時の処理

sessionsヘルパーメソッド

ログイン機能に必要なメソッドは、Sessionsコントローラを作成した際に自動で生成される。
これをApplicationコントローラで読み込んで、どのコントローラでも使えるようにしておく。

app/controllers/application_controller.rb

class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception
  include SessionsHelper
end

log_inメソッド

sessionメソッドの中にハッシュとしてUserオブジェクトのidを入れることで、ログイン機能を実装できる。

session[:user_id] = user.id

これは様々なところで使うので、Sessionsコントローラのヘルパーメソッドとして作成する。

app/helpers/sessions_helper.rb

module SessionsHelper

  # 渡されたユーザーでログインする
  def log_in(user)
    session[:user_id] = user.id
  end
end

これを使ってcreateアクションを書き換えると、次のようになる。

app/controllers/sessions_controller.rb

def create
    user = User.find_by(email: params[:session][:email].downcase)
    if user && user.authenticate(params[:session][:password])
      log_in user
      redirect_to user
    else
      flash.now[:danger] = 'Invalid email/password combination'
      render 'new'
    end
  end

なお、redirect_to userはredirect_to user_url(user)としてもよい。

現在ログインしているユーザー

現在ログインしているユーザー、つまりsession[:user_id]に入っているidを持つユーザーを取得するために、current_userを定義する。

app/helpers/sessions_helper.rb

module SessionsHelper

  # 渡されたユーザーでログインする
  def log_in(user)
    session[:user_id] = user.id
  end

  # 現在ログイン中のユーザーを返す (いる場合)
  def current_user
    if session[:user_id]
      @current_user ||= User.find_by(id: session[:user_id])
    end
  end
end

ログインしている場合、session[:user_id]とidが一致するユーザーをfind_byメソッドで探して返す。
ここでは||=（or equals）という代入演算子が用いられている。
以下の二文は同じであり

@foo = @foo || "bar"
@foo ||= "bar"

これは「変数の値がnilなら変数に代入するが、nilでなければ代入しない (変数の値を変えない)」という操作である。

  >> @foo
  => nil
  >> @foo = @foo || "bar"
  => "bar"
  >> @foo = @foo || "baz"
  => "bar"

変数@fooに何も入っていない場合、右辺の値が代入される。
何か入っている場合、何も代入されない。

このcurrent_userが呼び出されるたびに、ユーザーを探して@current_userに代入する、という無駄な処理を省く。

ログイン時のレイアウト

ログインしている場合と、ログインしていない場合とで、レイアウトに表示するものを変更する。
例えば、すでログインしている場合は新規登録やログインページへのリンクは不要である。
また、ログインユーザーのみがアクセスできるページへのリンクを表示する。

これは埋め込みRubyとif文を使って次のように書ける。

<% if logged_in? %>
  # ログインユーザー用のリンク
<% else %>
  # ログインしていないユーザー用のリンク
<% end %>

logged_in?メソッド

ここで、ログインしているならばtrueを返し、そうでないならばfalseを返すlogged_in?ヘルパーメソッドを作成する。

app/helpers/sessions_helper.rb

module SessionsHelper

  # 渡されたユーザーでログインする
  def log_in(user)
    session[:user_id] = user.id
  end

  # 現在ログイン中のユーザーを返す (いる場合)
  def current_user
    if session[:user_id]
      @current_user ||= User.find_by(id: session[:user_id])
    end
  end

  # ユーザーがログインしていればtrue、その他ならfalseを返す
  def logged_in?
    !current_user.nil?
  end
end

変更したヘッダーのレイアウトは以下のよう。

app/views/layouts/_header.html

<header class="navbar navbar-fixed-top navbar-inverse">
  <div class="container">
    <%= link_to "sample app", root_path, id: "logo" %>
    <nav>
      <ul class="nav navbar-nav navbar-right">
        <li><%= link_to "Home", root_path %></li>
        <li><%= link_to "Help", help_path %></li>
        <% if logged_in? %>
          <li><%= link_to "Users", '#' %></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              Account <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
              <li><%= link_to "Profile", current_user %></li>
              <li><%= link_to "Settings", '#' %></li>
              <li class="divider"></li>
              <li>
                <%= link_to "Log out", logout_path, method: :delete %>
              </li>
            </ul>
          </li>
        <% else %>
          <li><%= link_to "Log in", login_path %></li>
        <% end %>
      </ul>
    </nav>
  </div>
</header>

ユーザーのプロフィールページへのリンクは以下のようであり、link_toメソッドの第二引数のcurrent_userは、やはりuser_path(current_user)とも書ける。

<li><%= link_to "Profile", current_user %></li>

ログアウト用のリンクは以下のようであり、第三引数にmethod: :deleteを渡すことで、DELETEリクエストを送信できるようにしている。

<%= link_to "Log out", logout_path, method: :delete %>

ログイン成功時のテスト

digestメソッドとテスト用ユーザー

ログイン機能をテストするために、有効なユーザー情報を持つテスト用のユーザーをfixtureファイルに用意する。
実際のアプリケーションでは、パスワードはbcryptによってハッシュ化されてUserモデルのpassword_digestカラムに保存される。
テストでこれを再現するために、文字列をbcryptと同じ方法でハッシュ化するdigestメソッドを作成する。

app/models/user.rb

class User < ApplicationRecord
  .
  .
  .
  validates :password, presence: true, length: { minimum: 6 }

  # 渡された文字列のハッシュ値を返す
  def User.digest(string)
    cost = ActiveModel::SecurePassword.min_cost ? BCrypt::Engine::MIN_COST :
                                                  BCrypt::Engine.cost
    BCrypt::Password.create(string, cost: cost)
  end
end

内容の理解は不要。
digestメソッドは個々のUserオブジェクトに対して使うものではないので、インスタンスメソッドではなくクラスメソッドで定義している。

テスト用のfixtureファイルは以下のようになる。

test/fixtures/users.yml

  michael:
    name: Michael Example
    email: michael@example.com
    password_digest: <%= User.digest('password') %>

fixtureファイルは全ての行を一段インデントしておかないと謎のエラーを吐くので注意。
また、埋め込みRubyが使用できる。

テスト

有効なユーザー情報でログインし、成功するテストを書く。

test/integration/users_login_test.rb

require 'test_helper'

class UsersLoginTest < ActionDispatch::IntegrationTest

  def setup
    @user = users(:michael)
  end
  .
  .
  .
  test "login with valid information" do
    get login_path
    assert_template 'sessions/new'
    post login_path, params: { session: { email: @user.email,
                                          password: "password" } }
    assert_redirected_to @user
    follow_redirect!
    assert_template 'users/show'

    assert_select "a[href=?]", login_path, count: 0
    assert_select "a[href=?]", logout_path
    assert_select "a[href=?]", user_path(@user)
  end
end

setupでfixtureファイルのユーザーを@userに入れておく。
fixtureファイルのユーザーはusers(ユーザー名のキー)で取得できる。
このusersはusers.ymlのusersであり、Userモデルは関係ない。
また、users[:michael]と書くのは間違いなので注意する。

テストの手順は以下のよう。
①ログインページに移動し、表示されているか確認する。
②有効なユーザー情報を持つparamsハッシュを送信する。
③ログインが成功し、ユーザーのプロフィールページにリダイレクトすることを確認する(assert_redirected_toを使う)。
④リダイレクト先に移動する。
⑤ユーザーのプロフィールページが表示されていることを確認する。
⑥ログインページへのリンクが消えていることを確認する。
⑦ログアウトページとプロフィールページへのリンクが表示されていることを確認する。

ユーザー登録時にログインする

ユーザーが新規登録をした場合に自動でログインするようにする。
Usersコントローラのcreateアクションで、新規登録に成功した場合の処理にlog_inメソッドを追加する。

app/controllers/users_controller.rb

 def create
    @user = User.new(user_params)
    if @user.save
      log_in @user
      flash[:success] = "Welcome to the Sample App!"
      redirect_to @user
    else
      render 'new'
    end
  end

ユーザー登録時のログインのテスト

is_logged_in?メソッド

ユーザーの新規登録後に自動でログインできているかのテストを書く。
ここで、ログインしているかどうかを論理値で返すis_logged_in?ヘルパーメソッドを作成する。

test/test_helper.rb

ENV['RAILS_ENV'] ||= 'test'
.
.
.
class ActiveSupport::TestCase
  # Setup all fixtures in test/fixtures/*.yml for all tests in alphabetical order.
  fixtures :all
  # Add more helper methods to be used by all tests here...
  include ApplicationHelper

  # テストユーザーがログイン中の場合にtrueを返す
  def is_logged_in?
    !session[:user_id].nil?
  end
end

このis_logged_in?ヘルパーはSessionsコントローラのlogged_in?ヘルパーメソッドと動作は同じであるが、名前が違う。
アプリケーション用のヘルパーとテスト用のヘルパーは同じ機能でも名前を変えておかないとトラブルの原因になることがあるらしい。
ところで、logged_in?メソッドではcurrent_userを使ってログインを確かめていたが、こちらではcurrent_userが使えないので、sessionを使っている。
(むこうでsessionを使ってもよいと思う)

テスト自体は、ユーザー登録用のテストに一行追加するだけで済む。

test/integration/users_signup_test.rb

require 'test_helper'

class UsersSignupTest < ActionDispatch::IntegrationTest
  .
  .
  .
  test "valid signup information" do
    get signup_path
    assert_difference 'User.count', 1 do
      post users_path, params: { user: { name:  "Example User",
                                         email: "user@example.com",
                                         password:              "password",
                                         password_confirmation: "password" } }
    end
    follow_redirect!
    assert_template 'users/show'
    assert is_logged_in?
    assert_not flash.empty?
  end
end

ログアウト機能

log_outメソッド

ログアウトするためのlog_outヘルパーメソッドを定義する。

app/helpers/sessions_helper.rb

module SessionsHelper

  # 渡されたユーザーでログインする
  def log_in(user)
    session[:user_id] = user.id
  end
  .
  .
  .
  # 現在のユーザーをログアウトする
  def log_out
    session.delete(:user_id)
    @current_user = nil
  end
end

sessionの値を削除するためには、session.delete(:user_id)とする。
session[:user_id] = nilでもよい（多分）。
current_userも忘れずにnilにしておく。

Sessionsコントローラのdestroyアクションでlog_outメソッドを使用する。

app/controllers/sessions_controller.rb

def destroy
  log_out
  redirect_to root_url
end

ログアウト後はルートURLにリダイレクトする。

ログアウト機能のテスト

ログイン成功時のテストに加筆する形で、ログアウト機能のテストを書く。

test/integration/users_login_test.rb

require 'test_helper'

class UsersLoginTest < ActionDispatch::IntegrationTest
  .
  .
  .
   test "login with valid information followed by logout" do
    get login_path
    post login_path, params: { session: { email:    @user.email,
                                          password: 'password' } }
    assert is_logged_in?
    assert_redirected_to @user
    follow_redirect!
    assert_template 'users/show'
    assert_select "a[href=?]", login_path, count: 0
    assert_select "a[href=?]", logout_path
    assert_select "a[href=?]", user_path(@user)

    # ログアウト
    delete logout_path
    assert_not is_logged_in?
    assert_redirected_to root_url
    follow_redirect!
    assert_select "a[href=?]", login_path
    assert_select "a[href=?]", logout_path,      count: 0
    assert_select "a[href=?]", user_path(@user), count: 0
  end

ログアウトのassert_selectは、ログインの逆になっている。