いよいよ具体的に作ったツールの話がメインになります。
今回は少し前の記事（前日譚②～JavaScriptを書けると何が嬉しいの？～）で触れたブックマーク管理ツールの話です。
管理と言っても、まだツール上でデータを編集するわけではありません。とりあえずCSVファイルにデータを用意しておいて、それを使っていい感じの見た目を作ろう、というものです。ツールというよりはビューワと言った方が表現としては合っているかもしれません。
実際に作ったもの（のコードを今の書き方で綺麗にしたもの）をサンプルとして見れるようにしてみました。
データのCSVはこちら。「tag」「title」「url」「favicon」「description」の5つの項目を設定しています。説明がわかりやすいように一部を取り出すとこんな感じ。
tag,title,url,favicon,description
SNS,Twitter（@Foam_Crab）,https://twitter.com/Foam_Crab,,
Writing,Noratetsu Lab,https://noratetsu.blogspot.com/,,メインのブログ
Scrapbox,Noratetsu's Room（のらてつ研究所）,https://scrapbox.io/noratetsu/,https://gyazo.com/8e76071e5281e7396c84c83d32554939/thumb/1000,
必須なのは「tag」「title」「url」です。どこに配置するかを「tag」で決めています。どのtagがどのカラムになるかはJavaScriptのコード内で指定しています。
「favicon」はアイコンとして表示したい画像のURLです。省略すればデフォルトのfaviconを「`http://www.google.com/s2/favicons?domain=${url}`」で取得して表示します。
「description」はそのページについてのメモです。どういうサイトだったか、何でログインするんだったか、といった情報を必要に応じて書いておきます。Webブラウザのブックマークは基本的にメモ欄がありませんが、メモできると「なんだったっけ」と考えるロスが減ります。
なぜこのようなツールを作ったかというと、個人的にWebブラウザのブックマーク機能のあのリスト形式が好きじゃないからです。具体的にどこがどう嫌かというのはズバッと言語化できないのですが（明確な理由があるものではないのだと思います）、嫌だという気持ちははっきりしていて、そのせいでブックマークをうまく使えない状態が長きにわたり続いていました。
フォルダ整理という形式がうまくいかなさの原因かなと思ったこともありましたが、多分問題はそこではなく、どういう見た目をしているかなのだと思います。早い話が、楽しいか楽しくないかの問題です。
ブックマーク機能を提供するサービスや拡張機能というのも世の中には色々ありますが、そういうのを試してみると、機能が大仰過ぎて面倒な気持ちがまさってしまいました。簡単さの面ではブラウザのブックマーク程度で良いのです。サッと見れるのが大事です。
ではどういうビューなら自分が納得するかと考えてみても、それは自明のことではなく、考え出すのにはそれなりに苦労しました。最終的に冒頭で貼ったサンプルのようになったのですが、多分自分以外の人には中途半端なデザインに見えるだろうと思います。私自身、理屈で考えていたらもっと違う形にしようとしたのではないかと思います。ですが、これでいいのです。イケてるかどうかは知りませんが、「認識するのが楽」なのがこの形なのです。
このブックマーク管理ツールはJavaScriptのありがたみを理解する上で大きな一歩となりました。そして当時「JavaScriptでできたら嬉しいこと」として唯一具体的に思い描けていたのがこの「CSVを元にHTML要素を作る」という処理です。
最初、このツール（というかビューワ）は内容を全部HTMLにベタ打ちして作っていました。一応ブックマークレットを使い、登録したいページで実行すれば必要なタグを全部つけた状態で一発コピーできるようにしていましたが、ただ貼り付けるのは簡単でも、並べ替えなどの操作は非常に面倒でした。そこで「データはデータで作って、自動でHTML化したい」という願望が生まれ、「そういうのこそJavaScriptってやつでできるんじゃあないのか」となったのです。
願望としてあったのはそれだけだったので、これを実現した時点でゴールに到達してしまったようなものでした。ノートテイキングアプリを自分で作ってしまう、なんてことはこの時点ではそれほど考えていなかったと思います。そこまでできると思っていなかったからです。何しろ何をどうしたらアプリケーションの体を成すのかわからなかったのです。
ですが、このビューワを作ったことにより、JavaScriptとはつまり何ができるものなのかということをイメージできるようになりました。これができるってことはじゃああれもできるんじゃないか、とアイデアが浮かぶようになり、それができたらじゃあこれ、これができたらじゃああれ、と飛び石を渡っているうちに可能性がどんどん広がっていったわけです。
コードの説明も書こうかと思いましたが、独学の我流でありオーソドックスな書き方になっているのかわからないのと、毎度言及していると大変過ぎて更新が捗らなくなることから、コードの詳細については説明を省略します。（質問を受けたら答えます）
コードは右クリック→「ページのソースを表示」を選択するか、こちらから読めます。
ツールの挙動としては当時（つまり勉強開始二十日目くらい）から変えていませんが、コーディングは結構違っています。当時のコードを今見ると、知っているメソッド・書き方だけで頑張って作っているなと思いますが、工夫の積み重ねとは裏腹に、読むにあたっては何がなんだかわからないので、そのまま公開しない方が良いだろうと判断しました。
なおブックマークの管理のために別途CSVを編集するというのはあまり自然な流れではないので、半年くらい後に違うやり方に変えました。具体的には……とここで書こうかと思いましたが、それはいずれ記事にするのでお楽しみにということにします。
ところで、公開したサンプルは単にツールの様子を見せるために作ったものですが、個人サイトの一コンテンツとして置いておいてもいいかもと思いました。よく使う便利ツールのリンクなどを充実させると面白いかもしれないですね。
このシリーズ記事の概要はこちら→ノートテイキングアプリDIY体験記