はじめに

こんにちは！ウェブ版クラシルの開発を担当しているフロントエンドエンジニアのしらりんと申します。

4月になり、この記事を読まれている方の中にも社会人になられた方もいらっしゃると思います。 2年前の記事ですが、当ブログにも新社会人の方へ向けたメッセージがあるので、ぜひこちらも読んでいただけたら嬉しいです🌸

tech.dely.jp

さて、今回はウェブ版クラシルとその開発事情について、これまでの変化や課題、これから何に力を入れて取り組んでいくかなどお伝えできればと思います。

これまでのウェブ版クラシル

サービス面

開発面の話の前に、ここ数年のウェブ版クラシルの成長について軽く触れておきます。ウェブ版クラシルはエンジニアやデザイナー、SEOなど各ビジネス領域の担当者が1つのチームとなってプロダクトづくりをしています。現在はコンテンツをより多くの人に適切に届けるための外部流入最大(最適)化やウェブを接点としたアプリ版クラシルのインストール・起動想起、広告収益などいくつかの領域に注力しています。

上記の画像はウェブ版クラシルの直近3年間のユーザー数の変遷です。 2020年の4月、1回目の緊急事態宣言時には内食需要が高まったことによって多くの方に利用いただきました。一旦はそこがピークとなりましたが、2021年末にはアプリ版からユーザーがコンテンツを投稿できる機能が解放され、それによって社内で制作するコンテンツだけでは実現できないより多く、より個性的なコンテンツが集まるようになりました。

それらUGCを含むグロース施策や機能開発やを積み重ね、そのピークを安定して超えるユーザー数まで成長しました。

www.similarweb.com

開発面

機能開発に力を入れて取り組むためにフロントエンド・サーバーサイド共にエンジニアリソースの多くを機能開発に充ててきたため、これまで継続的な技術負債解消には力を入れておらず、徐々に蓄積してきた技術負債が起因となったバグやパフォーマンスの低下がみられるようになってきました。

開発における複雑さを定期的に下げて健全な状態を保ち、より早くより良いものを提供するサービスにしていくために、CTO含め話し合った上で機能開発と技術改善の2軸の開発体制を作る意思決定をしました。まだ直近数ヶ月で変え始めたばかりですが少しずつ良い方向に向かっているので、その取り組んでいる/これから取り組む内容を以下にまとめてみました。

直近取り組んでいる/これから取り組むこと

エンジニア採用

技術改善を行いつつ、機能開発も両立させるには今のチーム体制では実現が難しいのでまずはフロントエンドエンジニアを採用することが必要と考え、最初に採用活動を行いました。こちらは無事に採用することができ、直近で新しいメンバーがチームに加わる予定となっています。

ここからは機能開発と技術改善がそれぞれに注力しつつ互いにケアできる体制づくりを目指していきます。

止まってしまった移行プロジェクトを完遂し、あるべき姿に作り替える

ウェブ版クラシルは、当初Rails + Slim + jQuery + CoffeeScriptで開発されていました。その後、RailsからNode.js + Vue.jsに移行するプロジェクトが進んでいたのですが、そのプロジェクトが機能開発とのバランスを取りきれないまま完了せず、現在もVue.js・Node.js・Railsが複雑に入り組んだ上に新しい機能を作り続けています。例えばheadタグの中をみてもRails側で生成しているタグとVue.js側で生成しているタグが混合していたり、本番で動いているページはVue.jsで動いているのに、プレビューページはSlimでビューを返しているため本番ページとUIや挙動に差異があったりと多くの辛みを抱えています。

また、フレームワークはVue.jsの2系をvue-property-decoratorやvuexなどと組み合わせて開発していますが、Vue.js 2系のサポートが年末に迫り、バージョンを3系へ上げることや他のフレームワーク・ライブラリへの移行を考える必要があります。Vue.jsへの移行を始めた当時と比べてサービスの規模が大きく変わっているにも関わらず、設計方針は当時からアップデートできておらず、propsリレーやミックスインの多用による意図せぬ上書きなどフロントエンド単体としてみても多くの負債が散見されます。

そういった開発体験の改善も合わせ、まずは元々のNode.js + Vue.jsへの移行プロジェクトを完遂して当時理想としていた形にし、そこから2023年時点でウェブ版クラシルにとってあるべき設計を再考し、機能開発と並行してリアーキテクチャを進められる状態を作っていきます。

Node.js バージョンアップ

ウェブ版クラシルではNode.jsとvue-server-rendererを利用して自前SSRを行なっています。ここで使用しているNode.jsのバージョンはRails→Vue.jsへの移行プロジェクトを進めていた当時から適切に上げられておらず、以下のような課題を抱えています。

使いたいライブラリを入れられない、バージョンを上げられない
ブラウザ上で動く構文がNode.jsのバージョン制約で動かないものもあるため、縛られてしまっている
セキュリティやパフォーマンス面の課題

直近では変更ログを見ながら影響反映を確認し、一旦14系まで上げ切ることを目標にアップグレードを進めており、現在ステージングで動作を確認できている状態です。 14系ももう時期サポート終了となるためまた16系へのアップグレードを考える必要がありますが、そこからは定期的なアップグレードを続けられるように改善していきます。

CWVに基づくパフォーマンス改善

ウェブ版クラシルではCore Web Vitalsのスコアを計測し、ディレクトリやページの単位など細かい条件を指定して各スコアをエンジニア以外のメンバーも含めredashから確認できるようにしています。ユーザー体験としてはもちろん、このスコアがSEOにも影響を与えるため、ビジネス的な側面でもウェブにおけるパフォーマンスを重要視していくべきと考えています。

残念ながら現状のウェブ版クラシルは技術的に取り組めていないことが多く、優れたパフォーマンスを提供できてはいません。 Vue.js 2系からの脱却を兼ねたフロントエンド周りの刷新に合わせてサーバーサイド・インフラ含め見直しを行う予定です。

また、短期的に改善が見込めてかつアクセス数が多く改善する意義の強いページは、根本改善とは別軸でボトルネックの調査と改善対応を差し込みで行っています。

以下は実際に改善に着手したとあるディレクトリの改善前後のLCPのスコアの推移です。