Rails6 BootStrap モーダルを追加してクオリティUP!!

## はじめに
今回はtwitterウェブ版にあるような「新しい投稿」ボタンをクリックしたときにフォームがポップアップで表示されるような実装をします

## 完成イメージ

![495D80FE-AEA5-4CA6-9CCF-3F3AE66FF57D.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3333273/877a9afd-4366-ef78-a983-9fd34a39849d.jpeg)

## 開発環境、前提条件
* AWS Cloud9
* Ruby 3.1.2p20 (2022-04-12 revision 4491bb740a) [x86_64-linux]
* Rails 6.1.7.3
* Deviseのインストールが完了していて、ユーザーの新規登録やログインができる状態
* 投稿機能が実装済み(モデル、コントローラ含め)
* jQueryがインストール済み
* BootStrapがインストール済み
* FontAwesomeがインストール済み
* 投稿に関するモデルやコントローラは作成ずみ


## 使い回せるようにパーシャル化しちゃいましょう。

投稿関連フォルダにnewファイルを作成
* 新規投稿ボタン
例）app/views/...../_new_posts.html.erb

* 投稿フォーム
例）app/views/...../_form.html.erb

## ビューの記述。

```ruby:app/views/_new_posts.html.erb

# Button trigger modal
<h2><%= link_to raw('<i class="fas fa-plus-circle"></i> 新しい投稿'), "#newPostModal", class: "btn btn-custom-posts", data: {toggle: "modal"} %></h2>

# Modal
<div class="modal fade" id="newPostModal" tabindex="-1" role="dialog" aria-labelledby="newPostModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="newPostModalLabel">新しい投稿</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="閉じる">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <%= render 'posts/form', post: @post %>
      </div>
    </div>
  </div>
</div>
```

```ruby:app/views/_form.html.erb
<%= form_with(model: post, local: true, html: {class: "form"}, scope: :post) do |f| %>
  <div class="form-group">
    <%= f.label :投稿内容, class: "form-label" %>
    <%= f.text_area :content, class: "form-control-posts", placeholder: "1~140文字以内" %>
  </div>

  <div class="form-group">
    <%= f.label :画像, class: "form-label" %>
    <span class="btn btn-default btn-file">
      <i class="fas fa-images fa-lg"></i>
      <%= f.file_field :image, class: "form-control" %>
    </span>
  </div>

  <div class="actions">
    <%= f.submit "投稿", class: "btn btn-primary" %>
  </div>
<% end %>
```

## jQueryを読み込ませるよ
```ruby:app/javascript/packs/application.js
import $ from 'jquery';　  #追加
```

これで、ボタンをクリックしたときにモーダルウィンドウでフォームが表示されるようになります。

## レイアウトを整えよう


```ruby:app/assets/stylesheets/application.scss
.form-group {
  margin: 1.5rem;
}

.form-control-posts {
  border-radius: 0.25rem;
  width: 100%;
  height: 150px;
  &:focas {
    box-shadow: 0 0 0 0.2rem rgba(255, 156, 91, 0.25);
    border-color: #ff9c5b;
  }
}

.input-group-text {
  background-color: #ff9c5b;
  border-color: #ff9c5b;
  color: white;
}

.submit-btn {
  background-color: #ff9c5b;
  color: white;
  &:hover {
    background-color: #ff7e33;
    color: white;
  }
}

.btn-file {
  position: relative;
  overflow: hidden;
}

.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 100%;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  outline: none;
  background: white;
  cursor: inherit;
  display: block;
}

.btn-custom-posts {
  background-color: #ff9c5b;
  color: white;
  border-radius: 30px;
  padding: 10px 20px;
  font-weight: bold;

   &:hover {
     background-color: #ff7e33;
     color: white;
     text-decoration: none;
   }
}
```

以上で実装の完了です！！
簡単でしたね。
コメント、いいねお待ちしてます！！