【要約】生成AIを使用したwebアプリを作った時の記録 [Qiita_Trend] | Summary by TechDistill
> Source: Qiita_Trend
Execute Primary Source
// Problem
新卒エンジニアが、雑誌のサンプルコードを基に開発を進める中で、コードの動作原理を十分に理解できていないために直面した問題である。実装そのものよりも、予期せぬエラーへの対処に多大なリソースを割くこととなった。
- ・コードの意図が不明なため、エラー発生時の原因特定が困難であった。
- ・タイポ（例：
v1betaをvIbetaと誤認）やバッククォートのミスなど、視覚的に判別しにくい記述ミスが頻発した。 - ・エラー修正に、実装時間（3時間）を上回る約5時間を要した。
// Approach
開発者は、雑誌のサンプルコードを写経しつつ、以下のステップで環境構築とエラー解決を試みた。
- ・環境構築：Node.js、Express、axios、dotenvなどのライブラリを用いて開発基盤を構築した。
- ・API連携：Google CloudでGemini APIのキーを取得し、HTTPリクエストを通じてAI機能を実現した。
- ・エラー解決：見本コードとの徹底的な比較、ChatGPTを用いたコード解説の活用、コンソールログによる一文字ずつの確認を繰り返した。
// Result
開発者は、音声認識から文章変換、校閲までを行うWebアプリを完成させた。
- ・音声入力によるテキスト化、指定カテゴリー（例：ギャル語）への変換、校閲結果の赤字表示という一連の機能を実現した。
- ・エラー修正のプロセスを通じて、コードの正確な記述とコンソールによる検証の重要性を学んだ。
Senior Engineer Insight
> 本記事は学習記録であり、商用レベルの設計ではない。しかし、既存APIを組み合わせた迅速なプロトタイピングの手法は示されている。実戦投入においては、APIキーの厳格な管理、音声認識の精度向上、およびエラーハンドリングの堅牢化が必須である。また、タイポによるデバッグ時間の増大は開発体験を著しく損なうため、ESLint等の静的解析ツールの導入が不可欠だ。