Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save mizchi/b803f6872035248f86309057d6c97ee9 to your computer and use it in GitHub Desktop.
Save mizchi/b803f6872035248f86309057d6c97ee9 to your computer and use it in GitHub Desktop.
あなたのパフォーマンスを倍にする Frontend Ops の傭兵はいかがですか

あなたのプロジェクトに Frontend Ops を。

2024/09/12: 好評につき、直近のタスクが埋まっています。現時点で受け付けしたものは、最低でも10月後半以降の開始となります。

[経営者の方へ] ウェブサイトが遅くなっていませんか?機能追加が遅くなっていませんか?

私 @mizchi は Node.js とフロントエンドのエキスパートです。もし私を知らなければ、御社のフロントエンド担当に mizchi とは誰か聞いてみてください。それが一番早いと思います。

Frontend Ops の専門家として御社のプロダクトの改善にご協力します。

Frontend Ops は、ウェブサイトのロード時間を改善したり、開発者の基盤に手を入れることで一日に何度機能を追加できるかという指標に貢献するロールです。その結果としてUXを改善し、ビジネスを前進させます。

成果報酬で、費用はざっくり 100万円*達成率 となります。(詳細は後述)

弁護士作成の専用の契約書・見積書もご用意しております。あるいは報酬固定の準委任契約も可能です。

仕事のオファーは [email protected] または https://x.com/mizchi (DM)まで。また、eesay で相談受付が可能な時間を確認し、ミーティングの予約をいれることもできます。

「そもそもウチだったら何ができるのか?」ということなども含めて、お気軽にご相談・お問い合わせを受け付けています。

[現場の開発者へ] 決裁権がないが、助けてほしい

自分やプロジェクトメンバーがビルドやツールチェインで苦しんでいるという認識があるなら、それによって失われている時間を試算してみてください。

例えば、次のような状況を仮定します。以下の数値に根拠はなく、自分の数値を入れて考えてください。

  • 開発環境でビルド実行からのプレビューが30秒(0.5分)で、それを一日に30回行う
  • 開発環境でユニットテストを通すのに3分で、それを通すのに平均5回
  • Git Push してから CI が完了する時間が20分で、テストが通ってレビューを受けられるまでに平均3.5回の修正が必要
  • 一日にレビューされる PullRequest の数が平均2件
  • チームの開発者が7人で、 平均年収700万

この時 0.5*30+(3*5+20*3.5)*2=185 で、この場合、一日のうち、およそ3時間はCIやツールチェインの実行にかかっていることになります。これを1時間減らすことができたときの価値を計算します。

700*7*(1/8)≒612 で、この場合年間約612万円の価値が創出できます。この試算した値と一緒に、上長やCTOにこの記事のURLを送りつけてください。

あるいはもっと直接的に、SPACE指標における開発者満足度が著しく低い、このままでは離職者が出る、という訴えが響くかもしれません。


より具体的な説明

Frontend Ops とは

DevOps 的な視点でフロントエンド周辺のツールチェインを改善を行うロールです。

近年複雑になってしまったフロントエンドのビルドパイプラインや、その成果物のパフォーマンスの計測・改善を行います。

具体的には、 Webpack/Vite のバンドラー最適化の視点からコードを修正したり、適切にビルドキャッシュを設定して開発環境のインクリメンタルビルドを改善したり、 GitHub Actions のワークフローを見直してボトルネックを解消したりします。

成果報酬型でパフォーマンス改善を請け負います

相談を頂いて改善に取り組むことになった場合、御社の Git(Hub) リポジトリの閲覧権をいただきます。

そこから相談内容に応じて、Frontend Ops のエキスパートとして指定されたリポジトリのパフォーマンスを計測します。

対象となる数値は CI の実行時間等の開発ワークフロー上の待ち時間、 Core Web Vitals 等の指標を参考に、相談の上で決定します。

  • 開発者体験の改善指標
    • Four Keys の変更リードタイム、サービス復元時間
    • SPACE のフローと効率性
  • サイトパフォーマンス改善指標
    • Core Web Vitals の LCP(初期画面の最大要素が表示されるまでの時間), TTI (画面が操作になるまでの時間)

計測後、報告後の相談を経て、そこから目指す目標値を設定し、目標値を目指して2~3週間ほど改善に取り組みます。基本的に単月契約の想定です。

相談のオンラインミーティングから契約書の作成、作業完了まで、オンラインで完結することが望ましいです。Google Meet, クラウドサイン, GitHub, freee のようなツールを想定しています。

注意点: 開発ワークフロー改善とサイトパフォーマンス改善は評価軸が大幅に異なるので、一つの契約の中で請け負うことはできません。契約の際は、どちらかにするか事前にお決めください。

達成率に応じた報酬設定

最終的に達成率に応じて報酬を決定することになります。最終的な報酬は以下の計算式になります。

報酬 = 前金 + (100万 - 前金) × 達成率(0~1.0)

達成率に応じて最大100万です。前金には調査・計測自体のコストを含んでおり、その割合については最初の相談時に難易度/実現可能性によって調査費用を決めることになります。

また、この作業と合わせて、再発防止の方法や、一般的なフロントエンド改善のアドバイスを行います。作業完了のミーティング報告後に、開発者を集めた勉強会というスタイルにすることも可能です。

このような契約内容に不安がある方は、電羊法律事務所 と共同で作成した専用の見積書・契約書もご用意していますので、[email protected] までお問い合わせください。

あるいは、不安定な契約を避けたい場合、固定給で 1ヶ月単位の準委任の契約も承っています。

おそらく2024年内は個人のフリーランスとして活動しますが、合同会社を作っている途上で、後々でよければ法人契約も承ります。会社の設立が完了したら、追って追記します。

実際の流れ

  • DMやメールにて相談受付
  • MTG: 相談・計測指標の提案(1.5h)
  • 見積書・契約書の作成 (1-2日)
  • 計測作業: (2-5日)
  • MTG: 現状の計測値の報告&ゴール設定: (1.5h)
  • 修正作業: (1-3週)
  • MTG: 作業報告・達成率の合意 (2h)

※参考値であり、実際の稼働時間を保証するものではありません

改善事例

ジャイアントパンダに注意 - Next.js のビルド改善 (株式会社GiXo様)

余談: なぜ技術顧問や顧問契約ではないのか

技術顧問のプロの方は反論があると思いますが、少なくともプログラミングに関してはある程度自分の手を汚さなければ、価値を提供するのは難しいと考えています。

私が過去に納得がいった顧問契約業は、最初に深くコミットしてからその後の経過を見守るタイプの契約でした。つまり、成長の基礎を自分からコミットし、その価値が損なわれないか見守る番犬としての役割です。

なので、私が技術顧問をするとしたら短期の契約で関わってからその後の相談になります。

他に依頼可能な仕事の例

このパターンに限らず仕事を受けることは可能ですが、基本的にパフォーマンスチューニングの仕事を優先します。

受けることが可能な仕事の例です。

  • OSS のライブラリにパッチを当てて機能を追加してほしい
  • Cloudflare や WebAssembly 等の最新技術の活用に不安があり、実運用できる水準のスタックを選定しボイラープレートを作ってほしい
  • 使いたい技術スタックがあるが、運用に不安があり、それを実運用する方法を整理してほしい
  • ユニットテストや E2E の運用に不安があり、ツールチェインを整理したい
  • LLM を用いたコード生成のワークフローを設計したい
  • 特に理由もなく技術的に面白いことをして採用アピールがしたい
  • 最近のフロントエンド追いつける気がしない助けて

いずれも、双方が納得できるゴールを設定し、それに対してコミットする、という形式での契約が望ましいです。


以下は、今回の取組を行うにあたってのモチベーションになります。

仕事を発注したいが不安がある方、あるいは単に読み物としてフロントエンド改善の動機が知りたい人向けのコンテンツになります。

誰?

(筆者を知らない/詳しくない人向け)

私は Node.js と React のエキスパートです。

とくに、以下の記事で日本の React の第一人者として知られています。 https://zenn.dev/mizchi/books/0c55c230f5cc754c38b9

自分の価値は、今現在のフロントエンドという職域が成立する前から、Node.js エンジニアの立場でフロントエンドの複雑化と向き合い続けたことにあります。超大規模フロントエンドやサードパーティスクリプトの限界環境まで、実践の場で研ぎ澄まされたノウハウがあります。

主に対象とする技術は以下になります。

  • Node.js, Deno, Cloudflare Platform, WebAssembly
  • TypeScript, JavaScript
  • React, Qwik, Svelte, Vue
  • Next.js, Remix, Astro, Vite, Webpack

…列挙するとキリがないですがモダンな技術なら一通り扱えるのと、また知らなくてもこの分野の基礎力があるので即座にキャッチアップできます。

略歴

  • 早稲田大学人間科学部人間情報科学科卒
  • 株式会社Aiming: ゲームクライアントエンジニア
  • Quipper, Ltd. (現・株式会社リクルート): 教育プラットフォームの開発
  • 株式会社Increments(現・株式会社エイチーム): Qiita の開発 / Kobito Electron版 の開発
  • フリーランス (2017-2019): 各社の React、Node.js, Next.js などの技術支援
  • 株式会社プレイド: サードパーティスクリプト、ノーコードプラットフォーム設計、AI関連技術のリサーチ
  • 現在フリーランス => 合同会社(予定)

目に見える数字に貢献して双方が納得したい

フリーランスや会社員として様々なプロジェクトを見てきましたが、一人のフロントエンド開発者としてわかったことがあります。それは、ほとんど大半の開発組織は非機能要件を計測する習慣がなく、それによって効率よく解決できる問題のほとんどを見逃している ということです。これが、非常にもったいないのです。

私はフロントエンド周辺のパフォーマンスチューニングに自信があります。自分の手にかかればほとんどフロントエンドスタックのCI時間の 50% を削ることはでき、 Core WebVitals のスコアを25点向上させることができるでしょう。

その成果のほとんどは、取り組み始めて数時間から1週間の間に見つかった問題の改善によって得られます。

なので単月契約で期限を決めて、最大限の効果が出る指標に注力することで、お互いが納得できる成果が出ると考えています。

[サイトパフォーマンス改善] 世の中のウェブサイトは、遅い

単に速いウェブサイトが好きです。仕事かプライベートかに関わらず、気に入ったサイトは Chrome の DevTools を開いて、構成を確認しています。

私はウェブメディアのような表示時間を重視するウェブサイト、ゲームのような重量コンテンツ、サードパーティスクリプトのユーザー側、サードパーティの提供側を体験しました。その過程で、 なぜ世の中のウェブサイトが遅くなってしまうのか、その理由は問題の発生経緯や段階について、おおよそ理解しているつもりです。

残念ながら、ウェブサイトが重くなる理由のほとんどは、「ビジネス上の根拠のない不安」です。昔から導入して存在理由がわからなくなったもの、がほとんどです。

これらが存在し続けている理由の半分は非技術的なレイヤーに踏み入っているので、開発者の立場で自由に外すことはできません。が、その影響を計測することは可能です。

そして、その影響の大きさを説明することができれば、その問題に取り組むための最初の一歩を踏み出すことが可能になります。

[サイトパフォーマンス改善] Core Web Vitals で UX と向き合う

近年の Google 検索は、ウェブサイトのパフォーマンスがSEOの指標の一つとして参照されています。

Core Web Vitals と Google 検索の検索結果について

これによって、ウェブサイトのパフォーマンスが非機能要件から準機能要件に昇格しました。 そして、LCP を 2.5 秒以内、というGoogleの推奨値は、最初からパフォーマンスを目的として作成されたもの以外ではほとんどのサイトで達成できていません。

私はウェブサイトが遅くなっている内訳を分析し、改善可能なものを洗い出すことができます。純粋に技術的なものはその場で修正します。

ただし、私は Core Web Vitals の数値の改善は貢献できますが、 SEO の改善を約束はしません。私はあくまで、 LCP や TTI の改善を通してユーザー体験に貢献するのであって、基本的にはコンテンツの価値がそのサイトの価値である、という立場をとっています。

SEO改善は、その道の専門家にご依頼ください。 https://ja.dev/

コンテンツの価値が技術的要因によって毀損されている場合に、その問題を取り除きます。

[開発者体験の改善] プログラマは10分で全てを忘れることができる

あなたの会社のプログラマは一日に何度コードを修正できるでしょうか。あなたの組織は、一日に何度デプロイできているでしょうか。

ビルド時間とテストの実行時間は、全てのプログラマにとって最も身近な指標です。これらの待ち時間は一日に何度コードを書き換えて確認できるかの試行回数に直結します。

目安ですが、私は自分のプロジェクトのCIが10分を超えないように、可能なら5分前後に落ち着くように気をつけています。これはそれ以上の時間を挟むと、その時に取り組んでいたタスクの中身を忘れてしまい、休憩から戻った際に脳をレジュームするのに10分以上かかったり、モチベーションが低いときは重要度に関わらず塩漬けにしてしまったりします。

一般的に、開発者はCIのリードタイムが長い環境で忙しくなってくると、待ち時間に別のブランチで作業をするようになります。これは多大なスイッチングコストを伴います。

個々人の適正もありますが、私はCIが15分以上かかることを望ましい状態だと思っていません。CI待ちで並列作業するにしても、同一ブランチに対してよりよいコードを考える時間にしたいと思っています。

もちろん、「CIが10分以内」は常に実現可能な数値ではありません。採用している技術によってはボトルネックを解消する手段がないことは十分ありえます。とはいえ、コスパが良い最適化は行いたい。ですよね。

開発環境・特にビルドとユニットテストに関わる問題は、開発者を直接的に不幸にします。悪化した開発環境を放置することは、簡単に離職理由になりえます。

本音: 傭兵の名目でフロントエンドISUCONの腕試しをしたい

本音を言うと、単にビジネスとしてやっていくという理由なら、今回のような単月契約はこちらに不利な内容です。単価を下げてでも長期的な契約を取るほうが安定します。

今回の独立は、前回の2017-2019のフリーランス経験と同じく様々な開発現場を見たい、という気持ちが強いです。 モダンな各種の(パッと見はキラキラした)ツール群を運用すると、実際どういう問題に直面するのか、という経験を蓄積することができました。そして、(残念なことに)それを一社に還元するだけでは、おそらく無駄が多いということも理解しました。

単月で不安定な分、報酬の上限は高く設定しています。そして腕に自信があるので、成果報酬でも問題なく稼げるだろう、という判断をしています。

独立そのものが目的ではなく、経験を十分に貯めて、それを還元できる現場があれば長期的には再就職も視野に入れています。が、しばらくは色々と見て回りたいです。そういう長期的な展望まで含めて、お仕事の依頼やオファーを受けることも可能です。

一応、転職する場合の希望としては、開発者向けの toD のサービスで、技術的な競争力が直接サービスの競争力となっていることが望ましいです。

最後にもう一度連絡先を載せておきます。

正直なところ、連絡理由は「なんかよくわからんが面白そうじゃん飲みに行くぞ」でも構いません。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment