【国内最大級】React.jsによるSPAのECサイトを作ってみて

こんにちは!
株式会社ファンデリー デザイン・システム室の町田です!
いつか異世界に転生されることを夢みて、日々「プログラミング」という名の魔法スキルを鍛錬している者です。

今回は7月19日(日)にローンチした『旬をすぐに』という新規サービスの開発についてお話しします。
中でも、本記事では下記内容についてお話ししていきます。


・新規サービス『旬をすぐに』がReactで開発されることになった“きっかけ”
・Reactでの開発にあたって“感じたこと”や“得られた知見”


上記内容を実際の体験を混ぜながらお話ししていきます。



1.はじめに

私が所属しているファンデリーという会社は『食』、『健康』というキーワードのもと、現在まで複数のサービスを展開してきました。

先日オープンした『旬をすぐに』というサービスも例に漏れず、『食』と『健康』をテーマにしており、“旬の国産食材”を使用した『お食事』を日本全国に販売するサービスとなっています。(ご購入商品はクール便で各ご家庭に配達されます)
販売はECサイトのみで、サイト作成および、自社工場の運用に必要なシステムのほとんどを自社の開発メンバーで作成しました。

『旬をすぐに』商品一覧ページ

本記事のタイトルにもある通り、サイトはReactによるSPA(シングルページアプリケーション)となっており、Reactで作成されたSPAのECサイトとしては国内最大級?であると思っています。

弊社ではいままでJavaScriptのライブラリとしては『jQuery』を使い続けてきたのですが
なぜ、今回ReactでECサイトを作成することになったのかの経緯について、まずはお話しします。


2.なぜReactなのか

事の発端はサービス立ち上げ初期に遡ります。
そもそも、新しいサービスでは「『若い世代』をターゲットにしたい」という考えがありました。

いまの若い世代(20〜30代)はスマホ世代。
しかし、スマホアプリの場合「どのようにして、ユーザーに『無名のECサイトアプリ』をインストールしてもらうのか」という大きな課題がありました。

その大きな課題に対して、社内でミーティングを繰り返した結果、気付いたら“Webサイトをスマホアプリっぽくする”ということになりました。(詳しい経緯は端折ります)

その決定を受け「『スマホアプリっぽさ』とは何だろう」と考えた時に、画面遷移時のローディングに主軸を置くことを決め、それを解決するにはSPAで作ることが必要であるという結論に至りました。

さて、SPAの実現としてよくある方法としては『ライブラリ・フレームワークの利用』があります。
チームメンバーの中で「どのライブラリ・フレームワークを利用するか」という話題になりました。
有名どころとしては『React』、『Vue.js』、『Angular』があり、合わせていままで使ってきた『jQuery』を含めた4つの選択肢の中からどれを選定するかを決めるミーティングを開発メンバーと行いました。

選定方法は、評価する項目(学習のしやすさ、ドキュメントの量、エコシステムの充実度、SPAに向いているか等)複数の評価項目に対し、ライブラリ・フレームワークごとに点数化し最高得点のものを新サービスで使用する』といった方法です。

点数を付ける際もメンバーと意見を交わしながら妥当な点数を相対的に付けていく形で進めていきました。

そして、最終的に一番点数が高かったのがReactでした。
これが、『旬をすぐに』がReactで作れられることになった経緯です。


3.Reduxの存在

さて、ここからはいよいよReactの中身の話になっていきます。
『旬をすぐに』の開発を始める際、まずはじめに行ったのは設計です。
Reactの設計をする際にまず一番重要となってくるのが、『Redux』を入れるのか、入れないのかという問題です。

ReduxはReactの状態を管理するためのツールです。
Reduxの詳細説明は割愛しますが、Reactを便利にしてくれる道具の一つです。
Reduxを導入するかしないかに関しては、『開発の規模』に左右されると思います。
例えばランディングページのような規模の小さい(ページ遷移の少ない)開発であればReduxは不要説が濃厚です。
逆に、中規模〜大規模の開発になってくるとReduxの導入は必要となるケースが多いと感じています。

また、Reduxを導入する場合、学習コストが高くなるため、不要であれば無理に導入しない方が良いです。

Reduxに関しては後から導入することも可能ですが、後から導入するとコードの改修が広い範囲で必要となるため、開発開始時に決定しておいた方が良いです。

ちなみに『旬をすぐに』は前もってある程度の規模の開発になることが予想できたため、開発に入る前にReduxの導入を決定することができました。


4.Reactの課題

今回の件で感じたReactの一番の課題は、学習コストでした。
React自体の学習コストではなく、『Redux』、『Webpack』、『Redux Form』など、React・Reduxの周りを取り巻くツール群です。

Reactについては『コンポーネント指向』、『propsやstate』、『ライフサイクル』、『再描画の仕組み』という要点を掴んでしまえば理解は早いのですが、Reduxをしっかりと学ぼうとすると、『action typeやaction creator』、『reducer』、『store』、『mapStateToProps』、『mapDispatchToProps』など、新たな概念が加わるので混乱しやすいというのが原因の一つと考えています。

ただし、最近はReduxのHooksRedux ToolkitといったReduxの補助ツールの登場により、やや学習はしやすくなったように感じます。

そのため、Reduxの学習については『Hooks』と『Redux Toolkit』ありきで学び始めた方が理解しやすいかもしれません。
Hooksを使えば大抵の場合『mapStateToProps』、『mapDispatchToProps』の存在を無視できますし、『Redux Toolkit』を使えば『action typeやaction creator』を無視できるからです。


5.Reactの布教

『旬をすぐに』のECサイト開発は属人化を防ぐため、チームメンバーへのReactの布教を急ぎました。

具体的に行なった布教活動としては、数回に渡って社内勉強会を開催しました。
第1回ではReactに絞って勉強会を行い、メンバーがReactを理解する機会をつくることができましたが、第2回に行なったReduxの勉強会では残念な結果となってしまいました。

原因は、第1回の勢いのまま、第2回ではRedux、React Router、Redux Formなどなど
React、Reduxの周りを取り巻くパッケージ群を詰め込んで説明してしまったことでした。

メンバーがReactへの興味を失い掛けていたので、次なる策として、座学だけではなく、より実践をイメージしやすいように、実際に開発で使用しているコードを見ながら、都度説明と質問を受ける形で実施しました。
このやり方の場合、一度に布教できる人数はどうしても限られてしまいましたが、何人かのメンバーがReactに目覚め始めることができました。

もしも、これから現場でReactを布教する予定の場合、Redux布教の際は同じ鉄を踏まないようご注意いただければと思います。


6.ECサイトとReactの相性

今回、社内では初の試みとしてECサイトをReactで作成しました。
開発当初はReactで構築されたECサイトの例があまり多くはなかったので少し不安に感じる部分はありましたが、実際に開発をしてみて感じた『ReactとECサイトの相性』については、「悪くは無いな」という印象です。

ただ、商品ページへのダイレクトな流入がメインで、商品ページに購入フォームもくっついているようなECサイトについてはページ遷移が少ないので、わざわざReactで作成する必要はないかと思います。
『旬をすぐに』の場合、サービスの特性上、商品名での検索流入の割合は少なく、トップページから各コンテンツへと巡回していく構成となっているので、Reactの恩恵を受けられるという意味で相性につきましては『悪く無い』といった形で私は評価しています。


7.まとめ

今回は具体的な技術内容はほとんど触れませんでしたが、長期に渡り、ReactでのECサイト開発を通して感じたこと、学んだ事を主に共有させていただきました。

まとめると
・Reactを選んだ理由は、相対的で公平な評価の結果である
・React(Redux)の導入で一番の課題は学習コスト
・Reduxを学習する際は『Hooks』と『Redux Toolkit』ありきで進めると敷居が下がる
・サイト内循環を期待するサイト構成なのであればECサイトとReactの相性は○


メンバー募集

ファンデリー デザイン・システム室では現在メンバーを募集しています。
国内最大級のReactによるSPAのECサイト開発に興味のある方、ご応募お待ちしています。
同時に、匿名で投稿可能な質問箱もありますので、気になること等があればお気軽にご質問ください。

デザイン・システム室へのご質問 >

募集要項およびエントリーフォーム >