3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

jQuery世代がReact+OpenAPIでSPAを作ってみた感想

Posted at

jQuery世代がReactでSPAを作ってみた感想

ここ数年サーバーサイド専任だったので、知識としては知っていても経験はjQueryで止まっていたのですが、色々あってReactでSPAを作ることになりました。
何とかおっかなびっくり作り終えたわけですが、発想の転換を色々と迫られたので感想でも。

ちなみに成果物は社内用システムなので具体的なソースの公開についてはご容赦を

Component

かつてのjQuery時代と言うと、コンポーネントはjQueryUIくらいしかなく、
基本的に画面はゴリゴリとhtmlとcssを書いて作るものでした。
ロジックの側でもDOMを書き換えたりクラスを付け替えたりするのは日常茶飯事でした。
例えば、jQuery時代に入力値をチェックしてInputにエラーを付ける場合

$(selector).addClass('error');

みたいな感じでした。(しかもこんなクラス名の付け方をしていたら衝突しまくってひどい目に会っていたでしょう。)
それが、今の時代基本的に基準はComponentです。
自分でhtmlを書くなんて言うのはComponent自体を実装する場合くらいで、
ロジック内ではstateを書き換えるだけです。
例えば、前述のようなエラーを付ける場合にはstateにエラーを渡すだけです。

component.setState({
  isError:true
});

始めは戸惑いましたが、コンポーネントの範囲内だけのスタイルも簡単にかけて影響度も小さくて済みますし、いい時代になったものだなと思います。

DOM操作のコストをあまり考えなくていい

ブラウザの平均的性能が上がったことと、VirtualDomのおかげでDOM操作のコストをあまり考えなくてよくなったのもありがたいと感じる部分でした。
スクロールで延々DOMが足され続けるとか明らかなアンチパターン実装をしない限りここでストレスを感じなくていいのはちょっと感動です。
某ブラウザの古いバージョンとかは本当にちょっと触るだけで固まりやがりましたので。

APIだけ決めてフロントとサーバーサイドで作業分担してみた

折角SPAで作ることに決めたので、OpenAPIでAPIの仕様だけ決めて、サーバーサイドとフロントエンドで別々に作って、ある程度できてから組み合わせるというのもやってみました。

これが、予想外に快適でした。
始めは実際に組み合わせたらエラーばっかりだろうなぁと思っていましたが、きちんと決めていただけあってAPI仕様上のエラーはほぼなく繋がりました。(トラブルが起こったのはAPI定義外の認証周りだけ)
二人で作業をしていたのですが、完全に触る場所がずれているのでコードのConflictもなく、Mockサーバーや自動テストベースで開発が進むのでオーバーヘッドがかなり少なかったように思えます。

エコシステムの発達がすごい

ReactやVue,Angularといったメジャーどころのフレームワークは、CLIからwebpack組み込みのプロジェクトを作るのが当たり前で、yarnやnpmのコマンドをちょっと打てば必要なプラグインやライブラリは簡単に組み込めるようになっていますし、ビルドや開発サーバーの立ち上げも一発です。
かつて頑張ってscriptタグを書きまくって、自分で依存性制御していた時代から考えると嘘のようです。

ただ、色々なところを隠蔽してしまっているという面もあるので、何となくでもそれなりに書けるようになってはいますが、きちんと分かっている人とそうではない人の差が広がっているのかも知れません。

どんどん抽象化と分割が進んでいる

今回はそこまで大きくないプロダクトだったのでReduxは使わなかったのですが、より大規模になってstate管理が複雑になると確かに直接stateを弄っていられなくなるんだろうなと感じました。
やはり大規模化⇒より抽象化されて分割されるという図式はどのレイヤーでも変わらないようです。

まとめ

  • 10年分くらい一気に歴史を進めて見たが非常に楽しかった
  • 発想の転換は迫られるものの何とかなる
  • フロント屋さん以外も触ってみるといいと思います。
3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?