🐣
脱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でindex
やthis
でよしなにやってくれていた箇所が全く分からず
index = [].slice.call(strokeTitles).indexOf(elm);
にたどり着きました
*おそらくArrow関数などを使えばもっとシンプルになるはずなので、後日ブラッシュアップしてみます。
Studyログとして、jQueryだと2−3行で終わるところを、Vanillaだと以下のようにだいぶ大掛かりになりますが、一旦ライブラリ依存させない状態にしておくと、他のライブラリへの移管も簡単になりますね。
挙動は両方全く同じです。
脱Jは成功しましが、脱税にならないように確定申告もそろそろ着手します。。
ちなみにフリーランスだと「接待ゴルフ」も経費になるらしいです。機会は無いですが。
フロントエンド&デザインエンジニア / UIUXデザイナー / Webマーケター / アクセリビリティエンジニア