RubyonRailsでtwitter風webアプリケーションの作成 STEP1:ユーザーの登録

こんにちはジャムです。

Railsを一通り学んだので、自分自身のポートフォリオ用にTwitter風のwebアプリケーションを作成して行きます。

今回はSTEP1として、プロジェクトフォルダの立ち上げからユーザーの新規登録までやっていきます。

でわ、早速
##プロジェクトフォルダの作成
今回はそのまんまでtwitterという名にします。

```ruby:コマンドライン
$ rails new twitter #twitterという名のプロジェクトフォルダ作成
```

# ユーザーを登録するモデル、テーブルの構築




## Userモデルの作成
今回のWEBアプリのユーザー情報はメールアドレスとパスワードを設定


```ruby:コマンドライン
$ rails g model User email:string password_digest:string #userモデルの作成
$ rails db:migrate #データベースへの反映、usersテーブルの作成
```
### Gemfileにbcryptを追記
bycryptはusersテーブルにパスワードを保存する際に暗号化し、セキュリティを高めることができるgemです。

```ruby:Gemfile
gem 'bcrypt'
```
###インストール

```ruby:コマンドライン
$ bundle install
```

### userモデルにパスワード暗号化用のおまじないとバリデーションを追記
```ruby:app/models/user.rb
class User < ApplicationRecord
  validates :email, presence: true,uniqueness: true
  validates :password, presence: true
  has_secure_password
end
```
presence：Eメールを登録する際に空白だった場合エラーを返す


### ルーティングの設定


```ruby:config/routes.rb
Rails.application.routes.draw do
  resources :users
  root "users#index"
end
```

### ユーザーコントローラーの作成
index new createコントローラーとビュー作成

```ruby:コマンドライン
rails g controller Users index new create
```

### コントローラーの修正

```ruby:app/controller/users_controller.rb
class UsersController < ApplicationController

  def index
    @user = User.all 
  end

  def new
    @user = User.new
  end

  def create
    @user = User.new(user_params)
    @user.save
    redirect_to "/"
  end

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

## View関連を作成

###　全体のhtmlを構成するviewを若干修正
```erb:app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>Twitter</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  </head>

  <body>
    <%= render "shared/header" %> #ここを追記
    <div class="container">
    <%= yield %>
    </div>
  </body>
</html>
```

### ヘッダーを作成
先ほど記載した<%= render "shared/header" %>で読み込まれるファイル

```erb:app/views/shared/_header.html.erb
<nav class="navbar navbar-inverse">
  <div class="navbar-header">
    <%= link_to "Twitter style Web application","/", class: "navbar-brand" %>
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#gnavi">

      <span class="sr-only">メニュー</span><!--音声ブラウザにメニューがあることを伝えています-->
      <span class="icon-bar"></span><!--ハンバーガーメニューの三本線を設定-->
      <span class="icon-bar"></span><!--ハンバーガーメニューの三本線を設定-->
      <span class="icon-bar"></span><!--ハンバーガーメニューの三本線を設定-->

    </button>

  </div>

  <div id="gnavi" class="collapse navbar-collapse"><!--ハンバーガーメニュー内に折り畳まれる部分の設定-->
    <ul class="nav navbar-nav navbar-right">
      <li><%= link_to "新規登録",new_user_path %></li>
    </ul>
  </div>
</nav>
```
###ユーザーの一覧を表示するビューを作成
```erb:app/views/users/index.html.erb
<h3>ユーザーリスト</h3>
<ul class="list-group">
<% @user.each do |user| %>
<li class="list-group-item"><%= link_to user.email,user_path(user.id) %></li>
<% end %>
</ul>
```

### 新規登録用のビューを作成

```erb:app/views/users/new.html.erb
  <div class="row">
  <div class="col-md-6 col-md-offset-2">
    <h3 class="page-header">新規登録する</h3>
    <%= form_for(@user) do |f| %>
    <p><%= f.label :email , "メールアドレス"%></p>
    <p><%= f.email_field :email %></p>
    <p><%= f.label :password,"パスワード" %></p>
    <p><%= f.password_field :password %></p>
    <p><%= f.label :password_confirmation, "パスワード（再入力）" %></p>
    <p><%= f.password_field :password_confirmation %></p>
    <p><%= f.submit "登録する", class: "btn btn-primary" %></p>
    <% end %>
  </div>
</div>
```

## bootstrapの導入
### Gemfaiに追記
```ruby:Gemfile
gem 'bootstrap-sass'
gem 'jquery-rails'
```

### インストール
```ruby:コマンドライン
$ bundle install
```

### custom.scssを作成し、以下の内容を追記
```css:app/assets/stylesheets/custom.scss
@import "bootstrap-sprockets";
@import "bootstrap";

@media screen and (min-width: 500px) {
   /*　画面サイズ 500px以上で適用　*/
   input {width:600px;}
   textarea {
     width:600px;
     height:300px;
   }
 }

@media screen and (max-width: 499px) {
   /*　画面サイズ 499pxまで適用　*/
   input {width:300px;}
   textarea {
     width:300px;
     height:200px;
   }
 }

 .btn {
   margin-top:20px;
 }

 a {
   text-decoration:none;
 }

 a:hover {
   color:red;
 }

 .badge a {
   color:white;
 }

```

### jqueryの設定追記
```ruby:app/assets/javascripts/application.js
//= require jquery3
//= require bootstrap-sprockets
```


### 一旦、ブラウザで確認

```ruby:コマンドライン
$ rails s -b 192.168.33.11 -d #192.168.33.11はipアドレスを確認してください
```
###ブラウザを開いて192.168.33.11:3000にアクセス

![スクリーンショット 2019-05-21 21.32.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420746/ade1a718-5ae0-1c43-d3b7-acb5997a63f2.png)

###新規登録をクリック

![スクリーンショット 2019-05-21 21.33.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420746/53f83f0b-31ee-de6f-ee8f-5148d1b6523a.png)

### 登録したユーザーが表示される

![スクリーンショット 2019-05-21 21.34.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420746/defcd887-b6b6-7af0-eae1-25306159d759.png)

今回はここまで

次回はユーザーの編集、削除機能の実装をします。[コチラ](https://qiita.com/JUM22676603/items/929113257bbb12d7008d)