TypeScript/Next.jsとReactの課題

簡単なアプリを作ってください！と言われながらぜんっぜん簡単じゃなくて泣きながら3日丸々やっています。chatGPTではなく、パートナーに助けてもらってます。

Introduction – Tiptap

Tiptapというエディターのライブラリを使いながらの課題です。フルスタックでもどっちでもいいけど、どうやらTypeScriptとReactのスキルを見たいようです。
フルスタックでDB設定でもいいし、メモリやlocalStorageなんかでも別にいいですよとあって、私はローカルのjsonファイルを作っています。
2週間くらい前に、Node.jsのmultiple choice questionsの勉強をした時に出てきた、fsとかwriteFileとかがバンバン出てきて、選んだものの初めて実際使うもので困っていました。Next.jsでrouteを書いて、そこからこれらを使っています。これは一部例です。

import * as fs from "fs";
import { NextResponse, NextRequest } from "next/server";

export async function GET(req: NextRequest) {
  const contents = await fs.promises.readFile("post.json", "utf8");
  return NextResponse.json(JSON.parse(contents || "{}"));
}

GETはまだ何となくなんですが、POSTになったら内容がちょっと複雑で何がJSONなのかJSON.parse()とかJSON.stringify()とか何が何だかわからなくなりました。まとておきたいと思います。

　const data = await req.json();
  const fileContentsString = await fs.promises.readFile("post.json", "utf8");
  const prevPost= JSON.parse(fileContentsString || "{}");
  prevPost.content = data.content;

  fs.writeFile("post.json", JSON.stringify(prevPost), (err) => {
    if (err) console.log(err);
  });
  const results = { success: "true" };
  return NextResponse.json(results);

まずawaitで読み込んだpost.jsonはjson stringですので、私はそれに新しいkey valueをJS objectみたいに使いたかったらその時にJSON.parse()するんですね〜。
そしてまた書き込むときはjson stringに戻してあげないといけないのでそこでJSON.stringify()するんですね。

疲れたので一生忘れたくないです。わーん