kenju's blog

About Programming, Mathematics, Security and Blockchain

Reactを一年書く中で感じたこと

Compositionによる関心の分離は心地よい

Viewを部品ごとに分割し、フロントを設計するComposition Patternsの場合、「今書いているComponentsが画面上のどの部分」なのかが非常にイメージしやすい。

ReactのDesign Principlesとして「Composition」が尊重されているため、フレームワークレベルで関心の分離をしやすい設計となっている。

ライブラリへの切り出しもしやすく、開発もしやすいし、他の人が書いた資産を有効に活用できる。

JSX Syntaxは意外と書きやすい

これは個人差があるだろうが、個人的にJSX Syntaxに気持ち悪さや違和感は抱いていない。

むしろ、ぱっと見HTMLで構造を理解しながら、適度な粒度でJavaScriptを埋め込める点はすごく書いていて気持ちがいい。

Visual Studio Codeなどのメジャーエディターがシームレスなハイライト・補完を実装していることもあって、ハードルも低い。JSX SyntaxのDX(Developers Experience)は総じて高い。

関連ライブラリはピンキリ

Reactによって共通化しやすいコンポーネントライブラリが雨後の筍に出現した。

定期的にメンテナンスされているものもある一方で、ほとんどメンテナンスされていないがライブラリ名がそれっぽいレポジトリも多数存在している。

特に、SSRしている場合、「SSRに対応しているライブラリ」と「SSRに対応していないライブラリ」が混同しているので、コードを見て判別仕分ける必要がある。

State管理のプラクティスは整いつつある

日本では「State管理はReduxだ!」的な風潮があるが、必ずしもそうではない。小さなアプリにはMicroContainerや自前フレームワークの方が向いていることもあるだろうし、そもそもFluxの概念を実装したState管理ライブラリは多い。

実際のアプリケーションを作っていると、非同期組み合わせなどの場合どうするの?という疑問が多数出てくることになるが、英語でググっても日本語でググっても、「王道のベストプラクティス」が存在するわけではないが、色々な趣向・工夫を凝らした知見が多い。

だからこそ、本質的な概念を理解した上で自分たちのアプリケーションに取り入れることが大事。そうでないと、ライブラリの使い方を調べるだけで貴重な開発時間を失ってしまいがちになる。

エコシステム大事

全世界規模で広がりを見せているため、ツール群のエコシステムが十分に発達している。

  • Testing Frameworks (e.g. Enzyme)
  • UI Testing (e.g. Storybook)
  • Task Runners (e.g. Webpack)

など、広い領域でベストとされるライブラリが整ってきており、統合的フロントアーキテクチャを構築するに困らない。

その分、自分たちでライブラリ選定や新技術の検討をするコストは生じるが、そうした作業は個人的には好きなので、苦では全くない。