0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Node.jsを学ぶ #1

Posted at

Node.jsに関する要点まとめ

  1. Node.jsとは?
    JavaScriptのサーバーサイド環境:
    通常、JavaScriptはフロントエンド(HTML、CSSと組み合わせて動的なWebページを作る)に使われる。
    Node.jsは、サーバーサイド(バックエンド)でもJavaScriptを使えるようにする環境。
  2. Node.jsのインストール
    公式サイトからダウンロード:
    Node.js公式サイトで推奨版をダウンロード。
    Windowsユーザーはそのままダウンロード。Macユーザーは「Node.js Mac」で検索して対応版をダウンロード。
    推奨版の選択:
    推奨版の方が安定しているため、こちらを選んでインストール。
  3. インストール確認
    ターミナルを開く:
    インストール後にコマンドラインツール(ターミナル、コマンドプロンプト、Git Bashなど)を開く。
    Node.jsのバージョン確認:
    node -v コマンドでNode.jsが正常にインストールされたか確認。
    npm(Node Package Manager)の確認:
    npm -v コマンドでnpmがインストールされているか確認。
    npmはモジュールやライブラリの管理に使用される。
  4. npmとyarnのインストール
    npmの基本的な使用法:
    npmは外部のモジュールやライブラリをインストールするためのコマンド。
    yarnのインストール:
    グローバルにyarnをインストールするためには以下のコマンドを使用:
    bash
    コードをコピーする
    npm install -g yarn
    バージョン確認:
    インストール後にyarn -vコマンドでyarnが正しくインストールされているか確認。
  5. 補足
    npx:npmコマンドの一部で、特定のモジュールを一時的に実行するために使われる。
    グローバルインストール:-gオプションを使うことで、システム全体でコマンドを利用可能にする。
    まとめ
    Node.jsをインストールすることで、サーバーサイド開発でもJavaScriptを利用できるようになる。
    npmとyarnを使って外部モジュールを簡単に管理・インストールできる。

手順まとめ:ReactプロジェクトでポケモンAPIを利用する方法

1.Reactプロジェクトのディレクトリ作成
ディレクトリ作成:ターミナルで以下のコマンドを使って新しいディレクトリを作成します。

mkdir react-project

2.Reactアプリの作成
npxでReactアプリを生成:

npx create-react-app pokemon-app
//ディレクトリ移動:cd コマンドを使って作成したディレクトリに移動します。
cd pokemon

  • npx create-react-appはReactの雛形を作成するコマンドで、数分かかります。
    エディタの起動:
code .
  • code . コマンドで、VSCode(Visual Studio Code)などのエディタを開きます。
    3.不要なファイルを削除
  • Reactのプロジェクト内のいくつかのファイルはデフォルトで生成されますが、今回は使わないため削除します。
    削除するファイル:
    src/setupTests.js
    src/reportWebVitals.js
    src/logo.svg
    src/App.test.js
    ファイルの編集:
    src/index.jsreportWebVitals()の呼び出し部分を削除。
    src/App.jslogo.svgのインポート部分を削除。

4.ローカルサーバーの起動
npmで開発サーバーを起動:

npm start
  • コマンドを実行すると、自動的にブラウザが開き、http://localhost:3000にアプリが表示されます。
    5.ポケモンAPIについて
    ポケモンAPI(PokeAPI)を使うと、ポケモンに関する様々なデータ(名前、アビリティ、画像など)を取得できます。
    APIエンドポイントは、https://pokeapi.co/api/v2/pokemonです。
    6.ポケモンAPIを使用してデータ取得
    APIのエンドポイントにアクセスすることで、ポケモンのデータを取得できます。APIにアクセスすると、以下のような情報が得られます:
    アビリティや画像(sprites)など。
    JSON形式で返されるデータは、拡張機能「JSON Viewer」を使うと見やすく表示できます。
    7.拡張機能(JSON Viewer)のインストール
    JSON ViewerをChromeにインストールすることで、ブラウザ上でJSONデータを見やすく表示できます。
    Chromeの拡張機能の検索で「JSON Viewer」をインストール。
    8.簡単なReactとポケモンAPIの連携
    useEffectフックを使い、コンポーネントの初回レンダリング時にポケモンAPIからデータを取得します。
import React, { useEffect, useState } from 'react';

function App() {
  // ポケモンデータを保存するためのstateを定義
  const [pokemonData, setPokemonData] = useState([]);

  // ポケモンAPIのエンドポイントURLを変数に格納
  const initialURL = "https://pokeapi.co/api/v2/pokemon";

  // useEffectフックを使用して、コンポーネントの最初のレンダリング時にAPIを呼び出す
  useEffect(() => {
    // APIからポケモンデータを取得する非同期関数
    const fetchPokemonData = async () => {
      // fetchを使ってAPIエンドポイントにリクエストを送信
      let response = await fetch(initialURL);
      // レスポンスをJSON形式に変換
      let data = await response.json();
      // 取得したポケモンのリストをstateに保存
      setPokemonData(data.results);
    };
    // 関数を実行
    fetchPokemonData();
  }, []); // 空の依存配列で、コンポーネントの初回レンダリング時のみ実行

  return (
    <div className="App">
      {/* 見出しを表示 */}
      <h1>Pokemon List</h1>
      
      {/* ポケモンのリストをul(箇条書き)で表示 */}
      <ul>
        {pokemonData.map((pokemon, index) => (
          // map関数でリストを回し、各ポケモンの名前をliとして表示
          <li key={index}>{pokemon.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

コメントの単語

レンダリング:ブラウザがコード(HTML, CSS, JavaScript)を解釈して、画面に内容を表示することを指します。

APIエンドポイント:APIエンドポイントは、サーバーとデータをやり取りするための「入口となるURL」。
クライアントがエンドポイントにリクエストを送ると、サーバーは対応するデータを返してくれる。
ポケモンAPI(PokeAPI)を使って、ポケモンの情報を取得する場合、次のようなエンドポイントがあります。

https://pokeapi.co/api/v2/pokemon/1/
→ これは、ポケモンの「フシギダネ(ID:1)」にアクセスするためのエンドポイントです。このURLにアクセスすると、フシギダネの情報を取得できます。

https://pokeapi.co/api/v2/pokemon/ → これは、ポケモンのリストを取得するためのエンドポイントです。例えば、最初の20匹のポケモンの名前やIDをこのエンドポイントから取得できます。

たとえば、先ほどのReactのアプリケーションでは、initialURLにhttps://pokeapi.co/api/v2/pokemon
というエンドポイントが指定されています。このURLにアクセスすることで、ポケモンに関する情報(ポケモンのリストなど)を取得できます。

const initialURL = "https://pokeapi.co/api/v2/pokemon";

pokemon.jsの作成

getAllPokemon 関数の説明:
関数の作成:

getAllPokemon は、全てのポケモンデータを非同期に取得するための関数で、async を使って定義されています。
関数は、Promiseオブジェクトを返します。Promiseは、非同期処理が成功(resolve)するか、失敗(reject)するかを表す「約束」オブジェクトです。
Promiseオブジェクトの利用:

Promise の第一引数に resolve、第二引数に reject を取ります。
resolve は「処理が成功したとき」、reject は「失敗したとき」にそれぞれ呼ばれます。
データの取得(fetch):

fetch 関数を使ってAPIエンドポイントからポケモンデータを取得します。
エンドポイント(URL)は引数として関数に渡され、ポケモンAPIにリクエストを送ります。
データの変換:

取得したデータは JSON 形式に変換されます(response.json())。
その後、さらに then メソッドを使って、その JSON データをPromiseチェーンで処理し、最終的に resolve 関数を使って結果を返します。
非同期処理のポイント:

await は、Promiseが解決されるまで処理を一時停止させるためのキーワードです。
データ取得が完了するまで待機し、その後に結果を使用します。
まとめ
getAllPokemon 関数は、APIからデータを取得し、それが成功すればその結果を返します。
データの取得やその後の処理は非同期で行われ、処理が完了するまで待つ仕組み(await と Promise)が使われています。

// getAllPokemon 関数は、指定されたURLからポケモンデータを取得し、Promiseオブジェクトを返します
export const getAllPokemon = (url) => {
    return new Promise((resolve, reject) => {
        // fetch 関数を使って指定されたURLからデータを取得します
        fetch(url)
         // 取得したレスポンスデータをJSON形式に変換します
         .then((res) => res.json())
         // データが正常に取得できたら resolve 関数を使って返します
         .then((data) => resolve(data))
         // エラー処理を行っていないため、reject は呼ばれていません(必要に応じて追加できます)
    });
};

  • エラーハンドリングはまだ書き込んでいない

9.ローカルサーバーの確認
再びnpm startを実行し、ブラウザで表示を確認します。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?