チャットアプリにメッセージの編集と削除ボタンをつける

# やりたいこと
現在チャットアプリを作っており、投稿したメッセージの編集と削除を行うために
まずはボタンを配置したいと思っています。またそのボタンは常時表示させるのでなく、
該当メッセージにカーソルが当たった時に表示されて、離れたら非表示にします。

# 環境
ruby 2.3.1
Rails 5.0.7.2

# 今回記載すること
今回は追記した部分だけ記載させていただきます。
他ソースは下記Githubをご参照ください。

[chat-space](https://github.com/ham357/chat-space)

# 対応したこと
それではまず、viewにボタンを配置します。ボタンはfont-awesomeのものを使います。
下記部分を追記しました。

```app/views/messages/_message.html.haml
.message{"data-id" => "#{message.id}"}
  .message__upper-info
    %p.message__upper-info__talker
      = message.user.name
    %p.message__upper-info__date
      = message.created_at.strftime("%Y/%m/%d %H:%M")
#////////////////////ここから////////////////////
    %ul.message__upper-info__menu
      %li
        = fa_icon 'pencil-square-o'
      %li
        = fa_icon 'times'
#////////////////////ここまで追記////////////////////
  .message__text
    - if message.content.present?
      %p.lower-message__content
        = message.content
    = image_tag message.image.url, class: 'lower-message__image' if message.image.present?
```

続いて、font-awesomeのscssに今回使用する情報を追加します。

```app/assets/stylesheets/_fa.scss
.fa-pencil-square-o{
  &:before {
    content: "\f044";
  }
}
.fa-times{
  &:before{
    content: "\f00d";
  }
}
```
そして、messages.scssも編集します。

```app/assets/stylesheets/_messages.scss
@@ -5,6 +5,7 @@
  overflow: scroll;

  .message {
    position: relative;　　　//追記
    padding-bottom: 40px;

    &__upper-info {
@@ -23,6 +24,31 @@
        margin-left: 10px;
      }
////////////////////ここから////////////////////
      &__menu{
        position: absolute;
        display: flex;
        display: none;
        top: -8px;
        right: 20px;
        line-height: 1;
        padding: 3px 7px;
        margin: 0 0 0 auto;
        
        li {
          padding: 0.5rem;
          border: solid .0625rem rgba(0,0,0,15);

          &:first-child{
            border-top-left-radius: .375em;
            border-bottom-left-radius: .375em;
          }
          &:last-child{
            border-top-right-radius: .375em;
            border-bottom-right-radius: .375em;
          }
        }
      }
////////////////////ここまで追記////////////////////
    }

    &__text {
```
ポイントとしては、「position: relative」「position: absolute」で配置していること。
またliタグに「&:first-child」「&:last-child」で最初と最後のボタンの角を丸くしていることです。
今後ボタンが増えた時を考えてのものです。

最後にカーソルが乗った時、離れた時のjavascriptの処理を行います。
カーソルが乗った時、その要素を取得してその子要素であるulタグを取得します。
そして、要素を表示。また要素がdisplay=flexとして横並びにしています。
これは非表示にした際にdisplayがデフォルトとなってしまうためです。
カーソルが離れた際はhideメソッドで非表示にします。

```app/assets/javascripts/mouseover_out_btn.js
$(function() {
  var message_btn;
  $('.message').mouseover(function() {
    message_btn = $(this).find('ul')
    message_btn.show();
    message_btn.css("display", "flex")
  })
  $('.message').mouseout(function() {
    message_btn = $(this).find('ul')
    message_btn.hide();
  })
}); 
```

# 結果
正常にボタン表示できました！！
![ボタン表示.gif](https://qiita-image-store.s3.amazonaws.com/0/332038/6a635d7a-280d-bb1c-2bc6-8e98ff1e9fa9.gif)

以上です。宜しくお願いします。

# 参考
[参考][[JavaScript] マウスポインタが触れた/離れたイベントを取得する（onMouseOver, onMouseOut）](https://javascript.programmer-reference.com/js-event-onmouseover-onmouseout/)
[参考][JavaScript 要素を表示/非表示にするサンプル(displayとvisibility)](https://itsakura.com/javascript-display)
[参考][position:relativeとposition:absoluteで画像や文字を重ねてみよう](https://naifix.com/relative-absolute/)
[参考][jQuery【 CSS 】display を使用した表示・非表示に関するサンプル](http://www.recipi.jp/9757#section300)
[参考][【JavaScript】マウスオーバー（ホバー）をトリガーにしたイベント](https://naruhodo.repop.jp/javascript-mouse-hover-event/)