鈴木颯介のブログ

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

Frozenをちょっとアップデートした

趣味で作っているMarkdownエディタ、Frozenをちょっとアップデートしたので忘備録。

GitHub: https://github.com/sosukesuzuki/frozen

Netlify: https://frozen-editor.netlify.com/

MobXからReduxに移行した

もともとMobXを使って状態の管理を行っていたけど、辛くなってきたのでReduxに移行した。MobXは書き心地は良かったけど、何も考えずに書くとあとで管理が大変になる。というか実際そうなってしまった。だからReduxに移行してみた。Reduxならアーキテクチャがコーディングの自由度をある程度まで下げてくれるから、後々になって見直しても問題なさそうな気がする。非同期処理はredux-saga。

1つ問題として、InversifyJSの使い方どうしようみたいのがあった。IndexedDBとLocalstorageを使う部分をInversifyJSでサービスとして実装してそれをMobXのストアのクラスに注入していたから、Reduxでそこをどう解決しようというのは少し考える必要があった。結論としては、InversifyJSの公式に載ってる関数に依存性を注入する方法を使って、reudx-sagaのジェネレータ関数に対して注入することにした。

普通のtextareaをやめてCodeMirrorにした

実際に自分で使ってて、普通のtextarea使いにくすぎるなぁと感じたのでCodeMirrorに移行してみた。

CodeMirrorをReactで使うときはちょっとした工夫が必要だったりする。今まではクラスコンポーネントのライフサイクルメソッドでそれをやっていたけど、今回はHooksを使うことにした。Hooksについては前から他の用途で使っていたから、それなりにすんなり使うことができた気がする。使うたびに思うけど、今後のReactは本当にクラスコンポーネントを使う必要がなくなるなぁ、、、

Workspace機能を実装した

バイト中につかっていて、プライベートのメモと混ざりそうで面倒だったからワークスペースごとにメモを作成できるような機能を実装してみた。左側にSideNavigationを表示して、そこでワークスペースを切り替える。ワークスペースの追加や名前の編集、削除などはモーダルから行うことができる。