React 以外でなにかいいのないのかな

React の記事ってネットでよく見かけますが その理由によく使われてる以外に難しさがあると思うんですよね
簡単に使えて迷うことも躓くこともなく理解できるならわざわざ記事を書いたりすることは少ないでしょうし
ブログを見返すと自分でも使ってる度合いに比べると記事の数が多めかなと感じてます

React の最近の新しい機能や追加されようとしているものもなんか複雑になってきてもっとシンプルなものでいいのになと思ったりです
実際 React の記事で見かけるものの中には 不満点とか他のものに移行したいとか今後は選ばないとかネガティブなものもあり そういうのを見かける割合が増えてるような気もします
単純な使い方だけ書いた記事よりもそういうののほうが注目され拡散されやすいからなのかもしれませんけど

それらの一部を軽く読んだ感じでは React 本体というより React を使ったライブラリ・ツールによる部分も多い気がします
わかるところも多いのですが React だけで作るとなると結構辛くてライブラリだよりになることは多めです
私が React を使ってる理由は別に React が素晴らしいと思ってるから ではなく単にユーザー数が多く 調べて情報が多く得られることと 周辺ライブラリの充実度です
以前はもっとマイナーライブラリを使ったり自作のものを使ったりでしたが そういうのだとなにかしたいとなったときに全部自作が必要になりました
他のライブラリに依存しないライブラリなどもありますが競合せずうまく動かすために一工夫が必要だったり 需要が少ないせいかクオリティが十分なものがなかったりで なにかと自作しなければいけないことが多く面倒でした
それと比べれば React くらいになると大体のものは揃っていて 特別こだわりがないところなら適当に人気どころのライブラリを入れるだけでそれっぽいものができます

その点では React は良いのですが やっぱり不満点はいろいろあって そろそろ新しいいいのがなにかないかなと思ってます
新しいもの自体は色々出てはいますが ほとんどはとてもマイナーで React や Vue のレベルにはなってないのがほとんどです

Svelte

数年前は Svelte が少し話題になってましたが 最近ではもうあまり見かけません
個人的には記法などが好みに合わず使ってみようとすら思わないものだったので 今後も使わない気がします

実際に使ったわけじゃないので正確じゃないかもですが ライブラリではなくコンパイラ みたいなことが言われていて ユーザーのコード自体を書き換えてしまい それを動かすので 実行時にはライブラリとしてのコードがなく軽量らしいです
その点では少し興味はありましたが それも実用性的にはイマイチらしく 小さいコードではライブラリがない分 React や Vue よりもサイズが小さくできて有用ですが 規模が大きくなるとコードのサイズが大きくなり 共通のライブラリがあることで 規模が大きくなってもサイズが大きくなりづらい React や Vue とはどこかで逆転することになるそうです
たしか Vue を作った人が調査した結果だとかいうのを見ました
ネットニュースとして見たくらいで中身の詳細は見てませんが 対抗するライブラリの作者がそういうくらいなら実用レベルで他ライブラリのほうが優れていたのでしょう

小規模なものだとあまりライブラリに頼る必要もなく こういうのを使うときって規模が大きくなってくるものが対象なので大きくなってきたときに効率が悪いのだと使う理由にはならないよねと この話を聞いて完全に候補からは消えました
もうそれから結構経ってるのでもしかしたら改善されてるのかもしれませんが React からの移行対象としては無いかなと思います

Solid

その他には Solid が去年の JavaScript アンケートで話題になってました
JSX を採用していて 見た感じでは React に近く Svelte のときと違い拒否感はありません
今年は流行ってくるのかなと思って少し期待してましたが それほど流行ってはないようでした
上に書いたように React を選んでる理由がライブラリの充実なので 移行するにしてもまだまだ先になりそうかなという感じです

とりあえず試しに少し使っては見ましたが 見た目は React に似ているようで結構違っています
Svelte のように自分で書いたコードがコンパイルで書き換えられます
lit や hyperhtml も含め React 系統のライブラリは画面を更新するためにレンダー関数を実行し それによって得られる結果をもとに画面を更新します
更新のたびに関数全体が実行されます
しかし Solid では最初に一回のみ実行され あとは更新のための必要な部分のみ関数が呼び出されます
ムダがなく良さそうに見えますが 関数が書いたままの JavaScript として実行されてるわけではないので React 以上に難しいのかもしれません

ですが React の不満点が多く解決されてもいます
一番は毎回レンダリング処理で関数を実行しないことです
これはパフォーマンスだけでなく コードを書くときにも楽になるところがあります
React では useCallback などで依存配列を書く必要があり とても面倒が多いです
今回 React 辛いしやめたいなと思った理由でもあるくらいです
Solid では毎回関数を再実行しないので関数の参照が変わることはありません
useEffect 相当の処理でも中で使われた変数を自動で検知して それが変わったときに再実行するので依存配列の苦労がありません
値が変わっても再実行せず無視するなど例外的なことをするときはそれを伝えるためのコードを少し書く必要がありますが React に比べるとかなり楽です

不満点は変な制約がついて JavaScript として自由に書けないところがある部分です
React でも一部ライブラリではパフォーマンスのために Proxy を使って最適化してる都合で分割代入はダメだとか使わないといけないとか JavaScript として自由に書けない制約がつくことがあります
Vue も 3 からはあったと思います
そういうのが Solid にもあります
この点はイマイチかなと思うところです

他には JSX 内で分岐や繰り返しを行うときの書き方が React と違ってます
React では {} の中で JavaScript の式として記述します
JavaScript として書けるので追加で覚えることはなく 自由度もあります
ですが 見やすさとしてはあまり良いとはいえないと思ってます
ただ Vue のテンプレートと比べると Vue は属性として表示される条件や繰り返しに関して記述するのでそれよりはマシだと思います
タグを見るだけではわからず属性の中まで見ないと繰り返すなのかわからないのは分かりづらすぎます
そういうこともあって以前 Vue を使ったときは標準のテンプレートを使わず JSX や htm を使ってました

Solid では For や Switch といったコンポーネントが用意されていて JSX のタグとして分岐や繰り返しを書けます
React での不満点が改善されています
これをデメリットのように書いてる人もみましたが 軽く使った限りでは React より優れてると思います

React でもコンポーネント化しようとすればできなくもないです
しかし 条件に一致しない場合でも式が評価されてしまうので 処理的にムダがありますし null の場合の扱いなど面倒が多いです
最近は ?. を使って null の場合でもエラーにならなくできるので少しマシになりましたが React を使うならムリにコンポーネントで分岐や繰り返しをせずに 標準的な方法でいいかなと思ってます
Solid ではコードが書き換えられて関数内での実行という形になり 条件に一致しない場合は実行されずこの問題は起きません

結局のところは

Solid は結構いいところが多そうとか思ったものの 作るものの規模が小さいと React でも何でもいいし 大きくなってくるとライブラリが揃ってないのは無いのは辛いしということで結局 React を使い続けることにはなりそうです

ちなみに lit はというと lit-element になると WebComponents を使うことになり CustomElement がコンポーネントになるわけですが DOM としてツリー状にコンポーネント自身が存在したり 属性とプロパティの使い分けとか DOM の面倒な部分も色々入ってきて React などのコンポーネントほど気軽にいくつも作るのは向いてないと思って最近はあまり使っていません
WebComponents は標準の HTML タグとしてあってほしいと思うくらいのものを作る用途で使うくらいでいいかなと思ってます
lit-html の方はちょっとしたものを作るときにビルド不要で簡単に使えるので割りと使ってはいますけど

もともと書こうと思っていた React の依存配列が辛いとか Solid のコードを含めたあれこれとかは長くなりそうで今回は除外したので別記事で書くと思います