railsチュートリアル第八章 レイアウトを変更する

レイアウトを変更する

ログイン機能の最初の具体的な応用として、ユーザーがログインしているときとそうでないときでレイアウトを変更してみましょう
ログアウト」リンク、「ユーザー設定」リンク、「ユーザー一覧」リンク、「プロフィール表示」リンクも追加します

<%= link_to "Profile", current_user %>

<%= link_to "Profile", user_path(current_user) %>

logged_in?ヘルパーメソッド

app/helpers/sessions_helper.rb

module SessionsHelper

  # 渡されたユーザーでログインする
  def log_in(user)
    session[:user_id] = user.id
    #sessionメソッドで作成した一時cookiesは自動的に暗号化される
    # ユーザーのブラウザ内の一時cookiesに暗号化済みのユーザーIDが自動で作成
  end

  # 現在ログイン中のユーザーを返す（いる場合）
  def current_user
    if session[:user_id]
    # ログインしているユーザーが有効か？
    # このどちらかの状態の場合、Cookieの有効期限をブラウザ終了時にしても、
    # Chrome側の仕様でCookieを保持し続ける
      @current_user ||= User.find_by(id: session[:user_id])
      # current_userかUser.find_by()のどちらかに入っていればいい。
    end
  end

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

レイアウトに新しいリンクを追加したので、リスト 8.19にBootstrapのドロップダウンメニュー機能7 を適用できる状態になりました。具体的には、Bootstrapに含まれるCSSのdropdownクラスやdropdown-menuなどを使っています。これらのドロップダウン機能を有効にするため、Railsのapplication.jsファイルを通して、Bootstrapに同梱されているJavaScriptライブラリの他にjQueryも読み込む必要があります

RailsのアセットパイプラインはWebpackとYarnのどちらともうまく動きます。そして上述のJavaScriptをインクルードするには、この両方が必要です。最初の手順として、jQueryとBootstrapのJavaScriptライブラリを、アプリケーションにインストールしましょう

$ yarn add jquery@3.4.1 bootstrap@3.4.1

WebpackにjQueryの設定を追加する

config/webpack/environment.js

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  })
)

module.exports = environment

必要なJavaScriptファイルをrequireまたはimportする

app/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")
import "bootstrap"

演習

1.ブラウザのcookieインスペクタ機能を使って（8.2.1.1）、セッション用のcookieを削除してみてください。ヘッダー部分にあるリンクは非ログイン状態のものになっているでしょうか? 確認してみましょう。
確認

2.もう一度ログインしてみて、ヘッダーのレイアウトが変わったことを確認してみましょう。その後、ブラウザを再起動させ、再び非ログイン状態に戻ったことも確認してみてください。注意: もしブラウザの［閉じたときの状態に戻す］機能をオンにしていると、セッション情報も復元される可能性があります。もしその機能をオンにしている場合、忘れずにオフにしておきましょう（コラム 1.2）。
確認