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

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

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

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

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

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

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

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

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

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