素のJavaScriptを使ってtextareaの高さを、文字入力に応じて拡大縮小する方法

// textareaの高さを調整するメソッド
function autoAdjustTextarea(textarea) {
  // scrollHeightの高さをリセット
  // リセットしないと、行数が減ったときの高さを取得できないのでheightをautoで初期の高さにリセットしている(0pxでもいけた)
  // Promiseを使って、高さが再設定されてからsrollHeightを取得するようにしている
  const resetHeight = new Promise(resolve => {
    resolve((textarea.style.height = "auto"))
  })

  resetHeight.then(() => {
    const scrollHeight = textarea.scrollHeight
    textarea.style.height = scrollHeight + "px"
  })
}

// 対象のtextareaのclass
const classList = [
  ".list-title__title",
  ".list-description__description",
  ".item-title__title",
  ".item-content__content",
]

// 画面表示時に文字の行数に応じた高さをセットする
classList.forEach(className => {
  const textareaElements = document.querySelectorAll(className)

  textareaElements.forEach(textarea => {
    autoAdjustTextarea(textarea)
  })
})

// inputの変更を監視して文字の高さを自動調整する
classList.forEach(className => {
  const textareaElements = document.querySelectorAll(className)

  textareaElements.forEach(textarea => {
    textarea.addEventListener("input", () => {
      autoAdjustTextarea(textarea)
    })
  })
})