こんにちは、こんばんは、For School事業部のid:atomiyamaです。
先日フルリニューアルされたStudyplus for Schoolのサーバーサイド開発、フロントエンド開発の一部を担当しました。
リニューアルに至った理由
画面読込速度の改善
これまでのStudyplus for Schoolは基本的にRuby on Rails(Slim)で実装されており、複雑な処理が実行されるslimでは表現できないような部分のみreact_on_railsでReactコンポーネントをマウントするような実装になっていました。
また主要な機能の多くのページに実装されている絞り込み条件設定や、表示期間変更などでは変更されるたびに画面全体が再描画されていました。
これらの問題を解決するために今回のリニューアルでSlimから完全に脱却してReact+Reduxを導入することになりました。デザインの刷新
以前のStudyplus for Schoolが開発されたときは専任のデザイナーがいなかったため、外注で依頼したデザインをもとに実装されていました。
しかし、 昨年から弊チームに専任のデザイナーが配属されたため、デザインシステムをはじめ今後の新規機能開発、改善をよりスピーディに行えるようデザインを刷新しました。
新たに導入したもの
上にあるように今回これまでのslim+react_on_railsから脱却し、React+ReduxでSPAを実装しました。
既存のRailsはAPIサーバーとして活用し、ReactとJSON APIでデータをやり取りするようになり、変更があればコンポーネント単位で再描画が行われるようになり、ユーザーの待ち時間は大幅に削減されました。
デザインでも AtomicDesignに準拠して再利用可能なコンポーネントを実装、Storybookでの管理を行いそれらを組み合わせてページを組み上げる形で実装を進めていきました。
統一されたパーツの集合でページが構成されているのでユーザーもページごとに異なる印象をあまり持つことがなくサイト上のどのページに行っても同じ体験をできるようになったと感じています。
また、既存のRailsはAPIサーバーという役割に変更されたため認証まわりにも変更を行いOpenID Connectを新たに導入しました。
Studyplus for Schoolには今回リニューアルされたアプリケーションの他に入退室管理を提供するElmで実装されたアプリケーションがあるため、それらの認証を全てまとめる目的で今回OpenID Connectを選択しました。
バックエンドのRails APIサーバーからはJSON APIを提供するように変更されたため、OpenAPI3でAPIの仕様を記述し開発段階ではモックのみをはじめは提供しクライアント側の開発が終わってから本実装を行うような形を取りました。これは私があまりフロントエンドの実装に慣れていなくて見通しが立たなかったのに比べて、Railsであれば比較的見通しがたったことが大きな理由です。(最終的にはチーム全体でこのフローで開発が進んでいましたが)
以上のような技術が今回のリニューアルで導入され、クライアントの部分とサーバーの部分がAPIを境に切り離されたため、今後デザインの改善や機能の改善も全体的に行いやすくなりました。
これからのStudyplus for School
今回のリニューアルは実装に7ヶ月という長い時間を費やしました(計画も合わせると1年弱)。チームメンバーと技術選定を行ったり、計画通りに開発が進まずに開発プロセス改善を試行錯誤したり、Reactに馴染みのない自分がいち早く習得できるようにチームメンバーにペアプログラミングを実施してもらったりと色々と大変なことがありましたが無事リニューアルを終えることができました。
今回システム全体を洗い直したことで新たに技術的な負債が浮き彫りになったり、また今回のリニューアルの中で発生した技術的負債もあります。
今後もそれらと向き合ってユーザー目線で、より良い体験を届けていくためにどんどん新しい技術の導入に積極的に挑戦していきたいと思っています。
