#フロントエンド

8件の記事

ハーネスエンジニアリングとしてのFSD構造化のすゝめ ── 厳しい構造の制約でAIの出力が必然的に整う

AI駆動開発で構造が崩れるのはなぜか。FSD（Feature-Sliced Design）のレイヤー依存方向とスライス間分離という2つのルールをlintで強制すると、AIが出力するたびにエラーが指摘され、修正を繰り返すだけで自動的にコードが整います。ハーネスエンジニアリングの実践的アプローチとしてのFSD活用法が実装例を交えて解説されています。

#AI駆動開発 #Claude Code #アーキテクチャ

記事を読む →

⚡

Zenn3月30日· 1分で読める中級

観測基盤の技術選定

極小SPAのパフォーマンスを守りながら観測基盤を導入する必要に迫られたPMが、GA4ではなくWicleを選んだ技術判断の経緯です。メインスレッド汚染やルーター密結合を避けるため、「GA4をいかに軽く入れるか」ではなく「観測をどのレイヤーで成立させるか」という根本的な問い直しをした、アーキテクチャ設計の思考プロセスが学べます。

#AI駆動開発 #アーキテクチャ設計 #パフォーマンス最適化

記事を読む →

🎵

Zenn3月29日· 2分で読める中級🔥 注目

Stitchでのvibe design体験と最近思うところ

GoogleのStitchでvibe designを実検証した結果、AIはワンショットデザイン生成に向くが、差分調整や複数ドキュメント対応が苦手なことが判明しました。データ構造と自然言語の橋渡しコストが高く、細かい修正より最初から完成形を指示する方が現実的です。著者はClaudeでコード生成させながらプロトタイピングする方が実用的と指摘し、デザインドキュメント自体が今後不要になる可能性まで示唆しています。

#VibeCoding #AI駆動開発 #Claude Code

記事を読む →

🎵

Zenn3月18日· 1分で読める中級🔥 注目

【バイチャレ #5】Zennの記法がわからなすぎるので「専用マークダウンエディタ」を自作した

Zennの独自マークダウン記法に対応した専用エディタを自作した事例です。「一般モード」と「Zennモード」の二重バッファ構造で、Zenn記法を入力しながらブラウザでリアルタイムプレビューを実現。シングルファイル・HTML構成でビルド不要。ドッグフーディングを通じた高速改善サイクルの実践例として学べます。

#VibeCoding #AI駆動開発 #実装事例

記事を読む →

🎵

Zenn3月17日· 1分で読める中級🔥 注目

Antigravityは(バックエンドでは)使い物にならない

Google Antigravityを2週間実際に使った結果、フロントエンド開発では革新的だが、バックエンドは設計仕様書なしでは実用的でないことが判明しました。ブラウザ統合の強みがバックエンド開発では活かせず、ターミナル操作が主になるため。AIコーディングで生き残るのは、設計力・デザイン力・低レベル言語の知識がある開発者だと著者は予想しています。

#VibeCoding #AI駆動開発 #Antigravity

記事を読む →

⚡

Zenn3月17日· 2分で読める中級