Chrome拡張作成はハードルが低いので良いという話

そうだ、Chrome 拡張を作ろう

昨年度は学習&成果物といえるものが全くなかったので、今年はなんでもいいから作ってみたいなという気持ちがありました
そんな折、友人が Chrome の拡張を作ったと聞きました（良記事＆良拡張機能なので是非読んでみてください）
スプレッドシートで行ハイライトする拡張機能を公開したので、やったことをまとめてみる
絵文字から Zenn の記事をみつける拡張機能「Zenn Feel Lucky」を作った
で、何となく話を聞いた感じ Chrome の拡張はそんなに気張らなくても作れそうということだったので、三連休だしちょろっと触ってみるか、、、という感じでいじってみることにしました

成果物について

Redmine を使っていて、テーブルを作るのがとにかく面倒だったので、テーブルが簡単に作れる拡張をひとまず作ってみることにしました

拡張機能ボタンを押下するとボタンやら数値を入力するフォームが出てきて、テーブルをクリップボードにコピーできるようにしました
（当初はテキストを入力 → そこから自動で表を作ろうと思ったが、GoogleSpreadSheet で表的に作成、GAS で連結させるなどの方法の方がいい気がして、拡張としては作るのをやめた、決して面倒だったからやらなかったわけではないことにする）
成果物については特にこれ以上言うことなし！！！

学び（コード）

とにかく完成を目指してとにかく雑にコードを書きました（とりあえず作ったという成果を出そうとしてた）ので、特にコード面で語れることはないです
とはいえ、何も学習していないとよろしくないのでちょっと勉強になったとこを自分のためのメモとして書いておきます

学び ① クリップボードコピーについて

1 つめはクリップボードへのコピーについてです
以前個人的な開発でテキストのクリップボードへのコピーを行おうとして

// textareaを取得
const text = document.getElementByTagName("textarea")[0];
// テキスト選択
text.select();
// コピー実行
document.exeCommand("copy");

とやっていたのですが、単純に textarea の文字を選択して copy をするとちょっと気持ち悪い感じ（textarea が残り、かつ文字列が選択されている状態）になってました
で、今回も同じ感じにするかぁとしていたところで、下記の記事を発見しました
JavaScript でテキストをクリップボードへコピーする方法
簡単にこの記事を要約すると、textarea を一時的に作って削除しようぜということです
単純といえば単純ですが、自分の中では考えとして出なかったので学びになりました

学び ② setTimeout

2 つめはコピー結果のメッセージを表示させ、その後一定時間で表示をオフにしたいなと思ったときの処理です
実際のコードが下記です

// 結果表示要素を取得
const resultArea = document.getElementById("result");
// コピー結果の表示
resultArea.textContent = copyResult
  ? "コピーに成功しました"
  : "コピーに失敗しました";
// 3秒後メッセージを非表示にする
window.setTimeout(function () {
  resultArea.textContent = "";
}, 3000);

setTimeout はあんまり使う機会がなかったので、ちょっと何かしら表示させて消したいときに使えるという知見が得られて良かったです

学び（コード以外について）

今回コード外での学びが多かった（コードは頭使わずに書いたので）ので、そちらについてを書いていきます

学び ① Chrome 拡張はハードルがめちゃめちゃ低い

1 つめにして最大の学びは Chrome 拡張はハードルがめちゃめちゃ低くてさっくり作れるということです
必要な知識は今回作ったものであればJS と HTML がわかれば作れるので、ハードルがはちゃめちゃに低い印象です（API とか使ったり、複雑にすれば多少難しくはなるが、簡単なものであればそうでない）
書くのもほぼほぼ JS と HTML なので、制作時間がかからないのも素敵（今回作ったものでいうと、自分の中で欲しい機能などを落として完成まで 1 時間ないくらいでした）

学び ② 機能の絞りこみ

2 つめは機能の話です
昨年何度か開発を行おうとして挫折を数回しました（PC に死んだプロジェクトがいっぱいある、、、）
これらが死んだプロジェクトになったのは、やたら機能を詰め込もうとしすぎたのが問題だったなとわかりました
今回単純な機能（欲しいヘッダーの数と表要素の数を入力してコピーするだけ）に絞って作ったので、すぐ手を動かしてさっくり作れました
変に機能を盛り込みすぎたり、最初に風呂敷を広げすぎると収集が付かなくなるというのを身をもって感じました（個人で作っているとモチベにも関わるので大事かなと思います）

学び ③ 雑なコードも許容する

3 つめはいいことではないと思うんですが、一応個人的な学び（というか意見？）としてです
自分の中でインプットとして何が入ってきて、アウトプットとして何が欲しいかのフローが落とせているのであれば、内側は雑に書いてもいいかなと今回思えました（とはいえ趣味の範囲ではあるけど）
仕事ではよくない（後々の保守などで死ぬ可能性があるので）ですが、個人レベルではやっぱりハードルを下げるだけ下げられた方がての進みが違うなと思いました
（まぁ本当はきちんとしたコードをかけた方がいいんですが！！！）

総括：Chrome 拡張作成は良いぞ

とにかくハードルが低い、そしてさっくり作れるので Chrome 拡張作成は個人的に良いと思います（機能を複雑にしにくいところも良いと思います）
なかなか手が動かない方にぜひお勧めしたいです（実際自分は手が動きづらいですが、ちゃんと動けたので）
Chrome 拡張は簡単なのでまだいろいろ雑なアプリが作れる気がしているので、今度は完全なネタアプリなんかを作りたいなぁと思います（実用性のない拡張機能作りたい）