鈴木颯介のブログ

技術的なメモとかポエムとか。

ReactとMobXでオフラインで動くMarkdownエディタを作った

趣味でFrozenというMarkdownエディタを作ったので紹介します。名前の由来は、前に作ったMarkdownエディタの名前がRapunzel(ラプンツェル)だったのでディズニープリンセスつながりでFrozen(アナと雪の女王)。

Markdownエディタ、どれも微妙

世の中にはいろいろなMarkdownエディタがありますが、どれも微妙なんです。例えば、Boostnoteは高機能すぎて、ノートが多くなると重くなるし、OSSだけどコードベースが割と大きいから手を出すのが辛い。typoraは書き心地は良いですがノートの管理までは担当してくれません。

その中でいいなと思ったのが、mizchiさんのmarkdown-bufferでした。でも複数のノートを同時に管理したいという欲求があって、そのためにタブ機能のついたmarkdown-bufferを作る必要があったのです。

(ちなみに、前も同じようなモチベでRapunzelというやつを作ったんですが、自分で作っておいてこいつにも不満が出てきてしまいました。)

技術スタック

タイトル通りなんですが、ReactとMobXで作りました。また、CSSをあてるためにstyled-componentsを使っています。

あと、オフラインで動いてほしかったので、Service Workerでキャッシュして、データはIndexedDBに保存するようにしました。ちなみに、IndexedDBを操作するためにDexieというライブラリを使ってみたんですが、なかなかよさげでした。そしてそのノリでDesktop PWAに対応してみました。

また、配色は個人的にお気に入りのDraculaを真似てみました。

(mizchiさんのmarkdown-bufferと違って、MarkdownのパースをWeb Workerでやるとかはしていません。今後やりたいですね。)

感想

この記事もFrozenで書いているんですが、自分が自分のために作っただけあって自分にとっては割といい感じです。

小規模な開発だからテストはいらないとおもっていたんですが、すでにテストがほしくなりつつあるのでテストを書きつつリファクタをしつつといった感じで今後も改良はしていくつもりです。