With LLMな、WebFrontend開発において求められるWeb Frontendシステムの技術要件とは？
Motivation
大規模言語モデル Large Language Model LLMにあったアーキテクチャや技術があると思っている。
フロントエンドリアーキテクト フロリアする上で、重要だと個人的には思っている。
議論
GPTと議論: With LLMな、WebFrontend
意見
LLMがOutputしたcodeを自動的に検査できることがとにかく大事
理由:
開発速度が上がるに連れ、人間が読める量で無くなるから
人間には、要件の詰めやさらなる改善といった、よりマクロな観点に注意力のスコープを広げてほしいから
具体ツール
静的解析であるTypeScript
Linters and Formatters
自動Test テスト Testing
Styling スタイリング
カスタマイズしていないデフォルトの値を利用する場合(LPや簡単なツールとか)
普及しているUtility Firstなツール(Tailwind CSS)が優勢に見える。
単に情報が多く、学習例が多いから
開発用LLMが賢くなれば、その限りでは無いと思う
カスタマイズしたDesign System デザインシステム 実装を作る場合
generate系が優勢(panda cssなど)
根本
カスタマイズしたスタイルをgenerateしてくれないと、LLMが学習出来ない。
レポジトリを学習する開発用LLMがあるのでそれが賢くなるほど、楽になる。
技術とメリット
generated styles
レポジトリ内に、Design System デザインシステム 実装のスタイルやjsxをgenerateしてくれる
メリット
開発用LLMが学習しやすい
型安全 type-safe
カスタマイズしたStyleやJSXが利用されているか型で確認できる
メリット
自動生成されたcodeを、視覚的に確認する必要性がないため、安心して利用できる。
感想
型を書くの辛い印象があったんだけど、それをLLMに任せれば良い。
ref
2023年のフロントエンド振り返りと2024年 - Speaker Deck
Tailwind CSS and shadcn/uiによるv0の事例とか