🐥

[React]ポケモンAPIを使って、ポケモンを一覧表示する(1: 環境構築編)

に公開
React
プログラミング初心者
tech

AI時代に未経験でエンジニアになって半年、AIに頼りすぎて

  • スキルが身につかない
  • 作る喜びを感じていない

ような気がして、あえてAIに頼らずに実装するチャレンジを始めた。

ルール

  • コードを書くときはAIを使わない(専門用語や技術的知識を調べるときは除く)
  • 公式ドキュメントなど、信頼できるソースで情報の信憑性を確認する

作りたいもの

環境

タスク分解

「ポケモンAPIを使って、ポケモンを一覧表示する」をタスク分解する:

  1. 「ブラウザからポケモンAPIを呼び出すリクエストを送る」
  2. 「ポケモンAPIがブラウザへポケモンの一覧をレスポンスとして返す」
  3. 「ポケモンの一覧をブラウザ上に表示する」

これを一つ一つ潰していく

の前に、環境構築...

React公式ドキュメントの「ゼロからのReactアプリ構築」を参考に環境構築
https://ja.react.dev/learn/build-a-react-app-from-scratch

今回は、ビルドツールとしてViteを使いたいので、ターミナルに

terminal
npm create vite@latest pokemon-app -- --template react-ts

と入力し、Reactをセットアップする
セットアップできたら

terminal
npm run dev

を走らせて、http://localhost:5173/を立ち上げる

うまくいってれば↓の画面が表示されるはず

(補足)npm run devの意味

npm run devはpackage.jsonのscriptsセクション内から、引数として与えられたdevに割り当てられたキーを探す

今回、package.jsonのscriptsセクションは以下のようになっている:

package.json
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  }

devに対応するキーはvite

なので、npm run devを走らせると、viteを実行したことになる

もし、開発環境(ここでいうdev)じゃなくて、本番環境で最終の動作確認をしたいよー、ということなら、

terminal
npm run build

でビルドして

terminal
npm run preview

を実行すると

terminal
> my-app@0.0.0 preview
> vite preview

  ➜  Local:   http://localhost:4173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

と表示されて、http://localhost:4173/で画面を確認できる、という仕組み

(さらに補足)ビルドでやっていること

npm run buildでビルドすると

  • トランスパイル
  • バンドル
  • ミニファイ

が行われる

トランスパイル = 「実装したコードがブラウザで動くようJavaScriptに変換する」
(TypeScriptだとブラウザで動かない)

バンドル = 「複数ファイルを結合する」

ミニファイ = 「コードの改行やスペースなどを取り除いたり、変数名を短縮する」

ビルドされたコードはdist > assetsディレクトリ下に保存される

Discussion