<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="h2ca9e30231"><strong>発端：スクロールに合わせて出てくるやつ、一から書いてたけど面倒臭いな、、、</strong></h2><p style="text-align: start">・まずは検索！！<br>→調べてみると色々あるらしいけど、軽いライブラリで探すとAOSを見つけたので使ってみました</p><h2 style="text-align: start" id="h567f5b6bf2"><strong>1.CDNを調べて張り付けよう</strong></h2><p style="text-align: start">headタグの中にCSSの記述、bodyタグの一番下などにscriptタグを挿入しましょう</p><p style="text-align: start">下記をコピペしていただければ大丈夫かとは思いますが念のため公式のページは<a href="https://cdnjs.com/libraries/aos" target="_blank" rel="noopener noreferrer nofollow">こちら</a>です。</p><p style="text-align: start"></p><pre><code>&lt;head&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css&quot; /&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt;</code></pre><h2 style="text-align: start" id="h8baf0e73be"><strong>2.JavaScriptでAOSを初期化する</strong></h2><p style="text-align: start">下記のように先ほど挿入したscriptタグの直下に書いても良いですし、別途JSファイルを作成してタグの中身だけを記載してもどちらでも構いません。</p><pre><code>&lt;body&gt;
  &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js&quot;&gt;&lt;/script&gt;
  &lt;script&gt;
    AOS.init();
  &lt;/script&gt;
&lt;/body&gt;</code></pre><h2 style="text-align: start" id="h4390fcf4be"><strong>3.要素にアニメーションを指定する属性を追加する</strong></h2><pre><code>&lt;div data-aos=&quot;fade-up&quot;&gt;...&lt;/div&gt;</code></pre><p style="text-align: start">上記のように指定します。<br>data-aosの値によってアニメーションが変わります。</p><h2 style="text-align: start" id="h6afa9432a2"><strong>4.他のパラメーター一覧</strong></h2><h4 style="text-align: start" id="h5e114996d7"><strong>data-aos(アニメーションの種類)</strong></h4><p style="text-align: start">&lt;値&gt;</p><ul><li>fade-up : 上方向にフェードイン</li><li>fade-down : 下方向にフェードイン</li><li>fade-left : 左方向にフェードイン</li><li>fade-right : 右方向にフェードイン</li><li>zoom-in : ズームイン</li><li>zoom-out : ズームアウト</li><li>flip-up : 上方向にフリップイン</li><li>flip-down : 下方向にフリップイン</li><li>flip-left : 左方向にフリップイン</li><li>flip-right : 右方向にフリップイン</li></ul><h4 style="text-align: start" id="hf09f87f149"><strong>data-aos-duration(アニメーションの時間)</strong></h4><p style="text-align: start">&lt;例&gt;</p><pre><code>&lt;div data-aos=&quot;fade-up&quot; data-aos-duration=&quot;1000&quot;&gt;...&lt;/div&gt;
</code></pre><p style="text-align: start">単位はmsになりますので上記の例になりますと1秒かけて上方向にフェードインするという意味になります。</p><h4 style="text-align: start" id="hfdeacd5913"><strong>data-aos-delay(アニメーションの遅延)</strong></h4><p style="text-align: start">&lt;例&gt;</p><pre><code>&lt;div data-aos=&quot;fade-up&quot; data-aos-duration=&quot;1000&quot; data-aos-delay=&quot;500&quot;&gt;...&lt;/div&gt;
</code></pre><p style="text-align: start">data-aos-durationと同じく単位はmsになりますので上記の例になりますと<br>0.5秒遅れて始まり1秒かけて上方向にフェードインするという意味になります。</p><h2 style="text-align: start" id="hfa914913ae"><strong>5.一応当てはめて完成したもの</strong></h2><p style="text-align: start">上記のように実際に使ってみましたが、本当にこれで動くんだな、、、ライブラリすげーと思わされました。</p><h2 style="text-align: start" id="hfb422d9594"><strong>6.JQueryを入れていても使うことができます</strong></h2><p style="text-align: start">JQueryなどとの互換性がないプラグインも多々ありますが、AOSは併用が可能です。</p><p style="text-align: start">ですがその際には、下記のように書いてください</p><pre><code>&lt;script&gt;
    $(document).ready(function() {
      AOS.init();
    });
 &lt;/script&gt;
</code></pre><p style="text-align: start">jQueryを使用する場合は、必ず$(document).ready内で初期化するようにしてください。</p><h2 style="text-align: start" id="h682c1513dd"><strong>7.使用してみた感想</strong></h2><p style="text-align: start">正直今まで一から書いてきたのが馬鹿らしく思えるほど簡単で、素早く実装できました。<br>スクロールの量を取得する必要もなく、アニメーションをつけたい要素のページにおける位置を取得する必要もないというのは非常に楽でありがたかったです。<br>過去にユーザーのアクションによってページの高さが変わってしまう（MOREのボタンなど）デザインの時に高さの取得がうまくいかないというようなこともあったのですが、このようにライブラリを用いれば、その辺も考える必要があまりないのかなと感じました。</p>

スクロールでふわっと表示を簡単に！！ JavaScriptのライブラリAOSの簡単な使い方

<h2 style="text-align: start" id="hc3ad6d4ee2"><strong>発端：複数要素にaddEventListenerを指定しても動かない!</strong></h2><p style="text-align: start">・getElementsByClassNameで複数個のボタンに同じイベントを指定しようとした</p><p style="text-align: start"></p><pre><code>document.getElementsByTagName(&quot;h1&quot;)[0].style.fontSize = &quot;2vw&quot;;

// ボタンが一つの場合
let oneBtn = document.getElementById(&quot;one_btn&quot;);

oneBtn.addEventListener(&quot;click&quot;,()=&gt;{
  alert(&quot;clickされました&quot;);
})

// ===================================
// ボタンが三つの場合(エラーはいて動かなくるのでコメントアウトです)
// let threeBtn = document.getElementsByClassName(&quot;three_btn&quot;);
// threeBtn.addEventListener(&quot;click&quot;,()=&gt;{
//   alert(&quot;clickされました&quot;);
// })
// ===================================

// ボタンが五つの場合
let fifthBtn = document.getElementsByClassName(&quot;fifth_btn&quot;);

for(let i = 0; i &lt; fifthBtn.length; i++) {
    fifthBtn[i].addEventListener(&quot;click&quot;,()=&gt;{
    alert(&quot;clickされました&quot;);
  })
}</code></pre><h2 style="text-align: start" id="h5b9438b60b"><strong>原因：addEventListenerは一つづつのノードにしか指定できなかった</strong></h2><p style="text-align: start">1.addEventListenerを正しく理解できていなかった</p><p style="text-align: start">2.複数の要素を取得してくる際の形式が配列であることを知らなかった</p><p style="text-align: start"></p><div style="left: 0; width: 100%; height: 300px; position: relative;"><iframe src="https://codepen.io/o_jaga_o/embed/preview/oNPJbvO?default-tabs=html%2Cresult&amp;height=300&amp;host=https%3A%2F%2Fcodepen.io&amp;slug-hash=oNPJbvO" style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;" allowfullscreen></iframe></div><h2 style="text-align: start" id="hbf7d448136"><strong>解決策：一つづつ取り出して指定すれば良い</strong></h2><p style="text-align: start">・そもそも、配列で取得していることがわかれば様々な文法が思い浮かぶことと思います。</p><p style="text-align: start">・上記のコードではfor文を用いていますが、結局どの文法でも良いので、原因であった<br>　ーaddEventListenerは一つのノードにしかしか設定できない<br>　ー複数の要素を取得してきたときは配列である<br>の二点を解決するように動けば、おのずと解決されるように思います。</p><h2 style="text-align: start" id="h2e6b708fc4"><strong>感想：インプットとアウトプットのバランスの重要性</strong></h2><p style="text-align: start">今回なぜこのような事でつまづいたのかというと、そもそも上記二点の原因に関する知識不足でした。<br>当然どの分野でも言える事ですが基礎的な部分の最低限のインプットは必要で、<br>アウトプットの中で問題にぶつかり、その内容をインプットするという学習法を取っていましたが、それだけでは学ぶことができない部分が出てきたり、トレンドへのアンテナが鈍っていくような気がするのでとりあえずインプットの時間を少し増やそうと思いました。</p>

複数要素にaddEventListenerでイベントを設定する方法

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

<p>Wordpressを使用していると既存の投稿フィールドだけでなく…</p>

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

スクロールでふわっと表示を簡単に！！ JavaScriptのライブラリAOSの簡単な使い方

複数要素にaddEventListenerでイベントを設定する方法

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

カスタム投稿フィールドの作り方

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

スクロールでふわっと表示を簡単に！！ JavaScriptのライブラリAOSの簡単な使い方

複数要素にaddEventListenerでイベントを設定する方法

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

カスタム投稿フィールドの作り方

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