オリジナルアプリ開発#4

devise周りを並行して進めようと思ったら色々大変だった

前回StaticPages周りを進めていましたがレビュー待ちの間にdevise周りも進めちゃおう！と思って新たにブランチを作成し、作業を進めました。
結果的にブランチの切り方を間違ったり競合を解決してマージしたり…色々勉強になったのでOKとします！笑

前回の記事はこちら↓

hak-prg.hatenablog.jp

devise周りを並行して進めようと思ったら色々大変だった

deviceを利用したユーザー周りの作成

さてレビューを待ってる間にユーザー周りを作り始めちゃいましょう！
今、add_static_pageというブランチを作成していますが、まだmasterにマージしていないのでこのadd_static_pageから新たにブランチを切って作業していきます。
次はdevise周りの作業をしようと思いadd_deviseという名前にしました。

ちなみにdevise導入にあたっては下記のページを参考にしました。

https://qiita.com/cigalecigales/items/f4274088f20832252374qiita.com

まずはdevise:install

$ rails g devise:install

devise使ったことある方はわかると思いますがinstallを実行すると説明文が出てくるので指示通り変更していきます。

1.デフォルトのURLを指定

config/environments/development.rbに下記を追加します。

config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }

今は開発環境なので{ host: 'localhost', port: 3000 }となっていますが、プロダクション環境では実際のホストに設定する必要があるとのこと！

2.ルートURLを定義

これは前回やってますので飛ばします。
と思いましたがなんだか余計な記述があったので修正しました。

3.フラッシュメッセージを作成

app / views / layouts / application.html.erbにフラッシュメッセージを追加します。
noticeとalertを追加してね、とのことですがあいにくこの名前はBootstrapのclass名に対応していませんので、app/helpers/application_helper.rbにflashタイプをclass名に変換させるメソッドを作ります。

def bootstrap_class(flash_type)
  case flash_type
    when "alert"
      "alert-warning"
    when "notice"
      "alert-info"
    else
      flash_type.to_s
    end
 end

app/views/layouts/application.html.erbはこんな感じのものをヘッダーの下に追記

<!-- フラッシュメッセージ表示 -->
    <div class="container-fluid p-0">
      <% flash.each do |key, value| %>
        <div class="alert <%= bootstrap_class(key) %> alert-dismissible fade show" role="alert">
          <%= value %>
          <button type="button" class="close" data-dismiss="alert" aria-label="閉じる">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
      <% end %>
    </div>

これでひとまずflashメッセージが表示されるようになりました！

4.バージョンが3.2のRailsを利用している場合に必須の指示内容

バージョンは5.2.0なので不要です。

5.カスタマイズ用のビューを生成

ビューのデザインを変更するために下記のコマンドを実行します。

$ rails g devise:views

app/views/deviseフォルダが作成されたくさんファイルが生成されました！
どのファイルが何かは↑に貼ったQiitaの記事に書いてありましたので参考にさせていただきました。

ユーザーモデルの作成

deviseを使ってユーザーモデルを作成していきます。

$ rails g devise User

今回は初期設定のまま進めることにしましたのでこのままdb:migrateを実行します。

$ rails db:migrate

と思ったけどやっぱりユーザーの名前もいるだろうと思ってnameカラムも追加しました。

$ rails g migration add_name_to_users

でマイグレーションファイルを作成して、作成したファイルに以下を記述。

  def change
    add_column :users, :name, :string
  end

で、もっかい

$ rails db:migrate

これでユーザーテーブルが出来上がりました！

ここでStaticPagesのレビューが返ってきました

…と困ったことが起きました。
どうやらブランチの切り方を間違えていたようです！！

add_static_pageというブランチを先に作成しリモートにプッシュして、masterにマージする前に作業だから…といってこのブランチから新しいブランチを作ってしまったのですが、本来はmasterから切るべきで、もしStaticPages周りで開発が続く場合があったらこのブランチから切っても良い、とのことでした。

とりあえずこの場はこのまま進めてOKとのことでしたが、進め方がイメージできません…。

本来の流れはこんな感じでしょうか。

add_static_page作成→プルリクでレビュー待ち
masterから新たなブランチを切ってadd_deviseを作成する
add_static_pageの修正を経てmasterへマージ
add_deviseのプルリク〜修正してmasterへマージ
- このとき競合が発生したら解決してマージする

とりあえず修正してみる

とりあえずブランチをadd_static_pageに戻して指摘事項を修正することにしました。
指摘事項はこんな感じでした。

StaticPages指摘事項

1個ずつ直していきます。

app/views/static_pages/home.html.erb
config/routes.rb

インデント関係、エディタ上での見た目は大丈夫だったのですが、スペースとタブが混在しているのがよくなかった？ようです。

...と思ったらsublime textの設定でタブをスペースに変換する、というのがされてなかったからのようでした！
こちらを参考に直しました。

webkaru.net

app/views/layouts/_header.html.erb

ロゴのリンク先が"#"になっていたのをルートへのリンク、"/"に直しました。

app/assets/javascripts/application.js

このファイルはマニフェストと呼ばれJavaScriptやスタイルシートなどのアセットを読み込むために使用するライブラリのためにあらかじめ用意されたリストのこと。

//= require_tree .

…とはRAILS GUIDESによると

ディレクティブは記載した順に実行されますが、require_treeでインクルードされるファイルの読み込み順序は指定できません。従って、特定の読み込み順に依存しないようにする必要があります。もしどうしても特定のJavaScriptファイルを他のJavaScriptファイルよりも結合順を先にしたい場合、そのファイルへのrequireディレクティブをマニフェストの最初に置きます。requireおよび類似のディレクティブは、出力時に同じファイルを2回以上インクルードしないようになっています。

つまり、この記述により全てのアセットを読み込んでくれるんだけど、順不同に読み込むので読みこむ順序が重要な時はこの上に記述すればその順番に読み込んで２回読み込むことはありません。
とのこと。

なので、追記した下記3行は上に持ってきました。

app/assets/javascripts/static_pages.coffee

最後はいらないファイルが生成されないようにして、今まで生成したのも削除すること。
どうやらrails g controllerをした時に自動でいろんなファイルが生成されるみたいです。
今回は下記のファイルが生成されないようにしました。

coffee
- JavaScriptをRubyライクに記述できる言語とのこと
scss
helper
test

config/application.rbのmoduleの中に下記を記述しました。

config.generators do |g|
      g.assets     false
      g.helper     false
      g.test_framework false
    end

そして

$ rails g controller StaticPages home

で作成された余計なファイルを削除して終わり！
再度プッシュしました。

無事LGTMいただきました！

LGTM ＝ Looks Good To ME ＝ OK　ってことです。
OKが出たのmasterにマージ、ローカルに反映させました！

で、devise周りの続き

deviseで生成されるルーティング

deviseで生成されるデフォルトのルーティングというのがあるのですが、RESTfulでなくあまりきれいじゃないみたいですね。

easyramble.com

なのですが、とりあえず今回はこのまま使うことにして、新規登録とログインにそれぞれリンクを設定します。

new_user_registration_path → 新規登録
new_user_session_path → ログイン

追加したユーザーネームのバリデーション

新規登録時にユーザーネームを入れてもらうことにしていたので新規登録時にバリデーションをかけたいのですが、これはdeviseにないので私が勝手に作成したカラムです。
なので、未入力の際にエラーとなるようにmodels/user.rbに下記を記述しました。

validates :name, presence: true

これでからの場合エラーメッセージが出力されます。

Strong Parametersの設定

deviseのデフォルトにない「ユーザーネーム」を追加したのでStrong Parametersの設定もしたいです。
GitHubページを読むと、controllers/application_controller.rbを下記のように記述しろとのこと。

before_action :configure_permitted_parameters, if: :devise_controller?

protected

def configure_permitted_parameters
  devise_parameter_sanitizer.permit(:sign_up, keys: [:name])
end

これでnameの追加が許可されました。

ログアウトボタンを作る

ログインしてテストしたいのでログアウトもしたいです。
ということでヘッダーにログアウトのリンクを作ります。

ログインしてたら→ログアウト表示
ログインしてなかったら→新規登録およびログイン表示

にしました。

<% if user_signed_in? %>
  <li class="nav-item">
    <%= link_to 'ログアウト', destroy_user_session_path, method: :delete, class: 'nav-link' %>
  </li>
<% else %>
  <li class="nav-item">
    <%= link_to '新規登録', new_user_registration_path, class: 'nav-link' %>
  </li>
  <li class="nav-item">
    <%= link_to 'ログイン', new_user_session_path, class: 'nav-link' %>
  </li>
<% end %>