こんにちは、エンジニアの服部 (yhatt@github) です。YAGOでは、主にフロントエンドエンジニアとして従事しています。

世間的には、オープンソースのツール/ライブラリである Marp (Markdown Presentation Ecosystem) の開発者、と言った方が、馴染みが良いかもしれません。

皆様は、年末いかがお過ごしでしょうか。この記事では、2022年のまとめとして、YAGOのエンジニアとして従事してきたこの1年弱を、開発的な視点で振り返ってみたいと思います。

略歴

前職では、社内向けのシステム開発や、B2B2CサービスのWebフロントエンドなどに関わっていました。

2021年の春に退職し、他のスタートアップのお手伝い（主にiOS/Androidアプリ開発）を半年ほど挟んだ後、同年10月よりYAGOにジョインしました。

現在は主に、 classmallなどのWebフロントエンド実装全般を担当しています。

ジョインの決め手

私が YAGO にジョインすることに決めたキーポイントは、以下の2点です。

QoL の向上に貢献したい

大前提として、『開発を通じてプロダクトを支える存在でありたい』という想いは常日頃からあるのですが、それに加えて、コロナ禍による生活習慣の変化や、年齢による意識の変化により、『生活の質 (QoL: Quality of Life) の向上に貢献したい』 という想いが強まっていました。

『そういった分野で活躍する人たちを支えられるようなプロダクトに携わりたい！』という気持ちの中で出会ったのが、classmallであり、YAGOでした。オンラインレッスンを通じて、ライフスタイルの向上を支援する先生方をエンパワーすることは、まさしく私のやりたいことでした。

技術スタックの親和性

もう1つの決め手は、『広い技術領域での相性の良さ』です。

パフォーマンスを最速で発揮するためには、プロダクトを俯瞰して素早く把握することが重要です。classmallでは、Ruby on Rails + MySQLのバックエンドや、決済環境としての Stripe の利用など、比較的普遍的な技術構成を取っています。その点で、過去の業務経験とも相性が良く、ジョインする決め手となりました。

参考: classmall の技術スタック (2022年12月現在)

バックエンド: Ruby, Ruby on Rails, MySQL, Redis (Sidekiq)
フロントエンド: JavaScript, TypeScript, React 18, Vue 2.7
インフラ: Heroku, AWS, Cloudflare, Terraform (一部)
決済環境: Stripe
使用サービス: Zoom, Twilio, Imgix

今年の開発を振り返る

そんなYAGOで1年弱、どんな開発を行ってきたか、代表的なものを振り返ってみたいと思います。

私の専門はWebフロントエンドになるので、そちらに寄ったものが多いですが、実際にはさまざまな技術領域に手広く携わっています。

プロダクトを磨く ✨

私がYAGOに入ったタイミングは、classmallがローンチして半年ほど経過したころ。基礎はある程度完成しているため、「プロダクトを磨く」ことにフォーカスが当たりました。

最初のタスク: 領収書PDF発行

最初に携わったのは、バックエンドの実装が中心となる『クラスの領収書PDF発行』でした。DB設計を正しく把握する必要があることから、プロダクトの理解を深める足がかりとなりました。

実際の実装では、私がOSS活動で培っていた、Headless Chrome 経由でのPDF生成処理の経験が活かされている部分もあります。

一方、この方法には不確定要素も多く、安定したPDF生成処理は、思ったよりも長い道のりです。PDF生成中のリモートリソースのフェッチの削減や、Chromeインスタンスのパラメーター調整など、試行錯誤の末、現在の実装に至っています。

フロントエンド最適化

当時はWebフロントエンドのリソースが充足しておらず、classmallでは思うような改善ができていませんでした。そのため、私が入ったタイミングで、ブーストをかけるかのごとく、多くの最適化が行われました。

バンドルサイズに影響するライブラリの除去 (jQuery/moment/axios など)
UIコンポーネントライブラリの見直し (必要に応じてより軽量な実装に換装)
遅延読み込みの徹底
未使用CSSのパージ
etc...

ページにもよりますが、機能が増えた現在でも、各ページで最初に必ず読み込まれるクリティカルなリソースの総量は、当時の半分程度まで減らすことができました。

まだまだ改善し切れていない部分も多いですが、快適にサービスを使ってもらうための及第点には到達したかな、という印象です。

Reactへの移行 (現在進行中)

現在のclassmallでは、インタラクティブなUIが求められる箇所で、主にVue 2が採用されています。

フロントエンド領域の整理に伴い、当初はVue 3へのバージョンアップを検討していました。ところが『現在採用しているデザインフレームワークのコンポーネントライブラリが、Vue 3の対応を放棄してしまった』ことで、もっと抜本的な対策を打つ必要がでてきました。

プロダクトのスケールや、デザインシステムの構築など、さまざまな懸案事項を基にアプローチを検討した結果、『既存のコンポーネントは活かしつつ、漸進的にReactへ移行する』こととなり、その土壌を整えることになりました。

yarn workspaces によるコードベースの分割 (Main / Vue / React)
React 使用箇所の遅延読み込みによる、バンドルサイズ肥大化の抑止
既存 Vue コンポーネントの React への移植 (逐次実施中)

Vue 2のサポート終了は2023年末と、現時点では猶予があります。そのため、『他の価値提供を止めてまでReact移行するのは、時間的ロスが大きい』ことから、一定期間はVueとReactが共存する形になり、更新のタイミングなどを見計らって少しづつ移行を進めています。ある程度移行が完了したら、苦労点などを改めてブログ内で深掘りするかもしれません。

プロダクトの礎を築く 🏯

ある程度プロダクトを磨き、精通度合いが増してきたところで、サービスの核となり得る機能開発に着手し、「プロダクトの礎を築く」タスクに取り組みました。

コミュニティ

2022年10月にリリースされた、classmallのコミュニティ機能は、先生が生徒さんに向けて、会員制のコミュニティを開設できる機能です。（かつて「メンバーシップ」と呼ばれていた機能のリニューアル版）。

先生にとっては、コミュニティメンバーへの情報発信の場として活用していただける他、コミュニティに参加している先生・生徒さん同士でもメッセージのやりとりが可能です。

この機能は、バックエンド・フロントエンドの主要な実装を担当しました。classmallは基本的に、MPA (Multi-page application) で構成されていますが、コミュニティはサービスの性質から来るユーザー体験を考慮し、SPA (Single page application) を採用しています。

メディア配信基盤の構築

インフラ面では、classmall上で動画や音声のオンデマンド配信を実現することを目的に、AWS (Amazon Web Services) 上にメディア配信基盤を構築しました。

先のコミュニティ機能においては、SNSとほぼ同じ感覚で使用できる、『動画アップロード機能』として実装済みです。生徒さんに向けて、レッスンのアーカイブ動画を配信する、などの用途でご利用いただいています。

この配信基盤では、動画変換にElemental MediaConvert、配信にCloudFrontおよびS3を使用しています。また、配信基盤にはTerraformによるIaC (Infrastructure as Code) も実践的に行なっています。

将来的には、配信基盤を活用したサービスの拡大や、classmall Kidsなどの他サービスにおける活用も検討しています。

コーポレートサイト・ブログ

プロダクトの他にも、しばらくあまり手をつけられていなかった、弊社コーポレートサイトの刷新も実施しました。Next.jsで書き直された新たなコードベースに更新され、今ご覧いただいているブログコンテンツも、Next.js上で新たに構築したものです。

配信インフラは、従前よりAWS Amplifyを採用しています。丁度11月にNext.js 13のサポートが発表されたことで、インフラ側のアーキテクチャを変更せず、ISR (Incremental Static Regeneration) のようなCMS管理コンテンツに適した機能を使用できるのが幸いでした。ヘッドレスCMSには、microCMSを採用しています。

今後、弊社のプロダクトや、社内での取り組みをより広く発信するための場として、ブログを積極的に活用していければと考えています。

実際どんな感じ？

価値提供が第一

私は "フロントエンドエンジニア" という立場ですが、厳格にそれしかやらない、ということではありません。開発においては、どのメンバーも必要に応じて、フロントもバックエンドもインフラも、一通り触ることが多いです。これは、各メンバーの前提として「ユーザーに価値を提供する」という想いがあり、その結果としてのアクションが、専門領域にとらわれない開発につながっている、と私は解釈しています。

その結果として、プロダクトを支える様々な技術に触れることができるため、エンジニアとしても学びが大きいです。例えば、私はAWSよりもGCP (Google Cloud Platform) の歴の方が圧倒的に長かったので、インフラの構築タスクでは、新しい学びや発見が多くありました。

無論、いろいろな領域に触るといっても、人それぞれの得意・不得意によって、理解度の濃淡が出てきます。エンジニア間では、GitHubのレビューや、Slack上でラフにコミュニケーションを取り合い、互いの領域を補完し合いながら、価値提供という同じゴールに向かって開発を進めています。

プロダクトチームの一体感

プロダクトチームは、エンジニア・デザイナー・マーケター・プロダクトマネージャーからなるスモールチームです。週に1度のプロダクト開発MTGで、前週の成果やその週のタスクを共有します。

また、リモートワークのメンバーも多いため、オンライン・オフライン関わらず、社内ステークホルダーとのコミュニケーションを密に取っています。開発では、実装した機能の仕様情報（特に『一定条件下での表示』などの、単純にプロダクトを見ても伝わらない情報）などを、ユーザー向け・開発向け双方ともに、意識的にストック情報としてチケットに残すことを心掛けています。

このようなプロセスの中で感じるのは、チーム全員が同じ方向を向いて進めているという『一体感』です。特に規模の大きな機能開発になると、仕様決定やテストなど、チーム全員が協力して乗り切る必要がある場面が多々あり、そういった場面で先の取り組みが活きてきます。チームメンバーの認識を揃え、同じゴールに向かって進めていくことは、難しさもありますが、その分達成感もひとしおです。

おわりに

最後までお読みいただき、ありがとうございます。2022年は、classmallにおけるコミュニティのような大きな機能の他、classmall Kidsもスタートし、YAGOのプロダクト開発としては新たなフェーズに入りました。

2023年も、多くの先生・生徒さん方に価値あるサービスを提供できますよう、開発の手を打っていく所存です。また、その中で生まれた開発に関するノウハウなども、順次このブログで展開できればと思います。

‪

最後になりますが……YAGOは、プロダクトチームで一緒に働く仲間を募集しています！私たちと一緒に、ライフスタイルの向上に貢献するプロダクトを開発することに興味のある、エンジニア・デザイナーの皆様、まずは気楽にお話しましょう！

採用情報はこちらから 👉 https://yagoinc.jp/recruit

#フロントエンド開発

YAGOのエンジニアとして駆け抜けた1年を振り返る

カテゴリー

タグ