AI時代のフロントエンド開発には、仕様書に載らない情報の言語化が重要ではないだろうか

by Jun

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Structured communication is the bottleneck (AIが発達するに従って)構造化されたコミュニケーションがボトルネックとなる

Slide 5

Slide 5 text

© LayerX Inc. 5 Structured communication is the bottleneck ‧The New CodeというプレゼンでOpenAIのSean Grove⽒が述べた⾔葉 ‧今後、AIがコード⽣成を担うようになるにつれて、ボトルネックとなるのは、コードを書くことではなく、開発プロセス全体を整理‧構造化すること ‧なぜそれを作るのか？ ‧どのように仕様を決めたのか？（チームでの議論） ‧できたものが意図した通りに動いているか？ 👉こうした「⼈間のコミュニケーションを整理して記録する」がAIとの開発では⼤事

Slide 6

Slide 6 text

「⼈間のコミュニケーションを整理して記録」つまり...それは仕様書？🤔

Slide 7

Slide 7 text

Slide 8

Slide 8 text

© LayerX Inc. 8 私のチームは、仕様書‧テストが不⾜しがち ‧バクラク債権管理は2025年春にリリースされた新しいプロダクト ‧エンジニアが開発しながら仕様を決めていくので、最初の仕様書はざっくりとしか書かれていない ‧仕様書が更新されないままQAに渡ってしまい、エンジニア‧QA間で認識のズレが⽣まれたりする。機能リリース後は更新されない ‧テストはフロントエンドはあまり書けていない 👉つまりエンジニア‧QA‧AI間での認識のズレが起こりがち

Slide 9

Slide 9 text

Slide 10

Slide 10 text

それなら仕様書とテストを⾃動で作れたらいいのでは？そうすればメンテナンスもしやすい💡

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

© LayerX Inc. 14 テストの⾃動⽣成もやってみた Shortestという⾃然⾔語からテストを⽣成できるツールを使ってみた // 請求書一覧の最初の請求書をクリックする shortest("/invoices ページで、一覧の一番上の請求書をクリックする "); // 「請求メモ」に入力する shortest("「請求メモ」と書かれた入力欄をクリックする "); shortest("「これは請求メモです」と入力する "); //　「下書き保存」ボタンをクリックする shortest("「下書き保存」ボタンをクリックする ");

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

⾃動⽣成はもっと試⾏錯誤が必要そう...。そもそも仕様書とテストが⾃動⽣成できたらそれでOK？🤔

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

© LayerX Inc. 20 仕様書でカバーできないものとは ‧仕様書でカバーできないものはフロントエンドに多い ‧marginやpadding (例：なぜここは1remではなく2remのmargin-top？) ‧アクセシビリティ ‧開発過程の議論 ‧なぜここのボタンは右寄せにしたのか ‧なぜこのテーブル「メモ‧ラベル」カラムは２つに分けずに１カラムなのか ‧当初のデザインからなぜ変更されたのか 👉 こうした仕様書やコードベースに載りにくい、でもフロントエンドエンジニアが知っている背景がたくさんある

Slide 21

Slide 21 text

Slide 22

Slide 22 text

こうした「仕様書に載らない情報の⾔語化」がフロントエンドでは特に重要

Slide 23

Slide 23 text

Slide 24

Slide 24 text

© LayerX Inc. 24 具体的にどう⾔語化するか 2. アクセシビリティ ‧PlaywrightでアクセシビリティツリーのJSONを出⼒させる ‧できればDOMのスナップショットと近い場所に置く const a11ySnapshot = await page.accessibility.snapshot(); { "role": "WebArea", "name": "ログイン", "children": [{ "role": "text", "name": "メールアドレス/ログインID" }, … ] }

Slide 25

Slide 25 text

Slide 26

Slide 26 text

© LayerX Inc. 26 例 /z/settings/representativeSettingsPage.md これは「代表入金先設定機能」のメモである。似ているページは「◯◯設定」と「◯◯設定」ページ。開発過程での議論: - 新規作成ボタンは他の設定ページと違って左に寄せている。その理由は◯◯ - 他の設定ページを作る場合は、このページのボタンの UIに沿わない方が良さそうメモ： - そういえばdivタグでとりあえず実装してしまったけど、 sectionタグ使うべきだった - そのうちモーダルは共通化した方がいいかも - このモーダルのFormの項目増えたら負債になりそう

Slide 27

Slide 27 text

© LayerX Inc. 27 今後はこうしたい ‧MCP化して、⾃動でClaude Codeと対話させるようにしたい ‧理想はどんな細かいメモや議論も、本来の仕様書に含めるようにしたい ‧「⾃分⽤メモ」が存在するということは、つまり仕様書に全てを書けていない ‧古い機能の挙動やUIに関する議論は、古いNotionの仕様書ではなく、コードの近くに配置する ‧greptileなどのレビューツールで、他のページのスナップショットとa11yツリーを⾒た上で⽐べてもらいたい