Merge pull request #801 from railsgirls-jp/update-device-guide

「Devise で認証機能を追加」を更新して、"Logout" リンクを Rails 7 Turbo 向けに修正する

_pages/devise.md

@@ -1,51 +1,43 @@
 ---
-layout: default
+layout: guide
 title: Devise で認証機能を追加
 permalink: devise
 ---
 
 # Devise で認証機能を追加
 
-*Created by Piotr Steininger, [@polishprince](https://twitter.com/polishprince)*
+*Created by Piotr Steininger, [@polishprince](https://twitter.com/polishprince). Updated by Ernesto Jimenez, [@ernesto_jimenez](https://twitter.com/ernesto_jimenez)*, and [Hasan Diwan](https://units.d8u.us/twitter?src`=railsgirlsGuide)*
 
 *Updated by Ernesto Jimenez, [@ernesto_jimenez](https://twitter.com/ernesto_jimenez)*
 
-** このガイドは、すでに [ Rails Girls アプリ・チュートリアル ](/app) でアプリを作った方を対象にしています。 **
+**このガイドは、すでに [ Rails Girls アプリ・チュートリアル ](/app) でアプリを作った方を対象にしています。**
 
+## *1.* devise gem を追加
 
-
-## *1.*devise gem を追加
-
-アプリの `Gemfile` を開いて、次の行を追加します。
-
-{% highlight ruby %}
-gem 'devise'
-{% endhighlight %}
-
-そして、ターミナルもしくはコマンドプロンプト(Windows用)を開いてアプリのディレクトリへ移動し、次のコマンドを実行しましょう。
+gem を追加するには、以下のコマンドを実行します。
 
 {% highlight sh %}
-bundle
+bundle add devise
+bundle install
 {% endhighlight %}
 
-gem のインストールができました。Rails のサーバーを再起動するのを忘れずに!
-
+**Rails のサーバーを再起動するのを忘れずに!**
 
-## *2.*アプリに devise をセットアップ
+## *2.* アプリに devise をセットアップ
 
-次は、先ほどのディレクトリでこのコマンドを実行しましょう。
+ターミナルで以下のコマンドを実行します。
 
 {% highlight sh %}
-rails generate devise:install
+rails g devise:install
 {% endhighlight %}
 
-## *3.*Devise の環境設定
+## *3.* Devise の環境設定
 
 environments ファイルにデフォルトの url オプションを定義します。
 `config/environments/development.rb` を開いて次の行を追加しましょう。
 
 {% highlight ruby %}
-config.action_mailer.default_url_options = { host: 'localhost:3000' }
+config.action_mailer.default_url_options = { host: "localhost", port: 3000 }
 {% endhighlight %}
 
 `end` と書かれているところの前に追加してください。
@@ -69,55 +61,60 @@ config.action_mailer.default_url_options = { host: 'localhost:3000' }
 
 また、 `app/views/ideas/show.html.erb` を開いて、
 
-{% highlight ruby %}
+{% highlight erb %}
 <p id="notice"><%= notice %></p>
 {% endhighlight %}
 
-を削除します。
+の行を削除します。
 
 同じように `app/views/comments/show.html.erb` についても削除を行います。これらの `notice` 行は `app/views/layouts/application.html.erb` ファイルに同じ行を追加したので、必要ありません。
 
-## *4.*User model をセットアップ
+## *4.* User モデルを作成
 
-User model を作るために bundled generator script を使います。
+User モデルを作るために生成用のスクリプトを実行します。
 
 {% highlight sh %}
-rails generate devise user
+rails g devise user
 rails db:migrate
 {% endhighlight %}
 
-**Coachより:** 生成された User モデルについて説明をしてください。フィールドとは何ですか？
+{% coach %}
+生成された User モデルについて説明をしてください。フィールドとは何ですか？
+{% endcoach %}
 
-## *5.*ユーザーを作成
+## *5.* 最初のユーザーを作成
 
-これでユーザを作成する準備がすべて整いました。Devise がアカウントの作成、ログイン、ログアウトなどに関するすべてのコードやルーティングを生成してくれています。
+これで最初のユーザーを作成する準備がすべて整いました。Devise がアカウントの作成、ログイン、ログアウトなどに関するすべてのコードやルーティングを生成してくれています。
 
 Rails のサーバーが起動している事を確認したら、[http://localhost:3000/users/sign_up](http://localhost:3000/users/sign_up) をブラウザで開いてユーザーを作成してください。
 
-## *6.*サインアップとログインリンクの追加
+## *6.* サインアップとログインリンクの追加
 
 あと、やらなければいけないことは、ユーザーがログインできる適切なリンク、または案内をナビゲーションバー右上のコーナーに追加することです。
 そのために、 `app/views/layouts/application.html.erb` を開いて、
 
 {% highlight erb %}
-<p class="navbar-text pull-right">
-  <% if user_signed_in? %>
-    Logged in as <strong><%= current_user.email %></strong>.
-    <%= link_to 'Edit profile', edit_user_registration_path, class: 'navbar-link' %> |
-    <%= link_to "Logout", destroy_user_session_path, method: :delete, class: 'navbar-link'  %>
-  <% else %>
-    <%= link_to "Sign up", new_user_registration_path, class: 'navbar-link'  %> |
-    <%= link_to "Login", new_user_session_path, class: 'navbar-link'  %>
-  <% end %>
+<p class="navbar-text float-right">
+<% if user_signed_in? %>
+  Logged in as <strong><%= current_user.email %></strong>.
+  <%= link_to "Edit profile", edit_user_registration_path, class: "navbar-link" %> |
+  <%= link_to "Logout", destroy_user_session_path, data: { turbo_method: :delete }, class: "navbar-link"  %>
+<% else %>
+  <%= link_to "Sign up", new_user_registration_path, class: "navbar-link"  %> |
+  <%= link_to "Login", new_user_session_path, class: "navbar-link"  %>
+<% end %>
 </p>
 {% endhighlight %}
 
 これらを、次の行の上に追加します。
 
 {% highlight erb %}
-<ul class="nav navbar-nav">
-  <li class="active"><a href="/ideas">Ideas</a></li>
-</ul>
+  <ul class="navbar-nav mr-auto">
+    <li class="nav-item active">
+      <a class="nav-link" href="/ideas">Ideas</a>
+    </li>
+    ...
+  </ul>
 {% endhighlight %}
 
 最後にログインしていない時に登録した内容を確認できないようにします。
@@ -127,17 +124,17 @@ Rails のサーバーが起動している事を確認したら、[http://localh
   before_action :authenticate_user!
 {% endhighlight %}
 
-`end` と書かれているところの前に追加してください。
+`class ApplicationController < ActionController::Base` と書かれているところの次の行に追加してください。
 
 ブラウザを開いてログインやログアウトを試してみてください。
 
-**Coachより:** `user_signed_in?` や `current_user` ヘルパーについて話してみてください。何が便利だったでしょうか？
+{% coach %}
+`user_signed_in?` や `current_user` ヘルパーについて話してみてください。どうしてそれらのヘルパーは便利なのでしょうか？
+{% endcoach %}
 
 ## 次は？
 
-* User model のその他の項目も追加しましょう。
+* User モデルにその他の項目も追加しましょう。
 * users と ideas 間のリレーションを追加しましょう。
 * それぞれ自分の ideas だけ編集と自分のコメントだけ削除できるように users に制限をかけましょう。
-* ロールやパーミッションを使うように拡張しましょう。（ CanCan のような人気の認証 gem も使ってみてください。）
-
-
+* ロールやパーミッションを使うように拡張しましょう。（CanCan のような人気の認証 gem も使ってみてください。）