ラインみたいなwebアップリケーションを作ろう！！　3~4日目

#はじめに
この記事は、2019/11/1からプログラミング学習を始めた学生がプロのプログラマーになるまでのアウトプットする為の書き込みの場である。

#ユーザー登録手順

１、deviseのインストール
２、userモデルを作成する
３、deviseのビューファイルの追加
４、サインアップ機能の追加
５、ユーザー情報編集機能の追加
６、サインアウト/サインイン機能の追加
７、フラッシュメッセージの表示k脳の実装

##１、deviseのインストール
Gemfileの最後の行に追加

```Gemfile

gem  ‘devise’ 
```

bundle install
Rails g devise:install

##２、userモデルを作成する
**①モデルの作成**

Deviseのモデル作成は通常のモデルさ悪性方法と違います

**通常**

Rails g model


**devise場合**

Rails g devise user

**補足**

deviseで使用するモデルは、rails g devise <モデル名>コマンドで作成できます


**②作成したマイグレーションファイルの設定**

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

```
t.string :name, null: false, unique: true
```

これにより、マイグレーション実行時にnameカラムがNOT NULL制約・一意性制約付きで作成されます

もし、制約がわからない場合

下記のURLを参照ください

https://qiita.com/helloworld-yoppy/items/243228941a626c257eed

**③マイグレーションファイルの実行**

Rails db:migrate

##３、deviseのビューファイルの設定

あらかじめ用意してあるviewファイルをダウンロードして
カリキュラムどうりに配置していきます

今回配置したファイルを表示できるように設定する必要があります

**①今回scssファイルも追加された為**

app/assets/stylesheets/application.scss

```
@import “modeles/user”;
```
を追加します

注意

こちらのapplication.scssファイルは、各自構想が違う場合があります


**②ユーザーがログインしていない場合にログインページに移行するようにする**

application_controller.rbに、下記のヘルパーメソッドを追加

before_action :authenticate_user!

ヘルパーメソッドとは

ある動作を処理する場合にメソッド化して扱えるようにRailsにあらかじめ組み込まれた機能です

こちらを参照ください

Deviseで使えるヘルパーメソット　
https://qiita.com/tobita0000/items/866de191635e6d74e392

##4. サインアップ機能の追加

前知識


ストロングパラメーターとは

Web上から入力されてきた値を制限することで、不正なパラメータを防ぐ仕組み


deviseではサインアップ時にメールアドレスとパスワードのみを受け取るようにストロングパラメーターで設定してあるのでキーを追加しても許可されません

下記の記事がわかりやすく説明してます！！

https://qiita.com/yoshimitsu41/items/ba5487e18278822828a3


##５、ユーザー情報編集の追加

editアクションとupdateアクションによってユーザー名前とメールアドレスを編集できるようにします

**①ルーティングの編集**

```
Rails.application.routes.draw do
 devise_for :users
 root 'messages#index'
 resources :users, only: [:edit, :update]
end
```

**②viewの編集**

```shared/_side_bar.html.haml

/ ユーザー編集ページに遷移するためのパスを追加
.side-bar
  .header
    %h3.header__name
      ユーザーネーム
    %ul.header__lists
      %li.list
        = link_to do
          = icon('fas', 'pen-square', class: 'icon')
      %li.list
        = link_to edit_user_path(current_user) do
          = icon('fas', 'cog', class: 'icon')
  .groups
    .group
      .group__name
        グループ名
      .group__message
        新着メッセージ
    .group
      .group__name
        グループ名
      .group__message
        新着メッセージ
    .group
      .group__name
        グループ名
      .group__message
        新着メッセージ
```


```users/edit.html.haml


#account-page.account-page
  .account-page__inner.clearfix
    .account-page__inner--left.account-page__header
      %h2 Edit Account
      %h5 アカウントの編集
      = link_to "ログアウト", destroy_user_session_path, method: :delete, class: 'btn'
      = link_to "トップページに戻る", :back, class: 'btn'
    .account-page__inner--right.user-form
      = form_for(current_user) do |f|
        .field
          .field-label
            = f.label :name
          .field-input
            = f.text_field :name, autofocus: true
        .field
          .field-label
            = f.label :email
          .field-input
            = f.email_field :email
        .actions
          = f.submit "Update", class: 'btn'


shared/_side_bar.html.haml

.side-bar
  .header
    %h3.header__name
      = current_user.name
```

**③コントローラーの編集**

```users_controller.rb


class UsersController < ApplicationController

 def edit
 end

 def update
   if current_user.update(user_params)
     redirect_to root_path
   else
     render :edit
   end
 end

 private
 def user_params
   params.require(:user).permit(:name, :email)
 end
end
```

##６、サインアウト/サインイン機能の追加

```users/edit.html.haml

#account-page.account-page
 .account-page__inner.clearfix
   .account-page__inner--left.account-page__header
     %h2 Edit Account
     %h5 アカウントの編集
     = link_to "ログアウト", destroy_user_session_path, method: :delete, class: 'btn'
     = link_to "トップページに戻る", :back, class: 'btn'
   .account-page__inner--right.user-form
     = form_for(current_user) do |f|
       .field
         .field-label
           = f.label :name
         .field-input
           = f.text_field :name, autofocus: true
       .field
         .field-label
           = f.label :email
         .field-input
           = f.email_field :email
       .actions
         = f.submit "Update", class: 'btn'

```

```shared/_side_bar.html.haml


.side-bar
  .header
    %h3.header__name
      = current_user.name
# 〜省略〜

```
##７、フラッシュメッセージの表示k脳の実装

フラッシュメッセージとは
アクション実行後に簡単なメッセージを表示させるRailsの機能です

例えば、サインインしたときに画面の上の方に、「ログインしました」のようなメッセージである
また、デフォルトでは、英語なので、日本語かする必要があります

**①フラッシュメッセージを表示させるためのビューを作成します**
今後のために部分テンプレ化もしておきます

```app/views/layouts/_notifications.html.haml

.notification
 - flash.each do |key, value|
   = content_tag :div, value, class: key
```

```app/views/layouts/application.html.haml

!!!
%html
 %head
   %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
   %title ChatSpace
   = csrf_meta_tags
   = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
   = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
 %body
   = render 'layouts/notifications'
   = yield
```

**②フラッシュメッセージ用のCSSを作成しましょう**

colors.scssで色を変数として定義します。
そしてflash.scssで変数を用いてcolorのプロパティを設定します。

```stylesheets/config/colors.scss

$white: #fff;
$side_blue_dark: #253141;
$side_blue_light: #2f3e51;
$light_blue: #38AEF0;
$light_gray: #999;
$black: #434a54;
$alert_orange: #F35500;
```

```stylesheets/modules/flash.scss

.notification {
 .notice {
   background-color: $light_blue;
   color: $white;
   text-align: center;
 }
 .alert {
   background-color: $alert_orange;
   color: $white;
   text-align: center;
 }
}
```


```application.scss

// colors.scssとflash.scssをインポート
@import "config/colors";
@import "modules/flash";
```

**③config/locales以下に日本語のロケールファイルを追加**

https://github.com/tigrish/devise-i18n/blob/master/rails/locales/ja.yml

https://github.com/svenfuchs/rails-i18n/blob/master/rails/locale/ja.yml

**④日本語化のための記述変更**

```config/application.rb

module ChatSpace
  class Application < Rails::Application
    #〜省略〜
    config.i18n.default_locale = :ja
  end
end

```

#感想
応用に入って自分で検索する時間が増えた
これにより、かなり検索能力が上がったと思います
検索するには、検索したい内容をある程度理解する必要があります
理解していない場合、求めている情報にたどり着くまで時間がかかるため

#最後に
もっとこうした方が良いよなどご指摘頂けると幸いです