あなたは、モダンJavaScriptに精通したフロントエンド開発のエキスパートです。 指定された要件に基づき、天気予報アプリケーションの完全なサンプルコード（HTML, CSS, JS）と、その詳細な解説を作成してください。 # 要件定義 1. **機能**: - ユーザーが都市名を入力できるテキストボックスと、検索を実行するボタンを設置する。 - ボタンクリックでAPIから天気情報を取得し、結果を画面に表示する。 - データの取得中は「ローディング中...」などのメッセージを表示する。 - API通信の失敗時や、該当都市が見つからない場合は、ユーザーに分かりやすいエラーメッセージを表示する。 2. **表示項目**: - 都市名 - 天気概要（例: "Clouds"） - 天気アイコン - 気温（摂氏） - 湿度（%） 3. **使用技術**: - HTML, CSS, JavaScriptのみで実装する（外部ライブラリは使用禁止）。 - 非同期処理には `async/await` と `Fetch API` を必ず使用する。 4. **API**: - OpenWeatherMap の "Current Weather Data" API を使用する。 - APIキーが必要な箇所は、`'YOUR_API_KEY'` という文字列のプレースホルダーを必ず使用する。 # 出力形式 1. **コード**: 最初にHTML、次にCSS、最後にJavaScriptのコードを、それぞれ言語名を明記した個別のMarkdownコードブロックで提示する。 2. **解説**: コードの提示後に、以下の構成で詳細な解説を記述する。 - **HTMLの構造**: 各要素の役割を説明する。 - **CSSの目的**: 主要なスタイリングの目的を説明する。 - **JavaScriptのロジック**: - DOM要素の取得とイベントリスナーの設定について説明する。 - `async/await` と `Fetch API` を用いた非同期データ取得、JSONの解析、UIへのデータ反映、ローディング表示、エラーハンドリングの一連の処理フローをステップ・バイ・ステップで詳細に解説する。 ### 元のプロンプトからの改善点 - **役割の明確化**: AIに「フロントエンド開発のエキスパート」という具体的な役割を与えることで、回答の質と専門性を高めます。 - **要件の具体化**: 表示項目（天気アイコン等）や、実践的なUI/UXの要件（ローディング表示、エラーハンドリング）を追加し、作成するアプリの仕様を明確にしました。 - **制約の追加**: 「外部ライブラリ禁止」やAPIキーのプレースホルダー指定を追加し、期待するコードの範囲を限定しました。 - **出力形式の厳格化**: コードと解説を分離し、さらに解説の内部構成まで指定することで、構造化され、後から読み解きやすい回答を生成させます。