JavaScriptの勉強を始めて半年が過ぎた（1/27スタート）。

　三ヶ月経過した時点で振り返り記事を書いたが、今回も同じようなまとめをしておきたいと思う。自分用のただの日記である。

• ツール製作日誌：三ヶ月で劇的ビフォーアフター①　自作ツール紹介編

• ツール製作日誌：三ヶ月で劇的ビフォーアフター②　生き方改革編

　

　まず前回からの三ヶ月で新たに作ったツール群をまとめてみる。

　

①Fusen2.html

　三ヶ月前の時点で作ってあったFusen.htmlの改良版。当初は付箋の種類ごとに作成ボタンを作って別の経路で付箋を作っていたが、今回は付箋は一種類のみになっている。記述内容で付箋の種類を判定し、自動で然るべきHTML要素が構築されるようになっている。

　そして付箋の中に付箋をドロップするとアウトライン構造になる。現状ではアウトライナーとしての手軽さがちょっと犠牲になっているところがあり一長一短だが、構造が煩雑だった前バージョンよりわかりやすくはなっている。

　また、付箋の規格を統一したことによりOPML出力がスムーズにできるようになった。

　

②ToDo Manager（名前は適当）

　前にツール製作日誌：タスク＆スケジュール把握ツールで紹介したタスク管理ツール。

　ちょっとしたことだが初めて試した挙動というのが色々あり、地味にレベルアップしたように思う。特にinput要素を多用しているのでそのあたりはかなり鍛えられた。

　

③Protean Outliner（カード式アウトライナー）

　ツール製作日誌：カード式アウトライナー①機能説明編で紹介したアウトライナー的ツール。

　どこかにゴールがある考え事をする場所。ブログ執筆を含め、今現在書き物の類は全てここで行っている。あれこれ機能を実装しており、もはや自分にしか理解できないであろうツールになっている。

　なお、最初は「カード式」のつもりで作ったのだが、結局のところ「ルーズリーフ式」であった、ということをつい先日書いた（ツール製作日誌：カード式アウトライナー③カードっていうかルーズリーフだった編）。

　

④Knowledge Manager（名前は適当）

　辞書的知識を書き足していく場がほしかったので作った。

　それぞれのカードには名前を複数つけることができ、一覧では名前が全て列挙されている。「メインの名前+エイリアス」ではなく、名前が複数可の状態。各カードのノート部分（アウトライナーになっている）で名前を[]で囲むとリンクになるのだが、複数あるどの名前でも構わないようにしている。

　各カード内で一問一答のクイズを作れるようになっており、クイズ一覧表示でそれらがカードとして表示される。マウスオーバーで答えが表示され、覚えた時はクリックで現在日時を記録できる。そこからの経過日時に応じてクイズ一覧で表示できるカードをフィルターできる。

　Ankiに担わせたかった役割を（Ankiの起動と管理が面倒くさかったので）自作ツールで実現した形。

　なおカード一覧でもクイズ一覧でも、マウスオーバーで内容を確認できる。

　

⑤Mameronbuner

　豆論文作成・管理ツール。（内容の性質上全てモザイクすることに）

　Protean Outlinerでやりたかったけどどうもやれなかったことを、より豆論文に特化した形を作り直して達成できるようにした。

　ポイントはタイトルが不要なこと。カード一覧で表示されているのは本文の冒頭3行で、タイトルとして表示したいなら最初の行をタイトルらしくすればいいようになっている。

　各カードに格言的なものを登録できるようにしており（複数可）、例えば「格言・仮説」を選択するとカード一覧より小さいカードでその一文をそれぞれ表示できるようになっている。コードの構造としては④のKnowledge Managerと大体同じ。マウスオーバーで内容確認が可能。カード間のリンクも可。

　

⑥ミニゲーム類

　コーディングの練習としてちょっとしたゲームを色々作った。特に参考にしたものはなく、いずれもゼロから自分で考えた。

ハイアンドローゲーム

　表示されたトランプに対して次の一枚が高いか低いかを当てるゲーム（Aが最も高い）。

　トランプ1組が尽きるまでやれるが途中でやめてもよく、いずれでもその時点での成功率を見ることができる。

　単純なゲームだが、やり始めるとやめ時がわからなくなり延々やってしまう。かっぱえびせん状態。

　

ポーカーゲーム

　配られた5枚から一度だけ任意の枚数交換可能で、できた役が良い役だと嬉しいねというゲーム。役を正しく判定するためにif分岐をあれこれ考える必要があり、良いトレーニングになったと思う。

　

スロットゲーム

　alertを使ってリールごとに結果を表示してスロットっぽい見た目にしているゲーム。柄の並びは某RPGのカジノのものを使っている。

　今のところただカチカチやって揃ったら楽しいというだけのものだが、倍率の設定はしてあるのでカジノっぽくしようと思えば一応できる。

　

神経衰弱ゲーム

　番号を指定し、その番号に振り分けられている記号を揃えるゲーム。多分HTML要素（DOM操作）を使えばそんなに苦労しなかったのを、わざわざダイアログ上でなんとかしようとしたので無駄に悪戦苦闘した。その分経験値はそれなりに得た。

　

ハエたたきゲーム

　上の画像のように動く四角をクリックできると消せるというゲーム。

　指定したミリ秒単位で、指定したいくつかの動きの中から乱数で決定して動き回るようになっている。直進：左折：右折：停止を2:1:1:1にしたら生き物っぽさが出た（後退しないようにした）。別途指定した時間単位で増殖させることもできる。

　マリオペイントで育った人間としては、ハエたたきと言えば手に汗握る思い出深きアクションゲームなのである。＼アッー！／

　

　自分でツールを作ることの意義などは三ヶ月前に書いており（ツール製作日誌：三ヶ月で劇的ビフォーアフター②　生き方改革編）、そこから今までの間に気持ちとしての大きな変化はない。前回書いた通り、プログラミングはいいぞ、という感じである。

　一方、この三ヶ月で技術的には結構進歩したように思う。DOM操作（今まさに画面の中に存在しているようなHTML要素群の操作）で出来ることというのは無限にあるわけではないので、三ヶ月前と比べて「結果として実現できていること」はそんなに変わっていないのだが、コードをうまくまとめることができるようになったことで書くスピードが上がり自由度が増し、後から見て意味がわかりやすくメンテナンスしやすくなった。コツを掴んだという感じがする。

　特に「クラス」と「インスタンス」の概念を理解してカスタム要素(Custom Elements)を作れるようになったのが非常に大きい。例えばアウトライナー機能をいつでもどこでも一瞬で用意できるのである。最初は本当に苦労したのだが、今はもう作り放題だ。

　

　もうひとつ、Electronでローカルファイルを扱えるようになったのが大きな進歩だろう。Electronというのは、Web技術（HTML+CSS+JavaScript）を使ってデスクトップアプリケーションを作ることができるフレームワークのことである。

　Web技術によってGoogle Chromeなどのブラウザをツール化できるのはとても便利で、プログラミング初心者には大変嬉しいことなのだが、セキュリティ保全のためブラウザからローカルファイルを編集することはできないようになっている。ローカルファイルを読み込むことと、手動でデータをローカルファイルとしてダウンロードすることはできるのだが、ローカルファイルをデータベースにしてリアルタイムに処理するということはできないのだ。

　となればダウンロードを忘れたら終わりなのかというと、ブラウザにはlocalStorageという保存領域があり、各ドメインに対して最大10MB（ブラウザごとに異なる）用意されているので、そこに保存すれば消えることはない。普通に公開されているツールも、データ保存のための通信を行わないものはその機能によってユーザーのデータをブラウザ内に保存している。ただ、そのPCのそのブラウザの中だけにある状態なので、データの取り扱いとしてはいささか不便である。

　そこでElectronなのだが（デスクトップアプリケーションを作成するのでローカルファイルを扱えるようになっている）、ElectronはJavaScriptの形式で記述するものの、色々とコンピュータ的に考えなくてはならず、JavaScriptのDOM操作が直感的なことに喜んでいた身にはかなり辛い。数学で言うと平方根が出てきたとか微分積分が出てきたとか三角関数が出てきたとか、そんな感じの段差である。

　今でもよくわかっていないのだが、とりあえずローカルファイルを読み込めてローカルファイルに書き出せるようにはなったので、まあそれ以上わからなくても当分はいいかなという感じでいる。（なお三ヶ月前の記事でElectronについて既に触れていたのだが、当時一応書き出し自体はできたものの、ごく限られた条件の元でしか実現できていなかった。セキュリティのためにメインプロセスとレンダラープロセスというふうに分かれており、その横断を理解するのがちょっと難しくて面倒だったため三ヶ月放置していた。）

　

　ツールのデータベースとしてローカルファイルを使えるということは、そのファイルがオンラインストレージ（Dropboxなど）にあればどの端末からもいつでも参照できるということである。また、ローカルファイルの読み込みも簡単になったので、例えばLogseqやObsidianで使うmdファイルを読み込むこともできるようになった。早速、Logseqのmdファイルで未来の日付をリンクしている箇所をピックアップしてHTML上に出力するコードを書いてみたりした。

　つまり他のちゃんとしたツールとの間に橋が渡されたということであり、このことは自作ツールの可能性を大きく広げるものだと思う。できることはおそらく爆発的に増えたのだが、自分自身がそれに全然追いついていないので、この先はゆっくり練っていきたいと思う。