はじめに
外部データからどのように情報を取得し、Webサイトに表示させているのか？
基本部分を理解することをゴールとしています。
api フォルダのファイルデータを取得してみる
まず新規で Next.js アプリを作成します。新規作成段階から、pages ➝ api フォルダに hello.ts というファイルが存在しています。
この api フォルダ内にあるファイルの情報をブラウザに表示してみます。
ローカルサーバーで立ち上げたあと、url が http://localhost:3000 になっていますが、ここに /api/hello を追加し http://localhost:3000/api/hello にするとブラウザ上に {"name":"John Doe"} が表示されます。
これでは api フォルダ内にあるファイル名を指定すると、ファイルに記載された内容が返ってくるということを理解しておきます。
hello.ts の中身を確認していく
サンプルコードの内容を理解していきます。
// TypeScript の場合、req と res に対して既に型定義が決まっているので事前に import する
import type { NextApiRequest, NextApiResponse } from 'next'
type Data = {
name: string
}
// もともと決まっている引数、req res に対して型定義
export default function handler(
req: NextApiRequest,
res: NextApiResponse<Data>
) {
// 返すデータのステータスが正常の200の場合、json 形式でデータを返す
res.status(200).json({ name: 'John Doe' })
}
今回は TypeScript で実装していますが、JavaScript の場合は型定義を無くすだけで問題ないです。
ここは Next.js の公式ドキュメント に TypeScript JavaScript のサンプルコードが書いていますので、確認してみてください。
JSON 形式の理解とブラウザで表示させる
JSON 形式と言われても、ぼんやりと抽象的に捉えていたので JSON 形式がどういったものなのか、理解していきたいと思います。
こちらのサイトを参考にしてまとめていきます。
JSON を理解する上で押さえておきたいポイントが
オブジェクト指向とキーとバリュー
人間で例えていきます。「一人の男性 = 1つのオブジェクト」のイメージです。
一人の男性の特徴を表しているのが、キーとバリューになります。図にするとこんなイメージです。
ある方のプロフィールを作成していく感じです。プロフィールの項目（名前、髪の色など）がキーで、その内容がバリューになっています。
実際に上記のプロフィールをコードで書いていきます。hello.ts の中身を変えていきます。
type Data = {
name: string;
color: string;
shintyou: number;
taizyuu: number;
taishibou: number;
ashi: number;
};
export default function handler(req: NextApiRequest, res: NextApiResponse<Data>) {
res
.status(200)
.json({ name: 'Aさん', color: '黒色', shintyou: 170, taizyuu: 60, taishibou: 10, ashi: 27 });
}
http://localhost:3000/api/hello にアクセルしてブラウザで見てみると
正しく表示されました。
なにやら api フォルダにあるものは簡単にデータが抽出できることはわかりましたが、実際にどのように活用していくのか？
index ファイルに JSON データを取り込む
Aさんのプロフィールをちゃんとした形で表示してあげましょう。
まずは SWR パッケージをインストールする必要があります。
// npm の場合
npm install swr
// yarn の場合
yarn add swr
package.json の開発環境にインストールします。
"dependencies": {
"next": "latest",
"react": "^17.0.2",
"react-dom": "^17.0.2",
index.tsx でデータを取り込むためのコードを書いていきます。
// swr をインポート
import useSWR from 'swr';
export default function Home() {
// データが保存されているurl を指定
const url = 'api/hello';
const fetcher = (url: string) => fetch(url).then((res) => res.json());
const { data, error } = useSWR(url, fetcher);
if (error) return <div>Sorry Error...</div>;
if (!data) return <div>Data Loading...</div>;
return (
<div className='p-5 font-bold'>
<p>{data.name}</p>
</div>
);
}
const fetcher = (url: string)〜 を深ぼってみていきます。
const fetcher = (url: string) => fetch(url).then((res) => res.json());
// 保存した url に対して fetch に渡し fetch が url にアクセス。アクセスしたら then が実際の処理を実行
// then((res) => res.json()) リクエスト（データ返却）は json 形式で返すことを意味
const { data, error } = useSWR(url, fetcher);
// useSWR('アクセルするurl', 'アクセルしたurlの情報')
if (error) return <div>Sorry Error...</div>;
if (!data) return <div>Data Loading...</div>;
// この2文を書いとかないとエラーになる
流れとしては、①データもとの url を指定 ②fetchメソッドという技で json データ化をする ③データもとに変更があればデータを更新
fetch（フェッチ）とはなにか？
ここまでで、データの流れはこんな感じで動いていることはだいたいわかりました。
fetch（フェッチ）の理解がポイントになりそうだったので、詳しくみていきます。
fetchメソッド（技みたいなもの）は非同期通信という方法で、サーバ上にある欲しいデータを取得できる
非同期通信というキーワードが出てきました。サーバーとユーザーでのデータのやり取りをみてみましょう。
ユーザーが欲しいというリクエストに対して、サーバーがレスポンスで返すという流れがあります。このデータのやり取りには２種類あり、同期通信と非同期通信です。
fetch メソッドで単に情報を取得しているだけではなく、ユーザーとって便利な形（非同期通信）でデータを取得していることがわかりました。
取得した情報で実装してみよう
データの取得ができたので、実装していきます。取得した情報をもとに、簡単なプロフィールを作成していきます。
export default function Home() {
const url = 'api/hello';
const fetcher = (url: string) => fetch(url).then((res) => res.json());
const { data, error } = useSWR(url, fetcher);
if (error) return <div>Sorry Error...</div>;
if (!data) return <div>Data Loading...</div>;
return (
<div className='p-5 font-bold text-left'>
<p className='p-1'>名前: {data.name}</p>
<p className='p-1'>髪の色: {data.color}</p>
<p className='p-1'>身長: {data.shintyou}</p>
<p className='p-1'>体重: {data.taizyuu}</p>
<p className='p-1'>体脂肪: {data.taishibou}</p>
<p className='p-1'>足のサイズ: {data.ashi}</p>
</div>
);
}
hello.ts 内のデータにアクセルした情報を const { data, error} の data が持っています。この data を return() 内で情報を表示させています。
ここでの注意点が、{ data } としても以下のエラーになります。data として作成したオブジェクトに対して、どの要素（ keys ）を使うのかを指定する必要があります。
毎回、{ data.〜 } と書くのは少しめんどくさいので変数に保存します。
export default function Home() {
const url = 'api/hello';
const fetcher = (url: string) => fetch(url).then((res) => res.json());
const { data, error } = useSWR(url, fetcher);
if (error) return <div>Sorry Error...</div>;
if (!data) return <div>Data Loading...</div>;
まとめ
- JSON のオブジェクト、キー、バリューの使い方を押さえておくこと
- fetch メソッドはユーザーにとって優しい技であること（非同期通信）
