🐣 脱J/Vanilla
作成日: 2022/02/26
3

脱jQueryに成功しました。
Vanilla化に成功です

*なぜ素の JS のことを Vanilla と呼ぶのか調べてみた
https://zenn.dev/seya/articles/66809b3d59151c

最終Vanilla

/**
   * 汎用関数
   * @_x = ターゲットエレメント
   */
  let qsAll = (_x) => document.querySelectorAll(_x);
  let qs = (_x) => document.querySelector(_x);

  // auto save view
  let message = qs("#message");

  const autoSave = () => {
    message.classList.remove("is-hidden");
    setTimeout(function () {
      message.classList.add("is-hidden");
    }, 400);
  };

  // メモ入力欄の設定 LocalStorageの取得
  let strokeTexts = qsAll(".garage-strokes .mol_text");
  strokeTexts.forEach((elm) => {
    index = [].slice.call(strokeTexts).indexOf(elm);
    let strokeClass = qsAll("textarea.stroke");
    strokeClass[index].value = localStorage.getItem("stroke" + (index + 1));
  });

  // タイトルの設定 LocalStorageの取得
  let strokeTitles = qsAll(".garage .title");
  strokeTitles.forEach((elm) => {
    index = [].slice.call(strokeTitles).indexOf(elm);
    let strokeTitle = qsAll("input.title");
    strokeTitle[index].value = localStorage.getItem(
      "stroke-title" + (index + 1)
    );
  });

  // メモ入力、リアルタイムでLocalStorageに保存
  let handleTextArea = qsAll("textArea");
  for (let i = 0; i < handleTextArea.length; i++) {
    handleTextArea[i].addEventListener("keyup", (event) => {
      localStorage.setItem("stroke" + (i + 1), event.target.value);
      autoSave();
    });
  }

  // タイトル入力、リアルタイムでLocalStorageに保存
  let handleTitle = qsAll(".stroke-title");
  for (let i = 0; i < handleTitle.length; i++) {
    handleTitle[i].addEventListener("keyup", (event) => {
      localStorage.setItem("stroke-title" + (i + 1), event.target.value);
      autoSave();
    });
  }

  // 削除機能
  let handleClear = qsAll("input.clear");

  for (let i = 0; i < handleClear.length; i++) {
    handleClear[i].addEventListener("click", (event) => {
      let confirmRemove = confirm("消しマンボ?");
      if (confirmRemove == true) {
        alert("闇に葬りマンボ...");
        localStorage.removeItem("stroke" + (i + 1));
        let targetRemoveText = qs("textarea.stroke" + (i + 1));
        targetRemoveText.value = "";
        // handleClear[i].setAttribute("disabled", true);
        autoSave();
        return true;
      } else {
        alert("やっぱやめとくわ");
        return false;
      }
    });
  }

特にjQueryでindexthisでよしなにやってくれていた箇所が全く分からず
index = [].slice.call(strokeTitles).indexOf(elm);にたどり着きました
*おそらくArrow関数などを使えばもっとシンプルになるはずなので、後日ブラッシュアップしてみます。

Studyログとして、jQueryだと2−3行で終わるところを、Vanillaだと以下のようにだいぶ大掛かりになりますが、一旦ライブラリ依存させない状態にしておくと、他のライブラリへの移管も簡単になりますね。
挙動は両方全く同じです。

脱Jは成功しましが、脱税にならないように確定申告もそろそろ着手します。。
ちなみにフリーランスだと「接待ゴルフ」も経費になるらしいです。機会は無いですが。


フロントエンド&デザインエンジニア / UIUXデザイナー / Webマーケター / アクセリビリティエンジニア