WhalebirdをReactで書き直した

長らくVue.jsだったWhalebirdをReact.jsで書き直した.というよりNext.jsになった.

github.com

当初,Svelteで書き直してみたんだけど,これがあまり思い通りにはならないことがわかって,Next.jsでの書き直しになった. 6.0.0がNext.jsの初版で,6.1.0まで来たところで,まぁ少しは使えるようになってきたので書き残しておく.

まず,最初に書き直しを考えたのは2023年の4月くらいだ.2023年の改修で,今までNode.js側のストアとしてnedbを使っていたものをbetter-sqlite3に置き換えていた.これは単純にセキュリティ的な理由と,SQLの強力さを求めて載せ替えた.

ただ,この選択はあまり正解だったとは言えずに後悔することになった.better-sqlite3はsqlite3を使うことから考えても,native extentionだった.これにより,クロスビルドをすると必要なsqliteのバイナリがパッケージに含まれないという問題が頻発した.

github.com

github.com

github.com

次に,Vue3だ.2022年にかなりの部分をVue3に書き換えたのだが,これがあまり楽しくなかった.もともとVue2の時代は,確かに型定義は全然なかったしエディタの補完も効かない状態ではあったが,Easyという点において秀でるものがあった.まぁそれが,アプリケーションがでかくなるとともに辛くなる要因でもあったので,Vue3みたいなものが求められたのだろうが.Vue3にした結果,たしかにそれなりに型はつかえるようになったが,それでもまだまだ全然型がつかない場所は多く,結局Vue2のEasyだけが奪われたような感触を感じた.

そのため2023年後半から書き換えを視野にいくつか試してみた.Svelteもその一環ではあったが,結局エディタの補完がよく効く以上の魅力は感じられず,またVueみたいなものを作るのであればReactに移行することにした.

Next.jsを選んだことに大きな理由はないが,Electronに乗せる都合上,枯れているというのは大きい.

github.com

あと,Next.jsでもReact.jsでもRemixでもなんでもいいのだが,昔ながらのSPAで,Client-side Renderingをしたいというのがある.そういう意味でもSvelteは選択肢から外した.

結局ほぼすべてのコードが書き直しとなった.その結果,現状ではかなり軽くなっている. あと,以前と違ってほぼすべてのロジックをフロント側に持ってきた.これによりipcも最小限になっている.まぁ結果としてバックグラウンド動作みたいなことはほぼできなくなっているが……そもそもレンダリングが重いからバックグラウンドにしたいわけであって,軽いのであれば不要なんじゃないかな.

cssはtailwindを使っている.これはこれで非常に良いので今後もぜひ使っていきたい.のだが,components libraryがtailwind対応してないと結構盛大にぶっ壊れることがわかったので,採用できるcomponents libraryの選択肢は狭まった.

で,今後実装しなきゃいけないものたち

  • 検索
  • ユーザ名/ハッシュタグ/絵文字の自動補完
  • プロキシ設定
  • フォローリクエストのハンドリング