Node.js を使ったニュース API の構築

JavaScriptJavaScriptBeginner
今すぐ練習

💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください

はじめに

このプロジェクトでは、Node.jsを使って簡単なニュースAPIを作成する方法を学びます。サーバーを作成し、異なるルートを処理し、特定の形式でニュースデータを返す方法を学びます。

👀 プレビュー

curl http://localhost:8080/news
## 出力:
## [{"channelId":"5572a108b3cdc86cf39001cd","name":"National Focus"},{"channelId":"5572a108b3cdc86cf39001ce","name":"International Focus"}]

curl http://localhost:8080
## 出力:
## 404

🎯 タスク

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

  • Node.jsを使ってサーバーを作成する方法
  • /news ルートを処理し、ニュースデータを返す方法
  • その他のルートを処理し、404レスポンスを返す方法

🏆 成果

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

  • Node.jsを使ってサーバーを作成する基本を理解する
  • ニュースデータを返す簡単なAPIを実装する
  • 異なるルートを処理し、適切なレスポンスを提供する

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript(("JavaScript")) -.-> javascript/DOMManipulationGroup(["DOM Manipulation"]) javascript(("JavaScript")) -.-> javascript/NetworkingGroup(["Networking"]) javascript/BasicConceptsGroup -.-> javascript/cond_stmts("Conditional Statements") javascript/AdvancedConceptsGroup -.-> javascript/error_handle("Error Handling") javascript/DOMManipulationGroup -.-> javascript/dom_manip("DOM Manipulation") javascript/DOMManipulationGroup -.-> javascript/event_handle("Event Handling") javascript/NetworkingGroup -.-> javascript/http_req("HTTP Requests") javascript/NetworkingGroup -.-> javascript/json("JSON") javascript/NetworkingGroup -.-> javascript/api_interact("API Interaction") subgraph Lab Skills javascript/cond_stmts -.-> lab-445682{{"Node.js を使ったニュース API の構築"}} javascript/error_handle -.-> lab-445682{{"Node.js を使ったニュース API の構築"}} javascript/dom_manip -.-> lab-445682{{"Node.js を使ったニュース API の構築"}} javascript/event_handle -.-> lab-445682{{"Node.js を使ったニュース API の構築"}} javascript/http_req -.-> lab-445682{{"Node.js を使ったニュース API の構築"}} javascript/json -.-> lab-445682{{"Node.js を使ったニュース API の構築"}} javascript/api_interact -.-> lab-445682{{"Node.js を使ったニュース API の構築"}} end

サーバーを作成する

始めるには、エディタを開きます。エディタから「app.js」というファイルが表示されるはずです。

このステップでは、Node.jsを使ってサーバーを作成する方法を学びます。以下の手順に従ってこのステップを完了しましょう。

  1. コーディング環境で「app.js」ファイルを開きます。

  2. サーバーを作成する機能を提供する「http」モジュールをインポートします。

    const http = require("http");
  3. createServer() メソッドを使って新しいサーバーを作成します。

    const serve = http.createServer();
  4. サーバーにイベントリスナーを追加して、着信リクエストを処理します。

    serve.on("request", (req, res) => {
      // TODO: リクエストを処理するコードを追加する
    });
  5. サーバーを起動し、ポート8080で待ち受けます。

    serve.listen(8080, () => {
      console.log("The service has been started!");
    });

/news ルートを処理する

このステップでは、/news ルートを処理してニュースデータを返す方法を学びます。以下の手順に従ってこのステップを完了しましょう。

  1. リクエストイベントリスナーの中で、レスポンスヘッダを utf8 形式で使用するように設定します。

    res.setHeader("Content-type", "text/html;charset=utf8");
  2. 要求されたURLを確認します。

    if (req.url == "/news") {
      // /news ルートを処理する
    } else {
      // その他のルートを処理する
    }
  3. 必要な形式でニュースデータを準備します。

    const data = [
      {
        channelId: "5572a108b3cdc86cf39001cd",
        name: "National Focus"
      },
      {
        channelId: "5572a108b3cdc86cf39001ce",
        name: "International Focus"
      }
    ];
  4. ニュースデータをレスポンスとして送信します。

    res.end(JSON.stringify(data));

その他のルートを処理する

このステップでは、/news でないその他のルートを処理する方法を学びます。

  1. リクエストイベントリスナーの中で、その他のルートを処理するための else ブロックを追加します。

    if (req.url == "/news") {
      // /news ルートを処理する
      //...
    } else {
      // その他のルートを処理する
      res.end("404");
    }
  2. else ブロックで、要求されたルートが見つからないことを示す 404 レスポンスを送信します。

この時点で、あなたの app.js ファイルはこのようになっているはずです。

const http = require("http");
const serve = http.createServer();

serve.on("request", (req, res) => {
  // TODO: リクエストを処理するコードを追加する
  res.setHeader("Content-type", "text/html;charset=utf8");
  console.log(req.url);
  if (req.url == "/news") {
    const data = [
      {
        channelId: "5572a108b3cdc86cf39001cd",
        name: "National Focus"
      },
      {
        channelId: "5572a108b3cdc86cf39001ce",
        name: "International Focus"
      }
    ];

    res.end(JSON.stringify(data));
  } else {
    res.end("404");
  }
});

serve.listen(8080, () => {
  console.log("The service has been started!");
});

サーバーをテストする

  1. ターミナルで以下のコマンドを使ってサーバーを起動します。

    node app.js
  2. 再度新しいターミナルを開き、以下のコマンドでターミナルが正しいことを確認します。

curl http://localhost:8080/news
## 出力:
## [{"channelId":"5572a108b3cdc86cf39001cd","name":"National Focus"},{"channelId":"5572a108b3cdc86cf39001ce","name":"International Focus"}]

curl http://localhost:8080
## 出力:
## 404

おめでとうございます!Node.jsを使ってニュースAPIを成功裏に作成しました。

✨ 解答を確認して練習

まとめ

おめでとうございます!このプロジェクトを完了しました。実力を向上させるために、LabExでさらに多くの実験を行って練習してください。