Next.jsでYAMLをTypeScriptのオブジェクトとして読み込む方法 【js-yaml】
目次
こんにちは。
今回はNext.jsとTypeScriptでYAMLファイルを読み込む方法をまとめます。
YAMLはJSONよりも書きやすく、JSONと同じようにオブジェクトとして扱うことができるようになるので便利です。
【前提】Next.jsのプロジェクトを作成する
Next.js+TypeScriptのプロジェクト作成方法はこちらの記事をご参考ください。
【備忘録】Next.js+TypeScriptで簡単なWebアプリケーションを作りたくなったので作成方法とGitHub連携の手順まとめ【Vercel/無料でできる】
必要なパッケージと型定義のインストール js-yaml
YAMLを読み込むために、js-yamlというパッケージを使います。
以下のコマンドでインストールできます。
npm install js-yaml
参考 : https://www.npmjs.com/package/js-yaml
また、TypeScript用の型定義もインストールします。
npm install --save @types/js-yaml
参考 : https://www.npmjs.com/package/@types/js-yaml
YAMLファイルを用意する
動作確認用に、適当に用意します。
en: penguin
jp: ペンギン
これを、example.ymlという名前で保存しておきます。
YAMLはJSONと違ってダブルクォーテーションが不要なので書きやすいです。
YAMLファイル読み込み部分を作る
apiディレクトリにpenguin.tsというファイルを作り、以下のように書きます。
import * as fs from 'fs'
import * as path from 'path'
import { load } from 'js-yaml'
import type { NextApiRequest, NextApiResponse } from 'next'
const yamlPath = path.join(process.cwd(), 'example.yml')
export default function handler(req: NextApiRequest, res: NextApiResponse){
const obj = load(fs.readFileSync(yamlPath, 'utf-8'))
res.status(200).json(obj)
}
fsとpathは標準モジュールで、ファイルの読み込みに使います。js-yamlのloadという関数を読みこんで使います。NextApi...やhandler関数あたりはNext.jsのAPIルートの書き方を参考にしています。
ブラウザでlocalhost:3000/api/penguinにアクセスすると、以下の結果が出力されるはずです。
{"en":"penguin","jp":"ペンギン"}
無事、YAMLで記述した内容がJSONとして取得できるようになりました。
YAMLファイルをJSONオブジェクトとして取得する
以上でAPIルートとしてYAMLファイルから生成されたJSONを取得できるようになりました。
あとはAPIからデータを取得するだけです。APIを取得するにはfetch()を使います。
const url = "/api/penguin"
const getPenguin = () => {
fetch(url).then((res) => res.json())
.then((data)=>console.log(data))
};
ここでdataが{en:'penguin', jp:'ペンギン'}というオブジェクトになっています。
assync関数を使う場合は以下のように書けます。
const getPenguin = async () => {
const data = await (await fetch(url)).json()
console.log(data)
}
fetchやasyncなど、非同期関数の基礎についてはこちらの記事にまとめています。
TypeScriptの非同期処理とは何か・Promiseの基本的な使い方をまとめてみる【then / catch / finally / async / await】
また、Next.jsにはAPI取得を簡単にするReactフックuseSWRがあります。
useSWRの使い方についてはこちらの記事にまとめています。
Next.js+TypeScriptで簡単にAPIでデータ取得する方法【useSWR/サンプルコードあり】
まとめ
というわけで今回はNext.jsとTypeScriptでYAMLファイルを読み込んで使う方法をまとめました。
参考になれば幸いです。
それでは〜
