今季のオススメアニメを教えてほしい id:necojackarc です。
本記事では新規事業 fotowa での React や Redux の活用事例をご紹介します。 加えて、どういったケースで、なぜそれらを採用したのかについてもお話します。
React や Redux の導入を考えている方の参考になれば幸いです。
fotowa とは
fotowa はプロの出張撮影フォトグラファーを簡単予約できるサービスです。代表的な利用シーンとしては、七五三やお宮参り、結婚式や誕生日などがあります。撮影事例はこちらをご覧ください。
サービス開始から1年未満で最大月間撮影件数300件を超えた、成長中のピクスタの新規事業です。
React や Redux の活用事例
そんな新規事業の fotowa では、UX が重要になる一部の機能を、React や Redux を利用した SPA として提供しています。
例えば、前回の記事で紹介した、写真のオンライン納品機能では React を利用しています。
また、フォトグラファーが撮影可能な場所や時間を登録するスケジュール登録機能では React と Redux を利用しています。
採用ケースとその理由
どういったケースで採用したのかと、なぜそれらを採用したのかについてお話します。
React
基本的には「クライアントサイドの状態に応じて画面をレンダリングしたい」ケースで採用しています。
こういったケースでは、素の JavaScript や jQuery では大変になることが多いです。
素の JavaScript や jQuery は「イベントをトリガーに見た目を直接変更する」ことは非常に得意です。しかし、見た目を直接変更するイベントが多岐に渡った場合、現在の状態と見た目の整合性を取ることが難しくなります。
もちろん、素の JavaScript や jQuery でも、クライアントサイドの状態に応じて画面に反映するというコードを書くことはできますが、餅は餅屋、それを専門とするライブラリを導入するほうが効率的です。
そこで、fotowa では、こういった状態に応じたレンダリングが必要なケースで React を採用しています。
大まかな採用理由は、次の2つです。
- 状態に応じた画面のレンダリングの容易さ
- 学習コストの低さ
状態に応じた画面のレンダリングの容易さ
まさに実現したいことである、「クライアントサイドの状態に応じて画面をレンダリングする」ためのライブラリが React です。
そのため、非常に簡単にこれを実現することができます。
また、流儀に従って書くと、構造がシンプルになり、保守や追加改修も容易になります。
学習コストの低さ
公式のチュートリアルが簡潔でわかりやすく、短時間で全体像をつかむことができます。
新しい概念は登場するものの、直感的に理解しづらい記法はほとんどありません。
実際、デザイナーさんとの協業においても、簡単なサポートのみで問題なく作業を進めてもらうことができました。
加えて、人気が高いライブラリですので、検索をすれば様々な情報が出てきます。
React の原則や考え方を一通り理解し、公式のチュートリアルを一周すれば、あとはすぐに調べながら開発を進めることができます。
Redux
React は基本的には画面のレンダリングライブラリであるため、状態の管理は専門外です。
そのため、扱う状態が複雑化してくると、途端に状態管理が大変になってきます。
そこで fotowa では、複雑な状態管理が必要なケースにおいて、Redux を利用しています。
大まかな採用理由は、次の2つです。
- React との連携が容易
- 複雑な状態管理が得意
React との連携が容易
React Redux を利用することで、React との連携が容易に可能です。
複雑な状態管理が得意
ここが Redux 最大のメリットであり、かつ大きなデメリットでもある部分です。
複雑な状態をわかりやすく管理するために、様々な制約を Redux は導入します。 この非常に厳しい制約によって、コードベースの肥大化や複雑化を防ぐことができます。
一方で、この制約が足かせになる場合もあるため、導入すべき箇所の見極めは慎重に行う必要があります。
実際、fotowa での Redux 採用事例はまだ少ないです。 先程紹介したスケジュール登録機能がその数少ない採用事例です。
こういった複雑な機能では、Redux の力が遺憾なく発揮され、改修や機能追加を容易にしてくれます。
導入前には、以下の記事に目を通しておくと良いと思います。
まとめ
fotowa では、UX が重要になる一部機能を React や Redux を利用した SPA として提供しています。
React は「クライアントサイドの状態に応じて画面をレンダリングする」必要があるときに、Redux は「クライアントサイドで複雑な状態を管理する」必要があるときに採用しています。
ピクスタでは、新規事業 fotowa でブイブイ言わせながらフロントエンドの荒野を駆け抜けてくれるエンジニアも募集しています！
さらに、そんなやんちゃなエンジニアと一緒に大暴れしてくれるデザイナーも募集しています！
みーんななかよくプレイしましょう！
✋( ͡° ͜ʖ ͡° )ｱｯｼｪﾝﾃ!!
