スナックミーのフロントエンドは何をしているか

はじめまして、スナックミーでマイページのフロントエンド実装を担当している前田です。

早いもので入社からもうすぐ2年が経とうとしています。

弊社は "おやつ" という食に関わるリアルな商品をユーザーにお届けしているので、その製造から配送までの空気感を全員が知るという目的で「出社できる人はできるだけ出社しよう」という文化があります。

...が、転職時期がコロナ禍真っ只中だったこと、 当時から福岡在住だったことなどの理由で、私はフルリモートで採用していただきました。

現在はフルリモートは私だけなので、飲み会 チームビルディングなどのために3~4ヶ月に1回ほど出社しています。

さて、表題についてです。

「おやつの会社の Web フロントエンジニアって一体何をするんだろう？」と思われた方もいらっしゃるかもしれませんが、snaq.me では定期便会員の方向けにマイページを公開しています。（以下は私の実際のアカウントのスクショです）

マイページでは、お届けしたおやつが美味しかったか・イマイチだったか？嫌いな食べ物は？好きなジャンルは？リクエストしたいおやつは？などなど、次にお届けする BOX をより好みに近づけるためにたくさんの機能が提供されており、その開発作業が主な業務です。

今回はこのマイページの開発をどのように進めているかについて、開発者目線で少しだけお話しようかと思います。（以降、技術寄りの話が続きます。）

1. 新規機能の実装・改善

言わずもがなという感じですね...…。

夏まつり・ハロウィン・クリスマス...など季節毎のイベント関連から、新機能追加や、既存機能の A/B テストなど日々優先度に頭を悩ませながら実装しています。

弊社は UI デザインとフロントエンドの実装の担当者が分かれているので、まずデザイナーの方に Figma で UI を作っていただき、実装前に「こっちの方がわかりやすいんじゃない？」「こういう表現もできるよ」などの意見を戦わせてから実装に進むことが多いです。

いつも可愛いデザインが届くので、「この UI はどこにどうインタラクションを付けるか」などを考えるのが私の楽しみです。

2. TypeScript への移行

おかげさまで snaq.me は今年6周年を迎え、マイページの Git リポジトリもファーストコミットは 2017年1月でした。

当時は TypeScript 2.0 がリリースされたばかりで今ほど導入事例もなかったこともあり、AltJS は使わずに JavaScript で作られました。

しかし、初期に作られたコンポーネントをどのように使えば良いかわからない, 意図しない部分が壊れて Sentry が火を噴く（もしくは静かに壊れる）, 私自身が型安全な開発を強く好む いう事情から、昨年8月ごろから徐々に着手しています。

まだ移行できていないファイルが30%ほどあり、 unknown などが散見される... など進捗としては50%にも満たない状況ですが、来年こそは安心して開発できるようになりたいです。

3. リファクタリング

1, 2 と関連する上、わざわざ書くほどでもないですが継続的にリファクタリングを行っています。

サービスリリース以降、多くの機能を追加し、使われない機能はクローズしてきました。その試行錯誤の結果、多くのデッドコードが残っていたり、アーキテクチャ的に耐えられなくなったりしています。

そうしたプログラムの整理は、ともすると「事業を前に進めるため」という理由で後回しにされがちで、未来の開発リソースを蝕むことになりかねません。

そこで弊社では月に1日 KAIZEN タイムと称して、開発者の判断で作業できる日が設けられています。

慣れるまでは 月に1日しか...と思うこともありましたが、「まとまった時間が必要なものは KAIZEN タイムで、細かい物は feature のついでに少しずつ」という習慣がついてからは継続的に整理できるようになりました。

と、ざっくりですがこのような感じです。

長く愛されているサービスを維持しながら、新しい機能を作り改善していくというのは非常に難しいですが、学びが多く 0→1とは違った楽しさがあります。

既にあるプロダクトを改善していくことに興味がある方は一緒に働きませんか？