[ポエム]VueとReactとCSSについて思うこと2021/1月版
meijin技術について思っている印象とかを、定期的にまとめておくとあとで見直したときに良い振り返りになるかもしれないなと思ったのでまとめておく。
上記の目的でやるので思い切り主観で書く。
meijinVue について思うこと
composition-api がとてもいい。
composition-api で頑張るなら React 使えよみたいな意見を耳にしたことがあるが、Vue の良いところは、template と style が JS と別個で動くというところだと思っているので、composition-api の前身である Option API が改善したところで、React と比較してどうこうみたいな見解の変化はない。
Vue を使っている限りは、基本的には CSS in JS 戦争に巻き込まれないので平和。
Vue3 をまださほどキャッチアップしていないので適当な意見になるが、SFC の書き方自体が結構変わる（script setup タグとか）のは、不安もありつつ、機能制限することで Component の種類を明示できるので、人間の認知コストが下がるのではみたいな期待はある。React でいうところの FC 型に children が無い pattern の型定義が追加されることで、Component の種類がコードを見ただけでより明示できるみたいなアップデートに似たものを感じている。
Vue3 を Nuxt に Integrate するにあたって、Vite をサポートする動きも進んでいるらしい。Vite もよく知らないが、バンドルに Rollup を使うといった違いがあるみたい。Vite 自体は現在バージョンが 2 系の Beta なので、今参入すると 1 系との Migration に苦しめられなさそうなのでちょうどいいかもしれない。触ってみるかな。このスターターキットが気になっている。
冒頭で composition-api が良いぞ、と書いたが、実際半年ほど書いているが肌感としては、これはこれでエンジニアの設計力、アーキテクト力が試される感じはある。
例えばなんでもかんでも useXXX っていう名前で切り出せばいいってものではないし、composition-api 使っているなら useXXX っていう命名にするか、ステートがあればその命名にするかといった細かい規約をどうしていくべきか気がかりだ。
あと、一度 useXXX にし始めると、どんどんロジックがそっちに寄っていくので、意外とコードがファットになる。useXXX がネストしていく実装もやってみたが、割と脳が混乱する。同種のモジュールがネストするのは結構辛い。
Vuex を卒業すべきか、残すべきかとかもふくめ Nuxt3 以降の世界線は結構最初あたふたしそうな気がする。
meijinReact について思うこと
Hooks はまあ使いやすいのだが、細かいところで、useState の戻り値がなぜか配列になっているところとか、useEffect の書き方が composition-api の watch と比べて若干の癖を感じるあたりが完全に主観だが気にはなる。
Vueでも述べたがなんでもかんでもuseXXX形式の名前にするのはどうなのかみたいな。computed(() => {})のほうが、useMemo(() => {})より命名が好き。
良いほうの話で、
React を書いているときは、いやーフロントエンドやってる俺！みたいな気持ちになるのでエンジニアとしてはかなり楽しい。Element に対して ReactNode という型があるなど TS 周りの作り込みがすごいので、Type と文法に気をつけていればだいたいなんでもできてしまう全能感がある。
CSS in JSに関しては、styled-componentsは基本的には好みではない。styled.divとか、なんでCSSがセマンティックHTMLに口を出してくるのかが理解できない。脳が老化しているかもしれないが、スタイルの責務とセマンティックマークアップの責務は分離して考えたい。
linariaを使っているときも、cssクラスを生成してそれをclassNameに当てる方針で組んだ。
全体的に、状態管理ライブラリの流行りが多かったり、CSS in JSの選択肢が多かったり悩む。技術選定的な話でいうと、ベンチャーと初心者には選択肢が多すぎるという意味でReactはおすすめできず、Vueのほうをおすすめする。
meijin他のフロントエンド
AngularとかSvelteとかAlpineとかLivewireとかは一切触っていないので触れない。これも個人の見解だが、VueもReactもあと10年くらいしたら廃れるだろうから、SPA界隈のウォッチは必要だとは思うが、標準化している奴が最強という謎の信条があるので、Web Componentsが一番優秀なのではみたいな気持ちになることはある。
meijintailwindについて思うこと
なんか最初はユーティリティクラス並ぶなんてありえないって思っていたが、実際ドキュメント見て触ってみると、結構色々なクラスを作っていて、ほとんどの要件を満たせそうですごいと思った。アニメーションもTransitionも網羅していたはず。
全部ユーティリティになっていると、移植性が爆上がりするのも良い。VueとReactとReact NativeとかでComponentをコピペしてもある程度いける。classとclassNameを書き換えるくらいでいける。
人類にCSS設計は早すぎたって思えばとても納得がいくし、PurgeCSSと連携したりUIフレームワークと連携したりエコシステム巻き込んで頑張ろうという動きも好感。
意外とPHPStormで拡張機能を入れたら、クラス名じゃなくて当てたいCSSを入れても補完が効くのでめっちゃ便利。覚えなくていい。
レビューとかどうすんのみたいな意見をTwitterで見たが、もはやレビューするしないの世界線ではない。自動生成に近い感じ。というかSTUDIOとかのNoCodeとも相性が良さそう。操作に応じて対応するTailwindクラスを引っ張ればいいだけなのでかなりNoCodeサービスを立ち上げやすくなるのではないか。
meijinNuxt.jsについて思うこと
Moduleによるエコシステム構築が神のシステムだと思う。
これはNext.jsに類似の仕組みがない。Moduleは神。
これ以外の仕組みは割とVueの色々なライブラリに従っているだけだと思っている。Moduleが素晴らしい。
個人的にはNuxtにはIncremental Static Regenerationの実現に期待している。とはいえ直近はVue3があるからいつになることやら・・・（あと、Vercelと違ってインフラ持っていないからいつまでもやらないかもしれない）。
asyncDataとfetchで役割被っているとか、細かいツラミは一応ある。
meijinNext.jsについて思うこと
フロントエンドエンジニアがやるパフォーマンス考慮ポイントをフレームワークで率先してやってくれてありがとうございます！って感じ。
Imageコンポーネントとか、Incremental Static Regenerationとか、フレームワークでサポートするのがすごい。まあいうほどISRって銀の弾丸ではないので、そこにかなりフレームワークの未来が掛かっているのは期待もあり不安もある。
※銀の弾丸ではない理由は、いうほどパフォーマンス良いっていうほどではないし、その気になれば内製で実現できるから
ISRで速くなるのは正味フロントエンドのパフォーマンスがもともとNext.jsが優れているからであって、そのベースがないとISRしても速くなるのはAPIアクセス分だけなので・・・という気持ちはある。あとそもそも無くてもいい機能ではある。例えばスマホがないとそもそもスマホでできることはできないが、ISRだろうがそうじゃなかろうがユーザーへの提供価値が変わらんというか、ユーザーは、ISRやっているサイトだから見るとか無いよねっていう。で、速くする方法は銀の弾丸は根本的にないので。
でかい会社がISRするからこそコスト面での効果とかが出ると思う。
ISR前提ですべてのアーキテクチャを作ってスタートするベンチャーが出始めたら強そう。弊社とかはもうLaravelでガッツリAPI作っているので、メイン事業をISR前提に持っていけるかは微妙かなぁ。