知識不足すぎるのでNext.js×microCMSをChatGPTに手伝ってもらいました

2023/08/29

React

Next.js

発端：既存のサイトに組み込めるの便利だな…

過去に既に完成しているサイトをお知らせ機能などを使いたいからWordpress化してくれという個人的な仕事の際にすこーしだけ更新したいのにわざわざWordpress化するのめんどくさいな〜お知らせのところだけCMSにできないかと考えたことがありました。（その時から世にheadlessCMSは既にあったのですが…）色々調べて情報収集しているとheadlessCMSというものの存在を知り、日本で開発されているmicroCMSというものの存在を知りました。なので実際に今後使ってみたいと思い上記の記事に書いてある詳しい手順を参考に作成してみました。

本記事は手順を説明するものではなく、上記の記事の中だけの情報だと分からない方に向けた
ChatGPTの活用方法や、自分が引っかかった点を他の方の一助になればと言うものです。

始めた時の状況

・TypeScript未経験
・Next.js未経験
・module.css未知
・Reactなら分かる
・API微経験

と言うレベル感です。こんな私でもできたのでChatGPTすごい…

進める中で引っかかったこと

基本的には記事の通りに進めていけば上手く行きます

大まかに言うと3点でした。
1.記事とは違うTypeScriptを採用した為、型指定にひっかかってしまう。
→TypeScriptが出来れば問題なさそう

2.Vercelでビルドする際のエラーへの対処
→node_moduleの中身への変更が反映されないことが分からなかった。都度型指定すれば◯

3.Next.jsやmodule.cssへの基礎知識不足
→基礎知識があれば良い問題ないと思います

今回つまづいた際にとった方針

ChatGPTに聞き、情報の正確性の裏どりと周辺知識の補強

実際の流れ

記事を読みながら、そのとおり進めてみる。
↓
エラーメッセージを読み自己解決を目指す
|
（そもそもの構文等が分からなさそう）
↓
ChatGPTに聞いてみる（エラー当該箇所をエラーメッセージを送信）
↓
こう書くと解決されると思うよと提示されたコードをコピペ
↓ ↑
解決されない。自分が問題点だと思う点を再度聞いてみる
↓
正しい場合はコードから、何がなぜ正しいのかを含めて落とし込む

具体的な引っかかった点と解決策

1.APIから取得したデータの深い階層の型定義(TSの知識不足…)

<Image src={blog.thumbnail.url} alt="サムネイル" />

となった際に

interface HomeProps {
  blog: Array<{ 
    id: string;
    title: string;
    thumbnail: string ;
    comment: string;
    url: string;
  }>;
}

と言う型指定を行なっていたのですが、これだとurlの型指定を正しく行えていないので

interface HomeProps {
  blog: Array<{ 
    id: string;
    title: string;
    thumbnail: { url: string };
    comment: string;
  }>;
}

と言う風にしてくださいと言う指示が来たので、確かにデータに向かう途中のthumbnailの値を一々指定するんじゃなくて、thumbnailの先のurlに格納されている値の型指定が欲しいよなとコードを見たら納得しました。ここで納得できない場合には、他の方が書いてくれている記事などを調べに行って落とし込むと言う流れでした。

2.Vercelでビルドする際のエラーへの対処

// libs/client.js
import { createClient } from 'microcms-js-sdk';

export const client = createClient({
  serviceDomain: 'service-domain',
  apiKey: process.env.API_KEY,
});

というコードがあった時にserviceDomain,apiKeyはstring | undefined型なのにstring型で指定されていますよ。というエラーメッセージが出力されたのですがnode_moduleの中身のmicrocms-js-sdkの中身の型指定を直接いじってローカルでは解決しており、実際にVercelからデプロイする際にはgithubからインポートしてデプロイする為gitではpushされないnode_moduleの変更は適用されていないようでビルド時にエラーが出てしましました。
今回は様々な聞き方をChatGPTにして、出力された解決策を試しても解決されなかった為、あまりよくなさそうな雰囲気ではありましたが型アサーションというものをを用いて解決しました。serviceDomain,apiKeyの二つがundefinedの時にはデータを取得できなくてブログのところが表示出来ないのだから条件分岐等を加えてデータを取得できていませんかブログの欄を丸々消すというような対処もできたのかなと思ったりもしました。

// libs/client.js
import { createClient } from 'microcms-js-sdk';

const serviceDomain = process.env.API_DOMAIN as string;
const apiKey = process.env.API_KEY as string;

export const client = createClient({
  serviceDomain: 'service-domain',
  apiKey: process.env.API_KEY,
});

3.知識的な側面

これに関してはゼロベースから知識をChatGPTに尋ねて鵜呑みにするのではなく別視点からの裏どりをした方が良いです。よく言われていることですが間違った情報を納得感のある補足で示してくることもあるので、ある程度周りの知識が固まっていて自分で判断できないようであれば有識者様方のありがたい記事を見に行きます。

TypeScriptに関する知識が足りなかったので今回はすごい時間がかかってしまいました。

完成品

過去に、HTML,CSSの練習として作成したページのNews欄をmicroCMSで更新できるようにしたので実際に、最初に書いた一部だけCMS化するというのを意識しました。少し該当部分まで遠いですが下の方にスクロールしていただくと3つの記事がクリックして記事に飛べるようになっています。
記事のページはスタイリングしていない元の状態なのでわかりやすいかと思います。

まとめ

今回私がなかなか自分で解決できなかったのはTypeScriptに関する知識が足りなかったというのが問題点だったのですが、実際にデプロイして動くことが確認できたのは間違いなくChatGPTのお陰であり、そう考えるとよく聞く学習の加速というのを実感しました。

今回は確かにNext.jsについてやheadlessCMS,TypeScriptについても勉強になったのですが、それよりもChatGPTを用いた学習方法や解決方法、向き合い方というのが個人的に有意義だったなと感じています。今後は更にAIを学習に活かすと共に精度の高いプロンプトやAIごとの癖等を学ぶことが全ての学びの加速につながると思ったのでAIを学習に取り入れている方は学んでおくとよいのではないでしょうか。