ReactやNext.jsでデータ取得をより簡単に実現できるライブラリ、SWRを使ってみました。

これまではfetch APIとuseStateやuseEffectを扱って処理していたため、コードも長くなっていましたがより簡潔かつ可読性も上がるのが特徴です。またキャッシュ対策やリクエストの重複排除なども備えているので、ユーザにも優しく高速である点もポイントかと思います。

まず、インストールですがnpmでのインストール方法は以下のようにコマンドをタイプします。

$ npm install swr

公式のドキュメントを参考にコードを書いてみました。前回Reactの勉強で使ったお天気のAPIを取得してみます。

'use client';
import useSWR from 'swr';
const fetcher = (url) => fetch(url).then(res => res.json());
export default function page() {
 const { data, isError, isLoading } = useSWR('https://www.jma.go.jp/bosai/forecast/data/overview_forecast/130000.json', fetcher)
 if (isError) return <div>読み込みエラーです</div>
 if (isLoading) return <div>お待ち下さい</div>
 return (<div>
  <h1>{data.targetArea}の天気</h1>
  <p>{data.text}</p>
 </div>);
}

エラー処理や読み込み中の処理なども簡潔なコードで再現でき、簡単に東京都のお天気情報を取得できました。

また、Reactのカスタムフックとしても利用できるので取得と表示の処理を分けることも。page.jsからは郵便番号だけを指定してみます。

カスタム用のgetWeather.jsのコードは以下。

import useSWR from 'swr';
const fetcher = (url) => fetch(url).then(res => res.json());
export const getWeather = (id) => {
 const { data, isError, isLoading } = useSWR(`https://www.jma.go.jp/bosai/forecast/data/overview_forecast/${id}.json`, fetcher)
 return {data,isError,isLoading}
}

page.jsではパラメータ（郵便番号）だけを渡します。

'use client';
import {getWeather} from '@/hooks/getWeather'; 
export default function page() {
 const { data, isError, isLoading } = getWeather(140000); //郵便番号を指定
 if (isError) return <div>読み込みエラーです</div>
 if (isLoading) return <div>お待ち下さい</div>
 return (<div>
  <h1>{data.targetArea}の天気</h1>
  <p>{data.text}</p>
 </div>);
}

神奈川県の天気情報を取得できました。

ほかにも便利なオプションやhooksが用意されているようなので勉強してみます。公式ドキュメントは以下の通り。

• はじめに – SWR

おしまい♥

タグ：JamstackNext.jsnpm(Node.js)React