<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "25b8d28b8531352d4eb67291fd7824c4",
  "translation_date": "2025-10-24T15:18:50+00:00",
  "source_file": "5-browser-extension/2-forms-browsers-local-storage/assignment.md",
  "language_code": "ja"
}
-->
# APIを採用しよう

## 概要

APIは、創造的なウェブ開発の可能性を無限に広げます！この課題では、外部APIを選び、実際の問題を解決したり、ユーザーに価値ある機能を提供するブラウザ拡張機能を作成します。

## 指示

### ステップ1: APIを選ぶ
[無料の公開APIリスト](https://github.com/public-apis/public-apis)からAPIを選びましょう。以下のカテゴリを参考にしてください。

**初心者に人気のオプション:**
- **エンターテインメント**: [Dog CEO API](https://dog.ceo/dog-api/) - ランダムな犬の写真
- **天気**: [OpenWeatherMap](https://openweathermap.org/api) - 現在の天気データ
- **名言**: [Quotable API](https://quotable.io/) - インスピレーションを与える名言
- **ニュース**: [NewsAPI](https://newsapi.org/) - 最新のヘッドライン
- **面白い事実**: [Numbers API](http://numbersapi.com/) - 興味深い数字の事実

### ステップ2: 拡張機能の計画
コーディングを始める前に、以下の質問に答えて計画を立てましょう:
- あなたの拡張機能はどんな問題を解決しますか？
- ターゲットユーザーは誰ですか？
- ローカルストレージにどんなデータを保存しますか？
- APIの失敗やレート制限をどのように処理しますか？

### ステップ3: 拡張機能を作成
拡張機能には以下を含める必要があります:

**必須機能:**
- 必要なAPIパラメータを入力するフォーム
- 適切なエラーハンドリングを備えたAPI統合
- ユーザーの設定やAPIキーを保存するローカルストレージ
- 清潔でレスポンシブなユーザーインターフェース
- ローディング状態やユーザーへのフィードバック

**コード要件:**
- モダンなJavaScript（ES6+）の機能を使用
- API呼び出しにasync/awaitを実装
- try/catchブロックを使った適切なエラーハンドリング
- コードの説明をする意味のあるコメントを追加
- 一貫性のあるコードフォーマットを守る

### ステップ4: テストと仕上げ
- 様々な入力で拡張機能をテストする
- エッジケース（インターネット接続なし、無効なAPIレスポンス）を処理する
- ブラウザ再起動後も拡張機能が動作することを確認する
- ユーザーに優しいエラーメッセージを追加する

## ボーナスチャレンジ

拡張機能をさらに進化させる方法:
- 複数のAPIエンドポイントを追加して機能を充実させる
- データキャッシュを実装してAPI呼び出しを減らす
- よく使う操作のためのキーボードショートカットを作成
- データのエクスポート/インポート機能を追加
- ユーザーのカスタマイズオプションを実装

## 提出要件

1. **動作するブラウザ拡張機能** - 選んだAPIと正常に統合されていること
2. **READMEファイル** - 以下を説明する内容:
   - 選んだAPIとその理由
   - 拡張機能のインストール方法と使用方法
   - 必要なAPIキーや設定
   - 拡張機能の動作中のスクリーンショット
3. **清潔でコメント付きのコード** - モダンなJavaScriptのプラクティスに従うこと

## 採点基準

| 基準 | 優秀 (90-100%) | 良好 (80-89%) | 発展途上 (70-79%) | 初歩的 (60-69%) |
|------|----------------|----------------|-------------------|----------------|
| **API統合** | 完璧なAPI統合、包括的なエラーハンドリングとエッジケース管理 | 基本的なエラーハンドリングを備えた成功したAPI統合 | APIは動作するがエラーハンドリングが限定的 | API統合に重大な問題がある |
| **コード品質** | 清潔でよくコメントされたモダンなJavaScript、ベストプラクティスに従う | 適切なコメント付きの良好なコード構造 | コードは動作するが、整理が必要 | コメントがほとんどない低品質なコード |
| **ユーザー体験** | 洗練されたインターフェース、優れたローディング状態とユーザーフィードバック | 基本的なユーザーフィードバックを備えた良好なインターフェース | 機能するが基本的なインターフェース | 混乱を招くインターフェースでユーザー体験が悪い |
| **ローカルストレージ** | データ検証と管理を備えた高度なローカルストレージの使用 | 主要機能のための適切なローカルストレージの実装 | 基本的なローカルストレージの実装 | 最小限または誤ったローカルストレージの使用 |
| **ドキュメント** | 設定手順とスクリーンショットを含む包括的なREADME | ほとんどの要件をカバーする良好なドキュメント | 一部の詳細が欠けている基本的なドキュメント | 不十分または欠けているドキュメント |

## 始めるためのヒント

1. **シンプルに始める**: 複雑な認証を必要としないAPIを選ぶ
2. **ドキュメントを読む**: 選んだAPIのエンドポイントとレスポンスをしっかり理解する
3. **UIを計画する**: コーディング前に拡張機能のインターフェースをスケッチする
4. **頻繁にテストする**: 機能を追加するたびに段階的にテストする
5. **エラーを処理する**: API呼び出しが失敗する可能性を常に考慮し、計画を立てる

## リソース

- [ブラウザ拡張機能ドキュメント](https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions)
- [Fetch APIガイド](https://developer.mozilla.org/docs/Web/API/Fetch_API/Using_Fetch)
- [ローカルストレージチュートリアル](https://developer.mozilla.org/docs/Web/API/Window/localStorage)
- [JSONの解析と処理](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON)

役立つものや創造的なものを作るのを楽しんでください！🚀

---

**免責事項**:  
この文書はAI翻訳サービス[Co-op Translator](https://github.com/Azure/co-op-translator)を使用して翻訳されています。正確性を追求しておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。元の言語で記載された文書を正式な情報源としてお考えください。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の使用に起因する誤解や誤解について、当社は責任を負いません。