<h2 style="text-align: start" id="h9707d3a59a"><strong>概要</strong></h2><p style="text-align: start">スムーズなページ内遷移を実現するために、scroll-behavior: smooth;を使うことがあるかと思います。しかし、SPA（Single Page Application）では、このプロパティが遷移時に意図しない動作を引き起こすことがあります。</p><p style="text-align: start">本記事では、SPAでscroll-behavior: smooth;が影響する問題を解決する方法について説明します。</p><h2 style="text-align: start" id="h97b759db3e"><strong>実現したい挙動</strong></h2><p style="text-align: start">ページ内遷移では連続的にスムーズに移動し、ページ間の遷移はパッと一番上に切り替わる。</p><h2 style="text-align: start" id="h5c0c7cb22e"><strong>問題</strong></h2><p style="text-align: start">まず、SPAでscroll-behavior: smooth;がどのような影響を与えるかを説明します。</p><p style="text-align: start">SPAで何も指定せずにvue routerの設定をすると、前のページのスクロール量が残ってしまいます。下記の画像のようなイメージです。</p><p style="text-align: start"></p><p style="text-align: start">本来は下記のようなイメージで遷移したいですよね</p><p style="text-align: start"></p><p style="text-align: start">二つ目のイメージのように遷移するたびに一番上へ遷移するような設定をした際、下記のようにscroll-behavior: smooth;を指定していると二ページに遷移するときパッと切り替わって欲しいのにスムーズなスクロールが入ってしまいます。</p><p>.css</p><pre><code>html {
  scroll-behavior: smooth;
}
</code></pre><p style="text-align: start">一番上へ遷移するような設定に関しては下記を参考にさせていただきました。</p><p style="text-align: start"></p><h2 style="text-align: start" id="h79a0d99e74"><strong>解決策の提案</strong></h2><p style="text-align: start"><strong>①aタグでページ内遷移を行う<br>②JavaScriptを使用してスクロール制御を行う</strong></p><h3 style="text-align: start" id="h47ff75112f"><strong>①aタグでページ内遷移を行う</strong></h3><p style="text-align: start">そもそもaタグでページ内遷移を行う時の為にscroll-behavior: smooth;を指定するわけですが、その解決法を提案します。</p><ul><li>aタグを押した瞬間だけCSSにscroll-behavior: smooth;を指定する</li><li>setTimeout等でscroll-behavior: auto;に戻す</li></ul><p>A-tag.vue</p><pre><code>&lt;script setup lang=&quot;ts&quot;&gt;
const smoothScroll = () =&gt; {
  document.documentElement.style.scrollBehavior = &apos;smooth&apos;;
  setTimeout(() =&gt; {
    document.documentElement.style.scrollBehavior = &apos;auto&apos;;
  }, 100);
}
&lt;/script&gt;

&lt;template&gt;
  &lt;a @click=&quot;smoothScroll&quot; href=&quot;#anchor&quot;&gt;↓ aタグです　&lt;/a&gt;

  &lt;div id=&quot;anchor&quot; class=&quot;page page4&quot;&gt;
      &lt;p&gt;4&lt;/p&gt;
  &lt;/div&gt;
&lt;/template&gt;
</code></pre><h3 style="text-align: start" id="h472563f97c"><strong>②JavaScriptを使用してスクロール制御を行う</strong></h3><p style="text-align: start">aタグでidで指定した要素にページ内遷移する方法ではなく、JavaScriptでwindow.scrollToを使用してページ遷移を行う方法を使用する方法です。</p><p style="text-align: start"></p><p>JS.vue</p><pre><code>&lt;script setup lang=&quot;ts&quot;&gt;
import { onMounted, ref } from &apos;vue&apos;;

const anchor = ref&lt;HTMLElement | null&gt;(null);

onMounted(() =&gt; {
  anchor.value = document.querySelector(&apos;#anchor&apos;);
});

const smoothScroll = () =&gt; {
  const element = anchor.value;
  if (element) {
    window.scrollTo({
      top: element.offsetTop,
      behavior: &apos;smooth&apos;
    });
  }
}
&lt;/script&gt;

&lt;template&gt;
  &lt;button @click=&quot;smoothScroll&quot;&gt;↓ Clickイベントです　&lt;/button&gt;

  &lt;div id=&quot;anchor&quot; class=&quot;page page4&quot;&gt;
      &lt;p&gt;4&lt;/p&gt;
  &lt;/div&gt;
&lt;/template&gt;
</code></pre><p style="text-align: start">scroll-behavior: smooth;の代わりにJavaScriptを使用して、ページ遷移時のスムーズスクロールを制御します。</p><h2 style="text-align: start" id="hab1336c444"><strong>実際に実装してみた</strong></h2><p style="text-align: start"></p><p style="text-align: start">実際に両方見てみても挙動に差は見られません。</p><p style="text-align: start">開発者ツールでソースを確認すると、aタグで遷移する方のページではaタグを押した際に<code>&lt;html&gt;</code>タグでstyleの変更が行われているのが見えると思います。</p><h2 style="text-align: start" id="h27b77fd3dd"><strong>どちらを使うのがいいの？</strong></h2><p style="text-align: start">私個人の感想になりますが、②のJavaScriptを使用してスクロール制御を行う方が違和感がないかなという気がしています。クラスの付け替えを頻繁に行うのはそういう動きが必要でない場合には気持ち悪い感じがしますが、プロジェクトに合わせて選んでいただければと思います。私は今後②の方法を主に使用していくと思います。</p><h2 style="text-align: start" id="h3bcda3e6b0"><strong>最後に</strong></h2><p style="text-align: start">今回の問題以外にもSPAならではの問題が多々あるので都度ベストプラクティスを求めて解決していきたいです。SPAでaタグを使用すると他にも弊害が起きていたので、現象の再現と解決策が見つかりましたらまた書きたいと思います。</p><p style="text-align: start">最後までありがとうございました。</p><p style="text-align: start"></p>

SPAの遷移にページ内遷移の為のscroll-behavior: smooth;が影響してしまう際の解決法

<p>現在は神アップデートによりプロンプトを打ち込む欄の上に表示される<code>Continue generating</code>により簡単に続きのコードや文章等が出力できるようになっています。そのボタンを押すことにより過去に質問した内容についても正常に続きが出力されます。</p><h2 style="text-align: start" id="ha4cdf671a6"><strong>発端：コードが途切れた後上手く繋がらないことが多いな...</strong></h2><p style="text-align: start">ChatGPTでオセロを作ろうとしたのですが、見た目はできたけど動かなくてJSのコードが途切れてうまくいかないことが多発。でもなんとなく出来るのではないか？と何の根拠もない状態でスタート。</p><h5 style="text-align: start" id="h78d5d35990"><strong>質問：HTML,CSS,JavaScriptでオセロのゲームができるコードを示してください</strong></h5><p></p><p><strong>!  </strong>大変申し訳ございませんが、この記事の中でも綺麗に続きが出てくるような方法は出てきません。ゴリ押しです</p><p style="text-align: start"></p><h2 style="text-align: start" id="hf723748435"><strong>課題1：コードが途中で途切れてしまう</strong></h2><p style="text-align: start">早速タイトルですが、そもそも途切れなければ一発でコードを提示してくれて凄いなあとなって終わる感じでした。下記のようにCSSを書いている途中で続きを促してもJavaScriptを書き始めてしまうように明らかに虫食いのような箇所が現れてしましいます。</p><h2 style="text-align: start" id="hd8e9a9d0f9"><strong>課題１に対して試したこと</strong></h2><h4 style="text-align: start" id="h2ed1d58b6d"><strong>1.「続き」や「続き」を含まれる言葉を送信したり、最後の文字を送る、途切れる前の文章を送った上で続きを促す方法</strong></h4><p style="text-align: start">文章などに対しては確度が高い感じを受けましたが、いざコードとなると不確実性が高いなというのが印象でした。確実に綺麗に解決されるものは見つけられませんでした。</p><h4 style="text-align: start" id="hbed9407765"><strong>2.途切れる直前のコードをコピペして貼り付けるという方法</strong></h4><p style="text-align: start">正直続きのコードを得ることのみを考えた場合の確実性という点では最も良い方法かと思います。<br>ですがデメリットとしては、前のコードや回答文章との連続性が失われやすいことになります。あくまで最初のプロンプトではなく、そのコードの続きに対する回答の重きが高くなりやすいかと思いますので説明文にはあまり重きを置いていない下記のような場合はとても良い方法かと思います。</p><p style="text-align: start">・後少しでコードが終わりそうで、そのコードさえあれば良い。<br>・次の回答の内には収まりそうな場合。</p><h4 style="text-align: start" id="hfb576293ff"><strong>3.ただひたすらに何回も正しく表示されるまで粘る</strong></h4><p style="text-align: start">上記のように正しく少し手前から表示してくれる場合もあります。私の場合は綺麗に続かなことが多かったですが、質問の内容や続きの促しかたによっては精度を高められるかもしれません。この場合ですと、まさに考えている通りのきれいに続きが出力されて連続性も担保されたものになる確率が非常に高いように感じました。</p><h2 style="text-align: start" id="h8ff8f6024f"><strong>課題２：全くあなじ文章で出力を求めても毎回違うコードが出力される。</strong></h2><p style="text-align: start">そもそも途切れてしまうなら各言語ごとに聞いていけばいいや！と最初は考えました。<br>当然途切れてしまうなら、一つ一つの出力を短くしようと考えますが、そうは問屋が卸しませんでした😭</p><p style="text-align: start">新しく質問をする事にクラス名や関数自体が異なるので繋がらない、独立したものになってしまいます。なので一つの質問で完結させなくてはいけませんでした<br><s>１つ１つの関数の名前をこちらで定義してどういう関数で、引数の名前から全て与えて細分化すれば少しづつ質問をして繋げて完成できるかもしれませんが、それなら自分で書くよってなりそうなので…</s></p><h2 style="text-align: start" id="h22bc97167f"><strong>課題２に対して試したこと</strong></h2><p style="text-align: start">HTMLを出力してもらった後に、そのままCSSを質問するのではなくHTMLのコードをコピペしてCSSを訪ねて、同じ手順でJavaScriptのコードも質問する。<br>→見た目のみ正しく出力されるが、JavaScriptのコードが途切れて課題１と同じことになる。<br>→各言語の繋がりがない時もあった。</p><p><strong>!</strong></p><p>質問の仕方によっては正しく出力される可能性もあります</p><h2 style="text-align: start" id="hba116ed8ef"><strong>オセロゲーム完成までにとった方法</strong></h2><h4 style="text-align: start" id="h9d9fa51e8a"><strong>・ただひたすらにちょうどいいところで途切れるのを待つ</strong></h4><h4 style="text-align: start" id="h59fe5eee61"><strong>・上手くいくまで質問し続ける</strong></h4><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/RwebbrJ?default-tabs=js%2Cresult&amp;height=300&amp;host=https%3A%2F%2Fcodepen.io&amp;slug-hash=RwebbrJ" style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;" allowfullscreen></iframe></div><p style="text-align: start">どちらの手番なのかがわかりにくいのが難点ですが、とりあえず満足です。</p><h2 style="text-align: start" id="h5ad485b4ce"><strong>条件の難しいボードゲームも作れるかな</strong></h2><p style="text-align: start">こちらがルールを提示して作ってもらおうとした場合にはコードが冗長になり、あまり上手くいかない傾向があるような気がします。こちらのルール提示がヘタクソなだけな気がしますけども…。例えば、QUARTO（クアルト）というボードゲームをルールを提示して作ってもらおうとしたのですが何度やってもうまくいきそうな感じがしませんでした。そもそも二次元上に２パターンある４要素を含む１６パターンの駒を描写するのが難しい気がしますが。クアルトのルールは<a href="https://www.play-departmentstore.com/fs/castjapan/gc001" target="_blank" rel="noopener noreferrer nofollow">こちら</a>にあります。<br>QUARTO（クアルト）を作ってと言うふうに質問すると、まとまりのあるコードが出力されるので独自に考えたゲームを作成してもらうのは余程条件を上手に定義しない限り難しい気がしました。</p><p style="text-align: start">なんとなく惜しそうな感じはしますよね…、それぞれのコマの持つ特徴を二次元上でもうまく描写できるように定義し直してあげれば上手くいくかもしれませんね。</p><h2 style="text-align: start" id="ha214098e44"><strong>まとめ</strong></h2><p style="text-align: start">最初の質問でうまくいかなかったとしても、何度か繰り返せば行けそうなのか難しそうなのかの判断は上記のようにコードが途切れてしまっているのか、それとも続きを促しても繋がりのないコードになるのかなどは分かりやすい指標になりそうです。いずれにしても、丸々全部クオリティの高いものを作ってもらうには少々難しい気がしました。ですので使用する際には関数をいかに小さくするかや、中々アイデアが浮かばない場合のスパイスや参考として使うのがよいなというのが個人的な感想です。</p><p style="text-align: start">どうしてもしっかりと毎回全文が欲しいという場合は有料で提供してくれているサービスを利用するか、自分でOpenAI APIを使用して自分で自分用のサービスを作るのが確実かと思います。APIの使用にはお金がかかりますので、利用の際には気をつけていただければと存じます。</p>

ChatGPT コードが途切れてしまう 対処法

<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">現在displayの2値構文は下記のカードを踏んでいただくと分かる通りSafariとFirefoxのみでしたがChromeのv115でサポートされるようになるということですので振り返っていこうと思います。</p><h5 style="text-align: start" id="h15767abda8"><strong>↓displayの2値構文のブラウザの対応状況</strong></h5><p style="text-align: start"></p><h5 style="text-align: start" id="h4d51941935"><strong>↓Chrome115に関する情報</strong></h5><p style="text-align: start"></p><h2 style="text-align: start" id="h332e2529a0"><strong>まず、displayの2値構文とは何？</strong></h2><p style="text-align: start">現在CSSで使用されるdisplayには大きく分けて、要素の種類を分けるものとレイアウトに関するものの二つがあると思っています。要素の種類というのがblock要素,inline要素であり、レイアウトに関するものがflexやgridなどになります。現在は一つの値でまかなっているものを二つの値に分けてわかりやすく書こうというのがdisplayの2値構文です。下記は同じ意味です。</p><p><strong>!    </strong>厳密には外側の箱（その要素）としての振る舞いと内側の子要素の振る舞いを設定するということになります。</p><pre><code class="language-css">.block {
    display: block;
}

.block {
    display: block flow;
}
</code></pre><h2 style="text-align: start" id="hf9b0813938"><strong>2値構文の一覧</strong></h2><p style="text-align: start">外（その要素自体）の初期値は <strong>&quot;block&quot;</strong> ,内（子）の初期値は <strong>&quot;flow&quot;</strong> になります。<br>(初期値という表現はあまり正しくないので下記の表を見て特に言及されていない時と考えていただければと思います。)</p><table><tbody><tr><th colspan="1" rowspan="1"><p><strong>＼</strong></p></th><th colspan="1" rowspan="1"><p><strong>一つのプロパティ</strong></p></th><th colspan="1" rowspan="1"><p><strong>二つのプロパティ(2値構文)</strong></p></th></tr><tr><td colspan="1" rowspan="1"><p>例</p></td><td colspan="1" rowspan="1"><p><strong>display:　&quot;値&quot;;</strong></p></td><td colspan="1" rowspan="1"><p><strong>display:　&quot;外&quot;　&quot;内&quot;;</strong></p></td></tr><tr><td colspan="1" rowspan="1"><p></p></td><td colspan="1" rowspan="1"><p><strong>display:　block;</strong></p></td><td colspan="1" rowspan="1"><p><strong>display:　block flow;</strong></p></td></tr><tr><td colspan="1" rowspan="1"><p></p></td><td colspan="1" rowspan="1"><p><strong>display:　inline;</strong></p></td><td colspan="1" rowspan="1"><p><strong>display:　inline flow;</strong></p></td></tr><tr><td colspan="1" rowspan="1"><p></p></td><td colspan="1" rowspan="1"><p><strong>display:　flow-root;</strong></p></td><td colspan="1" rowspan="1"><p><strong>display:　block flow-root;</strong></p></td></tr><tr><td colspan="1" rowspan="1"><p></p></td><td colspan="1" rowspan="1"><p><strong>display:　flex;</strong></p></td><td colspan="1" rowspan="1"><p><strong>display:　block flex;</strong></p></td></tr><tr><td colspan="1" rowspan="1"><p></p></td><td colspan="1" rowspan="1"><p><strong>display:　inline-flex;</strong></p></td><td colspan="1" rowspan="1"><p><strong>display:　inline flex;</strong></p></td></tr><tr><td colspan="1" rowspan="1"><p></p></td><td colspan="1" rowspan="1"><p><strong>display:　inline-block;</strong></p></td><td colspan="1" rowspan="1"><p><strong>display:　inline flow-root;</strong></p></td></tr></tbody></table><h2 style="text-align: start" id="h08ed7f0b64"><strong>上の表の補足（flexを指定するとblockになる）</strong></h2><p style="text-align: start">spanタグで横並びになっているものをflexを付与した時の動きになります。<br>ボタンを押して確かめていただければと思います。</p><h2 style="text-align: start" id="h351e81ab8c"><strong>displayの2値構文のメリットとデメリット</strong></h2><h3 style="text-align: start" id="h7dcf5154f0"><strong>● メリット</strong></h3><p style="text-align: start">・ コードを見た時にわかりやすい<br>ー外(それ自体)の要素がどのようになっていて、内(子)の要素がどうなっているかが分かりやすいのでレイアウトの崩れなどに気付きやすくなり対応しやすい。</p><h3 style="text-align: start" id="h7693ed040d"><strong>● デメリット</strong></h3><p style="text-align: start">・ わざわざ2つ書くメリットがあまり見つけられない。<br>ーこの記事自体が本末転倒なのですが、正直感覚的に理解しているのでわざわざ書かなくてもいいと個人的には思ってしまっています。ただこの内と外の2つを元に構成されていると理解することには意味があるのかなと思っています。</p><h2 style="text-align: start" id="ha214098e44"><strong>まとめ</strong></h2><p style="text-align: start">今回displayの2値構文がサポートされるということで再度まとめてみたのですが、中々メリットを見つけてあげられませんでした。こういうメリットがあるよ！筆者何もわかってないな…という方はぜひコメントなどで教えていただけますと、とても嬉しいです。</p><p style="text-align: start">displayの話で出てきた要素の内や外がよくわからなかったという方は<a href="https://developer.mozilla.org/ja/docs/Web/CSS/CSS_display" target="_blank" rel="noopener noreferrer nofollow">こちら</a>のdisplayプロパティに関するMDNの中で詳しく解説されていますので、MDNはのぞいてみると知らないことがあって意外と楽しいので良いと思います。</p><p style="text-align: start">それでは読んでいただいてありがとうございました。失礼しますm(_ _)m</p>

23/07にdisplayの2値構文がChromeでサポートされるらしいので振り返ろう

<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>

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

<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>

SPAの遷移にページ内遷移の為のscroll-behavior: smooth;が影響してしまう際の解決法

ChatGPT コードが途切れてしまう対処法

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

23/07にdisplayの2値構文がChromeでサポートされるらしいので振り返ろう

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

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

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

SPAの遷移にページ内遷移の為のscroll-behavior: smooth;が影響してしまう際の解決法

ChatGPT コードが途切れてしまう 対処法

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

23/07にdisplayの2値構文がChromeでサポートされるらしいので振り返ろう

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

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

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

ChatGPT コードが途切れてしまう対処法

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