[学習用]Rails5コメント付きブログを簡単に作成してデザインも一緒にする手順1

![sampleblog4.png](https://qiita-image-store.s3.amazonaws.com/0/132580/16e64e41-1f8a-2381-6d30-59f38371a269.png)
画像はBootstrap4とFontAwesome5を入れて簡単に作ったブログの様なもの。


こちらの記事を参考に次の環境で動作させました。
https://qiita.com/schroneko/items/0208a4f16fc1e4b6f152

#実装した環境

```
Ubuntu 16.04.4
ruby 2.5.1
rails 5.0.7
gem 2.7.6
```

#まずはいつも通りアプリを作成

```
rails new myblog
cd myblog
```

#Gemfile に下記を追加

```Gemfile
gem 'execjs'
gem 'therubyracer'
gem 'bootstrap', '~> 4.1.0'
gem 'jquery-rails'
gem 'font-awesome-sass', '~> 5.0.9'
```

Bootstrap4とfont awesome5 も一緒に入れてしまいます。


#動作確認

```
$ bundle install
$ rails s
```

動作しているかどうかチェックします。

#TOPページの作成

```
$ rails g controller home index 
```

これは慣れたら作らなくても良い。
あとで、Post indexをTOPページにしても良いため。

#config/routes.rb　を編集します

```routes.rb
#root 'home#index'
root 'posts#index'
resources :posts do
  resources :comments
end
```

resources :posts do
resources :comments
これはこの後にコメントを実装するときに記入する部分ですが、先に入力してしまいます。


#scaffold Postで作成
```
$ rails g scaffold Post name:string title:string content:text
$ rake db:migrate
```

基本的な機能がつくれるはずです。

#TOPページにリンクを追加

```index.html.erb
<%= link_to "My Blog", posts_path %>
```
app/views/index.html.erb
これを編集してリンクを追加します。

#バリデーションの設定

```post.rb
# validates :name,  :presence => true
# validates :title, :presence => true, :length => { :minimum => 5 }
validates :name, presence: true, uniqueness: true, length: { minimum: 2, message: '短すぎます!'}
validates :title, presence: true, length: { minimum: 3, message: '短すぎます!'}
validates :content, presence: true, length: { minimum: 3, message: '短すぎます!'}

has_many :comments
```

app/models/post.rb　にバリデーションの設定。
has_many :comments　はこの後コメント機能を実装するのに後から入れますが
先に挿入してしまいます。


#コメントの機能を実装する

```
$ rails g model Comment commenter:string body:text post:references
$ rake db:migrate
$ rails g controller Comments
```

これだけで必要な実装は完了。

#posts_controller 追加修正
```posts_controller.rb
  def index
    @posts = Post.all.order(created_at: 'desc')
  end
```
app/controllers/posts_controller.rb のIndexを上記へ修正




#コメント機能の実装とコメントのコントローラーの作成

```show.html.erb 
<h2>コメント</h2>
<% @post.comments.each do |comment| %>
  <p>
    <%= comment.commenter %>: <%= comment.body %>
    <%= link_to '削除', [comment.post, comment],
               :confirm => 'よろしいですか？',
               :method => :delete %>

  </p>
<% end %>

<h2>コメントを書く</h2>
<%= form_for([@post, @post.comments.build]) do |f| %>
  <div class="field">
    <%= f.label :commenter %><br />
    <%= f.text_field :commenter %>
  </div>
  <div class="field">
    <%= f.label :body %><br />
    <%= f.text_area :body %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>
```

app/views/posts/show.html.erb　に追記。
書き換えではなく、show.html.erb　の下部へ追記します。
もともと記述してあるコードを消さない様に。

#comments_controller.rbに追加とハマりポイント

```comments_controller.rb
  def create
    @post = Post.find(params[:post_id])
    # @comment = @post.comments.create(params[:comment])
    @comment = @post.comments.create(comment_params)
    redirect_to post_path(@post)
  end

  def destroy
    @post = Post.find(params[:post_id])
    @comment = @post.comments.find(params[:id])
    @comment.destroy
    redirect_to post_path(@post)
  end

  private
  def comment_params
    params.require(:comment).permit(:body, :commenter)
  end
```

app/controllers/comments_controller.rb
comments_controller.rb　に下記を記述。

ここはハマった部分です。
@comment = @post.comments.create(params[:comment])
参考サイトの様に記述したところ
自分の環境ではこれだけだと不完全でエラーになってしまいました。

そのため
@comment = @post.comments.create(comment_params)
この様に書き換えて、
  private
  def comment_params
    params.require(:comment).permit(:body, :commenter)
  end
を追記しました。

#次にデザイン
##Bootstrap4を導入
既に一番初めのGemfile編集のときに記入して Bundle install済みです。

##CSSからSCSSへ変更
```
$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss
```

上記のコマンドでCSSからSCSSへ変更。
application.css → application.scss にファイル名を変更します。

##SCSSへBootstrapとfontAwesomeをimport

```application.scss
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";
```

上記を追加してください。
app/assets/stylesheets/application.scss
application.scssの中身を全部消して良いです。

##application.jsに追加

```application.js
//= require jquery3
//= require popper
//= require bootstrap-sprockets
```

app/assets/javascripts/application.jsに追記します。
これでBootstrapの導入は完了になります。

#Bootstrap4を導入したとき、エラーが出る場合

```
Sass::SyntaxError at /
File to import not found or unreadable: bootstrap-sprockets.
```

何回やってもエラーになるのでここもハマった部分。
解決方法は単純で、一通り設定が終わったらサーバーの再起動。
これで無事解決しました。

```
$ rails s -b 192.xxx.xxx.xxx -d
$ cat tmp/pids/server.pid
$ kill -9 番号
```

バックグラウンドでサーバーを動かしてると忘れやすい。
上記コマンドでバックグラウンドでサーバーを動かしている場合でも終了できる。


Railsサーバーだけ停止すれば良いです。
Vagrantや仮想サーバーごと停止する必要は御座いません。

これに沿って、あと何回か同じ手順で実装してみたいと思います。
Bootstrapを取り込んだhtmlも後ほど追記したいと思います。

#学習項目
[[Rails5学習用]コメント付きブログを簡単に作成してデザインも一緒にする手順1](https://qiita.com/tarochan/items/f6e8349868db426d6382)
　┗ブログ(掲示板)の様なものを作成します。
[[Rails5学習用]コメント付きブログを簡単に作成してデザインも一緒にする手順2](https://qiita.com/tarochan/items/fb12dd74b3e7ed2010a1)
　┗Bootstrapをテンプレートに当てはめてきれいに表示します。
[[Rails5学習用]コメント付きブログを簡単に作成してデザインも一緒にする手順3](https://qiita.com/tarochan/items/719889345c90ab6e3b59)
　┗ページネーションとテストデータを一括登録します。