キャリアソフトウェアエンジニアリングのこれから2年
Addy Osmaniは今後2年間を、ジュニア採用・スキル低下・役割の進化・スペシャリスト対ジェネラリスト・教育という5つの未解決の問いで整理し、確定的な予測ではなく対照的な2シナリオとして提示しています。6,200万人の労働者を対象にしたHarvardの研究によると、生成AIの導入から6四半期以内にジュニア開発者の雇用が9〜10%減少する一方、シニアはほぼ影響を受けず、大手テック企業の新卒採用はこの3年で50%減少しました。スキルに関しても議論は続いており、開発者の84%がAIアシスタントを定期的に使用する中、エントリーレベルの業務はアルゴリズム実装からAI出力の検証へと移行しています。OsmaniはAIがスペシャリストよりジェネラリストをより効果的に増幅させるとして、T字型エンジニアを最も持続可能な形として挙げており、すでに45%近いエンジニアリング職がマルチドメインの習熟を求めています。人間の競争優位性はアーキテクチャ、セキュリティ、システム設計、メンタリング、そしてAI出力の誤りを見抜く判断力に集約されます。
Read Articlearrow_forward Article · ブラウザREAD TIME: 15m
すべてのブラウザAPIが「Web」APIとは限らない
Polypaneのブログは、Webプラットフォームに広く誤解されている亀裂を明らかにします。標準化されているように見える多くのブラウザAPIが、実際にはベンダー運営のプロプライエタリなバックエンドサービスへの薄いラッパーにすぎません。Geolocation APIはChromeおよびChromiumベースのブラウザでGoogle Location Servicesを経由し（Firefoxも2024年にMozilla Location Serviceを廃止後Googleのサービスへ移行）、ユーザーの位置データがブラウザの通知なしに第三者サーバーへ送信されます。Speech Recognitionはブラウザに応じてGoogle、Apple、またはAzure Cognitive Servicesへ音声をストリーミングします。Chrome 139ではオンデバイス処理のオプトインprocessLocallyフラグが導入されましたが、Chromeのみで利用可能です。WebAuthn passkeysはGoogle Password Manager、iCloud Keychain、Microsoftアカウントを通じて同期され、完全にベンダー管理下に置かれます。Web PushはFCM（Chrome/Edge）、APNs（Safari）、Mozillaインフラをそれぞれ経由し、レート制限やメッセージサイズ上限（FCM: 4 KB、APNs: 5 KB）が異なります。記事はこれらのAPIをベンダーサービスの統合として扱い、テスト済みブラウザを文書化し、グレースフルデグラデーションを設計し、プライバシーへの影響をユーザーに開示することを推奨しています。
READ_FULL_LOGarrow_forwardArticle · ツールREAD TIME: 5m
Vitest設定でProjectsを使うべき理由
VitestのdefineConfig内のprojects配列を使うと、単一の設定ファイル内に複数の名前付きテストランナーを宣言でき、各プロジェクトはextends: trueでルートレベルの共有設定を継承しつつ必要な部分だけをオーバーライドできます。これによりvitest.unit.config.tsとvitest.integration.config.tsを別々に管理する手間がなくなります。一般的な設定はファイルサフィックス（*.unit.test.{ts,tsx} vs *.integration.test.{ts,tsx}）でテストを分割し、vitest --project unitやvitest --project integrationのようなnpmスクリプトを提供します。--project proj1 --project proj2で両方を同時実行することも可能で、これは別々の設定ファイルでは実現できない機能です。Vitest Browser Modeも同じ構造に自然に統合でき、browserプロジェクトにbrowser.enabled、playwright()プロバイダー、専用のsetupFilesを追加するだけです。注意点として、coverageとreportersはルート設定に置く必要があり、プロジェクト別の設定が必要な場合は別ファイルに戻す必要があります。
READ_FULL_LOGarrow_forwardArticle · パフォーマンスREAD TIME: 5m
Reactで数千のアノテーションを処理しながらレンダリング性能を最適化した方法 — パート2
NutrientのIgor Perzicは、Web Viewer SDKに適用した3つの精密なReact最適化を紹介しています。Part 1での広範な改善（メモ化、web worker、タスク遅延）の後も、数千のドキュメントアノテーションを同時レンダリングする際の遅延が残っていました。チームはReact Scanで再レンダリングのヒートマップを取得した後、前後のpropsを比較してトリガーを特定するカスタムフックを作成し、レンダーごとに再生成されるコールバック参照、インラインスタイルオブジェクト、JSX子要素が主な原因であることを突き止めました。Reduxでは、.filter()や.map()で新しい配列を返すuseSelectorセレクターがストア更新のたびに再レンダリングを引き起こしていました。対策として、関連する状態スライスに絞ったuseMemo内で派生値を計算するか、オブジェクトを返すセレクターにshallowEqualを渡す方法で解決しました。SDKはグローバル状態にImmutable.jsを使用しており、プロパティ変更のたびに新しいオブジェクト参照が生成されるため、useMemo/useCallbackの依存関係をannotation.idやannotation.typeなどの特定のプリミティブフィールドに絞ることで不要な再計算を防ぎました。これらの変更後、1つのアノテーションにホバーしても全アノテーションが再レンダリングされなくなり、CPU使用量が大幅に低下しました。
READ_FULL_LOGarrow_forwardArticle · パフォーマンスREAD TIME: 6m
パフォーマンスバジェット問題としての広告
Sarah Gerrardは、広告統合を後付けの懸念事項ではなく明示的なパフォーマンスバジェットの制約として再定義します。彼女は9月にTanStackエコシステムに参加し、未使用のJSパス・デッドCSS・単一のコミットに帰因できない複合的なパフォーマンス低下といった長年の技術的負債に取り組んだ経験をもとにこの論点を展開しています。ブラウザの観点では、サードパーティの広告スクリプトはファーストパーティのUIコードと同じメインスレッド・レイアウトとスタイルの再計算サイクル・ネットワーク帯域・メモリバジェットを奪い合います。「asyncで読み込めばいい」というアプローチはコストを先送りするだけで排除はできず、asyncスクリプトもパース・実行・レイアウト再計算を引き起こし、スケジューリング時間を争います。広告の隠れたパフォーマンスコストは、最初のインタラクションを遅らせるロングタスク、遅いDOM挿入によるレイアウトシフト、LCP・CLS・INPを悪化させる連鎖的な遅延として現れます。Gerrardは、収益化に事前に定義されたバジェットスライスを割り当て、未使用JavaScriptの削除・デッドCSSの除去・リンティングの強化・コンポーネント境界の簡素化でその分を取り戻すことを推奨しています。TanStackのようなドキュメント・コンテンツサイトでは、読者がテキストのジャンプを鋭く感じ取り、CLSの悪化が検索での発見性に直接影響するため、不安定性への許容度がより低くなります。
READ_FULL_LOGarrow_forwardArticle · ツールREAD TIME: 6m
WebアプリをE2Eテストするより良い方法
Swizec Tellerは、手書きのPlaywrightセレクターを記録・再生エージェントループで置き換えるオープンソースのTypeScriptライブラリe2e-testing-agentを紹介しています。初回実行時、エージェントはスクリーンショットを撮影してOpenAIのcomputer-useモデルに送信し、返されたブラウザアクションをPlaywright経由で実行して記録されたステップを保存します。購入フロー全体のテストにかかったコストはSwizecによると約7ドルでした。以降の実行は保存されたステップをトークン消費なしに再生し、約80%高速で動作します。UIが変わってもテストを書き直す必要なく回帰を検出できます。コンセプトはRuby VCRから借用しており、フロントエンド全体をサードパーティAPIとして記録します。テストはURLと"Sign up for the mailing list"のような自然言語の意図文字列の2引数で記述し、実行時に環境変数の認証情報・fakerで生成した入力・データベースフィクスチャを取得するカスタムツール呼び出しもサポートします。各実行の最後に高速・低コストなモデル（現在はgpt-5-nano）が最終スクリーンショットで目標達成を視覚的に確認します。著者はcomputer-useモデルがまだ無人プロダクション利用には十分信頼できないこと、初回のエージェント記録では監視が必要な場合があることを認めています。
READ_FULL_LOGarrow_forwardsummarizeDigest_Summary
第2週のWeb開発一般のテーマは、AIの圧力下での職業的な生存と実践的な技術です。注目のエッセイはAddy Osmaniによる今後2年間のソフトウェアエンジニアリングのシナリオマップです。確定的な予測ではなく、5つの未解決の問い — ジュニア採用・スキル低下・役割の進化・スペシャリスト対ジェネラリスト・教育 — にわたる対照的なシナリオとして構成されています。Osmaniが引用するHarvardの6,200万人規模の研究 — 生成AI導入から6四半期以内にジュニア開発者の雇用が9〜10%減少、シニアはほぼ横ばい — はキャリアへの不安にデータという枠組みを与えます。彼の結論: 1〜2つのドメインで深く、スタック全体で広く通じるT字型エンジニアが最も持続可能なアーキタイプです。AIはスペシャリストよりジェネラリストをより増幅させ、すでに45%近いエンジニアリング職がマルチドメインの習熟を求めています。人間に残された一貫した競争優位は、アーキテクチャ・セキュリティ・システム設計・メンタリング、そしてAI出力の誤りを見抜く判断力です。
PolypaneのブラウザAPI調査は、内面化する価値のある構造的な驚きを明らかにします: 標準化されているように見える多くのAPIは、実際にはベンダー運営のバックエンドサービスへの薄いラッパーです。Geolocation APIはChromeとChromiumでGoogle Location Servicesを経由し（Firefoxは2024年に移行）、Speech RecognitionはブラウザによってGoogle・Apple・Azure Cognitive Servicesに音声をストリーミングします。WebAuthn passkeysは完全にベンダー管理のインフラを通じて同期され、Electronでは実装できません。Web PushはFCM・APNs・Mozillaインフラをそれぞれ経由し、メッセージサイズ上限も異なります（FCM: 4 KB; APNs: 5 KB）。実践的な処方は、これらのAPIをベンダーサービスの統合として扱い、テスト済みブラウザを文書化し、プライバシーへの影響を開示し、ベンダーロックインを意識的に計画することです。
今週のテストセクションは特に充実しています。defineConfigのVitestのprojects配列は、単一の設定ファイルでextends: trueによって共有設定を継承する複数の名前付きテストランナーを宣言し、--projectフラグで同時実行できます。Swizec Tellerのe2e-testing-agentは手書きのPlaywrightセレクターをOpenAIのcomputer-useモデルを使った記録・再生エージェントループに置き換え、初回は購入フロー全体のテストで約7ドルかかり、以降は80%高速に再生します。Nutrientによる数千の同時アノテーションに対するReactレンダリング最適化の深掘り — React Scanヒートマップ・カスタムdiffフック・特定の状態スライスに絞ったuseMemo・オブジェクトを返すセレクターへのshallowEqual — は、広範なメモ化戦略が残す性能問題のクラスに対する精密ツールキットを提供します。そしてSarah Gerrardによる広告統合を明示的なパフォーマンスバジェット制約として再定義する記事が今週を締めくくります。
Key Takeaways- T字型の深みを意図的に構築してください: ジェネラリストのプロンプトエンジニアが見逃すAIのミスを捕えられるドメインに少なくとも1つ深く投資してください。アーキテクチャ・セキュリティ・システム設計はAIによる代替から最も隔離された役割です。
- Geolocation・Speech Recognition・Web Push・WebAuthnの使用を今すぐ監査してください。各APIが経由するベンダーバックエンドを文書化し、プライバシーへの影響をユーザーに開示し、機能が低下するブラウザ環境のフォールバックを計画してください。
- サードパーティの広告スクリプトを追加する際は、事前に収益化のために定義されたパフォーマンスバジェットのスライスを割り当て、未使用のJavaScriptとデッドCSSを除去して相殺してください。広告をasyncで読み込むとメインスレッドのコストは先送りされますが、排除はされません。
