<h2 id="h37ba1a78d1">callback関数とは</h2><blockquote>callback is just a function that you pass as a parameter to another function that function will do some work and then call that callback function back</blockquote><p><a href="https://www.youtube.com/watch?v=kz_vwAF4NHI" target="_blank" rel="noopener noreferrer">JavaScript Callbacks Explained in 5 Minutes (Essential for asynchronous code!)</a>より<br><br>↓<br>コールバック関数は、<br><strong>他の関数の引数として渡す関数</strong>で、<br>その関数の処理が終わった後にコールバック関数が呼ばれる。<br></p><h2 id="h512de7d259">使用例</h2><p>setTimeoutは引数にコールバック関数を持つ。<br>js↓</p><pre><code>setTimeout(()=&gt;{
      console.log('1秒後に実行');
},1000);

//同じ意味
const cb = ()=&gt;{
    console.log('1秒後に実行');
}
setTimeout(cb,1000);</code></pre><p><br>↓結果をコンソールで確認（実行後、1秒後にコンソールに表示される）<br><img src="https://images.microcms-assets.io/assets/cdab8ababbd2456dbaca807b6f355556/7420b0c2480d4a29bed29c6a8e4b36c3/%202023-02-09%20at%2017.47.55.jpg" alt=""></p><h2 id="hc87d90e3cb">コールバック関数が実行される仕組み</h2><h3 id="hbfffda0a6a">例</h3><pre><code>                    //→説明1
console.log('1');　 //→説明2 //→説明4

setTimeout(()=&gt;{
    console.log('2'); //→説明3 //→説明5
},0);

console.log('3');   //→説明2 //→説明4</code></pre><p>↓結果</p><pre><code>//→1,3,2の順で表示される</code></pre><h3 id="h293f170a56"><br>仕組み</h3><p>1.コードの実行開始<br>2.グローバルコンテキストがコールスタックに積まれる<br>3.タスクが登録される<br>　コールバック関数がタスクキューに登録される<br>4.コールスタックが空になるまで実行される<br>5.コールスタックが全て消滅した後に、タスクキュー内のタスクが実行される。<br>　（コールバック関数が実行される。）<br><br>非同期処理の後に実行したい処理がある場合は、<br>コールバック関数の中にコールバックを入れる必要がある。<br>（コールバック関数は、グローバル関数が全て実行された後に実行されるため）<br><br>→順に実行したい処理がたくさんあると、コールバック地獄となる可能性<br>→解決方法として、非同期処理を扱うためのオブジェクトPromiseが追加された。（ES6）<br></p><h2 id="h335a87b5ef">参考サイト</h2><p>一番しくっりきた解説ビデオ↓</p><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2Fkz_vwAF4NHI%3Ffeature%3Doembed&display_name=YouTube&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dkz_vwAF4NHI&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2Fkz_vwAF4NHI%2Fhqdefault.jpg&key=94335756f04b424b8ce3ce71cbe3de0a&type=text%2Fhtml&schema=youtube" width="560" height="315" scrolling="no" title="YouTube embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><p><br></p>

callback関数

<p>window.fetch()について確認と備忘録です。<br></p><h2 id="haa98c475df">fetch()でできることの例</h2><h3 id="h60ef2b3c3f">ポケモンのデータを取得してみる</h3><p>index.htmlのscript内に下記を記載して、コンソールで確認。</p><pre><code>fetch('https://pokeapi.co/api/v2/pokemon/1')
    .then((response) =&gt; response.json())
    .then((data) =&gt; console.log(data));</code></pre><p><br>↓結果、フシギダネの情報が取れた。<br><img src="https://images.microcms-assets.io/assets/cdab8ababbd2456dbaca807b6f355556/952ea31ab04247a4b410bfbb5678e782/%202023-02-09%20at%2016.53.36.jpg" alt=""></p><h2 id="hdf2b70b32e">fetch()とは</h2><p>・グローバルのメソッド（window.fetch()）<br>・リソースを取得するためのインターフェース<br>　→上記例のようにHTTPリクエストを送信して外部データを取得したり、外部にデータを送信したりできる。<br>　→内部のjsonファイル取得なども可能。<br>・Promiseを返す<br></p><h2 id="h44cce4849e">fetch()の使い方</h2><p>async/awaitを使う方法と使わない方法がある</p><h3 id="ha95e1a2cdf">async/awaitを使う方法</h3><p>async/awaitを使うことでResponseオブジェクトが返ってくるので、jsonメソッドで処理。</p><pre><code>const getPokemon = async() =&gt;{
    const response = await fetch('https://pokeapi.co/api/v2/pokemon/1');
    const pokemonData = await response.json();
    console.log(pokemonData);
}
getPokemon();</code></pre><p>↓結果(async/awaitを使わない方法と同じ)<br><img src="https://images.microcms-assets.io/assets/cdab8ababbd2456dbaca807b6f355556/83acb51c8df3405993ed6d76f111b718/%202023-02-09%20at%2017.10.48.jpg" alt=""></p><h4 id="hb4d1877a26">エラー処理ありverのコード↓</h4><pre><code>const getPokemon = async() =&gt;{
    try{
        const response = await fetch('https://pokeapi.co/api/v2/pokemon/1');
        const pokemonData = await response.json();
        console.log(pokemonData);
    }catch(error){
        // エラーが出た時の処理
        console.log(`エラー：${error}`);
    }
}
getPokemon();</code></pre><p><br></p><h3 id="hc6b82d602e">async/awaitを使わない方法</h3><p>Promise(※)が返ってくるので、thenメソッドで処理。</p><pre><code>fetch('https://pokeapi.co/api/v2/pokemon/1')
    .then((response) =&gt; response.json())
    .then((pokemonData) =&gt; console.log(pokemonData));</code></pre><p>↓結果(async/awaitを使う方法と同じ)<br><img src="https://images.microcms-assets.io/assets/cdab8ababbd2456dbaca807b6f355556/b4d90fbb0f9d42b685cbba0beb40fda8/%202023-02-09%20at%2017.10.48.jpg" alt=""></p><h4 id="hb4d1877a26">エラー処理ありverのコード↓</h4><pre><code>        fetch('https://pokeapi.co/api/v2/pokemon/1')
            .then((response) =&gt; response.json())
            .then((data) =&gt; console.log(data))
            .catch((error) =&gt; console.log(error.message));</code></pre><h4 id="h22688e2c6f"><br>※Promiseとは</h4><p>非同期処理を扱うためのオブジェクト。<br>（これがないと、コールバック関数を使用して非同期処理完了後に実行したい関数を渡す必要があるため、コールバック地獄になりうる。）<br>async/awaitを使用することによって、非同期処理を扱いやすくしている。<br></p><h2 id="ha739b3b8f6">その他</h2><p>fetch()を使用できない古いブラウザでは、XMLHttpRequestやBabelを使ってトランスパイルする必要がある。<br></p><h2 id="h335a87b5ef">参考サイト</h2><p><a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API" target="_blank" rel="noopener noreferrer">MDN</a><br><a href="https://www.webdesignleaves.com/pr/jquery/fetch-api-basic.html" target="_blank" rel="noopener noreferrer">Fetch API fetch() の使い方</a><br><br><br><br></p>

Fetch API(JavaScript)

<h2 id="hda87e93d7b">実装イメージ</h2><p>コードにスタイルがないので味気ない<br><img src="https://images.microcms-assets.io/assets/cdab8ababbd2456dbaca807b6f355556/09f191ddbc624b8aa299e13b5a0ff86e/%202022-12-02%20at%2017.06.54.jpg" alt=""><br>↓↓<br>ハイライトさせる<br><img src="https://images.microcms-assets.io/assets/cdab8ababbd2456dbaca807b6f355556/396a808786744e67b0dc62e5f471a3ab/%202022-12-02%20at%2016.44.52.jpg" alt=""><br>microCMSから取得できるデータから、<br>cheerioを使用してコード部分の文字列を取り出し、<br>highlight.jsでスタイルをつけ表示させるイメージです。</p><h2 id="h86ee44ea6a">使用ライブラリ</h2><p>cheerio<br>highlight.js</p><h2 id="h6e73ffe2c2">実装ステップ</h2><h3 id="h2beb075646">ライブラリの導入</h3><pre><code>yarn add cheerio highlight.js
yarn add --dev @types/highlightjs @types/cheerio</code></pre><h3 id="h922edff87b">実装</h3><p>①関数を作成<br>引数にブログのコンテンツをセットすることで、<br>コードに色付きのクラスを当てて返却してくれる関数(renderHighlightedBody)を作ります。<br><br><a href="https://github.com/emi-h/my-blog/blob/main/src/libs/render-toc.js" target="_blank" rel="noopener noreferrer">src/libs/render-toc.js</a>↓</p><pre><code>import * as cheerio from "cheerio";
import hljs from "highlight.js";

export const renderHighlightedBody = (body) =&gt; {
  const $ = cheerio.load(body);

  $("pre code").each((_, elm) =&gt; {
    const result = hljs.highlightAuto($(elm).text())
    $(elm).html(result.value)
    $(elm).addClass("hljs")
  })
  return $.html();
};</code></pre><p><br>②関数を実行して変数に格納・出力<br><a href="https://github.com/emi-h/my-blog/blob/main/src/pages/blog/%5Bid%5D.tsx" target="_blank" rel="noopener noreferrer">src/page/blog/[id].tsx</a>↓</p><pre><code>type Props = Blog &amp; MicroCMSContentId &amp; MicroCMSDate;

const Post: NextPage&lt;Props&gt; = (props) =&gt; {
  //①で作成した関数を使用して、ハイライトされたコードを変数に格納
  const highlightedBody = renderHighlightedBody(props.content);

  return (
    &lt;&gt;
        &lt;article&gt;
          &lt;h1&gt;{props.title}&lt;/h1&gt;
          &lt;div
            className={styles.blog_post}
            dangerouslySetInnerHTML={{ __html: highlightedBody }}
          /&gt;
        &lt;/article&gt;
    &lt;/&gt;
  );
};

export const getStaticPaths: GetStaticPaths&lt;{ id: string }&gt; = async () =&gt; {
  const data = await client.getList&lt;Blog&gt;({ endpoint: "blog" });
  const paths = data.contents.map((content) =&gt; `/blog/${content.id}`);

  return { fallback: "blocking", paths };
};

export const getStaticProps: GetStaticProps&lt;Props, { id: string }&gt; = async (
  context
) =&gt; {
  if (!context.params) {
    return {
      notFound: true,
    };
  }

  const data = await client.getListDetail&lt;Blog&gt;({
    contentId: context.params.id,
    endpoint: "blog",
  });

  return {
    props: data,
    revalidate: 10,
  };
};

export default Post;</code></pre><h2 id="h335a87b5ef">参考サイト</h2><p><a href="https://qiita.com/cawauchi/items/ff6489b17800c5676908" target="_blank" rel="noopener noreferrer">next.js+microcmsでシンタックスハイライトの導入</a><br><br>以上です！</p>

cheerioとhighlight.jsを使用してシンタックスハイライトを導入しました。

シンタックスハイライトでコードにいい感じに色をつけてみた

<h2 id="h8f27fbddf6">ドキュメント</h2><p>この記事はNext.jsドキュメント内、<a href="https://nextjs.org/docs/basic-features/data-fetching/overview" target="_blank" rel="noopener noreferrer">Data Fetching Overview</a>の説明や自分なりに勉強したことの記録です。<br>間違ってたらご指摘ください！</p><h2 id="h5bfb8ebe85">Next.jsでのデータ取得の方法</h2><p>Next.jsのデータフェッチでは、アプリケーションのユースケースに応じて、さまざまな方法でコンテンツをレンダリング※することができる。<br>よって、アプリケーションによってどの方法でレンダリングするのか選択する必要があります。<br>ブラウザからのデータ取得はどの方法とでも組み合わせ可能。<br><br><em>※ここでいうレンダリングはブラウザレンダリング（ブラウザへの描画）の事ではなく、</em><br><em>Reactのレンダリング（Reactがコンポーネントを呼び出す）のことです。</em><br>先日書いた記事：<a href="https://3things.work/blog/react-render" target="_blank" rel="noopener noreferrer">Reactのレンダリングとは</a><br><br>下記4つの方法が紹介されています。</p><h2 id="h3256d733ae">方法4つ</h2><ul><li>SSR(Server-Side Rendering)：サーバーサイドレンダリング</li><li>SSG(Static Site Generation)：静的サイト生成</li><li>CSR(Client Side Rendering)：クライアントサイドレンダリング</li><li>ISR(Incremental Static Regeneration)：インクリメンタル静的生成</li></ul><h2 id="hbc728093b0">4つの方法は何が異なるのか</h2><p>データフェッチ・ファイル生成のタイミングの違い。Next.jsでは関数が用意されている。</p><ul><li>SSR(Server-Side Rendering)：リクエスト時にサーバーでデータ取得＋プリレンダリング→生成ファイル返却。</li><li>SSG(Static Site Generation)：ビルド時にデータ取得＋レンダリング、リクエスト時は生成済の静的ファイルを返される。</li><li>CSR(Client Side Rendering)：リクエスト時にサーバーからファイル返却＋クライアント側でデータ取得。</li><li>ISR(Incremental Static Regeneration)：SSGと同じく生成済ファイルが返される＋一定時間後にリクエストしたらページを再生成してくれる。</li></ul><h2 id="h2195e4bab0">もう少し詳しく</h2><h3 id="hb7cc7f5a19">SSR(サーバーサイドレンダリング)とは</h3><p>データ取得とレンダリングをサーバー側で実行する。（ブラウザでは実行されない）<br><strong style="background-color:#fcf3db">メリット：</strong><br>サーバー側でレンダリングされるので、APIキーなどの露出が防げる。<br>（propsに秘密情報は含めないこと。）<br><strong style="background-color:#fcf3db">デメリット：</strong><br>サーバーに負荷がかかる。<br>サーバー側でデータ取得をするので（クライアント側でデータ取得するのと比較して）時間がかかり、インタラクティブ性が低い。<br>キャッシュが効かない。(stale-while-revalidateオプション有)<br> Vercelではlimitation制限がかかる場合がある。<br><strong style="background-color:#fcf3db">使いどころ：</strong><br>リクエスト時にデータ取得したい時（認証や位置情報によって取得データが変わる時など）<br>SEO indexが重要なサイト<br><strong style="background-color:#fcf3db">使い方：</strong><br>getServerSidePropsを使用。<br>（pageからexportすること。component内で使用できない。）</p><h3 id="h4600ead575">SSG(静的サイト生成)とは</h3><p>ビルド時に静的ファイルを生成しておき、リクエストが来たら静的ファイルを返す。<br>リクエスト前にデータ取得やファイル生成がされているので速い。<br><strong style="background-color:#fcf3db">メリット：</strong><br>キャッシュを効かせたいとき<br><strong style="background-color:#fcf3db">デメリット：</strong><br>ビルド後の更新情報は反映されない。（クライアントデータ取得との組み合わせは可能。）<br>リアルタイムなデータが欲しい場合には不向き。<br><strong style="background-color:#fcf3db">使いどころ：</strong><br>headless CMSとの組み合わせ<br>SEO対策が必要なサイト<br><strong style="background-color:#fcf3db">使い方</strong><br>getStaticPropsを使用。<br>（pageからexportすること。component内で使用できない。）</p><h3 id="h0aca23e5fd">CSR（クライアントサイドレンダリング）とは</h3><p>クライアントサイドでレンダリングを実行する（サーバーサイドでは実行されない）<br><strong style="background-color:#fcf3db">メリット：</strong><br>最新データが反映できる。<br><strong style="background-color:#fcf3db">デメリット：</strong><br>クライアント側の速度に左右される。<br>データはキャッシュされない。（SWR使用でキャッシュなど解決できる）<br>SEOに強くない可能性あり（リクエスト時にサーバーから返却されたhtmlを確認すると、取得データがまだないことがわかる。）<br><strong style="background-color:#fcf3db">使いどころ：</strong><br>SEO indexを気にしなくて良いとき。<br>プリレンダリングが必要ないとき。<br><strong style="background-color:#fcf3db">使い方</strong><br>useEffectなど使用。（getServerSidePropsやgetStaticPropsを使用しない）</p><h3 id="h7f762781d1">&nbsp;ISR（インクリメンタル静的サイト生成）とは</h3><p>SSGで静的ページ生成後に、revalidate（キャッシュを返す時間）を設定すれば、サイト全体を再ビルドせずにページごとに再生成してくれる。<br>revalidate後のアクセスでも先にキャッシュしたページを返す。<br><strong style="background-color:#fcf3db">メリット：</strong><br>SSGのページを更新できる<br>余分なリクエストを発生させない。（リクエストがなければ再生成されない。）<br><strong style="background-color:#fcf3db">デメリット：</strong><br>常に最新のデータが表示されなければならないページでは使えない。<br><strong style="background-color:#fcf3db">使いどころ：</strong><br>更新の入るページ<br><strong style="background-color:#fcf3db">使い方</strong><br>getStaticPropsにrevalidateを追加</p><h2 id="h3de35099b3">参考</h2><p>Vercel:<a style="color:inherit" href="https://vercel.com/docs/concepts/incremental-static-regeneration/overview" target="_blank" rel="noopener noreferrer">https://vercel.com/docs/concepts/incremental-static-regeneration/overview</a><br><br><span style="color:inherit">以上です！</span></p>

Next.jsでのデータ取得方法について

<h2 id="hcb9dacb773">結論</h2><p>「React」のレンダリングと「ブラウザ」のレンダリングは違う</p><h2 id="hb24582eb86">なぜ調べたか</h2><p>Next.jsのドキュメント内Data Fectching <a href="https://nextjs.org/docs/basic-features/data-fetching/overview" target="_blank" rel="noopener noreferrer">overview</a>の項目で<br>SSR(サーバーサイドレンダリング)やCSR(クライアントサイドレンダリング)などの言葉が出てきます。<br>ブラウザのレンダリングとReactのレンダリングについて、違いをわかっておらず混乱したことがあるのでまとめました。</p><h2 id="h8f27fbddf6">ドキュメント</h2><p>この記事はReact(2022.11.17現在BETA版)ドキュメント内<a style="color:inherit" href="https://beta.reactjs.org/learn/render-and-commit" target="_blank" rel="noopener noreferrer">Render and Commit</a>の説明を自分なりに言語化したものです。<br>間違ってたらご指摘ください！</p><h2 id="h27707e3d7d">Reactのレンダリングとは</h2><p>ドキュメントではレンダリングのステップを3つに分けて説明しています。</p><ol><li>Trigger a render（レンダリングのきっかけ）</li><li>React renders your components（コンポーネントのレンダリング）</li><li>React commits changes to the DOM（DOMの反映）</li></ol><h3 id="h47630965ae">Step 1: Trigger a render（レンダリングのきっかけ）</h3><p>コンポーネントがレンダリングするきっかけは下記2つ。</p><ul><li>初回のレンダリング</li><li>コンポネート（または親など祖先コンポーネント）のstateが変わった時</li></ul><h4 id="h09c23ae4bc">初回レンダリング</h4><p>アプリケーション起動→createRootを呼び出す→renderメソッド（レンダリングメソッド）を呼び出す。</p><pre><code>import Image from './Image.js';
import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'))
root.render(&lt;Image /&gt;);</code></pre><h4 id="hb205337f4a">再レンダリング（stateに変更があったとき）</h4><p>2回目以降のレンダリングは、set関数を使用することで再レンダリングさせることが可能。<br>set関数の例↓</p><pre><code>const [name, setName] = useState('Edward');</code></pre><h3 id="h0a031d3c79">Step 2: React renders your components（コンポーネントのレンダリング）</h3><blockquote>After you trigger a render, React calls your components to figure out what to display on screen. “Rendering” is React calling your components.</blockquote><p>「レンダリング」はReactがコンポーネントを呼び出すこと。</p><ul><li>初回のレンダリングでは、Reactはrootコンポーネントを呼び出す。</li><li>2回目以降のレンダリングは、レンダリングのきっかけとなった関数コンポーネントが呼び出される。</li></ul><p>これらのプロセスは、ネストされたコンポーネントがどんどんレンダリングされていき、処理が終わるまでずっと続く。</p><h3 id="h4b524714b3">Step 3: React commits changes to the DOM（DOMの反映）</h3><p>Reactは、コンポーネントをレンダリング後、DOMを反映する。<br>初回レンダリングでは、appendChild()でDOMノードをスクリーンに表示する。</p><ul><li>再レンダリングでは、必要最小限の操作で、DOMを最新のレンダリングと一致させる。</li><li>レンダリングでDOMに差異がある場合のみDOMが反映がされる。（差分がなければ反映なし）</li></ul><h3 id="hbc0a477c17">Epilogue: Browser paint（エピローグ：ブラウザー描画）</h3><blockquote>After rendering is done and React updated the DOM, the browser will repaint the screen. <br>Although this process is known as “browser rendering”, we’ll refer to it as “painting” to avoid confusion in the rest of these docs.</blockquote><p>レンダリングとReactのDOM生成終了後、ブラウザーがスクリーンに表示します。このプロセスは「ブラウザレンダリング」として知られていますが、私たちは混乱を避けるためにドキュメント内では「描画」と呼びます。</p><h2 id="he45680f0bc">参考記事</h2><p><a style="color:inherit" href="https://zenn.dev/1129_tametame/articles/bf4fc2005bea4d" target="_blank" rel="noopener noreferrer">Reactのレンダリングを理解する</a><br><br><span style="color:inherit">以上です！</span></p>

「React」のレンダリングと「ブラウザ」のレンダリングは違うのです

Reactのレンダリングとは

<h2 id="h5210acff2f">エラー内容</h2><p>&lt;Image /&gt;に設定したパスでエラーが出たら、config設定ができていないかもしれません。<br>エラー内容↓</p><pre><code>Uncaught Error: Invalid src prop (https://images.microcms-assets.io/assets/cdab8ababbd2456dbaca807b6f355556/c32a48cd5cc54a4a840a3dbf0238a560/image.png) on `next/image`, hostname "images.microcms-assets.io" is not configured under images in your `next.config.js`</code></pre><h2 id="h55771f9047">エラー原因</h2><p>詳しくはNext.js公式の<a href="https://nextjs.org/docs/api-reference/next/image#remote-patterns" target="_blank" rel="noopener noreferrer">こちらのページ</a>に書かれていますが、<br><span style="color:#292c32">外部画像を利用するための設定が必要になります。</span></p><h2 id="h61bed03109">エラー解消方法</h2><p><span style="color:#000000">next.config.jsに画像ファイル取得先のドメインを指定すると、エラーが解消できます。</span><br><span style="color:#000000">next.config.js↓</span></p><pre><code>/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    domains: ["images.microcms-assets.io"],
  },
  reactStrictMode: true,
  swcMinify: true,
};


module.exports = nextConfig;</code></pre><p><br>以上です！</p>

microCMSに登録した画像パスを利用するにはconfig設定が必要です

Next.js×microCMS 画像パスでエラーが出る

<h2 id="hebb1ba057c">今回やることイメージ</h2><p>microCMSの投稿データを取得して、ブラウザに表示します。<br>取得データ↓<br><img src="https://images.microcms-assets.io/assets/cdab8ababbd2456dbaca807b6f355556/6583b709a6c340b29adc92173a7a8bf5/%202022-11-10%20at%2016.55.00.jpg" alt=""><br>取得したデータ（タイトル）を表示↓<br><img src="https://images.microcms-assets.io/assets/cdab8ababbd2456dbaca807b6f355556/598b8aceb30e4e95ac9c3915ef3a651a/%202022-11-10%20at%2017.52.14.jpg" alt=""></p><h2 id="h8a175a9b0e">前提</h2><h3 id="h67d2b7be6b">バージョン</h3><p>Next.js 13.0.2<br>TypeScript 4.8.4</p><h3 id="h1eb43247fe">フォルダ構成</h3><p>pagesやstylesなどはsrcフォルダにまとめています。<br><img src="https://images.microcms-assets.io/assets/cdab8ababbd2456dbaca807b6f355556/be942920d9ef4ed6aceae441390a6aa0/%202022-11-10%20at%2017.11.57.jpg" alt=""></p><h3 id="h335a87b5ef">参考サイト</h3><p><a href="https://blog.microcms.io/microcms-next-jamstack-blog/" target="_blank" rel="noopener noreferrer">microCMS + Next.jsでJamstackブログを作ってみよう</a></p><h2 id="he9d0279b00">Next.jsのプロジェクトを作る</h2><p><a href="https://nextjs.org/docs/basic-features/typescript" target="_blank" rel="noopener noreferrer">Next.js公式サイト</a><br>yarnを使用して、Typescriptを入れました。</p><pre><code>yarn create next-app --typescript</code></pre><h2 id="h4b0d183d7d">microCMSのアカウントを作る</h2><p><a href="https://microcms.io/" target="_blank" rel="noopener noreferrer">microCMS公式サイト</a></p><h2 id="h38f7e944f1">APIを設定する</h2><p>最低限のタイトル、本文を入れておけば大丈夫です。<br><img src="https://images.microcms-assets.io/assets/cdab8ababbd2456dbaca807b6f355556/437589004e334524aaeb516a1cdf8148/%202022-08-24%20at%2011.21.17.jpg" alt=""><br>日付はわざわざ作らなくてもよかったです。<br>APIを叩くと、microCMS側で投稿日や編集日を保管してくれていることがわかります。↓<br><img src="https://images.microcms-assets.io/assets/cdab8ababbd2456dbaca807b6f355556/072e9c226c57442f8fbf45d0806d8358/%202022-11-10%20at%2016.24.11.jpg" alt=""></p><h2 id="h2849807a4c">APIを叩く準備</h2><p>画面の右上、「APIプレビュー」をクリックするとどんなふうにAPIを叩けばいいのか確認できます。<br><img src="https://images.microcms-assets.io/assets/cdab8ababbd2456dbaca807b6f355556/e56b87948d9943ec8989f7e1cac81852/%202022-11-10%20at%2016.29.29.jpg" alt=""><br>↓<br><img src="https://images.microcms-assets.io/assets/cdab8ababbd2456dbaca807b6f355556/f81e991347224ea4af6190195d99d318/_2022-08-24%20at%2011.30.20.jpg" alt=""><br>JavaScriptを選択し、「<span style="color:#68688a">上記は</span><a style="color:#7979b4;background-color:#ffffff" href="https://github.com/microcmsio/microcms-js-sdk" target="_blank" rel="noopener noreferrer">microcms-js-sdk</a><span style="color:#68688a">を利用した例です。</span>」とあるので、</p><h3 id="h97fe0bd2bf">microcms-js-sdkを導入します。</h3><p><br></p><h3 id="h14b9bb824d">microcms-js-sdkのインストール</h3><pre><code>yarn add microcms-js-sdk</code></pre><p>参考：<a href="https://github.com/microcmsio/microcms-js-sdk" target="_blank" rel="noopener noreferrer">microcms-js-sdk公式</a></p><h3 id="ha342afd09f">Clientを作る</h3><p><span style="color:#000000">src/libs/client.ts</span></p><pre><code>import { createClient } from 'microcms-js-sdk'; //ES6

// Initialize Client SDK.
const client = createClient({
  serviceDomain: "YOUR_DOMAIN", // YOUR_DOMAIN is the XXXX part of XXXX.microcms.io
  apiKey: "YOUR_API_KEY",});</code></pre><h3 id="ha572f0737c">ドメインとkeyを貼り付けて動作確認</h3><p><span style="color:#c7243a">※APIキーは人に見せるべきではないのでまだgithubなどにはあげない</span><br>ドメインとkeyを確認して貼り付けます。<br><img src="https://images.microcms-assets.io/assets/cdab8ababbd2456dbaca807b6f355556/b95cc586bcd548c9bc1c004b187d4ee8/_2022-08-24%20at%2011.38.35.jpg" alt=""></p><h3 id="h18db4817e2">clientをexportして、index.tsxなどでimportして使用できるようにする</h3><p><span style="color:#000000">src/libs/</span>microCMSClient<span style="color:#000000">.ts↓</span></p><pre><code>import&nbsp;{&nbsp;createClient&nbsp;}&nbsp;from&nbsp;"microcms-js-sdk";&nbsp;//ES6

// Initialize Client SDK.
export&nbsp;const&nbsp;client&nbsp;=&nbsp;createClient({
serviceDomain:&nbsp;"xxx-xxxxx",&nbsp;// YOUR_DOMAIN is the XXXX part of XXXX.microcms.io
apiKey:&nbsp;"xxx秘密xxx",
});</code></pre><h2 id="h91351e23da">APIを叩いてみる</h2><p>src/pages/index.js↓</p><pre><code>import Link from "next/link";
import { client } from "src/libs/microCMSClient";

//getStaticPropsの返り値が入る↓
export default function Home({ posts }) {
 //データが取得できているか確認のためログを出す
　console.log(posts);

&nbsp; return (
&nbsp; &nbsp; &lt;div&gt;ここに内容表示する予定&lt;/div&gt;
&nbsp; );
}

// 返り値がHomeコンポーネントへ渡される。
export const getStaticProps = async () =&gt; {
&nbsp; const data = await client.getList({ endpoint: "blog" });

&nbsp; return {
&nbsp; &nbsp; props: {
&nbsp; &nbsp; &nbsp; posts: data,
&nbsp; &nbsp; },
&nbsp; };
};</code></pre><p><br>ブラウザのconsoleでデータが確認できればOKです。<br><img src="https://images.microcms-assets.io/assets/cdab8ababbd2456dbaca807b6f355556/6583b709a6c340b29adc92173a7a8bf5/%202022-11-10%20at%2016.55.00.jpg" alt=""></p><h2 id="h949fbadb03">取得したデータを出力する</h2><p>map関数を使用して出力します。</p><pre><code>import Link from "next/link";
import { client } from "src/libs/microCMSClient";

//getStaticPropsの返り値が入る↓
export default function Home({ posts }) {
&nbsp; return (
&nbsp; &nbsp; &lt;div&gt;
&nbsp; &nbsp; &nbsp; &lt;ul&gt;
&nbsp; &nbsp;    {posts.contents.map((post) =&gt; (
          &lt;li key={post.id}&gt;
            &lt;Link href={`/blog/${post.id}`}&gt;{post.title}&lt;/Link&gt;
          &lt;/li&gt;
        ))}
&nbsp; &nbsp; &nbsp; &lt;/ul&gt;
&nbsp; &nbsp; &lt;/div&gt;
&nbsp; );
}

// 返り値がHomeコンポーネントへ渡される。
export const getStaticProps = async () =&gt; {
&nbsp; const data = await client.getList({ endpoint: "blog" });

&nbsp; return {
&nbsp; &nbsp; props: {
&nbsp; &nbsp; &nbsp; posts: data,
&nbsp; &nbsp; },
&nbsp; };
};</code></pre><h2 id="hf1f2f5bd80">環境変数について（APIキーなど）</h2><p><strong style="color:#c7243a">※keyは、基本的に他の人に見せてはいけない情報なので、.env.localファイルを作ってgithubなどに公開しないようにします。</strong><br><strong style="color:#c7243a">（.env.localファイルは、Next.jsにデフォルトで入っている.gitignoreに記載されているので、git管理対象外になります。）</strong><br>環境変数について<a style="background-color:#ffffff" href="https://nextjs.org/docs/basic-features/environment-variables" target="_blank" rel="noopener noreferrer">Next.js公式</a><br><img src="https://images.microcms-assets.io/assets/cdab8ababbd2456dbaca807b6f355556/579b879b5f9b4508815a9d6d56f00743/%202022-11-10%20at%2016.39.36.jpg" alt=""></p><h3 id="h9b3a139767">環境変数を.env.localで管理</h3><p>.env.local↓</p><pre><code>API_KEY="xxxxxxxxxxxxxxx"
DOMAIN="xxx-xxxx"</code></pre><p><span style="color:#000000">src/libs/</span>microCMSClient<span style="color:#000000">.ts↓で呼び出す。</span></p><pre><code>import { createClient } from "microcms-js-sdk"; //ES6

// Initialize Client SDK.
export const client = createClient({
  apiKey: process.env.API_KEY,
  serviceDomain: process.env.DOMAIN,
});</code></pre><h3 id="h2f8448acd5">環境変数.envの型拡張</h3><p>src/types/env.d.ts</p><pre><code>declare namespace NodeJS {
  interface ProcessEnv {
    readonly API_KEY: string;
    readonly DOMAIN: string;
  }
}</code></pre><h2 id="h9c93e30e9c">取得データへの型付け</h2><p>取得したデータの型についても<a href="https://github.com/microcmsio/microcms-js-sdk#typescript" target="_blank" rel="noopener noreferrer">microcms-js-sdkのgithub</a>に記載があります。</p><pre><code>import Link from "next/link";
import { client } from "src/libs/microCMSClient";

type Blog = {
  id: string;
  title: string;
};

type Props = MicroCMSListResponse&lt;Blog&gt;;

//getStaticPropsの返り値が入る↓
const HOME: NextPage&lt;{ posts: Props }&gt; = ({ posts }) =&gt; {
  return (
    &lt;div&gt;
      &lt;ul&gt;
        {posts.contents.map((post) =&gt; (
          &lt;li key={post.id}&gt;
            &lt;Link href={`/blog/${post.id}`}&gt;{post.title}&lt;/Link&gt;
          &lt;/li&gt;
        ))}
      &lt;/ul&gt;
    &lt;/div&gt;
  );
};
export default HOME;


// 返り値がHomeコンポーネントへ渡される。
export const getStaticProps: GetStaticProps = async () =&gt; {
  const data = await client.getList&lt;Blog&gt;({ endpoint: "blog" });

  return {
    props: {
      posts: data,
    },
  };
};</code></pre><p>以上です！<br><br>もし間違いなどありましたら、教えていただけると嬉しいです！<br></p>

microcms-js-sdkを使用して、投稿データ取得を取得しました。

console.log(emi);

カテゴリー記事一覧：フロントエンド

callback関数

Fetch API(JavaScript)

シンタックスハイライトでコードにいい感じに色をつけてみた

Next.jsでのデータ取得方法について

Reactのレンダリングとは

Next.js×microCMS 画像パスでエラーが出る

Next.js×microCMS　データ取得

カテゴリー記事一覧：フロントエンド

callback関数

Fetch API(JavaScript)

シンタックスハイライトでコードにいい感じに色をつけてみた

Next.jsでのデータ取得方法について

Reactのレンダリングとは

Next.js×microCMS 画像パスでエラーが出る

Next.js×microCMS データ取得

Next.js×microCMS　データ取得