はじめに

textareaの高さが固定の場合、改行していくと前の文章が埋もれていってしまい、かなりUXが悪い。
これを改善するために、Javascriptを導入し、改行に合わせて高さが自動で変わるようにしていく。
意外と一連の流れを記載している記事が少なかったため、かなり殴り書きだが投稿する。ただし、自身が実施した流れのため環境によって要不要がある。
使用環境は以下の通りである。

No	項目	内容
1	OS	Mac
2	Ruby	2.6.3
3	rails	6.0.4
4	turbolinks	5.2.0
5	webpacker	4.0.7

変更前(右のスクロールバーが出る)

完成イメージ（スクロールバーで遡らなくても高さ自体が変わるため見やすい）

ちなみに上のフォームのコードは下記のように実装している。

app/views/shared/_micropost_form.html.erb

# @micropostは一覧表示したい投稿データを渡す
<%= form_with(model: @micropost, local: false) do |f| %>
  <%= render 'shared/error_messages', object: f.object %>
  <div class="field">
    <%= f.label :title, '投稿タイトル' %>
    <%= f.text_field :title, class: 'form-control' %>
　　　　　　　　# 以下が該当のコード
    <%= f.label :content, '投稿文' %>
    <%= f.text_area :content %>

  </div>
  <%= f.submit "Post", class: "btn btn-primary" %>
<% end %>

事前準備

下記のコードを書くことで、全てのページにjavascriptが読み込まれるようになっている。

app/views/layouts/application.html.erb

<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

app/javascript/userディレクトリ、app/javascript/user/custom.jsファイルを作成する。

ターミナル

$ mkdir app/javascript/user
$ touch app/javascript/user/custom.js

また、下記のコードを書くことで、app/javascript/user/custom.jsを読み込むことを明示する。
※packの配下にcustom.jsを作らない。

app/javascript/packs/application.js

// app/javascript　を起点に記載
require ('user/custom')

実装

custom.jsにtextareaの高さ自動調整用のコードを記載する。

app/javascript/user/custom.js

// textarea の高さ自動調整

$(function() {
  var $textarea = $('#micropost_content');
  var lineHeight = parseInt($textarea.css('lineHeight'));
  $textarea.on('input', function(e) {
    var lines = ($(this).val() + '\n').match(/\n/g).length;
    $(this).height(lineHeight * lines);
  });
  console.log($textarea)
});

もう一度WEBページを開いてみると、改行によって高さが変わるようになった。
ちなみにWEBページの検証ツールでHTMLを見てみると、変更後にはstyleが追加され、改行するたびに数値が大きくなる、

生成されたHTML（変更前）

<textarea name="micropost[content]" id="micropost_content"></textarea>

生成されたHTML（変更後）

<textarea name="micropost[content]" id="micropost_content" style="height: 178px;"></textarea>

【追記_20220807】一度リロードしないとjsが反応しない

一度リロードしないとjsが反応しない
上記記事で後で発覚したjsが反応しないことの対策を行ったので、参照いただきたい。
簡単に言うと、今回のtext_areaのページに飛ぶリンクタグに"turbolinks" => falseを追加し、turbolinksを殺すことで、jsの関数を発火させることができた。

参考文献