【要約】HTMLが分からなくてもページ作成できる世界へ。HTMLページビルダーのプロトタイプ開発に挑戦 [Qiita_Trend] | Summary by TechDistill
> Source: Qiita_Trend
Execute Primary Source
// Problem
採用担当者が、学生向け案内ページを作成する際に直面する技術的課題。業務の合間に迅速な更新を行いたいが、以下の問題が障壁となっている。
- ・HTMLタグの知識が不可欠である。
- ・デザイン調整にコード修正が必要となる。
- ・軽微な変更にも多大な時間を要する。
// Approach
開発者は、HTMLを意識せずにページ装飾ができる仕組みを検証するため、プロトタイプ制作を行った。生成AIを活用し、以下の手順で実装を進めた。
- ・CodePen上でHTML/CSS/JavaScriptの最小構成を作成。
- ・ChatGPTを用いて、ツールバー、編集エリア、プレビュー領域のレイアウトを生成。
- ・textareaのinputイベントにより、入力内容をinnerHTMLでプレビューへ即時反映。
// Result
プロトタイプを構築したことで、開発者が当初想定していた機能拡充とは異なる、実用上の課題が明確になった。
- ・機能の多さよりも、迷わせないUIの重要性を認識。
- ・コードの表示がユーザーに混乱を与えるというフィードバックを獲得。
- ・今後はAIによるデザイン提案やテンプレート機能の実装を検討。
Senior Engineer Insight
> 迅速なプロトタイピングの手法は評価できる。しかし、innerHTMLによる実装はXSSのリスクを孕む。実用化には、入力値のサニタイズが必須である。また、複雑な装飾を抽象化するデータモデルの設計が、スケーラビリティ確保の鍵となるだろう。