<h2 id="h8d027c8ed3">はじめに</h2><p>おはようございます。こんにちは。こんばんは。<br>Watatakuです。<br>今回の書いていく内容なんですけれども、タイトルから分かる通り仕様が変わっていました。<br>v8までを使用している方は以前の書き方で大丈夫なのですが、これから新規でfirebaseのプロジェクトを始めるときに書き方が変わりますというお話です。<br>その中でも今回はauthenticationをやっていきます。<br><br>以前はQiitaの方に書かせて頂いたのは仕様が変わる前の記事になっているので、仕様変更前と後の見比べに合わせてご覧ください。<br><a href="https://qiita.com/watataku8911/items/9f134b44ead087abe68b" target="_blank" rel="noopener noreferrer">https://qiita.com/watataku8911/items/9f134b44ead087abe68b</a><br></p><h2 id="h60abfd515b">authentication</h2><p><a href="https://firebase.google.com/docs/auth/?hl=ja" target="_blank" rel="noopener noreferrer">公式ページ</a><br><br>Firebaseが提供してくれているサービスの１つでFirebase Authentication を使用すると、ユーザーがアプリにログインする際に、<br>メールアドレスとパスワードのログイン、Google ログインや Facebook ログインなどのフェデレーション ID プロバイダなど、複数のログイン方法を使用できるようになります。</p><h3 id="hd854b561c4">ユーザ登録</h3><p>使用するメソッド</p><pre><code>createUserWithEmailAndPassword(authインスタンス, "emailアドレス", "パスワード")</code></pre><p><br></p><pre><code>import { initializeApp } from "firebase/app";
import { createUserWithEmailAndPassword, getAuth } from "firebase/firestore";

const firebaseConfig = {
  apiKey: " process.env.API_KEY",
  authDomain: "process.env.AUTH_DOMAIN",
  projectId: "process.env.PROJECT_ID",
  storageBucket: "process.env.STORAGE_BUCKET",
  messagingSenderId: "process.env.MESSAGING_SENDER_ID",
  appId: "process.env.APP_ID",
  measurementId: "process.env.MEASUREMENT_ID",
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
createUserWithEmailAndPassword(auth, "hoge@gmail.com", "passW0rd")
.then(( userCredential) =&gt; {
  console.log('user created');
  console.log(userCredential)
})
.catch((error) =&gt; {
  alert(error.message)
  console.error(error)
}); </code></pre><p><br></p><h3 id="ha6fec2e82b">ログイン</h3><p>使用するメソッド</p><pre><code>signInWithEmailAndPassword(authインスタンス, "emailアドレス", "パスワード")</code></pre><p><br></p><pre><code>import { initializeApp } from "firebase/app";
import { createUserWithEmailAndPassword, getAuth } from "firebase/firestore";

const firebaseConfig = {
  apiKey: " process.env.API_KEY",
  authDomain: "process.env.AUTH_DOMAIN",
  projectId: "process.env.PROJECT_ID",
  storageBucket: "process.env.STORAGE_BUCKET",
  messagingSenderId: "process.env.MESSAGING_SENDER_ID",
  appId: "process.env.APP_ID",
  measurementId: "process.env.MEASUREMENT_ID",
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
signInWithEmailAndPassword(auth, "hoge@gmail.com", "passW0rd")
.then((user) =&gt; {
  console.log('ログイン成功=', user.user.uid)
})
.catch((error) =&gt; {
  console.error(error)
});</code></pre><p><br></p><h4 id="h217ef38d18">その他のログイン</h4><ul><li>Googleログイン</li></ul><pre><code>import { initializeApp } from "firebase/app";
import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/firestore";

const firebaseConfig = {
  apiKey: " process.env.API_KEY",
  authDomain: "process.env.AUTH_DOMAIN",
  projectId: "process.env.PROJECT_ID",
  storageBucket: "process.env.STORAGE_BUCKET",
  messagingSenderId: "process.env.MESSAGING_SENDER_ID",
  appId: "process.env.APP_ID",
  measurementId: "process.env.MEASUREMENT_ID",
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

const provider = new GoogleAuthProvider();
signInWithPopup(auth, provider)
.then((user) =&gt; {
  console.log('Googleアカウントでログインしました。')
})
.catch((error) =&gt; {
  console.error(error)
});</code></pre><ul><li>Facebookログイン</li></ul><pre><code>import { initializeApp } from "firebase/app";
import { getAuth, signInWithPopup, FacebookAuthProvider } from "firebase/firestore";

const firebaseConfig = {
  apiKey: " process.env.API_KEY",
  authDomain: "process.env.AUTH_DOMAIN",
  projectId: "process.env.PROJECT_ID",
  storageBucket: "process.env.STORAGE_BUCKET",
  messagingSenderId: "process.env.MESSAGING_SENDER_ID",
  appId: "process.env.APP_ID",
  measurementId: "process.env.MEASUREMENT_ID",
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

const provider = new FacebookAuthProvider();
signInWithPopup(auth, provider)
.then((user) =&gt; {
  console.log('Facebookアカウントでログインしました。')
})
.catch((error) =&gt; {
  console.error(error)
});</code></pre><ul><li>Twitterログイン</li></ul><pre><code>import { initializeApp } from "firebase/app";
import { getAuth, signInWithPopup, TwitterAuthProvider } from "firebase/firestore";

const firebaseConfig = {
  apiKey: " process.env.API_KEY",
  authDomain: "process.env.AUTH_DOMAIN",
  projectId: "process.env.PROJECT_ID",
  storageBucket: "process.env.STORAGE_BUCKET",
  messagingSenderId: "process.env.MESSAGING_SENDER_ID",
  appId: "process.env.APP_ID",
  measurementId: "process.env.MEASUREMENT_ID",
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

const provider = new TwitterAuthProvider();
signInWithPopup(auth, provider)
.then((user) =&gt; {
  console.log('Twitterアカウントでログインしました。')
})
.catch((error) =&gt; {
  console.error(error)
});</code></pre><ul><li> Githubログイン</li></ul><pre><code>import { initializeApp } from "firebase/app";
import { getAuth, signInWithPopup, GithubAuthProvider } from "firebase/firestore";

const firebaseConfig = {
  apiKey: " process.env.API_KEY",
  authDomain: "process.env.AUTH_DOMAIN",
  projectId: "process.env.PROJECT_ID",
  storageBucket: "process.env.STORAGE_BUCKET",
  messagingSenderId: "process.env.MESSAGING_SENDER_ID",
  appId: "process.env.APP_ID",
  measurementId: "process.env.MEASUREMENT_ID",
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

const provider = new GithubAuthProvider();
signInWithPopup(auth, provider)
.then((user) =&gt; {
  console.log('Githubアカウントでログインしました。')
})
.catch((error) =&gt; {
  console.error(error)
});</code></pre><p><br></p><h3 id="h5ae5a82600">サインアウト</h3><p>使用するメソッド</p><pre><code>signOut(authインスタンス)</code></pre><p><br></p><pre><code>import { initializeApp } from "firebase/app";
import { createUserWithEmailAndPassword, getAuth } from "firebase/firestore";

const firebaseConfig = {
  apiKey: " process.env.API_KEY",
  authDomain: "process.env.AUTH_DOMAIN",
  projectId: "process.env.PROJECT_ID",
  storageBucket: "process.env.STORAGE_BUCKET",
  messagingSenderId: "process.env.MESSAGING_SENDER_ID",
  appId: "process.env.APP_ID",
  measurementId: "process.env.MEASUREMENT_ID",
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
signOut(auth)
.then((user) =&gt; {
  console.log('ログアウトしました')
})
.catch((error) =&gt; {
  console.log(`ログアウト時にエラーが発生しました (${error})`);
});</code></pre><p><br></p><h3 id="h07516b8bcf">現在ログインしているユーザーを取得する</h3><p>使用するメソッド</p><pre><code>onAuthStateChanged(authインスタンス, () =&gt; {})</code></pre><p><br></p><pre><code>import { initializeApp } from "firebase/app";
import { onAuthStateChanged, getAuth } from "firebase/firestore";

const firebaseConfig = {
  apiKey: " process.env.API_KEY",
  authDomain: "process.env.AUTH_DOMAIN",
  projectId: "process.env.PROJECT_ID",
  storageBucket: "process.env.STORAGE_BUCKET",
  messagingSenderId: "process.env.MESSAGING_SENDER_ID",
  appId: "process.env.APP_ID",
  measurementId: "process.env.MEASUREMENT_ID",
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
onAuthStateChanged(auth, (user) =&gt; {
&nbsp; if (user) {
&nbsp; &nbsp; // User is signed in, see docs for a list of available properties
&nbsp; &nbsp; const uid = user.uid;
&nbsp; &nbsp; // ...
&nbsp; } else {
&nbsp; &nbsp; // User is signed out
&nbsp; &nbsp; // ...
&nbsp; }
});</code></pre><p>あとは、ドキュメントを見て。。。。</p>

注意！！firebaseの仕様が変わってました。(authentication編)

Next.js13のApp Routerについて勉強した

<p>このブログサイトで動的OGPを実装しようとしたお話をします。Next.jsを使用しているので<code>@vercel/og</code>で簡単に実装できます。<u>ただし、Next.js 12.2.3以上でないとこのモジュールが動作しません。</u></p><pre><code>$ npm install @vercel/og</code></pre><p>※インストールした<code>@vercel/og</code>のバージョンは<strong>0.5.6</strong>です。<br></p><pre><code>import { ImageResponse } from "@vercel/og";</code></pre><p>また、Next.js 13.3.0から<code>@vercel/og</code>をインストールしなくても、Next.js APIの<code>next/server</code>から<code>ImageResponse</code>をインポートできるようになり動的OGPを生成できるようになりました。</p><pre><code>import { ImageResponse } from "next/server";</code></pre><h2 id="h32ccf42033">画像を生成してみる</h2><pre><code>// pages/api/og.tsx
import { ImageResponse } from '@vercel/og' // Next.js 12.2.3以上13.3.0未満の場合
import { ImageResponse } from 'next/sever' // Next.js 13.3.0以上の場合

export const config = {
&nbsp; runtime: 'experimental-edge',
}

export default function handler() {
&nbsp; return new ImageResponse(
&nbsp; &nbsp; (
&nbsp; &nbsp; &nbsp; &lt;div
&nbsp; &nbsp; &nbsp; &nbsp; style={{
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: 'flex',
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; justifyContent: 'center',
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alignItems: 'center',
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: '100%',
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: '100%',
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; backgroundColor: 'white',
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fontSize: '128px',
&nbsp; &nbsp; &nbsp; &nbsp; }}
&nbsp; &nbsp; &nbsp; &gt;
&nbsp; &nbsp; &nbsp; &nbsp; Hello world!
&nbsp; &nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; ),
     {
      width: 1200,
      height: 600,
    }
&nbsp; )
}</code></pre><p><strong>http://localhost:3000/api/og</strong>にアクセスする。<br><img src="https://images.microcms-assets.io/assets/2679e05ff37441a18a78cb51394b1a4a/546bf59648704a65a16949a23af3f1f0/og%20(2).png" alt=""><br>あとは任意のページにmetaタグを挿入すればOGPが出来上がります。</p><pre><code>import Head from 'next/head'

&lt;Head&gt;
  &lt;title&gt;タイトルです&lt;/title&gt;
  &lt;meta
    property="og:image"
    content="https//hogehoge.com/api/og"
  /&gt;
&lt;/Head&gt;</code></pre><h2 id="h0984899113">動的にタイトルを挿入する</h2><p>それでは、次に動的にタイトルを挿入し、動的なOGPっぽくしたいと思います。<br>結論としては、<strong>https://hogehoge.com/api/og?title=タイトル</strong>のようにクエリパラメータを使用して動的にタイトルを挿入します。</p><pre><code>// pages/api/og.tsx
import { NextApiHandler } from "next";
import { ImageResponse } from "@vercel/og";

export const config = {
  runtime: "experimental-edge",
};

const handler: NextApiHandler = async (req) =&gt; {
  if (!req.url) throw Error("not supported.");
  const { searchParams } = new URL(req.url);
  
  const title = searchParams.get("title");
  const postDate = searchParams.get("postDate");
  return new ImageResponse(
    (
      &lt;div
        style={{
          borderWidth: "36px",
          borderColor: "#5bbee5",
          backgroundColor: "white",
          width: "100%",
          height: "100%",
          display: "flex",
          textAlign: "center",
          alignItems: "center",
          justifyContent: "center",
          color: "black",
          position: "relative",
        }}
      &gt;
        &lt;h2
          style={{
            color: "black",
            fontSize: 64,
          }}
        &gt;
          {title}
        &lt;/h2&gt;
        &lt;div
          style={{
            display: "flex",
            position: "absolute",
            width: "100%",
            bottom: 0,
            paddingRight: 32,
            justifyContent: "flex-end",
          }}
        &gt;
          &lt;h2
            style={{
              color: "black",
              fontSize: 40,
            }}
          &gt;
            {postDate}
          &lt;/h2&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    ),
    {
      width: 1200,
      height: 600,
    }
  );
};

export default handler;</code></pre><p>これで<strong>http://localhost:3000/api/og?title=Next.jsでSVGを表示する&amp;postDate=2022年02月02日投稿</strong>にアクセスすると画像が表示されるはずですがされません。？？？？？？？<br><br><code>@vercel/og</code>ではデフォルトで日本語での表示をサポートしているのですが、文字列に漢字が含まれているとsatori内でパースできずにエラーになってしまいます。</p><pre><code>error - uncaughtException: Error [ERR_UNHANDLED_ERROR]: Unhandled error. (Error: Unsupported OpenType signature &lt;htm
&nbsp; &nbsp; at Object.parseBuffer [as parse] (webpack-internal:///(middleware)/./node_modules/@shuding/opentype.js/dist/opentype.module.js:11455:15)
&nbsp; &nbsp; at vt.addFonts (webpack-internal:///(middleware)/./node_modules/satori/dist/index.wasm.js:18:19200)
&nbsp; &nbsp; at gu (webpack-internal:///(middleware)/./node_modules/satori/dist/index.wasm.js:19:29617)
&nbsp; &nbsp; at async Object.start (webpack-internal:///(middleware)/./node_modules/@vercel/og/dist/index.js:10:2912))</code></pre><p>この問題は日本語フォントを適用することで解決できます。</p><h3 id="h0b769a4504">カスタムフォントを適応させる</h3><p><a href="https://fonts.google.com/" target="_blank" rel="noopener noreferrer">Google Fons</a>あたりから好きなフォントをダウンロードして下さい。<br>ダウンロードしたフォントファイルを<code>public/</code>に格納(※今回は<code>public/font</code>配下に格納しました。)し、以下のように書き換えて下さい。</p><pre><code>// pages/api/og.tsx
import { NextApiHandler } from "next";
import { ImageResponse } from "@vercel/og";

export const config = {
  runtime: "experimental-edge",
};

const notoSansJP = fetch(
  new URL("../../public/font/NotoSansJP-Bold.woff", import.meta.url).toString()
).then((res) =&gt; res.arrayBuffer());

const handler: NextApiHandler = async (req) =&gt; {
  if (!req.url) throw Error("not supported.");
  const { searchParams } = new URL(req.url);
  const fontNoto = await notoSansJP;

  const title = searchParams.get("title");
  const postDate = searchParams.get("postDate");
  return new ImageResponse(
    (
      &lt;div
        style={{
          borderWidth: "36px",
          borderColor: "#5bbee5",
          backgroundColor: "white",
          width: "100%",
          height: "100%",
          display: "flex",
          textAlign: "center",
          alignItems: "center",
          justifyContent: "center",
          color: "black",
          position: "relative",
        }}
      &gt;
        &lt;h2
          style={{
            color: "black",
            fontSize: 64,
            fontFamily: '"NotoSansJP"',
          }}
        &gt;
          {title}
        &lt;/h2&gt;
        &lt;div
          style={{
            display: "flex",
            position: "absolute",
            width: "100%",
            bottom: 0,
            paddingRight: 32,
            justifyContent: "flex-end",
          }}
        &gt;
          &lt;h2
            style={{
              color: "black",
              fontSize: 40,
              fontFamily: '"NotoSansJP"',
            }}
          &gt;
            {postDate}
          &lt;/h2&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    ),
    {
      width: 1200,
      height: 600,
      fonts: [
        {
          name: "NotoSansJP",
          data: fontNoto,
          style: "normal",
        },
      ],
    }
  );
};

export default handler;</code></pre><p>これで、<strong>http://localhost:3000/api/og?title=Next.jsでSVGを表示する&amp;postDate=2022年02月02日投稿</strong><br>にアクセスすると上手く表示されるはずです。<br><img src="https://images.microcms-assets.io/assets/2679e05ff37441a18a78cb51394b1a4a/de034134fc43492aa7df23d072381e0a/og%20(1)%20(1).png" alt=""><br><br>ですが、vercelにデプロイする際エラーになりました。<br>vercelのhobbyプランではEdge関数は1MB以下ではならなければいけません。日本語フォントは重い・・・<br>フォントファイルはサブセット化し4.7MBから527KBに落としたのですがEdge関数の大きさは1.12MBでした。(筆者調べ)<br>他の日本語フォントを試したりしたのですがEdge関数の大きさは1MB以下になりませんでした。hobbyプラン以上のプラン変更も検討しましたがこのためだけにプランを変更するのは流石に厳しい・・・<br>だから諦めました。<br><br><code>@vercel/og</code>のバージョンによって漢字が含まれていてもエラーが出ないバージョンがありました。全て確認したわけではありませんですがバージョン<strong>0.0.19</strong>では漢字が含まれていてもエラーがでませんでした。文字列中に全角スペースがあったり、<code>！</code>や<code>？</code>のような全角の記号があるとsatori内でパースできずエラーになってしまうようです。ちなみに、なぜか<code>。</code>は大丈夫でした。<br>ですが、この方法ではvercelにはデプロイできましたが、vercelでは上手く動いてくれませんでした。<br></p><h2 id="h7ed021f0e3">Next.js 13.3.0以上だと関係なかった</h2><p>結論としてはこちらの方法を使って実装しました。Next.js13.3.0以上から<code>next/server</code>でできるようになりましたと冒頭で述べさせていただきました。</p><pre><code>// pages/api/og.tsx
import { ImageResponse } from "next/server";
import { NextApiHandler } from "next";

export const config = {
&nbsp; runtime: "edge",
};

const handler: NextApiHandler = async (req) =&gt; {
&nbsp; if (!req.url) throw Error("not supported.");

&nbsp; const { searchParams } = new URL(req.url);
&nbsp; const title = searchParams.get("title");
&nbsp; const postDate = searchParams.get("postDate");

&nbsp; return new ImageResponse(
&nbsp; &nbsp; (
&nbsp; &nbsp; &nbsp; &lt;div
&nbsp; &nbsp; &nbsp; &nbsp; lang="ja-JP"
&nbsp; &nbsp; &nbsp; &nbsp; style={{
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; borderWidth: "36px",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; borderColor: "#5bbee5",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; backgroundColor: "white",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: "100%",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: "100%",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: "flex",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; textAlign: "center",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alignItems: "center",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; justifyContent: "center",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: "black",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: "relative",
&nbsp; &nbsp; &nbsp; &nbsp; }}
&nbsp; &nbsp; &nbsp; &gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;h2
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style={{
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: "black",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fontSize: 64,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}
&nbsp; &nbsp; &nbsp; &nbsp; &gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {title}
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/h2&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;div
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style={{
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: "flex",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: "absolute",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: "100%",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; bottom: 0,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; paddingRight: 32,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; justifyContent: "flex-end",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}
&nbsp; &nbsp; &nbsp; &nbsp; &gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h2
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style={{
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: "black",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fontSize: 40,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {postDate}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/h2&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; ),
&nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; width: 1200,
&nbsp; &nbsp; &nbsp; height: 600,
&nbsp; &nbsp; }
&nbsp; );
};

export default handler;</code></pre><p>Next.js 13.3.0以上だとフォントファイルとか関係なく1MB以下に収めることができ無事vercelにデプロイすることができました。<br><br>元々このブログサイトはNext.js13では動いてなかったのでNext.js13にバージョンを上げたりとか、結構苦労しましたがその苦労に関してはまた別の機会にw<br>今思えば他のやり方があったのでは？と思う気持ちもあるのですが今回はこの辺りで失礼します。それでは良いNext.jsライフを〜！！</p><h2 id="hb4905a33a8">参照</h2><ul><li><a href="https://www.newt.so/docs/tutorials/nextjs-og-image-generation" target="_blank" rel="noopener noreferrer">https://www.newt.so/docs/tutorials/nextjs-og-image-generation</a></li><li><a href="https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation" target="_blank" rel="noopener noreferrer">https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation</a></li><li><a href="https://nextjs.org/docs/app/api-reference/functions/image-response" target="_blank" rel="noopener noreferrer">https://nextjs.org/docs/app/api-reference/functions/image-response</a></li></ul><p><br><br><br><br></p>

Next.jsで動的OGPを作った時のエピソードを書いてみました

<p>Next.jsでSVGを表示する方法について考える機会があったので、今回書いてみようと思った次第です。このブログサイトにも至る所にSVGを使っていますが全て今記事の表示方法で行なっています。<br><br>WebサイトにSVGを表示する手段は以下の通りです。</p><ul><li>HTMLの<code>&lt;img&gt;</code>で表示する</li><li>CSSの<code>background-image</code>プロパティで表示する</li><li>SVG内のコードをHTMLに埋め込む</li></ul><p><br>上の二つの手段で表示した場合は、SVG内のスタイルをHTMLもしくはCSSで変更できません。<br>一方、最後に書いた手段を使えばスタイルを変更することができ、外部ファイルへのHTTPリクエスト回数を減らせることからもSVGはインラインで埋め込むことをお勧めします。<br><br>ただし、Next.js(React)内にSVG内のコードを埋め込むためにSVG内のコードをJSXに対応させるために修正しないといけません。この作業って意外とめんどくさいんですよねw<br>そこで、今回は<strong>SVGファイルをReactコンポーネントとして直接importできる</strong>ようにしました。</p><h2 id="h6099da804d">SVGファイルをReactコンポーネントとして直接importできるように準備する</h2><p>まずは<code>@svgr/webpack</code>というものをインストールします。</p><pre><code>$ npm install @svgr/webpack</code></pre><p>次に、<code>next.config.js</code>に以下を記述して下さい。</p><pre><code>/** @type {import('next').NextConfig} */
const nextConfig = {
&nbsp; webpack: (config) =&gt; {
&nbsp; &nbsp; config.module.rules.push({
&nbsp; &nbsp; &nbsp; test: /\.svg$/,
&nbsp; &nbsp; &nbsp; use: [
&nbsp; &nbsp; &nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; loader: "@svgr/webpack",
&nbsp; &nbsp; &nbsp; &nbsp; },
&nbsp; &nbsp; &nbsp; ],
&nbsp; &nbsp; });
&nbsp; &nbsp; return config;
&nbsp; },
};

module.exports = nextConfig;</code></pre><p>以上の設定を行うことによって、SVGファイルをReactコンポーネントとしてimportできるようになります。</p><h3 id="h36f25b84a1">TypeScriptを使っている場合</h3><p>先ほどの<code>next.config.js</code>に以下を追加して下さい。</p><pre><code>/** @type {import('next').NextConfig} */
const nextConfig = {
&nbsp; webpack: (config) =&gt; {
&nbsp; &nbsp; config.module.rules.push({
&nbsp; &nbsp; &nbsp; test: /\.svg$/,
&nbsp; &nbsp; &nbsp; use: [
&nbsp; &nbsp; &nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; loader: "@svgr/webpack",
&nbsp; &nbsp; &nbsp; &nbsp; },
&nbsp; &nbsp; &nbsp; ],
&nbsp; &nbsp; });
&nbsp; &nbsp; return config;
&nbsp; },
   // -----------------------追加---------------------------
&nbsp; images: {
&nbsp; &nbsp; disableStaticImages: true,
&nbsp; },
   // ---------------------------------------------------------
};

module.exports = nextConfig;</code></pre><p><code>disableStaticImages: true</code>を設定することで、Next.jsでデフォルトで定義されている画像の型定義設定を無効にできます。<br>無効にすることで、次に行うSVGの型定義を有効化できます。<br>任意の場所に<code>index.d.ts</code>を作成して下さい。SVGの型定義を行います。</p><pre><code>declare module '*.svg' {
  const content: React.FC&lt;React.SVGProps&lt;SVGElement&gt;&gt;;
  export default content;
}</code></pre><h2 id="hb8ab4fa7ac">実際にSVGをReactコンポーネントとして読み込む</h2><p>上記の設定が完了したら、実際にSVGをコンポーネントとして呼び出します。</p><pre><code>import Icon from "../public/icon/icon.svg";

const IconViewComponent = () =&gt; {
  return &lt;Icon /&gt;
}

export default IconViewComponent;</code></pre><p>いい感じに表示できていると思います。<br><br><a href="https://www.npmjs.com/package/@svgr/webpack" target="_blank" rel="noopener noreferrer">https://www.npmjs.com/package/@svgr/webpack</a></p>

Next.jsでSVGの表示方法を調べてみました。

<p>Reactにはパフォーマンスを最適化する為のAPIが用意されています。具体的には<code>React.memo</code>,<code>useCallback</code>,<code>useMemo</code>があります。<code>React.memo</code>ではコンポーネントをメモ化し、 <code>useCallBack</code>では関数(コールバック関数)をメモ化。<code>useMemo</code>は値(関数の結果)のメモ化といった役割があります。</p><h2 id="h8ac88859d1">用語解説</h2><blockquote>メモ化とは、計算結果を保持し、それを再利用する手法のことです。メモ化によって各コンポーネントで都度計算する必要がなくなるため、パフォーマンスの向上が期待できます。</blockquote><p><br></p><blockquote>コールバック関数とは、ある関数を呼び出すときに引数に指定する別の関数のこと。</blockquote><p><br></p><blockquote>Reactのレンダリングとは、コンポーネントの本体である関数を評価(実行)すること</blockquote><h3 id="hb46ee580da">Reactの再レンダリングの条件</h3><p>まず前提知識として、Reactの再レンダリングの条件を見ていきます。</p><ol><li>propsの変更</li><li>stateの変更</li><li>contextの変更</li><li>forceUpdate()を使用しての、強制的な再レンダリング</li><li> 親コンポーネントの再レンダリング</li></ol><p>などが挙げられます。</p><h2 id="h692f02ca4c">useMemo</h2><p><code>useMemo</code>は値(関数の結果)を保持するためのhooksです。<br>何回やっても結果が同じ場合の値などをメモリに保存(メモ化)して、初回レンダリング以外に行われる際の再レンダリングでは高価な計算を避けることができます。<br>このhooksを使う事により、不要な再計算をスキップすることができ、パフォーマンスの向上が期待出来ます。</p><h3 id="h92c54cb2ef">書き方</h3><pre><code>useMemo(() =&gt; { 重い処理 }, [依存配列]);</code></pre><p>依存配列に指定した変数に変更がない場合、重い処理が実行されないようになる。ちなみに、依存配列の価を複数指定した場合はどちらか一方が変更されたら重い処理が実行される。<br>依存配列が空なら、何にも依存しないことから、初回1回のみ実行。つまり、依存関係が変わらない場合はキャッシュから値(関数の結果の値)を取ってきます。</p><h3 id="h512de7d259">使用例</h3><pre><code>import React, { useMemo } from "react";

const App = () =&gt; {
  // 再レンダリングされるたびに重い処理が実行される
　　const method = superHeavyProcess(a, b);

  //aまたはbが変化したときだけ重い処理が実行される
  const method = useMemo(() =&gt; {
    superHeavyProcess(a, b)
  }, [a, b]);

  return (
    ・・・
  )
};

export default App;</code></pre><p>このように<code>useMemo</code>を使う事により依存配列に指定しているaまたはbが変更されない限り、再レンダリングが行われてもsuperHevyProcess()が実行されなくなります。→ パフォーマンス向上が期待できる。<br>以下は<code>useMemo</code>のBad Caseです。</p><pre><code>import React, { useMemo } from "react";

const App = () =&gt; {
  // Bad Case①
  const hoge = useMemo(() =&gt; retern "hoge" , [])

  // Bad Case②
  const method = useMemo(() =&gt; {
    superLightProcess(a, b)
  }, [a, b]);

  return (
    ・・・
  )
};

export default App;</code></pre><h2 id="h4886ea6007">useCallback</h2><p><code>useCallBack</code>では関数(コールバック関数)をメモ化するhooksです。<br>このhooksを使う事により、関数の再生成を防ぐことができパフォーマンス向上が期待できます。<br><br>具体的には<strong>「親コンポーネントで作られた関数を子コンポーネント」</strong>に渡す際に使います。<br><em>子コンポーネントに渡さない関数は関数の再生成が行われない</em>ので<code>useCallback</code>を使う必要がありません。</p><h3 id="h92c54cb2ef">書き方</h3><pre><code>useCallback(() =&gt; { callbackFunction }, [依存配列]);</code></pre><p>依存配列に指定した変数に変更がない場合、callbackFunctionが実行されないようになる。ちなみに、依存配列の価を複数指定した場合はどちらか一方が変更されたらcallbackFunctionが実行される。依存配列が変わらなければ、前回のcallbackFunctionを再利用する。<br>依存配列が空なら、コンポーネントがレンダリングされた時に関数が一度生成されますが、以降は同じ関数オブジェクトを再利用するため、再評価されることはありません。</p><h3 id="h512de7d259">使用例</h3><pre><code>import React, { useState, useCallback } from "react"

const App = () =&gt; {
  const [count, setCount] = useState&lt;number&gt;(0);

  const handleClick = useCallback(() =&gt; {
    setCount(prevState =&gt; prevState + 1);
  });

  return (
    &lt;p&gt;count:{ count }&lt;/p&gt;
    &lt;Button onClick={handleClick} /&gt;
  )
}

export default App;</code></pre><p><br></p><pre><code>import React, { FC } from "react"

type Props = {
  handleClick: (event: React.MouseEvent&lt;HTMLElement, MouseEvent&gt;) =&gt; void;
}
const Button:  FC&lt;Props&gt; = ({ handleClick }) =&gt; {
  return (
    &lt;button onClick={handleClick}&gt;カウントアップ&lt;/button&gt;
  )
}

export default Button;</code></pre><p>このように親コンポーネント(App)で作った関数(handleClick)を子コンポーネント (Button)に渡すときに使います。</p><h2 id="h6ce25814b7">React.memo</h2><p><code>React.memo</code>はコンポーネントをメモ化したいときに使います。親コンポーネントから渡ってきたpropsが変更されていたら再レンダリングされ、変更がなければ再レンダリングしなくなります。<br><br>コンポーネント内で複雑な計算や大量のデータの処理を行っている場合や、プロパティが同一であるコンポーネントの再レンダリングを避けたい場合に使用されます。<br>また、前章で紹介させてもらった<code>useCallback</code>と一緒に使うことが推奨されています。<br>これらを一緒に使用することで、propsが変更された場合にのみ、新しい関数を生成して再レンダリングをトリガーすることができます。つまり、propsが変更されていない場合には、以前にキャッシュされた関数が使用され、不要な再レンダリングを回避できるということです。なので、必ずしも一緒に使わなければならないわけではありませんが、パフォーマンスの向上を目的とする場合は、一緒に使用することをおすすめします。</p><h3 id="h92c54cb2ef">書き方</h3><pre><code>const MemoChild = React.memo(親コンポーネントからpropsを受け取る子コンポーネント)</code></pre><h3 id="h512de7d259">使用例</h3><pre><code>import React, { FC } from "react"

type Props = {
  message: string
}
const MemoChild: FC&lt;Props&gt; = React.memo(({ message }) =&gt; {
  return &lt;div&gt;{message}&lt;/div&gt;;
});
export default MemoChild;</code></pre><p>このように<code>React.memo</code>を使うと、親コンポーネントから渡ってくるmessageに変化がなければ<em>MemoChildは再レンダリングしない</em>となります。</p><h3 id="h5afc6dbdcb">TIPS</h3><pre><code>Component definition is missing display name&nbsp; react/display-name</code></pre><p>上記のようなエラーが出る場合があります。<br>このエラーは、<code>React.memo</code>を使用している場合によく発生します。<br><code>React.memo</code>を使用しているときにこのようなエラーが発生する場合、コンポーネントに名前を付けることで解決できます。名前を付ける方法は、以下のように行うことができます<span style="color:#374151">。</span></p><pre><code>const MemoChild: FC&lt;Props&gt; = React.memo(({ message }) =&gt; {
  return &lt;div&gt;{message}&lt;/div&gt;;
});

MemoChild.displayName = 'MemoChild';</code></pre><p>ここで、displayNameプロパティを使用して、コンポーネントに表示名を指定しています。このようにすることで、React.memoでメモ化されたコンポーネントのエラーが解決されます。<br>また調べてみると他にも解決策があるそうだったのでこちらの記事を参考にしてみて下さい。<br><a href="https://qiita.com/tkmd35/items/fb20e1eb36f84dcbc4a1" target="_blank" rel="noopener noreferrer">https://qiita.com/tkmd35/items/fb20e1eb36f84dcbc4a1</a><br><br>また、Next.js では、<code>React.memo</code> が無効になることはありませんが、Next.js が提供する最適化技術の一部が、React.memo が提供する効果と重複していることがあります。そのため、<strong>「Next.js で React.memo を使用することがあまり意味がない」</strong>場合があります。<br><br>Next.jsが提供するSSRやSSGなどの機能により、コンポーネントの初回レンダリング時に必要なデータやプロパティがすでにサーバーサイドで取得され、生成されたHTMLに含まれているため、クライアントサイドでの再レンダリング時には不要なデータの再取得が必要なくなります。これにより、コンポーネントの再レンダリングが高速化され、<code>React.memo</code>によるパフォーマンスの向上効果が相対的に小さくなる可能性があります。また、Next.jsのプリフェッチング機能により、事前に必要なデータやリソースを取得し、コンポーネントが必要になったときにすぐに利用できるようになるため、<code>React.memo</code>による再レンダリングの最適化が不要になる場合もあります。<br>→元々、Next.jsはページプリレンダリングやコンポーネントレンダリングの最適化を提供しているため。<br><em>必ずしも</em><em><code>React.memo</code></em><em>を使用する必要がない場合があるということです。ただし、コンポーネントが多くのプロップスを持ち、再レンダリングのオーバーヘッドが高い場合には、</em><em><code>React.memo</code></em><em>を使用することが依然として効果的であることがあります。</em></p><h2 id="h878c02911b">まとめ </h2><p>これらを使うとパフォーマンスが最適化されますが逆に、<strong>「使いすぎたり適切に使わなかったりすればパフォーマンスが下がったりする」</strong>ので注意が必要です。<br>これらを使いこなしてReact初学者から中級者、上級者になりましょう。</p>

Reactのパフォーマンスチューニングについて勉強したところをまとめてみた

<p>私が運営しているブログサイトにRSSフィードを実装しました。今回はその時の話をしたいと思います。<br><br>このブログサイトには、コンテンツ管理(ブログ記事)をmicroCMSで管理しているので、microCMSで管理しているブログの記事を<br>取得しxmlで吐いていきたいと思います。<br>尚、フロントエンドはNext.jsです。</p><h2 id="hc3cf2129da">ライブラリをインストール</h2><p>動的にRSSフィードを実装をする上で簡単に実装できるライブラリがあるのでそれをインストールします。</p><pre><code>$ npm install rss</code></pre><p>また今回はtypescriptを使うので、合わせてこちらもインストールします。</p><pre><code>$ npm install --save-dev @types/rss</code></pre><h2 id="hedfa5ee1ed">getServerSidePropsで動的にRSSフィードを生成する</h2><p><code>page/feed.tsx</code>を作成する。</p><pre><code>import React from "react";
import { GetServerSidePropsContext } from "next";
import generateFeed from "../functions/genalate-rss-feed";

export const getServerSideProps = async ({ res }: GetServerSidePropsContext) =&gt; {
  const xml = await generateFeed(); // フィードのXMLを生成する（後述）
	  
  res.statusCode = 200;
  res.setHeader("Cache-Control", "s-maxage=86400, stale-while-revalidate"); // 24時間のキャッシュ
  res.setHeader("Content-Type", "text/xml");
  res.end(xml);
	
  return {
	props: {},
  };
};
	
const feed = () =&gt; null;
export default feed;</code></pre><p><code>getServerSideProps</code>を使用してRSSデータを生成し、直接レスポンスを返すことで、余計なレイアウトやメタタグなどが混入しないようにします。Pageコンポーネント内でHTMLやXMLを返しても、<code>_app.tsx</code>や<code>_document.tsx</code>の中に埋め込まれるため、余計なレイアウトやメタタグなどが混じってしまう可能性があるため、直接レスポンスを返すことでそれを防ぎます。<br><br><code>getServerSideProps</code>の引数で<code>res</code>を受け取ることができ、Headerに<code>Content-Type</code>や<code>Cache-Control</code>を付けた上で、<code>res.end(RSSフィードの中身)</code>という形でレスポンスを返します。これにより、生成されたRSSデータが正しい形式でクライアントに返されるようになります。</p><h2 id="ha10a36ae39">RSSフィードを生成する</h2><p><code>src/functions/genalate-rss-feed.ts</code>を作成します。ここで先ほどインストールした<a href="https://www.npmjs.com/package/rss" target="_blank" rel="noopener noreferrer">rss</a>の登場です。</p><pre><code>import RSS from "rss";
import { createClient } from "microcms-js-sdk"; 
	
export const client = createClient({
　　serviceDomain: process.env.NEXT_PUBLIC_SERVICE_DOMAIN as string, 
  apiKey: process.env.NEXT_PUBLIC_API_KEY as string,
});

const SITE_URL = "サイトのURL";

const generateFeed = async (): Promise&lt;string&gt; =&gt; {
  const feed = new RSS({
    title: "タイトルです",
    description: "ディスクリプションです",
    site_url: SITE_URL,
    feed_url: "/feed",
    language: "ja",
  });
  
  const data = await client.get({
    endpoint: "blog",
  	queries: {
  	  limit: 999,
  	},
  });
  data.contents.forEach((post) =&gt; {
  	feed.item({
  	  title: returnTitle(post.title),
  	  description: returnDiscription(post.body),
  	  date: new Date(post.createdAt),
  	  url: `${SITE_URL}/blog/${post.id}`,
  	});
  });
  
  // XML形式の文字列にする
  return feed.xml();
};
  
export default generateFeed;</code></pre><p><br><a href="https://zenn.dev/catnose99/articles/c7754ba6e4adac" target="_blank" rel="noopener noreferrer">https://zenn.dev/catnose99/articles/c7754ba6e4adac</a></p>

microCMSから取得してきたデータをNext.jsを使ってRSSフィードを生成する方法

<p><a href="https://swiperjs.com/" target="_blank" rel="noopener noreferrer">https://swiperjs.com/</a></p><h2 id="hd8d793506b">インストール</h2><p>インストール方法は3種類あります。</p><ul><li>CDN</li></ul><pre><code>&lt;link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"
/&gt;

&lt;script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"&gt;&lt;/script&gt;</code></pre><ul><li>NPMでインストール</li></ul><pre><code>$ npm install swiper</code></pre><p>また、typescriptをお使いの方は以下のコマンドも叩いてください。</p><pre><code>$ npm install --save-dev @types/swiper</code></pre><p><br><span style="color:#cf3e51">もう一つ、ファイルをダウンロードして使用する方法もあるのですが今回は割愛とします。興味のある方はご自身でお調べになってください。</span></p><h2 id="h81a5ad2f19">Swiperを扱う</h2><p>では、インストールが完了できたと思うので早速Swiperを使ったスライダーを作っていきましょう。<br>まずはHTMLです。</p><pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;
&nbsp;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;meta name="viewport" content="width=device-width"&gt;
&lt;title&gt;Swiper&lt;/title&gt;

&lt;!-- CDNを使う場合のみ記述 --&gt;
&lt;link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"
/&gt;

&lt;/head&gt;
&nbsp;
&lt;body&gt;
  &lt;div class="swiper"&gt;
&nbsp;  &lt;div class="swiper-wrapper"&gt;
      &lt;div class="swiper-slide"&gt;
        &lt;img
&nbsp; &nbsp; &nbsp; &nbsp; src="・・・"
&nbsp; &nbsp; &nbsp; &nbsp; alt=""
&nbsp; &nbsp; &nbsp;  /&gt;
&nbsp; &nbsp;   &lt;/div&gt;
&nbsp; &nbsp;   &lt;div class="swiper-slide"&gt;
&nbsp; &nbsp; &nbsp;  &lt;img
&nbsp; &nbsp; &nbsp; &nbsp;  src="・・・"
&nbsp; &nbsp; &nbsp; &nbsp;  alt=""
&nbsp; &nbsp; &nbsp; /&gt;
&nbsp; &nbsp;   &lt;/div&gt;
&nbsp; &nbsp;   &lt;div class="swiper-slide"&gt;
&nbsp; &nbsp; &nbsp;   &lt;img
&nbsp; &nbsp; &nbsp; &nbsp;   src="・・・"
&nbsp; &nbsp; &nbsp; &nbsp;   alt=""
&nbsp; &nbsp; &nbsp;   /&gt;
&nbsp; &nbsp;   &lt;/div&gt;
&nbsp;   &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- CDNを使う場合のみ記述 --&gt;
　　&lt;script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre><p>こちらが基本の作りです。<br><code>.swiper</code><span style="color:#333333"> </span><code>.swiper-wrapper</code><span style="color:#333333">&nbsp;</span><code>.swiper-slide</code>&nbsp;の3つは必須です。<br><br><code>.swiper-wrapper</code><span style="color:#cf3e51">&nbsp;と&nbsp;</span><code>.swiper-slide</code><span style="color:#cf3e51">&nbsp;の間に「他の要素を割り込ませたりするとうまく動かなくなる」のでご注意ください。</span><br><br>次にJavaScriptの記述です。</p><pre><code>// npmでインストールした場合のみ記述
import Swiper　from "swiper";
import "swiper/swiper-bundle.css";
// -----------------------------------------

const mySwiper = new Swiper('.swiper', {
&nbsp;&nbsp;// この中にオプションを書いていく。
});</code></pre><p>ここまで行うとスライダーが動き出します！</p><h3 id="h32a67f9128">オプション</h3><p>ここからオプションについて記述していくのですが数が膨大のため私がよく使うオプションだけを抜粋して書きます。<br></p><h4 id="hd76776d2c4">ページング</h4><pre><code>&lt;div class="swiper"&gt;
&nbsp;&lt;div class="swiper-wrapper"&gt;
  &lt;!-- 省略 --&gt;    
&nbsp;&lt;/div&gt;
  &lt;div class="swiper-pagination"&gt;&lt;/div&gt;&lt;!-- 追加 --&gt;
&lt;/div&gt;</code></pre><p><br></p><pre><code>// npmでインストールした場合、以下の２行を記述しないといけないので注意
import  Swiper, { Pagination } from "swiper";
Swiper.use([Pagination]);
// ----------------------------------------------------

const mySwiper = new Swiper('.swiper', {
  pagination: {
    el: ".swiper-pagination",
    clickable: true, // クリックを可能にする
  },
});</code></pre><h4 id="he3e924b320">前後の矢印</h4><pre><code>&lt;div class="swiper"&gt;
&nbsp;&lt;div class="swiper-wrapper"&gt;
  &lt;!-- 省略 --&gt;    
&nbsp;&lt;/div&gt;
　　&lt;div class="swiper-button-prev"&gt;&lt;/div&gt;&lt;!-- 追加 --&gt;
  &lt;div class="swiper-button-next"&gt;&lt;/div&gt;&lt;!-- 追加 --&gt;
&lt;/div&gt;</code></pre><p><br></p><pre><code>// npmでインストールした場合、以下の２行を記述しないといけないので注意
import  Swiper, { Navigation } from "swiper";
Swiper.use([Navigation]);
// ----------------------------------------------------

const mySwiper = new Swiper('.swiper', {
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});</code></pre><h4 id="hf7ee70b482">スピード</h4><p>スライドのスピードを設定できます。デフォルトでは300です。</p><pre><code>const mySwiper = new Swiper('.swiper', {
  speed: 500
});</code></pre><h4 id="hcbe3576d32">ループさせる</h4><p>簡単です。下記コードをつけるだけです。</p><pre><code>const mySwiper = new Swiper('.swiper', {
  loop: true
});</code></pre><h4 id="hd264691107">自動再生</h4><p>デフォルトでは自動再生されないので、させたい場合はオプションを書く必要があります。</p><pre><code>// npmでインストールした場合、以下の２行を記述しないといけないので注意
import  Swiper, { Autoplay } from "swiper";
Swiper.use([Autoplay]);
// ----------------------------------------------------

const mySwiper = new Swiper('.swiper', {
  autoplay: true,
});</code></pre><p>パラメータを追記して細かい設定をすることも可能です。</p><pre><code>const mySwiper = new Swiper('.swiper', {
  autoplay: {
    delay: 1500, // (デフォルトは3000)1.5秒後に次のスライド
&nbsp; &nbsp; disableOnInteraction: false, // 矢印またはページネーションをクリックしても自動再生を止めない
&nbsp; }
});</code></pre><h4 id="h11244fc379">表示させるスライドの枚数を指定する</h4><p>指定した枚数分がコンテナ内に収まるように調整される。</p><pre><code>const mySwiper = new Swiper('.swiper', {
  slidesPerView: 3 // デフォルトでは1
});</code></pre><p>小数点以下の値も指定可能(2.8などの小数を指定すると左右にはみ出たスライダが実装できる)。<br>CSSでサイズ調整したい場合は<code>‘auto’</code>&nbsp;を指定。</p><h4 id="h627921dd59">アクティブなスライドが中央に来るようにする</h4><p>主に、<code>slidesPreView</code>の値が小数を指定したときに使用します。</p><pre><code>const mySwiper = new Swiper('.swiper', {
  centeredSlides: true,
  slidesPerView:  1.4
});</code></pre><h4 id="h0201d4f644">レスポンシブ</h4><p>デバイスのサイズによって<code>slidesPreView</code>の数を変えたいときなどに使います。</p><pre><code>const mySwiper = new Swiper('.swiper', {
  breakpoints: {
    // デバイスが320px以上の時
    320: {
       slidesPerView:  1.4
    },
    // デバイスが640px以上の時
    640: {
       slidesPerView:  2.8
    }
  },
  slidesPerView:  1,
  centeredSlides: true
});</code></pre><h4 id="hb3954a0c7e">スライド感の余白を指定する</h4><p>CSSで margin を付けるとスライドの位置がずれていくことがあるため、こちらで指定するのが推奨。</p><pre><code>const mySwiper = new Swiper('.swiper', {
  spaceBetween: 40 // px
});</code></pre><p><br>先ほども記載しましたが、ここに記載したオプションは本の一部で、僕自身がよく使うものだけ取り上げさせていただきました。なので、ご興味がある方は各自で調べてみてください。また、Jqueryに依存せず使えることやオプションが多く<span style="color:#000000">カスタマイズ性が豊かなポイントもグッドです。</span><br><span style="color:#000000">皆さんもよければSwiperを使ってみてくださいね。</span></p>

Swiperを使ってサクッとスライドを作ってみた。

<p>みなさんはTailwind CSSを使ったことがありますか？<br>例えば、<code>&lt;h1&gt;</code>に<code>color: red</code>を適用させたけば<code>&lt;h1 class="text-red-800"&gt;</code>のように特定のclassを指定することでStyleを当てていくCSSフレームワークです。<br>導入方法は下記公式サイトにわかりやすく記載がありますのでそちらをご覧ください。<br><a href="https://tailwindcss.com/" target="_blank" rel="noopener noreferrer">https://tailwindcss.com</a></p><h2 id="h86672c8acc">本題</h2><p><a href="https://tailwindcomponents.com/cheatsheet/" target="_blank" rel="noopener noreferrer">https://tailwindcomponents.com/cheatsheet/</a><br>基本はこのサイトに書いてあるクラスを指定すればいいのですが、この中に無いものを指定したい時はどうすればいいかと言うのが本題です。</p><h3 id="h5de200be56">固定値</h3><p>例えば<code>&lt;div&gt;</code>に<code> width: 165px</code>を指定したくてもどこにもありません。<br><img src="https://images.microcms-assets.io/assets/2679e05ff37441a18a78cb51394b1a4a/fa52ecc563594c63a5b0f7c7957a0521/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-04-03%2012.38.02.png" alt=""><br>ではこう言う時はどうすればいいのでしょうか？<br><br><code>[]</code>で固定値を指定する。<br>つまり、この場合で言うと下記のように指定します。</p><pre><code>&lt;div class="w-[165px]"&gt;&lt;/div&gt;</code></pre><h3 id="h378d3365f9">calc()計算</h3><p>Tailwind CSSでも<code>calc()</code>も使えます。</p><pre><code>&lt;div class="h-[calc(100vh_-_80px)]"&gt;&lt;/div&gt;</code></pre><p><br>ミソは空白に<code>_</code>を入れること。<br><em>「Tailwind CSSでは空白には</em><em><code>_</code></em><em>を入れなければなりません。」</em><br>自分はそれを知らなくていつまで経ってもできませんでしたw</p><h3 id="hcb2b18c4f8">Google Fonts</h3><p><img src="https://images.microcms-assets.io/assets/2679e05ff37441a18a78cb51394b1a4a/b2a263d9c1fb4283bcab8b8859a93a1e/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-04-03%2014.49.57.png" alt=""><br><code>font-family</code>もあります。<br>では、どのようにして上記以外のフォントを使えば良いのでしょうか？<br>その方法をこの章ではお伝えします。<br><br>今回は<code>Bad Script</code>というフォントを使用してみます。<br><a href="https://fonts.google.com/specimen/Bad+Script?query=bad" target="_blank" rel="noopener noreferrer">https://fonts.google.com/specimen/Bad+Script?query=bad</a><br><img src="https://images.microcms-assets.io/assets/2679e05ff37441a18a78cb51394b1a4a/e2298b266a7543e38a9463d3ac31cc01/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-04-03%2016.09.42.png" alt=""><br>上記のサイトにアクセスし、下記を記述したファイルに<code>@import</code>を追加します。</p><pre><code>@tailwind base;
@tailwind components;
@tailwind utilities;</code></pre><p><br>次のステップです。<br><em>tailwind.config.js</em>を下記のように編集します。</p><pre><code>module.exports = {
  theme: {
    extend: {
      // フォントを追加
      fontFamily: {
        badScript: ["Bad Script", "cursive"],
      },
  // ...</code></pre><p>これで準備完了です。<br>ではこのフォントを実際に使ってみます。</p><pre><code>&lt;h1 class="font-badScript"&gt;TITLE&lt;/h1&gt;</code></pre><h3 id="hf3a351c61b">カスタムプロパティ</h3><p>Tailwind CSS側が用意していないプロパティは自分で作成することができます。<br><br>例えば、文字列が2行を超えると<code>・・・</code>にするプロパティを作成します。<br>先ほどの</p><pre><code>@tailwind base;
@tailwind components;
@tailwind utilities;</code></pre><p>にとある構文を追加すれば、自分でプロパティを作成できます。</p><pre><code>@layer utilities {
  .webkit-line-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}</code></pre><p><br></p><pre><code>&lt;p class="webkit-line-clamp"&gt;hogehogehoge・・・・・・・・・・・・・・・&lt;/p&gt;</code></pre><h3 id="h0201d4f644">レスポンシブ</h3><p>Tailwind CSSでは下記のブレークポイントは用意されています。(モバイルファースト)<br><img src="https://images.microcms-assets.io/assets/2679e05ff37441a18a78cb51394b1a4a/6769f63aa5e24774a4acfa06986f77f1/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3633353230352f66323236613532392d333138342d626361352d303465342d3562336433623561616162372e706e67.png" alt=""><br>今回は自分でブレイクポイントを作ります。<br><br>作り方は<em>tailwind.config.js</em>を下記のように記載しブレークポイントを作成します。</p><pre><code>module.exports = {
  theme: {
    screens: {
      // --------------------------------------------------
      // custom settings
      // --------------------------------------------------
      maxsp: { max: "７６８px" }, 
      sptb: { min: "769px", max: "1279px" }, 
      maxpc: {max: "1280"},
      // --------------------------------------------------

      // -----------------------------------
      // tailwind default
      // --------------------------------------------------
      sm: "640px",
      md: "768px",
      lg: "1024px",
      xl: "1280px",
    },
  // ...</code></pre><p><br></p><pre><code>&lt;div class="w-80 maxsp:w-full"&gt;BOX&lt;/div&gt;

div {
  width: 320px;
}
@media screen and (max-width:768px) {
　　div {
    　　width: 100%;
　　}
}</code></pre><p><br>Tailwind CSSで用意されているレスポンシブはモバイルファーストです。<br>自分はモバイルファーストのレスポンシブに慣れていないので今回PCファーストに書き換えました。<br>この機会にモバイルファーストのレスポンシブに慣れていかないとなぁw<br><br>以上が個人的に「この場合Tailwind CSSでどのように書けばいい」でした。</p><h2 id="he45680f0bc">参考記事</h2><ul><li><a href="https://www.ibulog.com/posts/2021/08/tailwind-fixed-value" target="_blank" rel="noopener noreferrer">https://www.ibulog.com/posts/2021/08/tailwind-fixed-value</a></li><li><a href="https://qiita.com/dtakkiy/items/dd161e2646695b387277" target="_blank" rel="noopener noreferrer">https://qiita.com/dtakkiy/items/dd161e2646695b387277</a></li></ul><h2 id="h7ee4f2333d">追記(2023-04-30)</h2><h3 id="hd28e9553ca">ダークモード</h3><p>Tailwind CSSでダークモードを実装すればいいのでしょうか？</p><h4 id="h6b2b5d41ab">tailwind.config.jsの設定</h4><p>Tailwind CSS でダークモードを有効化するためには、<code>tailwind.config.js</code>&nbsp;ファイルを修正します。</p><pre><code>module.exports = {
 // 省略
  darkMode: // 'media' or 'class'
}</code></pre><ul><li>media</li></ul><p><code>media</code>&nbsp;を指定した場合には、OS の設定に基づいてダークモードを適用するかどうか決定します。ただし、手動でダークモードとライトモードを切り替えることができません。<br>これにより、OS のダークモードの設定値は<code>prefers-color-scheme</code>によって取得されます。</p><ul><li>class</li></ul><p><code>class</code>を指定した場合、ユーザーによって手動でダークモードを切り替えられるようにするために指定します。設定すると、自身のルート要素に対して&nbsp;<code>.darkクラス</code>が付与されてます。付与される場合のみダークモードが適用されるという事になります。</p><pre><code>&lt;html class="dark"&gt;
  &lt;body&gt;
     &lt;!-- ... --&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre><p>また、<code>.darkクラス</code>を付与するかしないかはJavaScriptのお力になります。</p><pre><code>&lt;label class="relative inline-flex items-center cursor-pointer"&gt;
  &lt;input  id="checkbox" type="checkbox" value="" class="sr-only peer"&gt;
  &lt;div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"&gt;&lt;/div&gt;
  &lt;span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300"&gt;Toggle me&lt;/span&gt;
&lt;/label&gt;

&lt;script&gt;
const element = document.querySelector("#checkbox");
element.addEventListener("change", myfunc);

function myfunc() {
  if (element.checked) {
    document.documentElement.classList.add('dark')
    localStorage.theme = 'dark'
&nbsp;} else {
&nbsp; &nbsp;document.documentElement.classList.remove('dark')
     localStorage.theme = 'light'
&nbsp;}
}
&lt;/script&gt;</code></pre><p>HTMLのスイッチの箇所は下記リンクのサンプルコードから拝借してきました。<br><a href="https://flowbite.com/docs/forms/toggle/" target="_blank" rel="noopener noreferrer">https://flowbite.com/docs/forms/toggle/</a><br>では、最後に現在の状態がダークモードなのかを判別させるコードです。<br>公式サイトにいい感じのコードがありましたのでこちらも拝借です。</p><pre><code>// On page load or when changing themes, best to add inline in `head` to avoid FOUC
if (localStorage.theme === 'dark' || (!('theme' in localStorage) &amp;&amp; window.matchMedia('(prefers-color-scheme: dark)').matches)) {
  document.documentElement.classList.add('dark')
} else {
  document.documentElement.classList.remove('dark')
}

// Whenever the user explicitly chooses light mode
localStorage.theme = 'light'

// Whenever the user explicitly chooses dark mode
localStorage.theme = 'dark'

// Whenever the user explicitly chooses to respect the OS preference
localStorage.removeItem('theme')</code></pre><p><a href="https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually" target="_blank" rel="noopener noreferrer">https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually</a><br>ローカルストレージの&nbsp;<code>theme</code>&nbsp;の値を確認し、値が&nbsp;<code>dark</code>&nbsp;であった場合には、<code>&lt;html&gt;</code>&nbsp;タグに&nbsp;<code>.darkクラス</code>を付与します。<br>ローカルストレージに値が存在しない場合、<code>window.matchMedia('(prefers-color-scheme: dark)').matches</code>&nbsp;によって OS のダークモードの設定を確認します。</p><h4 id="hbfc727c1ce">ダークモード時のスタイル</h4><pre><code>&lt;section class="h-screen flex justufy-center items-center bg-gray-100 dark:bg-gray-800"&gt;
  &lt;h1 class="text-3xl text-gray-800 dark:text-gray-100"&gt;こんにちは&lt;/h1&gt;
&lt;/section&gt;</code></pre><p>このように<code>dark:</code>を指定してダークモード時のスタイルを指定します。</p><h2 id="h8b60accf33">追記(2022-05-20)</h2><h3 id="hc04e156993">!important</h3><p>以下のものTailwind CSSで実装したいときどうすればいいのか？</p><pre><code>position: relative !important;</code></pre><p>この<code>!important</code>ってどうすんねん？下記のようにすればいい。</p><pre><code>!relative</code></pre><p><code>!</code>を頭につけるだけでした。</p>

Tailwind CSSでこう言うときどすればいいのかを解決してみた。

<p>今回はAstroというwebフレームワークを使って、自分のポートフォリオサイトを作り直した時の話をしたいと思います。<br><a href="https://watataku-portfolio.vercel.app/" target="_blank" rel="noopener noreferrer">https://watataku-portfolio.vercel.app/</a></p><h2 id="hd8fb52f923">Astro</h2><p>まず初めにAstroというフレームワークを知らない方のために軽く触れておきます。<br><img src="https://images.microcms-assets.io/assets/2679e05ff37441a18a78cb51394b1a4a/9275dd3674cb4b75a4935787a148595e/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-03-24%2018.26.26.png" alt=""><br><a href="https://astro.build/" target="_blank" rel="noopener noreferrer">https://astro.build/</a></p><blockquote>Astroとは、<strong>ReactやVue.jsのようにコンポーネント指向で開発ができる</strong>UIフレームワークです。さらに、<strong>ウェブアプリ</strong>ではなく<strong>ウェブサイト</strong>を作るために用意されたWebフレームワークであったり、<strong>React、Preact、Svelte、Vue、Solidなど様々なUIフレームワーク</strong>を用いて開発できる特徴もあります。</blockquote><p><br>そしてAstroを語る上でもう一つ欠かせないのがAstro Islandsです。<br>これも公式のドキュメントで説明されています。<br><a href="https://docs.astro.build/en/concepts/islands/" target="_blank" rel="noopener noreferrer">https://docs.astro.build/en/concepts/islands/</a><br>簡単に解説すると、ページの各UIコンポーネントを別モノとして扱うことができます。<br>これによりコンポーネント間の優先度設定によるパフォーマンス調整やコンポーネント毎にUIフレームワークを変えられることがメリットとなっています。</p><h2 id="h8304d8c7ba">Astroを採用した理由</h2><ul><li>ウェブアプリではなくウェブサイトを作りたい</li><li>コンポーネント指向で開発したい</li><li>Typescriptで書きたい</li><li>勉強コストをできるだけ抑えたい</li><li>Jamstack！！</li></ul><p>などがありました。これらのことを考慮して今回マッチしたのが「Astro」でした。</p><h2 id="h51801b8ac5">プロジェクトのセットアップ</h2><p>Node.jsは<code>v16.12.0</code>またはそれ以上のバージョンをインストールされている前提で、以下のコマンドでプロジェクトを作成します。</p><pre><code>$ npm create astro@latest</code></pre><p>コマンド入力後、プロジェクト名やTypescriptを使用するかなどを聞かれますのでいい感じに答える。<br>聞かれることは以下の通りです。</p><ul><li>プロジェクト名を指定</li></ul><pre><code>Where would you like to create your new project? … ./watataku-portforio</code></pre><p>『watataku-portforio』という名前のプロジェクト名で作成したいので&nbsp;<code>./watataku-portforio</code>&nbsp;と入力して次に進みます。</p><ul><li>テンプレートの指定</li></ul><pre><code>? Which template would you like to use? › - Use arrow-keys. Return to submit.
❯   Just the basics (recommended)
    Blog
    Portfolio
    Documentation Site
    Empty project</code></pre><p>一番最初の『Just the basics (recommended)』の『基本のみ（推奨）』を選択します。</p><ul><li>依存モジュールのインストール</li></ul><pre><code>? Would you like to install yarn dependencies? (recommended) › (Y/n)</code></pre><p>『Y』をしていして依存モジュールのインストールを開始させます。</p><ul><li>Git リポジトリの初期化を実行</li></ul><pre><code>? Would you like to initialize a new git repository? (optional) › (Y/n)</code></pre><p>Gitリポジトリの初期化をしたいので『Y』を入力して次に進みます。</p><ul><li>TypeScriptの設定</li></ul><pre><code>? How would you like to setup TypeScript? › - Use arrow-keys. Return to submit.
❯   Relaxed
    Strict (recommended)
    Strictest
    I prefer not to use TypeScript</code></pre><p>推奨となっている『Strict (recommended)』を選択します。<br><br>回答後、以下のコマンドで開発サーバを立ち上げ、http://localhost:3000にアクセスします。</p><pre><code>$ cd ./watataku-portforio

$ npm run dev</code></pre><p><br><img src="https://images.microcms-assets.io/assets/2679e05ff37441a18a78cb51394b1a4a/bcbbb2a641ec421d905bf6e3c265b09e/astro-init-site.png" alt=""></p><h2 id="hc806dee726">Reactを追加する</h2><p>以下のコマンドを叩けばReactを追加(使えるように)できます。</p><pre><code>$ npx astro add react</code></pre><p><br></p><pre><code>&nbsp;Resolving packages...


&nbsp; Astro will run the following command:
&nbsp; If you skip this step, you can always run it yourself later


&nbsp;╭────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
&nbsp;│ npm install @astrojs/react @types/react-dom@^18.0.6 @types/react@^18.0.21 react-dom@^18.0.0 react@^18.0.0&nbsp; │
&nbsp;╰─────────────────────────────────────────────────────
? Continue? › (Y/n)</code></pre><p>Y を指定します。</p><pre><code>✔ Resolving packages...

  Astro will make the following changes to your config file:

 ╭ astro.config.mjs ─────────────────────────────╮
 │ import { defineConfig } from 'astro/config';  │
 │                                               │
 │ import react from "@astrojs/react";           │
 │                                               │
 │ // https://astro.build/config                 │
 │ export default defineConfig({                 │
 │   integrations: [react()]                     │
 │ });                                           │
 ╰───────────────────
? Continue? › (Y/n)</code></pre><p>Y を指定します。<br><span style="color:#d75969">※今回はReactを追加しますがVue.jsやSvelteなども追加できます。詳しくはドキュメントをご覧ください。</span><br><a href="https://docs.astro.build/ja/guides/integrations-guide/" target="_blank" rel="noopener noreferrer">https://docs.astro.build/ja/guides/integrations-guide/</a></p><h2 id="h81f6f126c0">microCMSの準備</h2><p>今回のサイトでのコンテンツ管理には「microCMS」と言うHedress CMSを使っています。<br><a href="https://microcms.io/" target="_blank" rel="noopener noreferrer">https://microcms.io/</a><br>microCMSのアクセス方法や設定方法などは今回説明しないので自身でドキュメント等などでご覧ください。<br><br>この辺りを参考にしてみると良いかもです。<br><a href="https://blog.microcms.io/astro-microcms-introduction" target="_blank" rel="noopener noreferrer">https://blog.microcms.io/astro-microcms-introduction</a></p><h2 id="h222fd0f152">ポートフォリオに取り入れた機能</h2><ul><li>慣性スクロール</li></ul><p><a href="https://www.weblio.jp/content/慣性スクロール" target="_blank" rel="noopener noreferrer">https://www.weblio.jp/content/慣性スクロール</a><br>ぬるっと動く気持ちのいいスクロールですねw個人的にこのスクロール方式が好きなので、実装してみたいと思い実装しました。<br><br>今回は「ASScroll」と言うライブラリのお力をお借りして実装しました。<br><a href="https://github.com/ashthornton/asscroll" target="_blank" rel="noopener noreferrer">https://github.com/ashthornton/asscroll</a><br>導入方法は簡単です。<br>まず最初にライブラリをインストールします。</p><pre><code>$ npm install --save @ashthornton/asscroll</code></pre><p>次に下記Javascriptのコードを書いてあげます。</p><pre><code>import ASScroll from "@ashthornton/asscroll";

const asscroll = new ASScroll();
window.addEventListener("load", () =&gt; {
  	asscroll.enable();
});</code></pre><p>あとは慣性スクロールしたいところに<code>&lt;div asscroll-container&gt;</code>で囲むだけ。</p><pre><code>&lt;div asscroll-container&gt;
	 &lt;main&gt;
	       &lt;!-- The Y translation will be applied to this element --&gt;
     &lt;/main&gt;
&lt;/div&gt;</code></pre><ul><li>ダークモード</li></ul><p>こちらで詳しく記載しております。<br><a href="https://watataku-blog.vercel.app/blog/tb7epr3_-z" target="_blank" rel="noopener noreferrer">https://watataku-blog.vercel.app/blog/tb7epr3_-z</a><br>ちなみにダークモードで見た際のサイト(ライトモードはサムネイル)<br><img src="https://images.microcms-assets.io/assets/2679e05ff37441a18a78cb51394b1a4a/806a1c38d1254371bee941836ff15dd6/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-03-14%2018.30.12.png" alt=""></p><ul><li>ページング</li></ul><p>Astroではページング機能を簡単に実装できる関数があるので、それを今回使用させていただきました。<br>その関数が<code>paginate()</code>です。早速ページングの実装方法を見ていきましょう。<br><br><code>./page/[...page].astro</code>を作成し下記のように<code>pagenate()</code>を使用します。</p><pre><code>// ---　
import type { Page, GetStaticPathsOptions } from "astro";

type Props = {
  page: Page&lt;Contents&gt;;
};

type Work = {
  contents: Contents[];
}

type Contents = {
  // 以下略
};

const { page } = Astro.props;  

export async function getStaticPaths({ paginate }: GetStaticPathsOptions) {
  　　const myMicroCMSApiUrlWork = `https://${
	    import.meta.env.MICROCMS_SERVICE_DOMAIN_PORTFOLIO
    }.microcms.io/api/v1/works?orders=-publishedAt?limit=999`;
	
	const response = await fetch(myMicroCMSApiUrlWork, {
	    headers: {
	      "X-MICROCMS-API-KEY": import.meta.env.MICROCMS_API_KEY_PORTFOLIO,
	    },
	});
	const getFetchDataWork: Work = await response.json();
	return paginate(getFetchDataWork.contents, { pageSize: 6 });
}
// ---</code></pre><p><code>getStaticPaths()</code> 関数の戻り値で<code>paginate()</code>を返すだけです。<br>※コメントにしている「<strong>---</strong>」はハイラウトの都合上、わざと付けています。Astroを書く際は「<strong style="background-color:#ffffff">---</strong>」をお忘れなくお願いします。<br><br>中身を見てみると、表示したいコンテンツを第 1 引数に、ページ内に表示したいコンテンツの数を第 2 引数に設定しておきます。<br>これでページングの設定が完了しましたのでテンプレートで使っていきましょう。</p><pre><code>&lt;div&gt;
  {
    page.data.map((work: Contents) =&gt;
      &lt;!-- 以下略 --&gt;
    ))
  }
&lt;/div&gt;
{
　　page.total &gt;= 6 &amp;&amp; (
	&lt;nav&gt;
	    {/* page.currentPageで現在ページ、page.lastPageで総ページ数を表示 */}
	     &lt;p&gt;
	        page {page.currentPage}/{page.lastPage}
	     &lt;/p&gt;
	     &lt;ul&gt;
	       　{/* page.url.prevがある場合は前ページへのリンクを表示 */}
	        {page.url.prev &amp;&amp; (
	         　　&lt;li&gt;
	              &lt;a href={page.url.prev}&gt;PREV&lt;/a&gt;
	            &lt;/li&gt;
	         )}
	          {/* page.url.nextがある場合は次ページへのリンクを表示 */}
	          {page.url.next &amp;&amp; (
	             &lt;li&gt;
	                &lt;a href={page.url.next}&gt;NEXT&lt;/a&gt;
	             &lt;/li&gt;
	           )}
	       &lt;/ul&gt;
　　　　&lt;/nav&gt;
　　)　
}</code></pre><h2 id="h3bcda3e6b0">最後に</h2><p>以上がAstroでポートフォリオサイトを作り直したと言うお話でした。<br>個人的にAstroとても書きやすくサクッと使える印象を受けました。また、他のUIフレームワークとも組み合わせて開発できるのも私としては嬉しいポイントでした。<br><br>みなさんもよければAstro使ってみてください</p>

T.W