Axios による呪文の宝探し

はじめに

このプロジェクトでは、Axiosを使って認証ヘッダ付きのリクエストを送信する方法と、レスポンスデータに基づいてDOMを更新する方法を学びます。神秘的な呪文の一部を取得するためにサーバとやり取りするシンプルなWebアプリケーションを構築します。

👀 プレビュー

🎯 タスク

このプロジェクトでは、以下を学びます。

• プロジェクトをセットアップして初期コードを取得する方法
• "鍵1" ボタンの機能を実装する方法
• "鍵2" ボタンの機能を実装する方法
• 取得した呪文の部分に基づいて宝箱を開けられるかどうかを確認する方法

🏆 成果

このプロジェクトを完了すると、以下ができるようになります。

• カスタムヘッダ付きのHTTPリクエストをAxiosを使って行う方法
• 動的なコンテンツを表示するためにDOMを操作する方法
• 特定の条件をチェックするための条件付きロジックを実装する方法
• 手順に沿ってWeb開発プロジェクトを完了する方法

Skills Graph

プロジェクト構造をセットアップする

このステップでは、プロジェクトファイルと構造をセットアップします。以下の手順に従ってこのステップを完了しましょう。

プロジェクトフォルダを開きます。ディレクトリ構造は以下の通りです。

├── css
├── lib
├── js
│   └── index.js
└── index.html

その中で：

• index.html はメインページです。
• css はプロジェクトのスタイルを保存するフォルダです。
• lib はプロジェクトのJavaScript依存関係を保存するフォルダです。
• js/index.js はコードを補完する必要があるJavaScriptファイルです。

WebIDEの右下隅にある Go Live ボタンをクリックして、プロジェクトを実行します。

次に、VMの上部にある「Web 8080」を開き、手動で更新してページを表示します。

鍵1ボタンを実装する

このステップでは、「鍵1」ボタンの機能を実装します。

1. js/index.js ファイルで、key1Button.addEventListener("click", async () => {... }) ブロックを探します。

2. let { data } = await axios.get("/spellone"); を以下のコードに変更します。

   let { data } = await axios.get("/spellone", {
     headers: {
       Authorization: "2b58f9a8-7d73-4a9c-b8a2-9f05d6e8e3c7"
     }
   });

   これらのコード行は、Authorization ヘッダを指定されたトークンに設定して /spellone エンドポイントにGETリクエストを送信します。レスポンスデータは spell1 要素に表示されます。

3. js/index.js ファイルを保存します。

鍵2ボタンを実装する

このステップでは、「鍵2」ボタンの機能を実装します。

1. js/index.js ファイルで、key2Button.addEventListener("click", async () => {... }) ブロックを探します。

2. let { data } = await axios.get("/spelltwo"); を以下のコードに変更します。

   let { data } = await axios.get("/spelltwo", {
     headers: {
       Authorization: "2b58f9a8-7d73-4a9c-b8a2-9f05d6e8e3c7"
     }
   });

   これらのコード行は、Authorization ヘッダを指定されたトークンに設定して /spelltwo エンドポイントにGETリクエストを送信します。レスポンスデータは spell2 要素に表示されます。

3. js/index.js ファイルを保存します。

宝箱をチェックする

このステップでは、宝箱を開けられるかどうかをチェックするロジックを実装します。

1. js/index.js ファイルで、tryOpenTreasureBox() 関数を探します。
2. この関数は、spell1 と spell2 要素の内容が期待される値（「I love you」と「You love me too」）と一致するかどうかをチェックします。条件が満たされた場合、treasureBox 要素に「opened」クラスを追加し、成功メッセージを表示します。
3. js/index.js ファイルを保存します。

アプリケーションをテストする

1. ブラウザに戻り、ページを更新します。
2. 「鍵1」と「鍵2」のボタンをクリックし、ページの変化を観察します。
3. 宝箱が正常に開かれた場合、成功メッセージが表示されます。完成した効果は以下の通りです。

おめでとうございます！あなたは「神秘的な呪文」プロジェクトを完了しました。Axiosを使って認証ヘッダ付きでリクエストを送信する方法と、レスポンスデータに基づいてDOMを更新する方法を学びました。

まとめ

おめでとうございます！このプロジェクトを完了しました。あなたは実験技術を向上させるためにLabExでさらに多くの実験を行うことができます。