<h2 style="text-align: start" id="h98cb4a8e66"><strong>発端：既存のサイトに組み込めるの便利だな…</strong></h2><p style="text-align: start">過去に既に完成しているサイトをお知らせ機能などを使いたいからWordpress化してくれという個人的な仕事の際にすこーしだけ更新したいのにわざわざWordpress化するのめんどくさいな〜お知らせのところだけCMSにできないかと考えたことがありました。（その時から世にheadlessCMSは既にあったのですが…）色々調べて情報収集しているとheadlessCMSというものの存在を知り、日本で開発されているmicroCMSというものの存在を知りました。なので実際に今後使ってみたいと思い上記の記事に書いてある詳しい手順を参考に作成してみました。</p><p><strong>!</strong></p><p>本記事は手順を説明するものではなく、上記の記事の中だけの情報だと分からない方に向けた<br>ChatGPTの活用方法や、自分が引っかかった点を他の方の一助になればと言うものです。</p><h2 style="text-align: start" id="h2317b9032a"><strong>始めた時の状況</strong></h2><p style="text-align: start">・TypeScript未経験<br>・Next.js未経験<br>・module.css未知<br>・Reactなら分かる<br>・API微経験</p><p style="text-align: start">と言うレベル感です。こんな私でもできたのでChatGPTすごい…</p><h2 style="text-align: start" id="h553e19c63e"><strong>進める中で引っかかったこと</strong></h2><p style="text-align: start">基本的には記事の通りに進めていけば上手く行きます</p><p style="text-align: start"><strong>大まかに言うと3点でした。</strong><br>1.記事とは違うTypeScriptを採用した為、型指定にひっかかってしまう。<br>→TypeScriptが出来れば問題なさそう</p><p style="text-align: start">2.Vercelでビルドする際のエラーへの対処<br>→node_moduleの中身への変更が反映されないことが分からなかった。都度型指定すれば◯</p><p style="text-align: start"><a href="http://3.Next">3.Next</a>.jsやmodule.cssへの基礎知識不足<br>→基礎知識があれば良い問題ないと思います</p><h2 style="text-align: start" id="h747565810c"><strong>今回つまづいた際にとった方針</strong></h2><h4 style="text-align: start" id="h940db2880a"><strong>ChatGPTに聞き、情報の正確性の裏どりと周辺知識の補強</strong></h4><h2 style="text-align: start" id="hd00ffeb9b4"><strong>実際の流れ</strong></h2><p style="text-align: start">記事を読みながら、そのとおり進めてみる。<br>↓<br>エラーメッセージを読み自己解決を目指す<br>|<br>（そもそもの構文等が分からなさそう）<br>↓<br>ChatGPTに聞いてみる（エラー当該箇所をエラーメッセージを送信）<br>↓<br>こう書くと解決されると思うよと提示されたコードをコピペ<br>↓ ↑<br>解決されない。自分が問題点だと思う点を再度聞いてみる<br>↓<br>正しい場合はコードから、何がなぜ正しいのかを含めて落とし込む</p><h2 style="text-align: start" id="h522baa2d1d"><strong>具体的な引っかかった点と解決策</strong></h2><h5 style="text-align: start" id="hf3bde8ee0b"><strong>1.APIから取得したデータの深い階層の型定義(TSの知識不足…)</strong></h5><pre><code class="language-tsx">&lt;Image src={blog.thumbnail.url} alt=&quot;サムネイル&quot; /&gt;
</code></pre><p style="text-align: start">となった際に</p><pre><code class="language-tsx">interface HomeProps {
  blog: Array&lt;{ 
    id: string;
    title: string;
    thumbnail: string ;
    comment: string;
    url: string;
  }&gt;;
}
</code></pre><p style="text-align: start">と言う型指定を行なっていたのですが、これだとurlの型指定を正しく行えていないので</p><pre><code class="language-tsx">interface HomeProps {
  blog: Array&lt;{ 
    id: string;
    title: string;
    thumbnail: { url: string };
    comment: string;
  }&gt;;
}
</code></pre><p style="text-align: start">と言う風にしてくださいと言う指示が来たので、確かにデータに向かう途中のthumbnailの値を一々指定するんじゃなくて、thumbnailの先のurlに格納されている値の型指定が欲しいよなとコードを見たら納得しました。ここで納得できない場合には、他の方が書いてくれている記事などを調べに行って落とし込むと言う流れでした。</p><h5 style="text-align: start" id="h868f9ee234"><strong>2.Vercelでビルドする際のエラーへの対処</strong></h5><pre><code class="language-tsx">// libs/client.js
import { createClient } from &apos;microcms-js-sdk&apos;;

export const client = createClient({
  serviceDomain: &apos;service-domain&apos;,
  apiKey: process.env.API_KEY,
});
</code></pre><p style="text-align: start">というコードがあった時に<code>serviceDomain</code>,<code>apiKey</code>はstring | undefined型なのにstring型で指定されていますよ。というエラーメッセージが出力されたのですがnode_moduleの中身のmicrocms-js-sdkの中身の型指定を直接いじってローカルでは解決しており、実際にVercelからデプロイする際にはgithubからインポートしてデプロイする為gitではpushされないnode_moduleの変更は適用されていないようでビルド時にエラーが出てしましました。<br>今回は様々な聞き方をChatGPTにして、出力された解決策を試しても解決されなかった為、あまりよくなさそうな雰囲気ではありましたが型アサーションというものをを用いて解決しました。<code>serviceDomain</code>,<code>apiKey</code>の二つがundefinedの時にはデータを取得できなくてブログのところが表示出来ないのだから条件分岐等を加えてデータを取得できていませんかブログの欄を丸々消すというような対処もできたのかなと思ったりもしました。</p><pre><code class="language-tsx">// libs/client.js
import { createClient } from &apos;microcms-js-sdk&apos;;

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

export const client = createClient({
  serviceDomain: &apos;service-domain&apos;,
  apiKey: process.env.API_KEY,
});
</code></pre><h5 style="text-align: start" id="h8d35d15b11"><strong>3.知識的な側面</strong></h5><p style="text-align: start">これに関してはゼロベースから知識をChatGPTに尋ねて鵜呑みにするのではなく別視点からの裏どりをした方が良いです。よく言われていることですが間違った情報を納得感のある補足で示してくることもあるので、ある程度周りの知識が固まっていて自分で判断できないようであれば有識者様方のありがたい記事を見に行きます。</p><p style="text-align: start">TypeScriptに関する知識が足りなかったので今回はすごい時間がかかってしまいました。</p><h2 style="text-align: start" id="hfc4125fcc3"><strong>完成品</strong></h2><p style="text-align: start">過去に、HTML,CSSの練習として作成したページのNews欄をmicroCMSで更新できるようにしたので実際に、最初に書いた一部だけCMS化するというのを意識しました。少し該当部分まで遠いですが下の方にスクロールしていただくと3つの記事がクリックして記事に飛べるようになっています。<br>記事のページはスタイリングしていない元の状態なのでわかりやすいかと思います。</p><p style="text-align: start"></p><h2 style="text-align: start" id="ha214098e44"><strong>まとめ</strong></h2><p style="text-align: start">今回私がなかなか自分で解決できなかったのはTypeScriptに関する知識が足りなかったというのが問題点だったのですが、実際にデプロイして動くことが確認できたのは間違いなくChatGPTのお陰であり、そう考えるとよく聞く学習の加速というのを実感しました。</p><p style="text-align: start">今回は確かにNext.jsについてやheadlessCMS,TypeScriptについても勉強になったのですが、それよりもChatGPTを用いた学習方法や解決方法、向き合い方というのが個人的に有意義だったなと感じています。今後は更にAIを学習に活かすと共に精度の高いプロンプトやAIごとの癖等を学ぶことが全ての学びの加速につながると思ったのでAIを学習に取り入れている方は学んでおくとよいのではないでしょうか。</p>

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

<h2 style="text-align: start" id="h8d027c8ed3"><strong>はじめに</strong></h2><p style="text-align: start">今回Udemyの講座でReactでポケモン図鑑を作るというものを受講しました。ですが完成したものは英語表記となっており日本語表記にしたいなと思い、Jsonのデータを探し回って見つけたのでその過程を残しておこうと思います。</p><h4 style="text-align: start" id="h99c620f2fd"><strong>今回受講したUdemyの講座</strong></h4><p style="text-align: start"></p><p style="text-align: start">とても好きなUdemy講師の方でYouTubeなどでも情報発信してくださっています。</p><h2 style="text-align: start" id="hd3b63a104b"><strong>始める前に</strong></h2><blockquote><p>この記事はポケモン図鑑の作り方を説明するものではなく、<br>英語表記から日本語表記にするためのものです。</p></blockquote><h4 style="text-align: start" id="hed900658dc"><strong>環境</strong></h4><p style="text-align: start">・react @18.2.0<br>・npm 9.5.0<br>・node v18.15.0</p><h2 style="text-align: start" id="h39f44f1e32"><strong>PokeAPIとは</strong></h2><p style="text-align: start">ポケモンの情報を提供してくれているAPIであり、基本的に英語ベースとなっています。<br><a href="https://pokeapi.co/api/v2/pokemon/">https://pokeapi.co/api/v2/pokemon/</a>　のURLにアクセスすると20件のポケモンデータがJson形式で返されており、実際に見てみるとわかりますが1281のポケモンのうちの20を表示していて、各ポケモンの英語での名前とより詳細なデータがあるurlというキーのプロパティが存在する。<code>results[0].name</code>という風に指定すると図鑑番号1番のフシギダネの英語名が取得できるという具合です。</p><h2 style="text-align: start" id="h0125089f66"><strong>まず、英語名の表示の方法</strong></h2><p style="text-align: start">では英語名を取得するコードと、日本語名を取得するコードを実際に見ながら確認していきます。</p><h5 style="text-align: start" id="h1596f9ea82"><strong>↓ 両言語共通のPokeAPIからデータを持ってくるための下準備（無視でOK！！）</strong></h5><pre><code class="language-jsx">const pokeApiUrl = &quot;https://pokeapi.co/api/v2/pokemon/&quot;;
const [pokemonData, setPokemonData] = useState([]);

//非同期でurlに与えたURLからデータを取得する関数
const getAllPokemon = (url) =&gt; {
    return new Promise((resolve,reject) =&gt; {
        fetch(url)
        .then((res) =&gt; res.json())
        .then((data) =&gt; resolve(data))
    })
}
const getPokemon = (url) =&gt; {
    return new Promise((resolve,reject) =&gt; {
        fetch(url)
        .then((res) =&gt; res.json())
        .then((data) =&gt; resolve(data))
    })
}

//map関数で一つ一つ各ポケモンのurlにアクセスして詳細を取得してstateに格納する関数
const loadPokemon = async (data) =&gt; {
    let _pokemonData = await Promise.all(
      data.map((pokemon) =&gt; {
        let pokemonRecord = getPokemon(pokemon.url);
        return pokemonRecord;
      })
    );
    setPokemonData(_pokemonData);
  };

//上記の関数を一度だけ実行する
useEffect(() =&gt; {
    const fetchPokemonData = async () =&gt; {
      let res = await getAllPokemon(pokeApiUrl);
      loadPokemon(res.results);
    };
    fetchPokemonData();
  }, []);
</code></pre><p style="text-align: start">これで<code>pokemonData</code>の中に配列として各ポケモンの詳細なデータが格納されたことになります。<br>ですので<code>pokemonData</code>に対してmap関数で名前を指定して表示してあげれば英語名の表示は完了です。</p><h5 style="text-align: start" id="haa64c45a50"><strong>↓ </strong><code>pokemonData</code>に入っているJsonデータの構造</h5><pre><code class="language-json">&quot;species&quot;: {
		&quot;name&quot;: &quot;bulbasaur&quot;,
		&quot;url&quot;: &quot;https://pokeapi.co/api/v2/pokemon-species/1/&quot;
	},
</code></pre><h5 style="text-align: start" id="h51e6309345"><strong>↓ 英語名の名前を取得するコード</strong></h5><pre><code class="language-jsx">return (
    &lt;&gt;
　　　　　　　　　　　　　　&lt;div&gt;
        {pokemonData.map((pokemon) =&gt; {
          return &lt;p&gt;{pokemon.species.name}&lt;/p&gt;
        })}
       &lt;/div&gt;
    &lt;/&gt;
  );
</code></pre><p style="text-align: start">となり、上記のJsonデータを見ていただくとわかる通りspeciesの中に英語名と、更に詳細なデータが格納されているurlがありますのでspecies.urlにアクセスすると様々な言語のフレーバーテキスト、何ポケモンなのか、ポケモンの名前などがありますので、その中の一部を記載するとこうなります。</p><h5 style="text-align: start" id="h26a97694ba"><strong>↓ species.urlにアクセスした中身の一部</strong></h5><pre><code class="language-json">&quot;names&quot;:[
	　　{
	　　　　　&quot;language&quot;: {
			&quot;name&quot;: &quot;ja-Hrkt&quot;,
			&quot;url&quot;: &quot;https://pokeapi.co/api/v2/language/1/&quot;
			},
	　　　　　&quot;name&quot;: &quot;フシギダネ&quot;
		},
		{
	　　　　　&quot;language&quot;: {
			&quot;name&quot;: &quot;roomaji&quot;,
			&quot;url&quot;: &quot;https://pokeapi.co/api/v2/language/2/&quot;
			},
	　　　　　&quot;name&quot;: &quot;Fushigidane&quot;
		},
</code></pre><p style="text-align: start">ここまで来れば、<a href="http://names.language.name">names.language.name</a> === &quot;ja-Hrkt&quot;もしくは&quot;ja&quot;<a href="http://に合致するものをfind関数等で見つけてそのnames.name">に合致するものをfind関数等で見つけてそのnames.name</a>を出力すればいいんだとなりますね。</p><h2 style="text-align: start" id="h66f1018417"><strong>日本語で表示する方法</strong></h2><p style="text-align: start">先ほど説明した通り、ポケモンの名前に限らず英語名で欲しい情報にアクセスできている場合はそこのurlというキーにアクセスして、その中の&quot;ja-Hrkt&quot;もしくは&quot;ja&quot;に合致するものをfind関数等で見つけて表示すれば良いということになります。</p><h5 style="text-align: start" id="hd6fe69cc1d"><strong>↓ 日本語のポケモンの名前を取得するコード</strong></h5><pre><code class="language-jsx">const [pokemonName, setPokemonName] = useState([]);

//複数個になると変わる部分
let pokemonNameDetail = pokemon.species.url;

const loadPokemonName = async (data) =&gt; {
  let response = await fetch(data);
  let result = await response.json();
  let jaName = result.names.find(name =&gt; name.language.name === &quot;ja&quot;).name;
  setPokemonName(jaName);
};

 useEffect(() =&gt; {
    loadPokemonName(pokemonNameDetail);
  },[])

return (
    &lt;div className=&quot;card&quot;&gt;
      &lt;h4 className=&quot;cardNames&quot;&gt;{pokemonName}&lt;/h4&gt;
    &lt;/div&gt;
  );

</code></pre><p style="text-align: start">今回は<code>ja</code>と一致するもので探して、日本語で表示されるようになりました。</p><h2 style="text-align: start" id="h9c7bf838c2"><strong>配列で提供されているものを日本語で表示する方法</strong></h2><p style="text-align: start">名前の時としようとしていることは一緒ですが、先ほどの一つしかないものは下記の通りなのでそのままダイレクトでアクセスできますが、「ほのお・ひこう」のようなタイプや複数パターンの特性を持つポケモンたちは配列で要素を渡されますので、上の<strong>日本語の名前を取得するコード</strong>の部分をmap関数などで一つ一つ取り出して与えていく必要があります。</p><h5 style="text-align: start" id="h72324ecc6b"><strong>↓ 一つしかデータが入っていない要素のJsonデータの構造</strong></h5><pre><code class="language-json">&quot;species&quot;: {
		&quot;name&quot;: &quot;bulbasaur&quot;,
		&quot;url&quot;: &quot;https://pokeapi.co/api/v2/pokemon-species/1/&quot;
	},
</code></pre><h5 style="text-align: start" id="he8329e47d4"><strong>↓ 複数個のデータが配列になっている要素のJsonデータの構造</strong></h5><pre><code class="language-json">&quot;types&quot;: [
　　　　　　　　　　{
	&quot;slot&quot;: 1,
	&quot;type&quot;: {
	　　　　　　　　　　　&quot;name&quot;: &quot;grass&quot;,
	　　　　　　　　　　　　&quot;url&quot;: &quot;https://pokeapi.co/api/v2/type/12/&quot;
	}
　　　　　　　　　　　},
　　　　　　　　　　　{
	&quot;slot&quot;: 2,
	&quot;type&quot;: {
	　　　　　　　　　　　　&quot;name&quot;: &quot;poison&quot;,
	　　　　　　　　　　　　&quot;url&quot;: &quot;https://pokeapi.co/api/v2/type/4/&quot;
	}
　　　　　　　　　　　　}
],
</code></pre><h5 style="text-align: start" id="h6c8a961a7e"><strong>↓ 複数個のデータ（タイプ）を日本語表示するためのコード</strong></h5><pre><code class="language-jsx">// タイプ一つ一つの詳細なデータがあるJsonのurlを取得
  let resPokemonTypes = pokemon.types.map((v) =&gt; {
    let typesURL = v.type.url;
    return typesURL;
  });

  // 引数として与えられたurlの中から&quot;ja&quot;にマッチするものを取得してstateに格納する関数
  const loadPokemonType = async (data) =&gt; {
    let _pokemonType = await Promise.all(
      data.map(async (pokemon) =&gt; {
        let pokemonTypeDetail = await getPokemonType(pokemon);
        let jaName = pokemonTypeDetail.names.find(name =&gt; name.language.name === &quot;ja&quot;).name;
        return jaName;
      })
    );
    let joinedTypes = _pokemonType.join(&quot; / &quot;);
    setPokemonTypeURL(joinedTypes);
  };
  
  useEffect(() =&gt; {
    loadPokemonType(resPokemonTypes);
  },[])
</code></pre><h2 style="text-align: start" id="hfc4125fcc3"><strong>完成品</strong></h2><p style="text-align: start">日本語表記にしました完成品がこちらとなります</p><p style="text-align: start"></p><h2 style="text-align: start" id="ha214098e44"><strong>まとめ</strong></h2><p style="text-align: start">今回はポケモン図鑑を日本語にということで、結論は深いところに置いてあっただけという感じではあったのですが動画に習うだけでなく一から自分でマップ関数等を用いて非同期を書いたりと、そのまま復習になりますので是非一つの学習の案として考えてみていただければと思います。ここまで見て頂きありがとうございました、拙い文失礼いたしました。</p>

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

PokeAPI×Reactで作成したポケモン図鑑を日本語表記にする方法

GPTを使ったLINE BOTをAWS Lambda×TypeScript(Node.js)で作る

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

PokeAPI×Reactで作成したポケモン図鑑を日本語表記にする方法

GPTを使ったLINE BOTをAWS Lambda×TypeScript(Node.js)で作る

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