Classi開発者ブログ

教育プラットフォーム「Classi」を開発・運営するClassi株式会社の開発者ブログです。

Classiにフロントエンドエキスパートチームを作った話

こんにちは、Classiに入社して1年になるGoogle Developers Expert for Angularのlacolacoです。 今日はClassiに新しく フロントエンドエキスパートチーム を作った話を紹介します。

フロントエンドエキスパートチームとは?

日本のフロントエンド界隈(?)の方なら、フロントエンドエキスパートチームと聞いて真っ先に思い浮かぶのはサイボウズさんのチームだと思います。 Classiで新たに立ち上げたチームは、名前も含めてサイボウズさんのフロントエンドエキスパートチームをかなり強くインスパイアしています。 そのメンバーであり友人でもあるsakito君にはチームの設計にあたって相談に乗ってもらい、名前をそのまま真似ることも快諾してくれました。この場を借りて改めて感謝です!

speakerdeck.com

メンバー構成

2021年1月現在、lacolaco 1人のみです。

1人でチームを始めていいものか少し悩みましたが、サイボウズさんのフロントエンドエキスパートチームも最初はkoba04さん1人だったということを知って、決意が固まりました。

blog.cybozu.io

チームのミッション

Classiのフロントエンドエキスパートチームはサイボウズさんの先例に倣い、3つのミッションを掲げています。名前がまったく同じですがオリジナルの名前があまりにも優れていたため、変える理由が見つかりませんでした。

  • 支援
  • 探究
  • コネクト

支援

2020年、Classiはプロダクト開発に関わる組織体制を大きくアップデートしました。その詳細は元CTO現VPoEと、現VPoTが書いた過去の記事を参照ください。

tech.classi.jp tech.classi.jp

新しい体制では、クロスファンクショナルチームによってプロダクトを開発・運用するという色が強くなりました。 そしてクロスファンクショナルチームの常として、そのチーム内のメンバーだけでは解決が難しい課題に対して、横断的に各チームを支援する専門家が必要になります。

フロントエンドエキスパートチームは間接的あるいは直接的に各チームの課題を解決、または解決を支援することを第一のミッションとしています。 具体的には技術的な相談を受けたり、ペア作業・モブ作業に参加して指南したり、ドキュメントを書いたりといった内容になります。

探究

エキスパートチームがエキスパートチーム足るためには、その説得力を裏付けする専門性を養い続ける必要があります。 プロダクトの価値や開発品質の向上を目指し、フロントエンド領域において技術調査・検証を行い、プロダクト開発への導入を推進します。

コネクト

このミッションは名前はそのままですが、オリジナルの内容から少しアレンジを加えました。 フロントエンド領域について、社内のエンジニアと社外のエコシステム・コミュニティをつなぐハブとしての役割を、フロントエンドエキスパートチームの3つ目のミッションとしました。 オリジナルでは主に内から外への発信にフォーカスされていましたが、われわれのコネクトでは外から内への方向にもコネクトがあると再定義しました。

外から内へ、つまり社内勉強会や技術ブログなどの啓蒙のような活動になりますが、開発業務以外での技術習得の機会を増やすことが主な目的です。 外向きの発信が価値あるものとなるように、まずは世界を知ること。業務上の知識だけで井の中の蛙になってしまわないよう、社内だけでなく社外からみても通用するスキルを養う機会を増やせるといいと思っています。

いま向き合っている課題

Classiのシステムはまだまだ課題だらけなのは過去の記事でも述べられている通りですが、フロントエンド領域も特に課題が山盛りです。 それでも各チームが危機意識を持って改善に取り組んでおり、半年とは思えない成果が出ています。代表的なものをいくつか紹介します。

  • AngularJSの利用箇所をLTSバージョンのv1.8系へほぼすべてアップデート完了
    • 複数のアプリケーションでv1.2や1.3、1.5などが混在する状態でした
  • jQueryの利用箇所を最新バージョンのv3.5系へほぼすべてアップデート完了
    • 複数のアプリケーションでv1系とv2系がほとんどでした
  • AngularJSからAngularへの段階的移行が複数のアプリケーションで進行中
    • builderscon 2019で発表したAngular Elementsを使ったコンポーネントレベルリプレースを実践しています
    • すでにいくつかのアプリケーションでは本番環境でも動作中です

これらはすべて各プロダクトチームが熱心に取り組んだ結果で、頼もしい限りです。 フロントエンドエキスパートチームはこれらの課題を解消するサポートをしつつ、このような状況を将来に渡って生まれにくくするための全体の底上げを目指しています。

2021年の大きなテーマは、フロントエンドの運用面で当たり前にやるべきことを定義し、これまで軽視されてきたことを再認識してもらい、各チームで当たり前との差分に意識を向けてもらうよう推進していくことです。

f:id:lacolaco:20210107174735p:plain
全アプリを俯瞰したフロントエンド運用まるわかりシート

おわりに: FrontendOps文化を目指して

Webアプリケーション開発において、高速で信頼性の高い魅力的なユーザー体験を構築するための複雑性の重心がサーバーからクライアントへ移ってきていることは間違いありません。これが、フロントエンドの「運用」を重要視している理由です。

その流れの中で、FrontendOpsの考え方は、これまでブラックボックス的に扱われてきた「フロントエンド」という領域を解体します。少なくともここではフロントエンド開発とフロントエンド運用という領域を分けることができます。これはバックエンドでデータベースエンジニア、アプリケーションエンジニア、運用エンジニアなどの役割が生まれたのと同じことです。FrontendOpsはwebpack職人の代名詞ではありません。アプリケーションをユーザーへ届ける領域にフォーカスした専門領域です。

どんな機能や体験もフロントエンドを通してのみユーザーに届きます。にもかかわらず、フロントエンドの運用とそれがユーザーへ与える影響の理解が、フロントエンドエンジニアだけの関心になってきました。これを解消してフロントエンドの運用をチームの関心事とする意識の持ち方がFrontendOps文化 です。 この文化はDevOpsがそうであるように、開発者だけが考えることではなくチーム全体に求められるものです。「チームの全員が、フロントエンド運用が最終的なユーザー体験にどれだけ影響を与えるかを理解しておく」FrontendOps文化の本質はこの一点です。チームのメンバーが実施のための専門性を備えていなくても、重要性を理解して真剣に取り組みたいというマインドがあれば、チーム外の専門家と共に歩むことができます。

Classiも例に漏れずこれまでフロントエンドの運用が軽視されていました。ユーザー体験を中心にチームが駆動されるように、フロントエンドエキスパートチームの取り組みとしてFrontendOps文化の醸成を推進しようとしています。短期間で成果が出るものではないので、腰を据えて取り組んでいます。 こんな仕事に興味のある方はぜひ力を貸してほしいです。フロントエンドエキスパートチームはいつでも頼もしい仲間を募集しています!

© 2020 Classi Corp.