Oisixを支えてきたシステムを大刷新中。オイシックス・ラ・大地のWebフロントエンドエンジニアの仕事とは

仕事と人

Oisixを支えてきたシステムを大刷新中。オイシックス・ラ・大地のWebフロントエンドエンジニアの仕事とは

2022.04.01

オイシックス・ラ・大地が運営するEC食品宅配サービス『Oisix』は、お客様の買い物体験が「より楽しく」「より楽」になるように、ECサイトやスマートフォンアプリのUI/UXの改善を重ねてきました。そして、更なる進化に欠かせない存在がWebフロントエンドエンジニアです。

ユーザーであるお客様が自身の目的を達成しやすく、かつ楽しくお買い物ができるようにするにはどうしたらいいか。見た目の表面的な部分だけでなく、保守性や拡張性なども考慮しながら、どういう設計や技術がいいかを検証し構築していくことが求められます。

現在、オイシックス・ラ・大地のWebフロントエンドエンジニアのチームでは、OisixのECサイトが長年使用してきたソフトウェアやインフラをモダンなものに置き換え、お客様により良い価値を提供していくことを目的とした刷新プロジェクトが進行中です。

この刷新プロジェクトの背景とは何か。また、オイシックス・ラ・大地でWebフロントエンドエンジニアとして働く魅力とは何か。今回、Webフロントエンド刷新プロジェクトのリーダーでもあるシステム本部の寺島伸さんに話を聞いてみました。

＝＝＝

Oisix ECサイトの刷新プロジェクト背景

ーー　早速ですが、寺島さんたちが進めているWebフロントエンド刷新プロジェクトの概要について教えてもらえますか？

寺島さん：
名前の通り、食品宅配サービス『Oisix』のECサイトのWebフロントエンド領域で使われているソフトウェアを刷新していくものです。

Oisixは2000年に開始したサービスですが、OisixのECサイトである『oisix.com』は開始当時の状態から刷新することなく、コードやファイルが継ぎ足されながら開発が進められてきました。この約20年間で、数々の新しいページや機能が『oisix.com』に追加されてきたわけですが、その過程で裏側が徐々に複雑化していました。

寺島　伸さん。
システム本部　基盤刷新部　Webフロントエンドセクション　セクションマネージャー
農学部生命科学専攻で修士修了後、新卒でSIer企業に入社し研究に関わるシステム構築や改修に従事。2年後、刷新プロジェクトに魅力を感じ、2019年オイシックス・ラ・大地に入社。現在は Oisix EC サイトのページの制作・刷新を担当するフロントエンドエンジニアチームで刷新プロジェクトのリーダーやセクションマネージャーを担う。

寺島さん：
OisixのECサイト自体はJavaで構築されており、基本的には自前のフレームワークがベースになっています。そして、フロントエンド部分はJSP (JavaServer Pages)とjQueryを中心としたJavaScriptライブラリで構成されています。

毎日の食生活を支えるというOisixのサービスの性質上、OisixのECサイトでは毎週新しいコンテンツがリリースされます。ただ、自前のフレームワークやJSP内に記述されているロジックなどに各機能が依存することがネックとなり、一般的なCMSでのコンテンツ管理は困難です。そのため、コンテンツをリリースする際には、新しいJSPとして記述され、コード内に蓄積されていくという状態でした。

週次という比較的タイトなスケジュールでのリリースと、新しいJSPとしてコンテンツを記述する性質上、制作の現場は既に使用しているコードをコピペし必要な部分を変えることが中心となりました。そして、その結果、同じような内容のファイルが大量に存在する状態になってしまいました。

また、コピペをして必要な部分を変えるという発想のためか、インラインスタイルシートやインラインスクリプトも大量に存在しました。結果、コピー元のページでは使っていたけど新しいページでは使わないスクリプトがエラーとなったり、CSSを変更したら意図していないところで表示が壊れるなどが発生する状況でした。

創業からの約20年で、Oisixは会員数が34万人を超えるサービスへと成長しましたが、この状況のままでは拡張性に限界があります。お客様により魅力的なサービスをお届けすることが遅くなってしまうかもしれない。そういった事態を防ぎ、拡張性も保守性にも優れた状態を目指すことが、Webフロントエンド刷新プロジェクトのゴールです。

運用と並行して、刷新を遂行する難しさ

ーー　寺島さんはオイシックス・ラ・大地に入社されてから一貫して、この刷新プロジェクトに携わっています。どんなところに難しさを感じますか？

寺島さん：
正直、難しいことだらけです（笑）。Oisixはお客様の毎日の暮らしを支えるサービスなので、運用を継続しながら、運用に支障が出ないように刷新を進めていく必要があります。どういう進め方がいいかを考えるのも容易ではありませんでした。

このプロジェクト自体は2018年後半に立ち上がり、私が入社したのは 2019年の7月で、当時のリーダーのもとでプロジェクトを進める開発者として参画しました。

私がプロジェクトに関わりはじめた当時は、特定のページをターゲットとし、そのページを Vue.js ベースのアプリケーション (MPA) として再構成していく方針で進められていました。ですが、そのアプローチでは運用を維持したまま継続して刷新を行うことが困難になると予想されたので、アプローチを見直すことになりました。

現在の開発・リリースの単位はページではなく、 UI パーツで行っています。変更の粒度を小さくすることで、リリースの影響を小さくすることができ、必要な時に切り戻しも比較的簡単になります。また、開発ごとの調査範囲を区切りやすくなることもメリットです。

寺島さん：
開発は2週間のタイムボックスで、開発・リリースを繰り返すスタイルで進めています。また、開発における各工程における作業手順や作成する文書などは、プロジェクト開始前にすべて文書化し、それに沿って開発を進めるようにしました。

現在、作業の形式化・文書化は文化としてチームに根付き、課題を発見するごとに文書を更新していくことを積極的に行うチームになっています。それにより、プロジェクトに新しく加わったメンバーが比較的スムーズに開発に入っていける状態を作れていると手応えを感じています。

私が刷新プロジェクトに関わりはじめて3年が経とうとしていますが、ようやく完遂までの道筋が少しは見えてきたという状態です。とはいえ、やるべきことは膨大で、完遂までにはまだまだ時間がかかりそうです。

メンバーが主体的に動けるチームを目指して

ーー　現在、このプロジェクトには何名のメンバーが関わっているんでしょうか？

寺島さん：
2022年の3月時点では、私を含めて社員が4人ですね。加えて協力会社の方が5人の合計9人が関わっています。システム本部にはWebフロントエンドエンジニアのメンバーが他に4人いて、主に制作や既存機能を拡張するプロジェクトを担当しています。

そのなかで、Webフロントエンドエンジニアの現在のプロジェクトメンバーは比較的最近入社したメンバーが多く、私以外の3人は全員2021年の入社です。

ーー　みなさん、どういった理由で入社を決めたんでしょうか？

寺島さん：
3人に共通しているのは、もともと受託開発の仕事をやっていたこと。そのなかで、外部から開発に関わるのではなく、その会社の社員として長期的に自社サービスを育てていく経験を積みたいという思考を全員がもっていました。

では、なぜオイシックス・ラ・大地かというと、理由は幾つかありました。ひとつは、Oisixはユーザーであるお客様とダイレクトに繋がっているので、お客様の反応が見えやすいこと。自分の仕事がお客様の生活に役立っている実感が得やすく、やりがいを感じられるということです。

また、事業の理念に共感したという理由もありました。オイシックス・ラ・大地は「これからの食卓、これからの畑」を企業理念に掲げ、食に関する社会課題をビジネスで解決することを目指し、様々な事業を展開しています。社会性と事業性を両立していこうとする企業姿勢に共感し、自分も仕事を通じて社会貢献に携わりたいというものです。

あとは、求人票に出ている技術との親和性だったり、成長しているサービスに携わることで自分を成長させたいとか、そうした動機も聞いています。

ーー　寺島さんが刷新プロジェクトのチームマネジメントをするうえで、意識していることがあれば教えてください。

寺島さん：
ひとつは、メンバー同士がコミュニケーションしやすい環境を整えることです。

オイシックス・ラ・大地では子育てしながら働く社員も多いことから、コロナ禍以前より、リモートワークを会社として積極的に推奨してきました。特に、エンジニアの場合、自宅環境を自分向けにカスタマイズする傾向が強く、生産性の面からもリモートワークを選ぶメンバーが多い状態です。

ただ、フルリモートワークになると、コミュニケーションが疎遠になってしまう不安もあります。特に、既存システムを対象に扱う刷新プロジェクトの場合、「なんで、ここはこうなっているの？」といった質問や確認をメンバー同士で密にとっていく必要があります。

そこで、刷新プロジェクトチームでは、ひとつの作業を2人や3人以上でやるペアワークやモブワークを推奨しています。はじめから複数人で作業することで、会話の中でスムーズに質問ができますし、知識を一人が保有することも防げます。

加えて、チーム内でのコミュニケーションでは、テキストコミュニケーションにはSlackを利用し、音声コミュニケーションにはバーチャルオフィス『Gather.town』を利用しています。この仕組みを導入したことで、同時多発的にコミュニケーションが行われるようになり、フルリモートでもプロジェクトを円滑に進めることができるようになりました。

寺島さん：
また、他に意識していることとして、各自が主体的に取り組みたいと思ったことを、極力実行できるようにしていきたいと考えています。

メンバーそれぞれが伸ばしていきたいスキルがあったり、技術書で学んだことを実務で試したいという意向をもっています。個人の意志と業務内容のベクトルがマッチしている時こそ、パフォーマンスが一番発揮されるはずなので、そのマッチングをしっかりと図っていきたいと思っています。

現在はメンバーそれぞれとの1on1を毎週行い、今度どういったことをやっていきたいかなどを聞かせてもらっています。また、仕事に慣れてきたメンバーには裁量を与えて、プロジェクトに問題がない範囲で、ある程度自由にやってもらっています。上意下達ではなく、自分主導で業務を進めることができる点に、やりがいを感じてもらえたら嬉しいですね。

挑戦の場として魅力を感じてもらえたら

ーー　刷新プロジェクトでは採用を強化中ですが、最後に、寺島さんから採用に興味がある人へ向けてのメッセージをお願いできますか？

寺島さん：
今回、私たちのプロジェクトについて色々と話をさせてもらいましたが、オイシックス・ラ・大地のエンジニアメンバーで運営しているブログに、さらに詳しい詳細を書かせてもらいました。興味をもっていただいた人は、そちらの記事も読んでもらえると、私たちのプロジェクトについての理解が深まるかと思います。

▶︎寺島さんが書いたブログ記事はこちら

寺島さん：
前述したように、この刷新プロジェクトは遂行がとても難しく、一筋縄ではいかないものです。私自身、何度も頭を抱えることがありましたが、その分、学びが多いプロジェクトだとも感じています。

刷新を完了するまでの道のりはまだまだ険しく、いろんな技術や開発のやり方を試せる状態にあるともいえます。自分が興味があるものを実務で試す場としても、魅力的に捉えてもらえるのではないかと思います。

また、刷新プロジェクトの先には、Oisixをさらに魅力的なサービスに育てるために、Webフロントエンドの領域で様々なことに挑戦していきたいと思っています。オイシックス・ラ・大地は個人の挑戦心を尊重する会社なので、「こうしたことに自分は挑戦したい」という意志をもっている人であれば、それを実行するチャンスは必ず巡ってくるはずです。

難しい課題を解くことで、自分の力を伸ばしていきたい。そんな意欲をもっている方と、一緒に働けたら嬉しいですね。