msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'b390335d14'
${ noResults }
Web-Dev-For-Beginners/translations/ja/5-browser-extension/2-forms-browsers-local-storage/assignment.md

6.9 KiB
Raw Blame History Escape

APIを採用しよう

概要

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

指示

ステップ1: APIを選ぶ

無料の公開APIリストからAPIを選びましょう。以下のカテゴリを参考にしてください。

初心者に人気のオプション:

  • エンターテインメント: Dog CEO API - ランダムな犬の写真
  • 天気: OpenWeatherMap - 現在の天気データ
  • 名言: Quotable API - インスピレーションを与える名言
  • ニュース: NewsAPI - 最新のヘッドライン
  • 面白い事実: Numbers API - 興味深い数字の事実

ステップ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呼び出しが失敗する可能性を常に考慮し、計画を立てる

リソース

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

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