星のレーティング評価とは

聞き馴染みがそんなにないとは思いますが (少なくとも筆者は初耳)レビューなどで星で評価するやつです。

環境

• next.js : 14.1.4
• react : ^18
• TypeScript : ^5
• TailwindCSS : ^3.3.0

要件

1~5までの数字(小数点含む)をコンポーネントに渡すと、星のレーティング評価を返すものを作る

第一段階・星の配列を表示する

const StarRating = () => {
  const stars = Array.from({ length: 5 }, (_, index) => {

    // 星のスタイルと描画内容を定義します。
    const starContent = "★";
    let starClassName = "text-gray-400"; 

    // 星を表示します。
    return (
      <span key={index} className={`text-xl ${starClassName}`}>
        {starContent}
      </span>
    );
  });

  // 星を表示します。
  return <div className="flex">{stars}</div>;
};

第二段階・評価を受け取る

import React from "react";

type StarRatingProps = {
  rating: number;
};

const StarRating: React.FC<StarRatingProps> = ({ rating }) => {
  const stars = Array.from({ length: 5 }, (_, index) => {
    const starContent = "★";
    let starClassName = "text-gray-400";

    return (
      <span key={index} className={`text-xl ${starClassName}`}>
        {starContent}
      </span>
    );
  });

  return <div className="flex">{stars}</div>;
};

export default StarRating;

Reactが少しわかる方ならわかるかもしれませんが1~5の評価をプロップスで受け取れるようにしただけです。

第三段階・評価の数字分黄色に塗りつぶす

ここが少し難しいところではありますがやっていきましょう。
まずは、「評価に基づく塗りつぶしの割合を計算」します。

 const fillRatio = Math.min(Math.max(rating - index, 0), 1);

割合が分かったら、下記コードのように星が完全に塗りつぶされている星と一部しか塗りつぶされていない場合の場合分けを行っていきます。

// 星が完全に塗りつぶされている場合
if (fillRatio === 1) {
  starClassName = "text-yellow-500"; 
}
// 星が半分または一部塗りつぶされている場合
else if (fillRatio > 0) {
  return (
    <span key={index} className="relative text-xl">
      {/* 塗りつぶされた部分 */}
      <span
        className="absolute text-yellow-500"
        style={{
        width: `${fillRatio * 100}%`, // 塗りつぶしの割合
          overflow: "hidden",
        }}
      >
        ★
      </span>
      {/* 塗りつぶされていない星 */}
      <span className="text-gray-400">★</span>
    </span>
  );
}

これで完成となります。

最後にコードの全体をご覧ください。

// StarRanking.tsx
import React from "react";

type StarRatingProps = {
  rating: number;
};

const StarRating: React.FC<StarRatingProps> = ({ rating }) => {
  const stars = Array.from({ length: 5 }, (_, index) => {
    const starContent = "★";
    let starClassName = "text-gray-400"; 
    
    const fillRatio = Math.min(Math.max(rating - index, 0), 1);

    if (fillRatio === 1) {
      starClassName = "text-yellow-500"; 
    }
    else if (fillRatio > 0) {
      return (
        <span key={index} className="relative text-xl">
          <span
            className="absolute text-yellow-500"
            style={{
              width: `${fillRatio * 100}%`, 
              overflow: "hidden",
            }}
          >
            ★
          </span>
          <span className="text-gray-400">★</span>
        </span>
      );
    }

    return (
      <span key={index} className={`text-xl ${starClassName}`}>
        {starContent}
      </span>
    );
  });

  return <div className="flex">{stars}</div>;
};

export default StarRating;

あとは、このコンポーネントを親で呼んであげます

<StarRanking ranking={4} />

次にこのコンポーネントに「2.5」を渡すと下記のような表示になります。

<StarRanking ranking={2.5} />

うん。いい感じだと思います。
お疲れ様でした。

環境

• next: 14.0.4
• react: ^18
• typescript: ^5

vcfファイルとは

連絡先とその関連情報を保存する仮想連絡先ファイルです。 VCF ファイルは vCard ファイルとしても知られ、電話番号、住所、連絡先の写真、Web サイトのアドレス、電子メール ID などの連絡先情報を保存するための設計されたフィールドで構成されます。

https://www.msoutlooktools.com/jp/open-vcf-file-on-computer/

モジュールをインストールする

https://www.npmjs.com/package/vcards-js

$ npm i vcards-js

vcfファイルをダウンロードさせるボタンの作成

まずは普通のボタンを作ります。

const VcfDownloadBtn = () => {
  return (
    <button type="button">ダウンロード</button>
  )
}

ここにダウンロードボタンを押したら、vcfファイルをダウンロードをさせる処理を書いていきます。

const VcfDownloadBtn = () => {
  const CreateVCard = (
    firstName = "",
    lastName = "",
    organization = "",
    postalCode = "",
    street = "",
    homePhone = "",
    homeFax = "",
    email?: string,
    url = "",
    note = ""
  ): string => {
    const vCardsJS = require("vcards-js");
    const vCard = vCardsJS();

    vCard.firstName = firstName;
    vCard.lastName = lastName;
    vCard.organization = organization;
    vCard.homeAddress.postalCode = postalCode;
    vCard.homeAddress.street = street;
    vCard.homePhone = homePhone;
    vCard.homeFax = homeFax;
    vCard.email = email;
    vCard.url = url;
    vCard.note = note;

    return vCard.getFormattedString();
  };

  const handleClick = (vcfText: string) => {
    const element = document.createElement("a");
    const file = new Blob([vcfText], { type: "text/vcard;charset=utf-8" });
    element.href = URL.createObjectURL(file);
    element.download = "myFile.vcf";
    document.body.appendChild(element);
    element.click();
  };
  return (
    <button 
      type="button"
      onClick={() =>
            handleClick(
              CreateVCard(
                "山田",
                "太郎",
                "WEBエンジニア",
                "999-9999",
                "バーリント西区公園通り128",
                "99-9999-9999",
                "00-0000-0000",
                "hoge@xxx.xx",
                "https://xxxxx.xxxxxx",
                "架空の人物です。"
              )
            )
          }
     >ダウンロード</button>
  )
}

以上で完成なのですがこのままだと下記エラーが出ます。

Module not found: Can't resolve 'fs'

対処法として、next.config.jsに以下を追加してください。

webpack: (config) => {
  config.resolve.fallback = { fs: false };
  return config;
},

これでエラーが無くなり、無事vcfファイルがダウンロードされると思います。

詳しくはドキュメントをチェックしてください。
https://github.com/enesser/vCards-JS

• Next.jsで構築したサイトにGoogleアナリティクスを導入したい方。
• または、その方法がわからない方。

書かないこと

トラッキングID・gtagの取得の仕方(取得した前提で話を進めます。)

環境

• next: 14.0.4
• react: ^18
• typescript: ^5

導入していく

• トラッキングID・gtagを環境変数で持っておく

// .env.local
NEXT_PUBLIC_GOOGLE_ANALYTICS_ID="G-****************************"

• ibs/gtag.tsを作成する

export const GA_TAG_ID = process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID || "";

export const IS_GATAG = GA_TAG_ID !== "";

export const pageview = (path: string) => {
  window.gtag("config", GA_TAG_ID, {
    page_path: path,
  });
};

window.gtag("config", GA_TAG_ID, {
  page_path: path,
});

上記の箇所に目見線が出ていると思うので下記コマンドで型をインストールします。

$ npm i -D @types/gtag.js

• GoogleAnalyticsコンポーネントの作成

// components/GoogleAnalytics.tsx 
"use client";

import { usePathname, useSearchParams } from "next/navigation";
import Script from "next/script";
import { useEffect } from "react";
import { IS_GATAG, GA_TAG_ID, pageview } from "@/libs/gtag";

const GoogleAnalytics = () => {
  const pathname = usePathname();
  const searchParams = useSearchParams();

  useEffect(() => {
    if (!IS_GATAG) {
      return;
    }
    const url = pathname + searchParams.toString();
    pageview(url);
  }, [pathname, searchParams]);

  return (
    <>
      <Script
        strategy="lazyOnload"
        src={`https://www.googletagmanager.com/gtag/js?id=${GA_TAG_ID}`}
      />
      <Script id="gtag-init" strategy="afterInteractive">
        {`
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', '${GA_TAG_ID}', {
            page_path: window.location.pathname,
          });
        `}
      </Script>
    </>
  );
};

export default GoogleAnalytics;

• layout.tsxでGoogleAnalyticsコンポーネントを読み込む

// layout.tsx

import { Inter } from "next/font/google";
import "./globals.css";
import GoogleAnalytics from "@/components/GoogleAnalytics";
import { Suspense } from "react";
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ja" className="scroll-smooth">
      <head>
        <Suspense fallback={null}>
          <GoogleAnalytics />
        </Suspense>
      </head>
      <body className={inter.className}>
        {children}
      </body>
    </html>
  );
}

ここで少し注意が必要なんですけど、Next.jsでApp Routerを使用するときにuseSearchParams()を使用すると、Entire page deopted into client-side renderingというエラーが出てしまいます。
https://nextjs.org/docs/messages/deopted-into-client-rendering

その対処方法として、useSearchParams()を使用しているコンポーネント(今回の場合、GoogleAnalytics.tsx)に<Suspence />でラップしてやるとエラーが無くなります。

以上でGoogleアナリティクスを導入できました。

• Next.js : 14.0.3
• React : 18.0.0

対象者

• Chakra UIって何？美味しいの？って状態の方。
• Chakra UIを使ったことがない方。
• Chakra UIを使ってみたい方。

インストール

Chakra UIを使うためのモジュール群をインストールします。

$ npm i @chakra-ui/react @chakra-ui/next-js @emotion/react @emotion/styled framer-motion

Chakra UIはemotionとframer-motionに依存しているっぽいのでこれらも併せてインストールします。

準備

Chakra UIを使うためには、最も階層が上位（この場合、app/layout.tsx）に<ChakraProvider /> を設置する必要があります。必ずChakra UIを利用する際にはこのProviderを設定するようにしてください。

// app/layout.tsx
・・・
import { ChakraProvider } from "@chakra-ui/react"; // 追加
・・・

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <ChakraProvider>{children}</ChakraProvider> {/* <ChakraProvider />でラップする。 */}
      </body>
    </html>
  );
}

ここまでくると、Chakra UIが使えますので実際に使っていきたいと思います。

// app/page.tsx
import { Heading } from "@chakra-ui/react";

export default function Home() {
  return (
    <Heading color={"red"} fontSize={"64px"}>
      Next.js × Chakra UI
    </Heading>
  )
}

ちなみに、ブラウザ上では<h2>でレンダリングされます。

基本となるスタイルの付け方

Chakra UIでは、styled-systemを基礎としている部分があるという特徴があるので、コンポーネントのpropsに直接style属性を記述することでスタイリングします。

<Box
  width={"100px"}
  height={"100px"}
  backgroundColor={"blue"}
  borderRadius={"50%"}
  padding={"8px"}
  margin={"8px"}
></Box>

スタイルのショートハンドラ

styleの値にはさまざまなショートハンドラが用意されています。padding ならp、margin ならmです。

<Box
  w={"100px"}
  h={"100px"} 
  bgColor={"blue"}
  rounded={"50%"}
  p={"8px"} 
  m={"8px"}
></Box>

また、縦方向・横方向をまとめて指定するpy(padding-top/padding-bottom)・px(padding-left/padding-right) 、my(margin-top/margin-bottom)・mx(margin-left/margin-right) ことができます。

<Box px={"10px"} my={"10px"}>・・・</Box>

何だかこの辺りはTailwindCSSに近しい感じがしますね。

Theme

Chakra UIにも他のUIライブラリみたいにTheme機能があります。ここでは、デフォルトのTheme機能について解説します。
https://chakra-ui.com/docs/styled-system/theme

色のThemeの使い方

色のThemeに関しては色.50、100~900 のような指定で、50と100〜900の100刻みで計10段階あり、50が一番薄く900が一番濃いと言う感じです。https://chakra-ui.com/docs/styled-system/theme#colors

<Box backgroundColor={"red.50"} borderColor={"blue.200"} color={"yellow.800"}>・・・</Box>

サイズ関連の使い方

• font-size、letter-spacingなどのフォント系

https://chakra-ui.com/docs/styled-system/theme#typography

// 7xl = 72px
<Heading fontSize={"7xl"}>
  Next.js × Chakra UI
</Heading>

• margin、padding

https://chakra-ui.com/docs/styled-system/theme#spacing

// 2=0.5rem=8pxのpaddingが付く。
<Box p={2}>・・・</Box>

// そのまま2pxのpaddingが付く。
<Box p={"2px"}>・・・</Box>

• width、height

https://chakra-ui.com/docs/styled-system/theme#sizes

<Box 
  w={"full"} // full=100%
  h={100} // 1=1pxなので、100=100px
>・・・</Box>

レスポンシブ

propsの値に配列またはオブジェクトを渡すだけでレスポンシブすることができます。
https://chakra-ui.com/docs/styled-system/responsive-styles#the-object-syntax

<Box bg={["red.500", "yellow.500", "green.500", "blue.500"]} >
  ・・・
</Box>

このように、配列を渡すことでレスポンシブを指定することができます。
配列を渡した場合、左に書いた値がsmその右の値がmd、lgそして一番右の値がxlとなっています。

sm: "30em", // 480px 
md: "48em", // 768px
lg: "62em", // 992px
xl: "80em", // 1280px

https://chakra-ui.com/docs/styled-system/theme#breakpoints

また、以下のようにオブジェクトを使って表現することもできます。

<Box bg={{ base: "red.500", sm: "yellow.500", md: "green.500", lg: "blue.500" }} >
  ・・・
</Box>

疑似要素

疑似要素を指定する場合、_before 、_after のように指定します。

<Box _before={{ content: "", ・・・ }}　_after={{ content: "", ・・・ }}>・・・</Box>

hoverの時も同様に_hoverと指定します。

<Heading color={"red"} fontSize={"7xl"} _hover={{ color: "blue" }}>
  Next.js × Chakra UI
</Heading>

最後に

今回はChakra UIの基本的な使い方についてご紹介しました。
大体この辺りを押さえておくといいかんじにChakraライフを過ごせるのではないかと思います。他に足りない部分であったり応用的な使い方などについてはタイミングが合えば、また書きたいと思います。

とりあえず作ってみた。

detailsとsummaryといったタグを使うことにより簡単にアコーディオンを作ることができます。

<details class="accordion">
  <summary class="label">フロントエンドエンジニア</summary>
  ダミーテキストダミーテキストダミーテキストダミーテキスト
</details>
<details class="accordion">
  <summary class="label">バックエンドエンジニア</summary>
  ダミーテキストダミーテキストダミーテキストダミーテキスト
</details>
<details class="accordion">
  <summary class="label">デザイナー</summary>
  ダミーテキストダミーテキストダミーテキストダミーテキスト
</details>

応用編

では、応用編です。今回はCodeJumpさんの「【jQuery コーディング練習】番外編：アコーディオンメニューの練習」を参考にデザインを作っています。

<div class="wrapper">
  <h1 class="title">募集職種</h1>
  <details class="accordion">
    <summary class="label">1. フロントエンドエンジニア</summary>
    <dl class="detail">
      <dt>仕事内容</dt>
      <dd>テキストテキストテキストテキスト</dd>
      <dt>応募資格</dt>
      <dd>テキストテキストテキストテキスト</dd>
      <dt>必須スキル</dt>
      <dd>テキストテキストテキストテキスト</dd>
      <dt>給与</dt>
      <dd>XXX万～XXX万 (スキル・経験・実績により優遇)</dd>
      <dt>休日・休暇</dt>
      <dd>
        土日祝祭日、有給休暇、夏季休暇、年末年始休暇、産前産後休暇、育児休暇
      </dd>
      <dt>雇用形態</dt>
      <dd>正社員（試用期間3ヶ月）<br />業務委託</dd>
      <dt>勤務時間</dt>
      <dd>フレックスタイム</dd>
      <dt>勤務地</dt>
      <dd>東京</dd>
    </dl>
  </details>
  <details class="accordion">
    <summary class="label">2. バックエンドエンジニア</summary>
    <dl class="detail">
      <dt>仕事内容</dt>
      <dd>テキストテキストテキストテキスト</dd>
      <dt>応募資格</dt>
      <dd>テキストテキストテキストテキスト</dd>
      <dt>必須スキル</dt>
      <dd>テキストテキストテキストテキスト</dd>
      <dt>給与</dt>
      <dd>XXX万～XXX万 (スキル・経験・実績により優遇)</dd>
      <dt>休日・休暇</dt>
      <dd>
        土日祝祭日、有給休暇、夏季休暇、年末年始休暇、産前産後休暇、育児休暇
      </dd>
      <dt>雇用形態</dt>
      <dd>正社員（試用期間3ヶ月）<br />業務委託</dd>
      <dt>勤務時間</dt>
      <dd>フレックスタイム</dd>
      <dt>勤務地</dt>
      <dd>東京</dd>
    </dl>
  </details>
  <details class="accordion">
    <summary class="label">3. デザイナー</summary>
    <dl class="detail">
      <dt>仕事内容</dt>
      <dd>テキストテキストテキストテキスト</dd>
      <dt>応募資格</dt>
      <dd>テキストテキストテキストテキスト</dd>
      <dt>必須スキル</dt>
      <dd>テキストテキストテキストテキスト</dd>
      <dt>給与</dt>
      <dd>XXX万～XXX万 (スキル・経験・実績により優遇)</dd>
      <dt>休日・休暇</dt>
      <dd>
        土日祝祭日、有給休暇、夏季休暇、年末年始休暇、産前産後休暇、育児休暇
      </dd>
      <dt>雇用形態</dt>
      <dd>正社員（試用期間3ヶ月）<br />業務委託</dd>
      <dt>勤務時間</dt>
      <dd>フレックスタイム</dd>
      <dt>勤務地</dt>
      <dd>東京</dd>
    </dl>
  </details>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #addff2;
  color: #000;
}

.wrapper {
  max-width: 960px;
  padding: 0 20px;
  margin: 40px auto;
}

.title {
  font-size: 2rem;
  font-weight: normal;
  margin-bottom: 30px;
}

.accordion {
  border-top: solid 1px #000;
}

.accordion:last-child {
  border-bottom: solid 1px #000;
}

.accordion[open] {
  background-color: #5bbee5;
}

.accordion .label {
  list-style: none;
  cursor: pointer;
  font-size: 1.125rem;
  font-weight: bold;
  padding: 40px 30px;
  position: relative;
  transition: 0.5s;
}

.accordion .label::-webkit-details-marker {
  display: none;
}

.accordion .label:hover {
  background-color: #5bbee5;
}

.accordion .label::before,
.accordion .label::after {
  content: "";
  width: 20px;
  height: 1px;
  background: #000;
  position: absolute;
  top: 50%;
  right: 5%;
  transform: translateY(-50%);
}

.accordion .label::after {
  transform: translateY(-50%) rotate(90deg);
  transition: 0.5s;
}

.accordion[open] .label::after {
  transform: rotate(180deg);
}

.accordion .detail {
  border-top: solid 1px #ccc;
  padding: 32px 24px;
  display: flex;
  flex-wrap: wrap;
  background-color: #addff2;
}

.accordion .detail dt {
  padding-bottom: 32px;
  font-weight: bold;
  width: 20%;
}

.accordion .detail dd {
  padding-bottom: 32px;
  width: 80%;
}

解説

HTMLの方は最初の方に解説したので省略しますね。

デフォルトの三角形を消す

デフォルトで左についてある開閉式ができるやつです。
作成するデザインによってはそれが不要になる場合があります。

.accordion .label {
  list-style: none;
}

通常は上記の指定で消えてくれますが、Safariだけ-webkit-details-marker というCSSの擬似要素で三角形を表示しています。以下のように別途指定して三角形を消してやる必要があります。

.accordion .label::-webkit-details-marker {
  display: none;
}

ちなみにデフォルトではdisplay: list-item;が指定されています。

開閉状態のスタイルの切り替え

アコーディオンには開いている時、閉じている時があります。
開いている時のスタイルは「こう！」閉じている時のスタイルは「こう！」のように開閉状態を調べてスタイルを切り替える方法をここでは紹介します。

.accordion {
  /* アコーディオンが閉じている時 */
}

.accordion[open] {
  /* アコーディオンが開いている時 */
}

アコーディオンが開いているときはopen属性が付与され、閉じている時には付与されない為、上記のような指定の仕方になるわけです。

参考資料

• <details>:詳細折りたたみ要素 - MDN
• <summary>:概要明示要素 - MDN
• detailsとsummaryタグで作るアコーディオンUI - アニメーションのより良い実装方法

インストール

$ npm install swiper

雛形を作ってみる

とりあえず雛形を作ってみます。

import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";

function App() {
  return (
    <>
      <Swiper>
        <SwiperSlide>
          <img src="./img/mainvisual1.jpg" alt="" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="./img/mainvisual2.jpg" alt="" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="./img/mainvisual3.jpg" alt="" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="./img/mainvisual4.jpg" alt="" />
        </SwiperSlide>
      </Swiper>
    </>
  );
}

export default App;

簡単ですね。上記のように記述するとシンプルなスライダーができたと思います。でも今のままで使っていく場合はほぼないと思いますので次の章からナビゲーションやページネーションのつけ方や自動再生の設定の仕方などのオプションの設定方法についてみていきます。

オプション

オプションは基本的に<Swiper />に「props」で渡す形になります。
オプションにはそのまま使えるものや別途モジュールから読み込んできて使う2種類があることを覚えておいてください。

ナビゲーション

ナビーゲーションをつける方法をご紹介します。
これは、別途モジュールを読み込んで使うパターンのオプションです。

import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation } from "swiper/modules"; // 追加
import "swiper/css";
import "swiper/css/navigation"; // 追加

function App() {
  return (
    <>
      <Swiper
        modules={[Navigation]}  {/* 追加 */}
        navigation {/* 追加 */}
      >
        ・・・
      </Swiper>
    </>
  );
}

export default App;

ページネーション

ページネーションのつけ方について解説します。
こちらも別途モジュールを読み込んで使う方法です。

import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Pagination } from "swiper/modules"; // 修正
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination"; // 追加

function App() {
  return (
    <>
      <Swiper
        modules={[Navigation,Pagination]} {/* 修正 */}
        navigation
        pagination={{
          clickable: true {/* 追加({{ clickable: true }} ← クリック操作を可能にする) */}
        }}
      >
        ・・・
      </Swiper>
    </>
  );
}

export default App;

自動再生

自動再生もよく使うオプションなのですが、これも別途モジュールを読み込んでします。
今回は2秒ごとに自動再生するように設定しています。

import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Pagination, Autoplay } from "swiper/modules"; // 修正
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";

function App() {
  return (
    <>
      <Swiper
        modules={[Navigation,Pagination,Autoplay]} {/* 修正 */}
        navigation
        pagination={{ clickable: true }}
        autoplay={{
            delay: 2000　{/* 追加（{{ delay: 5000 }} ← デフォルト） */}
        }}
      >
        ・・・
      </Swiper>
    </>
  );
}

export default App;

このほかにもモジュールを読み込んで使っていくオプションはありますが数が膨大にあるため、個人的によく使うものを中心に書いてみました。その他のオプションに関してはご自分で調べてみてください。https://swiperjs.com/swiper-api#modules

ここからはモジュールの読み込みが必要なく使えるオプションで個人的によく使いそうなやつを紹介していきます。

ループ

スライドをループさせます。

return (
  <Swiper 
    loop={true}
  >
   ・・・
  </Swiper>
)

スピード

スライドスピードを変更したいときに使うオプションです。デフォルトの値は300

return (
  <Swiper 
    speed={500}
  >
   ・・・
  </Swiper>
)

画面に表示させる枚数の指定

return (
  <Swiper 
    slidesPerView={3}
  >
   ・・・
  </Swiper>
)

また、slidesPerViewには少数点数を指定でき、横にずれるスライドも実装できる。

return (
  <Swiper 
    slidesPerView={1.5}
    centeredSlides={true}
  >
   ・・・
  </Swiper>
)

また、slidesPerViewには「"auto"」も指定できCSSでサイズを調整したいときに使用します。

間隔を開ける

return (
  <Swiper 
    spaceBetween={50}
  >
   ・・・
  </Swiper>
)

CSSのmarginで間隔を開けるより、こちらが推奨されています。

ブレークポイント

デバイスの大きさによってslidesPerViewの値を変更したい時などに使います。

return (
  <Swiper 
     breakpoints={{
        {/* ウィンドウの幅が480px以上の場合 */}
        480: { slidesPerView: 2 },
        {/* ウィンドウの幅が1056px以上の場合 */}
        1056: { slidesPerView: 3 },
        ・・・
     }}
  >
   ・・・
  </Swiper>
)

以上が私が個人的によく使うオプションです。
何度も言うかもですがSwiperのオプションの数は膨大です。なので、今回はこの程度で止めておきたいと思います。もし、ほかにも気になる方はこちらをご覧ください。

まとめ

今回はReactでのSwiperの使い方についてのお話でしたが、Vueなどの各種フレームワーク用のコンポーネントも用意されています。
また機会があれば本ブログでもご紹介できればと思っています。
もちろんフレームワークではなくVanillaJSでも使えるので、是非スライダーを実装する際にはSwiperを使用してみてください。

https://watataku-blog.vercel.app/blog/9t4yqq-zq ← VanillaJSでの使い方を紹介した記事

対象者

• Swiperのデザインをカスタマイズしたい方。
• Swiperの基礎がある程度わかっている方。

「前へ、次へ」の矢印のデザインとページネーションのデザインを変更する方法

デフォルトで設定した「前へ、次へ」の矢印はしたの画像のような青色の矢印であったりページネーションです。

それを今回はしたの画像のようにCSSで変更してみたいと思います。

まずは「前へ、次へ」の矢印のデザインから変えていきます。

.swiper-button-prev::after,
.swiper-button-next::after {
  content: "";
}

上記のセレクタを弄るのですが、デフォルトでは.swiper-button-prev::afterにcontent: "prev"; 、.swiper-button-next::afterにcontent: "next"; が設定されていて、各青い矢印が表示されています。これをcontent: ""; で打ち消してやります。
打ち消した後に、各セレクタに矢印とかをCSSで記述していきます。

.swiper-button-prev::after,
.swiper-button-next::after {
  content: "";
}

.swiper-button-prev {
  width: 40px;
  height: 40px;
  background-color: #fff;
  cursor: pointer;
  opacity: 0.7;
  left: 0;
}

.swiper-button-prev::after {
  display: inline-block;
  vertical-align: middle;
  color: #000;
  line-height: 1;
  width: 14px;
  height: 14px;
  border: 4px solid currentColor;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  transform: translateX(23%) rotate(-135deg);
}

.swiper-button-next {
  width: 40px;
  height: 40px;
  background-color: #fff;
  cursor: pointer;
  opacity: 0.7;
  right: 0;
}

.swiper-button-next::after {
  display: inline-block;
  vertical-align: middle;
  color: #000;
  line-height: 1;
  width: 14px;
  height: 14px;
  border: 4px solid currentColor;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  transform: translateX(-20%) rotate(-315deg);
}

次にページネーションのデザインを変更していきます。
ページネーションのデザインを変更する場合は.swiper-pagination-bulletを触ります。

.swiper-pagination-bullet {
  background-color: #111;
  height: 6px;
  width: 6px;
  margin: 0 16px !important;
}

左右にはみ出すスライド

自分自身も執筆していて表現が正しいのか微妙なかんじですが下記の画像のようなデザインです。

new Swiper(".swiper", {
  loop: true,
  speed: 500,
  autoplay: {
    delay: 3500,
    disableOnInteraction: false,
  },
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  centeredSlides: true,
  slidesPerView: 1,
  breakpoints: {
    600: {
      slidesPerView: 1.6, 
      spaceBetween: 40,
    },
  },
});

左右にはみ出すスライドを実装するために重要になってくるプロパティはslidesPerViewです。
このプロパティは画面に何枚のスライドを表示させるかを指定するものでデフォルトの値は「1」です。
これを「1.6」などのように小数にすることで、複数スライドを表示かつスライドをはみ出させることができます。

もう一つ、重要なプロパティがあります。それがcenteredSlidesです。
このプロパティの値を「true」にすることでスライドが中央寄せで表示されるようになります。

あとはspaceBetweenでスライド間の余白を調整すれば完成です。
※CSSのmarginプロパティでスライド間を開けるより、こちらを使う方が推奨されています。

「前へ、次へ」の矢印、ページネーションを外に出す

「前へ、次へ」の矢印、ページネーションを外に出す場合まずはHTML構造を変更する必要があります。
通常のHTML構造では下記の通りです。

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="img/・・・" alt="" />
    </div>
    <div class="swiper-slide">
      <img src="img/・・・" alt="" />
    </div>
    <div class="swiper-slide">
      <img src="img/・・・" alt="" />
    </div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

これを以下のように作り替えます。

<div class="wrapper">
  <div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="img/・・・" alt="" />
      </div>
      <div class="swiper-slide">
        <img src="img/・・・" alt="" />
      </div>
      <div class="swiper-slide">
        <img src="img/・・・" alt="" />
      </div>
    </div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

.swiperをさらにdiv要素で囲み.swiper-pagination、.swiper-button-prev、.swiper-button-nextを.swiperと同じ階層に配置します。
.swiperには「overflow:hidden」がついており、これはswiperスライダにおいて外せないものなので、「前へ、次へ」の矢印、ページネーションのパーツを外に移動させたいからです。

HTML構造を書き換えたらCSSで位置を調整します。
ここで注意が必要なのですが必ず一番外側のdiv要素に「position: relative」を指定してください。

.wrapper {
  position: relative;
}

ここまで来たら後は各々適当に各々調整してください。

.swiper-button-prev {
  left: -10px;
}

.swiper-button-next {
  right: -10px;
}

.swiper-pagination {
  bottom: -30px !important;
}

まとめ

今回はSwiperのデザインを変更する方法をご紹介しました。
デフォルトの青のままのデザインだけでもいいのですが、Web制作の場面でほぼデフォルトの青のままのデザインで終わる場面はほぼないと思います。そんな場面でも自分でデザインをカスタマイズできるようになればSwiperがもっと使いやすくなるはずです。

この記事を読んで少しでも参考になれば幸いです。

$ npm install @vercel/og

※インストールした@vercel/ogのバージョンは0.5.6です。

import { ImageResponse } from "@vercel/og";

また、Next.js 13.3.0から@vercel/ogをインストールしなくても、Next.js APIのnext/serverからImageResponseをインポートできるようになり動的OGPを生成できるようになりました。

import { ImageResponse } from "next/server";

画像を生成してみる

// 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 = {
  runtime: 'experimental-edge',
}

export default function handler() {
  return new ImageResponse(
    (
      <div
        style={{
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          width: '100%',
          height: '100%',
          backgroundColor: 'white',
          fontSize: '128px',
        }}
      >
        Hello world!
      </div>
    ),
     {
      width: 1200,
      height: 600,
    }
  )
}

http://localhost:3000/api/ogにアクセスする。

あとは任意のページにmetaタグを挿入すればOGPが出来上がります。

import Head from 'next/head'

<Head>
  <title>タイトルです</title>
  <meta
    property="og:image"
    content="https//hogehoge.com/api/og"
  />
</Head>

動的にタイトルを挿入する

それでは、次に動的にタイトルを挿入し、動的なOGPっぽくしたいと思います。
結論としては、https://hogehoge.com/api/og?title=タイトルのようにクエリパラメータを使用して動的にタイトルを挿入します。

// pages/api/og.tsx
import { NextApiHandler } from "next";
import { ImageResponse } from "@vercel/og";

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

const handler: NextApiHandler = async (req) => {
  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(
    (
      <div
        style={{
          borderWidth: "36px",
          borderColor: "#5bbee5",
          backgroundColor: "white",
          width: "100%",
          height: "100%",
          display: "flex",
          textAlign: "center",
          alignItems: "center",
          justifyContent: "center",
          color: "black",
          position: "relative",
        }}
      >
        <h2
          style={{
            color: "black",
            fontSize: 64,
          }}
        >
          {title}
        </h2>
        <div
          style={{
            display: "flex",
            position: "absolute",
            width: "100%",
            bottom: 0,
            paddingRight: 32,
            justifyContent: "flex-end",
          }}
        >
          <h2
            style={{
              color: "black",
              fontSize: 40,
            }}
          >
            {postDate}
          </h2>
        </div>
      </div>
    ),
    {
      width: 1200,
      height: 600,
    }
  );
};

export default handler;

これでhttp://localhost:3000/api/og?title=Next.jsでSVGを表示する&postDate=2022年02月02日投稿にアクセスすると画像が表示されるはずですがされません。？？？？？？？

@vercel/ogではデフォルトで日本語での表示をサポートしているのですが、文字列に漢字が含まれているとsatori内でパースできずにエラーになってしまいます。

error - uncaughtException: Error [ERR_UNHANDLED_ERROR]: Unhandled error. (Error: Unsupported OpenType signature <htm
    at Object.parseBuffer [as parse] (webpack-internal:///(middleware)/./node_modules/@shuding/opentype.js/dist/opentype.module.js:11455:15)
    at vt.addFonts (webpack-internal:///(middleware)/./node_modules/satori/dist/index.wasm.js:18:19200)
    at gu (webpack-internal:///(middleware)/./node_modules/satori/dist/index.wasm.js:19:29617)
    at async Object.start (webpack-internal:///(middleware)/./node_modules/@vercel/og/dist/index.js:10:2912))

この問題は日本語フォントを適用することで解決できます。

カスタムフォントを適応させる

Google Fonsあたりから好きなフォントをダウンロードして下さい。
ダウンロードしたフォントファイルをpublic/に格納(※今回はpublic/font配下に格納しました。)し、以下のように書き換えて下さい。

// 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) => res.arrayBuffer());

const handler: NextApiHandler = async (req) => {
  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(
    (
      <div
        style={{
          borderWidth: "36px",
          borderColor: "#5bbee5",
          backgroundColor: "white",
          width: "100%",
          height: "100%",
          display: "flex",
          textAlign: "center",
          alignItems: "center",
          justifyContent: "center",
          color: "black",
          position: "relative",
        }}
      >
        <h2
          style={{
            color: "black",
            fontSize: 64,
            fontFamily: '"NotoSansJP"',
          }}
        >
          {title}
        </h2>
        <div
          style={{
            display: "flex",
            position: "absolute",
            width: "100%",
            bottom: 0,
            paddingRight: 32,
            justifyContent: "flex-end",
          }}
        >
          <h2
            style={{
              color: "black",
              fontSize: 40,
              fontFamily: '"NotoSansJP"',
            }}
          >
            {postDate}
          </h2>
        </div>
      </div>
    ),
    {
      width: 1200,
      height: 600,
      fonts: [
        {
          name: "NotoSansJP",
          data: fontNoto,
          style: "normal",
        },
      ],
    }
  );
};

export default handler;

これで、http://localhost:3000/api/og?title=Next.jsでSVGを表示する&postDate=2022年02月02日投稿
にアクセスすると上手く表示されるはずです。


ですが、vercelにデプロイする際エラーになりました。
vercelのhobbyプランではEdge関数は1MB以下ではならなければいけません。日本語フォントは重い・・・
フォントファイルはサブセット化し4.7MBから527KBに落としたのですがEdge関数の大きさは1.12MBでした。(筆者調べ)
他の日本語フォントを試したりしたのですがEdge関数の大きさは1MB以下になりませんでした。hobbyプラン以上のプラン変更も検討しましたがこのためだけにプランを変更するのは流石に厳しい・・・
だから諦めました。

@vercel/ogのバージョンによって漢字が含まれていてもエラーが出ないバージョンがありました。全て確認したわけではありませんですがバージョン0.0.19では漢字が含まれていてもエラーがでませんでした。文字列中に全角スペースがあったり、！や？のような全角の記号があるとsatori内でパースできずエラーになってしまうようです。ちなみに、なぜか。は大丈夫でした。
ですが、この方法ではvercelにはデプロイできましたが、vercelでは上手く動いてくれませんでした。

Next.js 13.3.0以上だと関係なかった

結論としてはこちらの方法を使って実装しました。Next.js13.3.0以上からnext/serverでできるようになりましたと冒頭で述べさせていただきました。

// pages/api/og.tsx
import { ImageResponse } from "next/server";
import { NextApiHandler } from "next";

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

const handler: NextApiHandler = async (req) => {
  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(
    (
      <div
        lang="ja-JP"
        style={{
          borderWidth: "36px",
          borderColor: "#5bbee5",
          backgroundColor: "white",
          width: "100%",
          height: "100%",
          display: "flex",
          textAlign: "center",
          alignItems: "center",
          justifyContent: "center",
          color: "black",
          position: "relative",
        }}
      >
        <h2
          style={{
            color: "black",
            fontSize: 64,
          }}
        >
          {title}
        </h2>
        <div
          style={{
            display: "flex",
            position: "absolute",
            width: "100%",
            bottom: 0,
            paddingRight: 32,
            justifyContent: "flex-end",
          }}
        >
          <h2
            style={{
              color: "black",
              fontSize: 40,
            }}
          >
            {postDate}
          </h2>
        </div>
      </div>
    ),
    {
      width: 1200,
      height: 600,
    }
  );
};

export default handler;

Next.js 13.3.0以上だとフォントファイルとか関係なく1MB以下に収めることができ無事vercelにデプロイすることができました。

元々このブログサイトはNext.js13では動いてなかったのでNext.js13にバージョンを上げたりとか、結構苦労しましたがその苦労に関してはまた別の機会にw
今思えば他のやり方があったのでは？と思う気持ちもあるのですが今回はこの辺りで失礼します。それでは良いNext.jsライフを〜！！

参照

• https://www.newt.so/docs/tutorials/nextjs-og-image-generation
• https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation
• https://nextjs.org/docs/app/api-reference/functions/image-response

• HTMLの<img>で表示する
• CSSのbackground-imageプロパティで表示する
• SVG内のコードをHTMLに埋め込む

上の二つの手段で表示した場合は、SVG内のスタイルをHTMLもしくはCSSで変更できません。
一方、最後に書いた手段を使えばスタイルを変更することができ、外部ファイルへのHTTPリクエスト回数を減らせることからもSVGはインラインで埋め込むことをお勧めします。

ただし、Next.js(React)内にSVG内のコードを埋め込むためにSVG内のコードをJSXに対応させるために修正しないといけません。この作業って意外とめんどくさいんですよねw
そこで、今回はSVGファイルをReactコンポーネントとして直接importできるようにしました。

SVGファイルをReactコンポーネントとして直接importできるように準備する

まずは@svgr/webpackというものをインストールします。

$ npm install @svgr/webpack

次に、next.config.jsに以下を記述して下さい。

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.module.rules.push({
      test: /\.svg$/,
      use: [
        {
          loader: "@svgr/webpack",
        },
      ],
    });
    return config;
  },
};

module.exports = nextConfig;

以上の設定を行うことによって、SVGファイルをReactコンポーネントとしてimportできるようになります。

TypeScriptを使っている場合

先ほどのnext.config.jsに以下を追加して下さい。

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.module.rules.push({
      test: /\.svg$/,
      use: [
        {
          loader: "@svgr/webpack",
        },
      ],
    });
    return config;
  },
   // -----------------------追加---------------------------
  images: {
    disableStaticImages: true,
  },
   // ---------------------------------------------------------
};

module.exports = nextConfig;

disableStaticImages: trueを設定することで、Next.jsでデフォルトで定義されている画像の型定義設定を無効にできます。
無効にすることで、次に行うSVGの型定義を有効化できます。
任意の場所にindex.d.tsを作成して下さい。SVGの型定義を行います。

declare module '*.svg' {
  const content: React.FC<React.SVGProps<SVGElement>>;
  export default content;
}

実際にSVGをReactコンポーネントとして読み込む

上記の設定が完了したら、実際にSVGをコンポーネントとして呼び出します。

import Icon from "../public/icon/icon.svg";

const IconViewComponent = () => {
  return <Icon />
}

export default IconViewComponent;

いい感じに表示できていると思います。

https://www.npmjs.com/package/@svgr/webpack

プロジェクトの作成

まずは下記コマンドを入力し、アプリの雛形を作成します。

$ npx create-next-app@latest

上記コマンド入力後、いくつか質問されるので答えていきましょう。

• このプロジェクトの名前はなんですか？

What is your project named? … 任意の名前

• このプロジェクトで TypeScript を使用しますか?

Would you like to use TypeScript with this project? … No / Yes

自分は「Yes」を選択しました。

• このプロジェクトで ESLint を使用しますか?

Would you like to use ESLint with this project? … No / Yes

自分は「Yes」を選択しました。

• このプロジェクトで Tailwind CSS を使用しますか?

Would you like to use Tailwind CSS with this project? … No / Yes

自分は「Yes」を選択しました。

• このプロジェクトで src/ を使用しますか?

Would you like to use `src/` directory with this project? … No / Yes

自分は「No」を選択しました。

• App Router を使用しますか (推奨)?

Use App Router (recommended)? … No / Yes

自分は「Yes」を選択しました。

• デフォルトのインポートエイリアスをカスタマイズしますか?

Would you like to customize the default import alias? … No / Yes

自分は「No」を選択しました。

全ての解答後以下のコマンドを入力後「ウェルカムページが表示されます」

$ npm run dev

App Routerについて

Next.js13の1番の目玉の新機能ではないでしょうか？ここではApp Router(app/)について解説します。

• ルーティング

今回肝となるファイルがpage.tsxです。雛形を作った段階ではapp/の直下にpage.tsxがあります。これによりルートにアクセスすると「ウェルカムページ」が表示されるわけです。
では、/aboutのページを作るにはどうすればいいのでしょうか？
app/about/page.tsx を作成するだけです。

// app/about/page.tsx

const About = () => {
  return <h1>Aboutページ</h1>;
};

export default About;

• データフェッチ

getStaticPropsや getServerSideProps は App Router では使えません。ではどうすればいいのかというと、代わりに Server Component(後述) で async/awaitを使用してデータを取得できます。また、データ取得時にはfetchAPIを使用します。(今回の作ったブログサイトではmicrocms-js-sdkを使用しています。)

fetch('https://...'); or fetch('https://...', { cache: 'force-cache' }); // キャッシュを利用するしてデータを取得する

fetch('https://...', { cache: 'no-store' }); // キャッシュを利用せずに常に新しいデータを取得する

fetch('https://...', { next: { revalidate: 10 } }); // キャッシュされたデータを一定の間隔で再検証する。リソースの有効期間 (秒)

• コンポーネント

コンポーネントはapp/に作っていきます。ただし、デフォルトではServer Componentになります。
Client Componentとして扱いたい場合、ファイルの最初の１行に"use client" と記述します。

ブログサイトのトップページの作成

以上を踏まえ、トップページを作成していきます。コンテンツ管理には「microCMS」を使っていきますので「microCMS」を使う準備をしていきましょう。

$ npm install --save microcms-js-sdk

※バージョンが2.5.0(2022/06/15時点)以上であることを確認すること。確認する理由は2.5.0以上でないとApp Routerに対応していないから(表現が正しいかどうかはわかりませんw)。詳しくは下記リンクから
https://blog.microcms.io/microcms-js-sdk-250/

※今回の記事データ新規でデータを作成するのがめんどくさかったので、既存のブログデータを使用しています。

// libs/client.js
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,
});

ブログ一覧を作成する

// app/page.tsx
import { client } from "../libs/client";
import type { Blog, BlogContents } from "../types/blog";
import Card from "./Card";

const getAllPosts = async (): Promise<Blog[]> => {
  const data: BlogContents = await client
    .get({
      customRequestInit: {
        next: {
          revalidate: 10,
        },
      },
      endpoint: "blog",
    })
    .catch((e) => {});

  // エラーハンドリングを行うことが推奨されている
  if (!data) {
    throw new Error("Failed to fetch articles");
  }

  return data.contents;
};
export default async function Home() {
  const blogs = await getAllPosts();
  return (
    <ul className="w-[1100px] tbpc:w-[95%] maxsp:w-[100%] min-h-[calc(100vh_-_170px)] m-auto flex flex-wrap justify-between maxsp:justify-center">
      {blogs.map((blog: Blog) => {
        return (
          <Card
            id={blog.id}
            thumbnail={blog.thumbnail.url}
            title={blog.title}
            tags={blog.tags}
            publishedAt={blog.publishedAt}
            key={blog.id}
          />
        );
      })}
    </ul>
  );
}

getAllPosts()でデータフェッチしています。

エラーハンドリング

サーバーコンポーネント内で例外がthrowされた場合app/error.tsxの内容が表示されます。

// app/error.tsx
"use client"; // Error components must be Client components
import { useEffect } from "react";

export default function Error({
  error,
  reset,
}: {
  error: Error;
  reset: () => void;
}) {
  useEffect(() => {
    console.error(error);
  }, [error]);

  return (
    <main className="relative flex justify-center items-center min-h-[calc(100vh_-_170px)]">
      <h2 className="text-4xl dark:text-white">予期せぬエラーが発生しました</h2>
      <div className="absolute bottom-3">
        <button onClick={() => reset()}>Try again</button>
      </div>
    </main>
  );
}

Errorコンポーネントは以下のpropsを受け取ります

• error : throwされた例外オブジェクト
• reset: 例外が発生したコンポーネントを再レンダリングするための関数

また、app/error.tsxはClient componentとして扱われるためuse clientをつけましょう。

Cardコンポーネントを作成する

先ほど、コンポーネントはapp/に作成すると説明しました。なので、app/Card.tsxを作成します。

// app/Card.tsx
import Link from "next/link";
import Image from "next/legacy/image";
import type { Tags } from "../../types/blog";

type Props = {
  id: string;
  thumbnail: string;
  title: string;
  tags: Tags[];
  publishedAt: string;
};

const Card = (props: Props) => {
  return (
    <li className="relative mb-2.5 mt-3.5 cursor-pointer  border w-[350px] h-[380px] tbpc:w-[30vw] tbpc:h-[310px] maxsp:w-[95%] border-black dark:border-white  hover:translate-x-0 hover:translate-y-1.5 bg-white dark:bg-black ">
      <Link href={`/blog/${props.id}`} passHref>
        <Image
          className="object-cover aspect-video w-full h-auto"
          src={props.thumbnail}
          unoptimized={true}
          width={350}
          height={200}
          alt={"サムネイル"}
        />

        <h2 className="pt-3 pr-3 pl-3 text-lg font-medium overflow-hidden webkit-line-clamp dark:text-white">
          {props.title}
        </h2>

        <ul className="flex flex-start flex-wrap mt-1">
          {props.tags.map((tag: Tags) => {
            return (
              <li
                key={tag.id}
                className="flex justify-center items-center p-0.5 border-solid border-2 ml-2 mb-2 border-[#5bbee5] dark:border-[#7388c0] dark:text-white"
              >
                {tag.tag_name}
              </li>
            );
          })}
        </ul>

        <time
          datatype={props.publishedAt}
          className="absolute bottom-[5px] right-[5px] dark:text-white"
        >
          {props.publishedAt}
        </time>
      </Link>
    </li>
  );
};
export default Card;

next/imageについて

今回の内容から少しずれちゃいますがNext.js13からnext/imageの仕様が変更されました。
詳しくは下記URLをご参照いただきたいのですが今回の話で言うとlayoutとobjectFitが廃止されました。
さらに、imgのラッパーがなくなりました。
具体的に、Next.js12以前でnext/imageを仕様すれば下記のようになっていました。

// Next.js 12未満
<div ... >
  <img ... />
</div>

// Next.js 12
<span ... >
  <img ... />
</span>

これが、Next.js13ではラッピングされなくなりました

<img ... / >

https://nextjs.org/docs/pages/api-reference/components/image

話を戻しますが、サンプルコードではnext/legacy/imageを使ってNext.js12以前のものを使っています。これを使うと、以前までのnext/imageを使うことができます。
ちなみにNext.js13のnext/imageを使ってサンプルの画像表示と同じように実装すると下記のように実装します。(抜粋)

import Image from "next/image";

<Image
  className="object-cover aspect-video w-full h-auto"
  src={props.thumbnail}
  unoptimized={true}
  width={350}
  height={200}
  alt={"サムネイル"}
/>

ブログサイトの個別ページを作る

ブログサイトの個別ページを作るためにはダイナミックルーティングとやらを使わないといけません。以前までならgetStaticPaths、
getServerSidePathsを使っていましたが、当然のことそんなものは使えません。
では、どうすればいいのか紹介していきます。

ファイルを作成する

以前まではpages/[slug].tsxみたいな感じで、ダイナミックルーティング用のファイルを作成していました。
今回のApp Routerではapp/[slug]/page.tsxとします。

export default function Page({ params }: { params: { slug: string } }) {
  return <h1>{params.slug}</h1>;
}

このように書くとparamsにパラメータが渡ってきます。

これを踏まえて今回のブログページを作っていきます。

// app/blog/[slug]/page.ts
import { client } from "../../../libs/client";
import type { Blog } from "../../../types/blog";

const getPost = async (slug: string): Promise<Blog> => {
  const blog: Blog = await client.get({
    customRequestInit: {
      next: {
        revalidate: 10,
      },
    },
    endpoint: "blog",
    contentId: slug,
  });
  // エラーハンドリングを行うことが推奨されている
  if (!blog) {
    throw new Error("Failed to fetch articles");
  }
  return blog;
};

export default async function Page({ params }: { params: { slug: string } }) {
  const blog = await getPost(params.slug);
  return <div dangerouslySetInnerHTML={{ __html: blog.body }} />;
}

export async function generateStaticParams() {
  const Limit = 999;
  const blogs: BlogContents = await getMicroCMSBlogs(Limit);

  return blogs.contents.map((blog: Blog) => ({
    slug: blog.id.toString(),
  }));
}

generateStaticParamsとは

Next.js側で用意されているもので、getStaticPathsの代わりに使うもの。(App Routerでは使えないので)
※この関数がなくても問題はないがSSGにはならない。

メタデータを仕込む

Metadata APIというもが存在し、そこにメタ情報を書いていきます。(layout.tsxのexport const metadata = {})

layout.tsxとは

app/layout.tsxはRoot Layoutと呼ばれ、すべてのページに適用されるレイアウトを定義します。
Next.jsでは、自動的に<html>や<body>タグを生成しないため、必ずapp/layout.tsxでこれらを定義する必要があります。

少し脱線しましたが、メタデータの設定方法を紹介していきます。

export const metadata = {
  title: {
    default: "サイトのタイトル",
    template: `%s | サイトのタイトル`, 
  },
  description: "サイトのディスクリプション",
  openGraph: {
    title: "og:title",
    description: "og:description",
    url: "og:url",
    siteName: "og:site_name",
    type: "og:type",
    images: "og:image",
  },
  twitter: {
    card: "twitter:card",
    title: "twitter:title",
    description: "twitter:description",
    images: "twitter:image:src",
  },
};

動的にメタデータを仕込む

genarateMetadata()と言うものが用意されています。
これを使用することで動的にメタデータというものを仕込むことができます。
今回のブログサイトの個別ページにメタデータを仕込みます。

// app/blog/[slug]/page.tsx
import { MetaData } from "next";
...

const getPost = async (slug: string): Promise<Blog> => {
  // 省略
};

export async function generateMetadata({
  params,
}: {
  params: { slug: string };
}): Promise<Metadata> {
  const blog = await getPost(params.slug);
  return {
    title: blog.title,
    description: blog.body,
    openGraph: {
      title: blog.title,
      description: blog.body,
      url: "http://localhost:3000/blog/" + blog.id,
      siteName: blog.title,
      type: "article",
      images: blog.thumbnail.url,
    },
    twitter: {
      card: "summary_large_image",
      title: blog.title,
      description: blog.body,
      images: blog.thumbnail.url,
    },
  };
}

export default async function Page({ params }: { params: { slug: string } }) {
  // 省略
}

これで個別のブログサイトごとに個別のメタ情報、個別のOGP画像を仕込むことができました。

ページング機能を実装する

最後にページング機能を実装します。
/blog/page/2みたいな感じで静的レンダリングしたいのでを生成したいので下記のようなコードになります。

// app/blog/page/[pageNo]/page.tsx
import { client } from "@/libs/client";
import Card from "@/app/Card";
import Pagination from "@/app/Pagination";
import { range } from "@/functions/function";

const PER_PAGE = 9; // １ページに表示するコンテンツ数

const getAllPosts = async (pageNo: number): Promise<BlogContents> => {
  const data = await client.get({
    customRequestInit: {
      next: {
        revalidate: 10,
      },
    },
    endpoint: "blog",
    queries: {
      limit:  PER_PAGE,
      offset: (pageNo - 1) * PER_PAGE
    },
  });
  // エラーハンドリングを行うことが推奨されている
  if (!data) {
    throw new Error("Failed to fetch articles");
  }
  return data;
};
export default async function Home({ params }: { params: { pageNo: string } }) {
  const pageNo = Number(params.pageNo);
  const blogs = await getAllPosts(pageNo);
  return (
    <>
      <ul className="w-[1100px] tbpc:w-[95%] maxsp:w-[100%] min-h-[calc(100vh_-_170px)] m-auto flex flex-wrap justify-between maxsp:justify-center">
      {blogs.map((blog: Blog) => {
          return (
            <Card
              id={blog.id}
              thumbnail={blog.thumbnail.url}
              title={blog.title}
              tags={blog.tags}
              publishedAt={blog.publishedAt}
              key={blog.id}
            />
          );
        })}
      </ul>
      {blogs.totalCount > PER_PAGE && (
        <Pagination totalCount={blogs.totalCount} />
      )}
    </>
  );
}

export async function generateStaticParams() {
  const blogs = awat client.get({
    customRequestInit: {
      next: {
        revalidate: 10,
      },
    },
    endpoint: "blog",
  });
  return range(1, Math.ceil(blogs.totalCount / PER_PAGE)).map((repo) => ({
    pageNo: repo.toString(),
  }));
}

次にページングのコンポーネントを見ていきます。

import Link from "next/link";
import { range } from "../functions/function";

type Props = {
  totalCount: number;
};
const Pagination = (props: Props) => {
  const PER_PAGE = 9;

  return (
    <div className="flex justify-center mt-4">
      {range(1, Math.ceil(props.totalCount / PER_PAGE)).map((number, index) => (
        <p key={index} className="text-center list-none">
            <Link
              href={`/page/${number}`}
              className="mx-0.5 w-[30px] h-[40px] flex justify-center items-center text-2xl p-[2.5%] rounded-md text-black bg-[#5bbee5] hover:bg-blue-800 hover:text-white dark:text-white dark:bg-[#7388c0] dark:hover:text-black dark:hover:bg-white"
            >
              {number}
            </Link>
        </p>
      ))}
    </div>
  );
};

export default Pagination;

ページング機能を実装するにあたってpage.tsx,Pagination.tsxの両方に出てくるrange()について紹介します。

このrange()は自身が作った関数になっていてページング機能を実装するにあたっての「キモ」となる関数です。

// functions/function.ts
export const range = (start: number, end: number) =>
  [...Array(end - start + 1)].map((_, i) => start + i);

Not Foundの設定

現時点では、4ページ目は存在しません。手動でブラウザの URL に/page/4にアクセスを行います。ですが、表示されるページにはブログの情報が含まれていないだけでエラーは表示されません。
ページが存在しない4ページ目にアクセスがあった場合には 404 ページを表示させるためにnext/navigationのNotFound関数を利用します。

// app/blog/page/[pageNo]/page.tsx
...
import { notFound } from "next/navigation"; // 追加

const PER_PAGE = 9;

const getAllPosts = async (pageNo: number): Promise<BlogContents> => {
  // 省略
};
export default async function Home({ params }: { params: { pageNo: string } }) {
  const pageNo = Number(params.pageNo);
  const blogs = await getAllPosts(pageNo);
  // ----------------------追加-------------------------
  if (blogs.contents.length == 0) {
    notFound();
  }
  // ----------------------追加-------------------------
  return (
    <>
      {/* 省略 */}
    </>
  );
}

export async function generateStaticParams() {
 // 省略
}

以上を追記することでページが存在しないページにアクセスがあったときは404ページに飛んでくれるようになります。

オリジナルのNot Foundページを作成する

Pages Routerを使用していた時には、pages/404.tsxに作成していましたが、App Routerではapp/not-found.tsxに作成します。

// app/not-found.tsx
import Link from "next/link";

export default function NotFound() {
  return (
    <section className="text-center min-h-[calc(100vh_-_170px)]">
      <h2 className="text-3xl font-bold mb-6 dark:text-white">
        <span className="text-red-700 tracking-[5px] text-9xl maxsp:text-8xl mb-4">
          404
        </span>
        <br />
        お探しのページは見つかりませんでした。
      </h2>
      <p className="text-xl mb-8 maxsp:text-base dark:text-white">
        あなたがアクセスしようとしたページは削除されたかURLが変更されているため、
        見つけることができません。
        <br />
        以下の理由が考えられます。
      </p>
      <ul className="p-5 mb-6 m-auto text-left border-4 border-gray-400 dark:border-gray-50 w-[55%] tbpc:w-[65%] maxsp:w-[85%] dark:text-white">
        <li className="list-disc ml-5 maxsp:text-xs">
          記事がまだ公開されていない。
        </li>
        <li className="list-disc ml-5 maxsp:text-xs">
          アクセスしようとしたファイルが存在しない。（ファイルの設置箇所を誤っている。）
        </li>
        <li className="list-disc ml-5 maxsp:text-xs">URLが間違っている。</li>
      </ul>
      <div className="w-[90%] text-right">
        <Link
          className=" text-blue-800 border-b-blue-800 dark:border-[#ff36ab] dark:text-[#ff36ab] hover:border-b ml-auto"
          href={"/"}
        >
          TOPへ戻る
        </Link>
      </div>
    </section>
  );
}

最後に今回の記事で作成したApp Routerを使用してのブログサイトのコードも下記リンクにおいておくのでよければご覧下さい。
https://github.com/watataku8911/watataku-blog-app-router

まだまだ自分もNext.js13についてキャッチアップ中でわかってないところだらけですがこれからどんどんとキャッチアップしていきたいです。それでは良い Next.js ライフを！

参考

https://nextjs.org/docs
https://blog.microcms.io/microcms-next-jamstack-blog/

用語解説

メモ化とは、計算結果を保持し、それを再利用する手法のことです。メモ化によって各コンポーネントで都度計算する必要がなくなるため、パフォーマンスの向上が期待できます。

コールバック関数とは、ある関数を呼び出すときに引数に指定する別の関数のこと。

Reactのレンダリングとは、コンポーネントの本体である関数を評価(実行)すること

Reactの再レンダリングの条件

まず前提知識として、Reactの再レンダリングの条件を見ていきます。

1. propsの変更
2. stateの変更
3. contextの変更
4. forceUpdate()を使用しての、強制的な再レンダリング
5. 親コンポーネントの再レンダリング

などが挙げられます。

useMemo

useMemoは値(関数の結果)を保持するためのhooksです。
何回やっても結果が同じ場合の値などをメモリに保存(メモ化)して、初回レンダリング以外に行われる際の再レンダリングでは高価な計算を避けることができます。
このhooksを使う事により、不要な再計算をスキップすることができ、パフォーマンスの向上が期待出来ます。

書き方

useMemo(() => { 重い処理 }, [依存配列]);

依存配列に指定した変数に変更がない場合、重い処理が実行されないようになる。ちなみに、依存配列の価を複数指定した場合はどちらか一方が変更されたら重い処理が実行される。
依存配列が空なら、何にも依存しないことから、初回1回のみ実行。つまり、依存関係が変わらない場合はキャッシュから値(関数の結果の値)を取ってきます。

使用例

import React, { useMemo } from "react";

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

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

  return (
    ・・・
  )
};

export default App;

このようにuseMemoを使う事により依存配列に指定しているaまたはbが変更されない限り、再レンダリングが行われてもsuperHevyProcess()が実行されなくなります。→ パフォーマンス向上が期待できる。
以下はuseMemoのBad Caseです。

import React, { useMemo } from "react";

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

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

  return (
    ・・・
  )
};

export default App;

useCallback

useCallBackでは関数(コールバック関数)をメモ化するhooksです。
このhooksを使う事により、関数の再生成を防ぐことができパフォーマンス向上が期待できます。

具体的には「親コンポーネントで作られた関数を子コンポーネント」に渡す際に使います。
子コンポーネントに渡さない関数は関数の再生成が行われないのでuseCallbackを使う必要がありません。

書き方

useCallback(() => { callbackFunction }, [依存配列]);

依存配列に指定した変数に変更がない場合、callbackFunctionが実行されないようになる。ちなみに、依存配列の価を複数指定した場合はどちらか一方が変更されたらcallbackFunctionが実行される。依存配列が変わらなければ、前回のcallbackFunctionを再利用する。
依存配列が空なら、コンポーネントがレンダリングされた時に関数が一度生成されますが、以降は同じ関数オブジェクトを再利用するため、再評価されることはありません。

使用例

import React, { useState, useCallback } from "react"

const App = () => {
  const [count, setCount] = useState<number>(0);

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

  return (
    <p>count:{ count }</p>
    <Button onClick={handleClick} />
  )
}

export default App;

import React, { FC } from "react"

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

export default Button;

このように親コンポーネント(App)で作った関数(handleClick)を子コンポーネント (Button)に渡すときに使います。

React.memo

React.memoはコンポーネントをメモ化したいときに使います。親コンポーネントから渡ってきたpropsが変更されていたら再レンダリングされ、変更がなければ再レンダリングしなくなります。

コンポーネント内で複雑な計算や大量のデータの処理を行っている場合や、プロパティが同一であるコンポーネントの再レンダリングを避けたい場合に使用されます。
また、前章で紹介させてもらったuseCallbackと一緒に使うことが推奨されています。
これらを一緒に使用することで、propsが変更された場合にのみ、新しい関数を生成して再レンダリングをトリガーすることができます。つまり、propsが変更されていない場合には、以前にキャッシュされた関数が使用され、不要な再レンダリングを回避できるということです。なので、必ずしも一緒に使わなければならないわけではありませんが、パフォーマンスの向上を目的とする場合は、一緒に使用することをおすすめします。

書き方

const MemoChild = React.memo(親コンポーネントからpropsを受け取る子コンポーネント)

使用例

import React, { FC } from "react"

type Props = {
  message: string
}
const MemoChild: FC<Props> = React.memo(({ message }) => {
  return <div>{message}</div>;
});
export default MemoChild;

このようにReact.memoを使うと、親コンポーネントから渡ってくるmessageに変化がなければMemoChildは再レンダリングしないとなります。

TIPS

Component definition is missing display name  react/display-name

上記のようなエラーが出る場合があります。
このエラーは、React.memoを使用している場合によく発生します。
React.memoを使用しているときにこのようなエラーが発生する場合、コンポーネントに名前を付けることで解決できます。名前を付ける方法は、以下のように行うことができます。

const MemoChild: FC<Props> = React.memo(({ message }) => {
  return <div>{message}</div>;
});

MemoChild.displayName = 'MemoChild';

ここで、displayNameプロパティを使用して、コンポーネントに表示名を指定しています。このようにすることで、React.memoでメモ化されたコンポーネントのエラーが解決されます。
また調べてみると他にも解決策があるそうだったのでこちらの記事を参考にしてみて下さい。
https://qiita.com/tkmd35/items/fb20e1eb36f84dcbc4a1

また、Next.js では、React.memo が無効になることはありませんが、Next.js が提供する最適化技術の一部が、React.memo が提供する効果と重複していることがあります。そのため、「Next.js で React.memo を使用することがあまり意味がない」場合があります。

Next.jsが提供するSSRやSSGなどの機能により、コンポーネントの初回レンダリング時に必要なデータやプロパティがすでにサーバーサイドで取得され、生成されたHTMLに含まれているため、クライアントサイドでの再レンダリング時には不要なデータの再取得が必要なくなります。これにより、コンポーネントの再レンダリングが高速化され、React.memoによるパフォーマンスの向上効果が相対的に小さくなる可能性があります。また、Next.jsのプリフェッチング機能により、事前に必要なデータやリソースを取得し、コンポーネントが必要になったときにすぐに利用できるようになるため、React.memoによる再レンダリングの最適化が不要になる場合もあります。
→元々、Next.jsはページプリレンダリングやコンポーネントレンダリングの最適化を提供しているため。
必ずしもReact.memoを使用する必要がない場合があるということです。ただし、コンポーネントが多くのプロップスを持ち、再レンダリングのオーバーヘッドが高い場合には、React.memoを使用することが依然として効果的であることがあります。

まとめ

これらを使うとパフォーマンスが最適化されますが逆に、「使いすぎたり適切に使わなかったりすればパフォーマンスが下がったりする」ので注意が必要です。
これらを使いこなしてReact初学者から中級者、上級者になりましょう。

ライブラリをインストール

動的にRSSフィードを実装をする上で簡単に実装できるライブラリがあるのでそれをインストールします。

$ npm install rss

また今回はtypescriptを使うので、合わせてこちらもインストールします。

$ npm install --save-dev @types/rss

getServerSidePropsで動的にRSSフィードを生成する

page/feed.tsxを作成する。

import React from "react";
import { GetServerSidePropsContext } from "next";
import generateFeed from "../functions/genalate-rss-feed";

export const getServerSideProps = async ({ res }: GetServerSidePropsContext) => {
  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 = () => null;
export default feed;

getServerSidePropsを使用してRSSデータを生成し、直接レスポンスを返すことで、余計なレイアウトやメタタグなどが混入しないようにします。Pageコンポーネント内でHTMLやXMLを返しても、_app.tsxや_document.tsxの中に埋め込まれるため、余計なレイアウトやメタタグなどが混じってしまう可能性があるため、直接レスポンスを返すことでそれを防ぎます。

getServerSidePropsの引数でresを受け取ることができ、HeaderにContent-TypeやCache-Controlを付けた上で、res.end(RSSフィードの中身)という形でレスポンスを返します。これにより、生成されたRSSデータが正しい形式でクライアントに返されるようになります。

RSSフィードを生成する

src/functions/genalate-rss-feed.tsを作成します。ここで先ほどインストールしたrssの登場です。

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<string> => {
  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) => {
  	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;

https://zenn.dev/catnose99/articles/c7754ba6e4adac

インストール

インストール方法は3種類あります。

• CDN

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"
/>

<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>

• NPMでインストール

$ npm install swiper

また、typescriptをお使いの方は以下のコマンドも叩いてください。

$ npm install --save-dev @types/swiper

もう一つ、ファイルをダウンロードして使用する方法もあるのですが今回は割愛とします。興味のある方はご自身でお調べになってください。

Swiperを扱う

では、インストールが完了できたと思うので早速Swiperを使ったスライダーを作っていきましょう。
まずはHTMLです。

<!DOCTYPE html>
<html lang="ja">
 
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Swiper</title>

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

</head>
 
<body>
  <div class="swiper">
   <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img
        src="・・・"
        alt=""
       />
      </div>
      <div class="swiper-slide">
       <img
         src="・・・"
         alt=""
      />
      </div>
      <div class="swiper-slide">
        <img
          src="・・・"
          alt=""
        />
      </div>
    </div>
  </div>
  <!-- CDNを使う場合のみ記述 -->
　　<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
</body>
</html>

こちらが基本の作りです。
.swiper .swiper-wrapper .swiper-slide の3つは必須です。

.swiper-wrapper と .swiper-slide の間に「他の要素を割り込ませたりするとうまく動かなくなる」のでご注意ください。

次にJavaScriptの記述です。

// npmでインストールした場合のみ記述
import Swiper　from "swiper";
import "swiper/swiper-bundle.css";
// -----------------------------------------

const mySwiper = new Swiper('.swiper', {
  // この中にオプションを書いていく。
});

ここまで行うとスライダーが動き出します！

オプション

ここからオプションについて記述していくのですが数が膨大のため私がよく使うオプションだけを抜粋して書きます。

ページング

<div class="swiper">
 <div class="swiper-wrapper">
  <!-- 省略 -->    
 </div>
  <div class="swiper-pagination"></div><!-- 追加 -->
</div>

// npmでインストールした場合、以下の２行を記述しないといけないので注意
import  Swiper, { Pagination } from "swiper";
Swiper.use([Pagination]);
// ----------------------------------------------------

const mySwiper = new Swiper('.swiper', {
  pagination: {
    el: ".swiper-pagination",
    clickable: true, // クリックを可能にする
  },
});

前後の矢印

<div class="swiper">
 <div class="swiper-wrapper">
  <!-- 省略 -->    
 </div>
　　<div class="swiper-button-prev"></div><!-- 追加 -->
  <div class="swiper-button-next"></div><!-- 追加 -->
</div>

// npmでインストールした場合、以下の２行を記述しないといけないので注意
import  Swiper, { Navigation } from "swiper";
Swiper.use([Navigation]);
// ----------------------------------------------------

const mySwiper = new Swiper('.swiper', {
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});

スピード

スライドのスピードを設定できます。デフォルトでは300です。

const mySwiper = new Swiper('.swiper', {
  speed: 500
});

ループさせる

簡単です。下記コードをつけるだけです。

const mySwiper = new Swiper('.swiper', {
  loop: true
});

自動再生

デフォルトでは自動再生されないので、させたい場合はオプションを書く必要があります。

// npmでインストールした場合、以下の２行を記述しないといけないので注意
import  Swiper, { Autoplay } from "swiper";
Swiper.use([Autoplay]);
// ----------------------------------------------------

const mySwiper = new Swiper('.swiper', {
  autoplay: true,
});

パラメータを追記して細かい設定をすることも可能です。

const mySwiper = new Swiper('.swiper', {
  autoplay: {
    delay: 1500, // (デフォルトは3000)1.5秒後に次のスライド
    disableOnInteraction: false, // 矢印またはページネーションをクリックしても自動再生を止めない
  }
});

表示させるスライドの枚数を指定する

指定した枚数分がコンテナ内に収まるように調整される。

const mySwiper = new Swiper('.swiper', {
  slidesPerView: 3 // デフォルトでは1
});

小数点以下の値も指定可能(2.8などの小数を指定すると左右にはみ出たスライダが実装できる)。
CSSでサイズ調整したい場合は‘auto’ を指定。

アクティブなスライドが中央に来るようにする

主に、slidesPreViewの値が小数を指定したときに使用します。

const mySwiper = new Swiper('.swiper', {
  centeredSlides: true,
  slidesPerView:  1.4
});

レスポンシブ

デバイスのサイズによってslidesPreViewの数を変えたいときなどに使います。

const mySwiper = new Swiper('.swiper', {
  breakpoints: {
    // デバイスが320px以上の時
    320: {
       slidesPerView:  1.4
    },
    // デバイスが640px以上の時
    640: {
       slidesPerView:  2.8
    }
  },
  slidesPerView:  1,
  centeredSlides: true
});

スライド感の余白を指定する

CSSで margin を付けるとスライドの位置がずれていくことがあるため、こちらで指定するのが推奨。

const mySwiper = new Swiper('.swiper', {
  spaceBetween: 40 // px
});

先ほども記載しましたが、ここに記載したオプションは本の一部で、僕自身がよく使うものだけ取り上げさせていただきました。なので、ご興味がある方は各自で調べてみてください。また、Jqueryに依存せず使えることやオプションが多くカスタマイズ性が豊かなポイントもグッドです。
皆さんもよければSwiperを使ってみてくださいね。

本題

https://tailwindcomponents.com/cheatsheet/
基本はこのサイトに書いてあるクラスを指定すればいいのですが、この中に無いものを指定したい時はどうすればいいかと言うのが本題です。

固定値

例えば<div>に width: 165pxを指定したくてもどこにもありません。

ではこう言う時はどうすればいいのでしょうか？

[]で固定値を指定する。
つまり、この場合で言うと下記のように指定します。

<div class="w-[165px]"></div>

calc()計算

Tailwind CSSでもcalc()も使えます。

<div class="h-[calc(100vh_-_80px)]"></div>

ミソは空白に_を入れること。
「Tailwind CSSでは空白には_を入れなければなりません。」
自分はそれを知らなくていつまで経ってもできませんでしたw

Google Fonts

font-familyもあります。
では、どのようにして上記以外のフォントを使えば良いのでしょうか？
その方法をこの章ではお伝えします。

今回はBad Scriptというフォントを使用してみます。
https://fonts.google.com/specimen/Bad+Script?query=bad

上記のサイトにアクセスし、下記を記述したファイルに@importを追加します。

@tailwind base;
@tailwind components;
@tailwind utilities;

次のステップです。
tailwind.config.jsを下記のように編集します。

module.exports = {
  theme: {
    extend: {
      // フォントを追加
      fontFamily: {
        badScript: ["Bad Script", "cursive"],
      },
  // ...

これで準備完了です。
ではこのフォントを実際に使ってみます。

<h1 class="font-badScript">TITLE</h1>

カスタムプロパティ

Tailwind CSS側が用意していないプロパティは自分で作成することができます。

例えば、文字列が2行を超えると・・・にするプロパティを作成します。
先ほどの

@tailwind base;
@tailwind components;
@tailwind utilities;

にとある構文を追加すれば、自分でプロパティを作成できます。

@layer utilities {
  .webkit-line-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

<p class="webkit-line-clamp">hogehogehoge・・・・・・・・・・・・・・・</p>

レスポンシブ

Tailwind CSSでは下記のブレークポイントは用意されています。(モバイルファースト)

今回は自分でブレイクポイントを作ります。

作り方はtailwind.config.jsを下記のように記載しブレークポイントを作成します。

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",
    },
  // ...

<div class="w-80 maxsp:w-full">BOX</div>

div {
  width: 320px;
}
@media screen and (max-width:768px) {
　　div {
    　　width: 100%;
　　}
}

Tailwind CSSで用意されているレスポンシブはモバイルファーストです。
自分はモバイルファーストのレスポンシブに慣れていないので今回PCファーストに書き換えました。
この機会にモバイルファーストのレスポンシブに慣れていかないとなぁw

以上が個人的に「この場合Tailwind CSSでどのように書けばいい」でした。

参考記事

• https://www.ibulog.com/posts/2021/08/tailwind-fixed-value
• https://qiita.com/dtakkiy/items/dd161e2646695b387277

追記(2023-04-30)

ダークモード

Tailwind CSSでダークモードを実装すればいいのでしょうか？

tailwind.config.jsの設定

Tailwind CSS でダークモードを有効化するためには、tailwind.config.js ファイルを修正します。

module.exports = {
 // 省略
  darkMode: // 'media' or 'class'
}

• media

media を指定した場合には、OS の設定に基づいてダークモードを適用するかどうか決定します。ただし、手動でダークモードとライトモードを切り替えることができません。
これにより、OS のダークモードの設定値はprefers-color-schemeによって取得されます。

• class

classを指定した場合、ユーザーによって手動でダークモードを切り替えられるようにするために指定します。設定すると、自身のルート要素に対して .darkクラスが付与されてます。付与される場合のみダークモードが適用されるという事になります。

<html class="dark">
  <body>
     <!-- ... -->
  </body>
</html>

また、.darkクラスを付与するかしないかはJavaScriptのお力になります。

<label class="relative inline-flex items-center cursor-pointer">
  <input  id="checkbox" type="checkbox" value="" class="sr-only peer">
  <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"></div>
  <span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">Toggle me</span>
</label>

<script>
const element = document.querySelector("#checkbox");
element.addEventListener("change", myfunc);

function myfunc() {
  if (element.checked) {
    document.documentElement.classList.add('dark')
    localStorage.theme = 'dark'
 } else {
   document.documentElement.classList.remove('dark')
     localStorage.theme = 'light'
 }
}
</script>

HTMLのスイッチの箇所は下記リンクのサンプルコードから拝借してきました。
https://flowbite.com/docs/forms/toggle/
では、最後に現在の状態がダークモードなのかを判別させるコードです。
公式サイトにいい感じのコードがありましたのでこちらも拝借です。

// On page load or when changing themes, best to add inline in `head` to avoid FOUC
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && 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')

https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually
ローカルストレージの theme の値を確認し、値が dark であった場合には、<html> タグに .darkクラスを付与します。
ローカルストレージに値が存在しない場合、window.matchMedia('(prefers-color-scheme: dark)').matches によって OS のダークモードの設定を確認します。

ダークモード時のスタイル

<section class="h-screen flex justufy-center items-center bg-gray-100 dark:bg-gray-800">
  <h1 class="text-3xl text-gray-800 dark:text-gray-100">こんにちは</h1>
</section>

このようにdark:を指定してダークモード時のスタイルを指定します。

追記(2022-05-20)

!important

以下のものTailwind CSSで実装したいときどうすればいいのか？

position: relative !important;

この!importantってどうすんねん？下記のようにすればいい。

!relative

!を頭につけるだけでした。

Astro

まず初めにAstroというフレームワークを知らない方のために軽く触れておきます。

https://astro.build/

Astroとは、ReactやVue.jsのようにコンポーネント指向で開発ができるUIフレームワークです。さらに、ウェブアプリではなくウェブサイトを作るために用意されたWebフレームワークであったり、React、Preact、Svelte、Vue、Solidなど様々なUIフレームワークを用いて開発できる特徴もあります。

そしてAstroを語る上でもう一つ欠かせないのがAstro Islandsです。
これも公式のドキュメントで説明されています。
https://docs.astro.build/en/concepts/islands/
簡単に解説すると、ページの各UIコンポーネントを別モノとして扱うことができます。
これによりコンポーネント間の優先度設定によるパフォーマンス調整やコンポーネント毎にUIフレームワークを変えられることがメリットとなっています。

Astroを採用した理由

• ウェブアプリではなくウェブサイトを作りたい
• コンポーネント指向で開発したい
• Typescriptで書きたい
• 勉強コストをできるだけ抑えたい
• Jamstack！！

などがありました。これらのことを考慮して今回マッチしたのが「Astro」でした。

プロジェクトのセットアップ

Node.jsはv16.12.0またはそれ以上のバージョンをインストールされている前提で、以下のコマンドでプロジェクトを作成します。

$ npm create astro@latest

コマンド入力後、プロジェクト名やTypescriptを使用するかなどを聞かれますのでいい感じに答える。
聞かれることは以下の通りです。

• プロジェクト名を指定

Where would you like to create your new project? … ./watataku-portforio

『watataku-portforio』という名前のプロジェクト名で作成したいので ./watataku-portforio と入力して次に進みます。

• テンプレートの指定

? Which template would you like to use? › - Use arrow-keys. Return to submit.
❯   Just the basics (recommended)
    Blog
    Portfolio
    Documentation Site
    Empty project

一番最初の『Just the basics (recommended)』の『基本のみ（推奨）』を選択します。

• 依存モジュールのインストール

? Would you like to install yarn dependencies? (recommended) › (Y/n)

『Y』をしていして依存モジュールのインストールを開始させます。

• Git リポジトリの初期化を実行

? Would you like to initialize a new git repository? (optional) › (Y/n)

Gitリポジトリの初期化をしたいので『Y』を入力して次に進みます。

• TypeScriptの設定

? How would you like to setup TypeScript? › - Use arrow-keys. Return to submit.
❯   Relaxed
    Strict (recommended)
    Strictest
    I prefer not to use TypeScript

推奨となっている『Strict (recommended)』を選択します。

回答後、以下のコマンドで開発サーバを立ち上げ、http://localhost:3000にアクセスします。

$ cd ./watataku-portforio

$ npm run dev

Reactを追加する

以下のコマンドを叩けばReactを追加(使えるように)できます。

$ npx astro add react

 Resolving packages...


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


 ╭────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
 │ npm install @astrojs/react @types/react-dom@^18.0.6 @types/react@^18.0.21 react-dom@^18.0.0 react@^18.0.0  │
 ╰─────────────────────────────────────────────────────
? Continue? › (Y/n)

Y を指定します。

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

Y を指定します。
※今回はReactを追加しますがVue.jsやSvelteなども追加できます。詳しくはドキュメントをご覧ください。
https://docs.astro.build/ja/guides/integrations-guide/

microCMSの準備

今回のサイトでのコンテンツ管理には「microCMS」と言うHedress CMSを使っています。
https://microcms.io/
microCMSのアクセス方法や設定方法などは今回説明しないので自身でドキュメント等などでご覧ください。

この辺りを参考にしてみると良いかもです。
https://blog.microcms.io/astro-microcms-introduction

ポートフォリオに取り入れた機能

• 慣性スクロール

https://www.weblio.jp/content/慣性スクロール
ぬるっと動く気持ちのいいスクロールですねw個人的にこのスクロール方式が好きなので、実装してみたいと思い実装しました。

今回は「ASScroll」と言うライブラリのお力をお借りして実装しました。
https://github.com/ashthornton/asscroll
導入方法は簡単です。
まず最初にライブラリをインストールします。

$ npm install --save @ashthornton/asscroll

次に下記Javascriptのコードを書いてあげます。

import ASScroll from "@ashthornton/asscroll";

const asscroll = new ASScroll();
window.addEventListener("load", () => {
  	asscroll.enable();
});

あとは慣性スクロールしたいところに<div asscroll-container>で囲むだけ。

<div asscroll-container>
	 <main>
	       <!-- The Y translation will be applied to this element -->
     </main>
</div>

• ダークモード

こちらで詳しく記載しております。
https://watataku-blog.vercel.app/blog/tb7epr3_-z
ちなみにダークモードで見た際のサイト(ライトモードはサムネイル)

• ページング

Astroではページング機能を簡単に実装できる関数があるので、それを今回使用させていただきました。
その関数がpaginate()です。早速ページングの実装方法を見ていきましょう。

./page/[...page].astroを作成し下記のようにpagenate()を使用します。

// ---　
import type { Page, GetStaticPathsOptions } from "astro";

type Props = {
  page: Page<Contents>;
};

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 });
}
// ---

getStaticPaths() 関数の戻り値でpaginate()を返すだけです。
※コメントにしている「---」はハイラウトの都合上、わざと付けています。Astroを書く際は「---」をお忘れなくお願いします。

中身を見てみると、表示したいコンテンツを第 1 引数に、ページ内に表示したいコンテンツの数を第 2 引数に設定しておきます。
これでページングの設定が完了しましたのでテンプレートで使っていきましょう。

<div>
  {
    page.data.map((work: Contents) =>
      <!-- 以下略 -->
    ))
  }
</div>
{
　　page.total >= 6 && (
	<nav>
	    {/* page.currentPageで現在ページ、page.lastPageで総ページ数を表示 */}
	     <p>
	        page {page.currentPage}/{page.lastPage}
	     </p>
	     <ul>
	       　{/* page.url.prevがある場合は前ページへのリンクを表示 */}
	        {page.url.prev && (
	         　　<li>
	              <a href={page.url.prev}>PREV</a>
	            </li>
	         )}
	          {/* page.url.nextがある場合は次ページへのリンクを表示 */}
	          {page.url.next && (
	             <li>
	                <a href={page.url.next}>NEXT</a>
	             </li>
	           )}
	       </ul>
　　　　</nav>
　　)　
}

最後に

以上がAstroでポートフォリオサイトを作り直したと言うお話でした。
個人的にAstroとても書きやすくサクッと使える印象を受けました。また、他のUIフレームワークとも組み合わせて開発できるのも私としては嬉しいポイントでした。

みなさんもよければAstro使ってみてください

一昨年あたりからwebデザインにおいてもトレンドになったダークモード。
「目に優しい」などのさまざまな効果がありますが今回はデモのようなダークモードとライトモードを切り替えるスイッチャーを作りたいと思います。

スイッチを作る。

では、早速ダークモードとライトモードを切り替えるスイッチを作っていきます。
スイッチを作るためにはHTMLでチェックボックスを用意する必要があります。

<form action="#">
    <label class="switch">
      <input type="checkbox" class="checkbox"/>
      <span class="slider"></span>
    </label>
</form>

これだけでは普通のチェックボックスがひとつできあがるだけです。
なのでCSSを適応させます。

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: #33f321;
}

input:focus + .slider {
  box-shadow: 0 0 1px #33f321;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.slider {
  border-radius: 34px;
}

.slider:before {
  border-radius: 50%;
}

少し長いかもですがこれで切り替え用のスイッチができました。
ですが、このままでは何も変化しない普通のスイッチです。ですのでスイッチをオンにするとダークモードに切り替え、オフるとライトモードに切り替わるようにします。

JavaScript

まず、必要になってくるのは「今、スイッチがオンなのかオフなのか」の状態を知らなければいけません。
その情報をとってくるには下記コードで取得可能です。

const element = document.querySelector(".checkbox");
element.addEventListener("change", myfunc);

function myfunc() {
  if (element.checked) {
     console.log("スイッチがオンになりました。");
  } else {
     console.log("スイッチがオフになりました。");
  }
}

無事チェックボックス(スイッチ)の状態を取得することができました。

ダークモードにする

ではいよいよダークモードにします。
以下のコードでダークモードにできます。

document.documentElement.setAttribute("data-theme", "dark");

ちなみにダークモードを解除、即ちライトモードにする方法は下記コードです。

document.documentElement.removeAttribute("data-theme");

従ってスイッチがオンの時にダークモードにオフの時ライトモードにするには

const element = document.querySelector(".checkbox");
element.addEventListener("change", myfunc);

function myfunc() {
  if (element.checked) {
    document.documentElement.setAttribute("data-theme", "dark");
  } else {
    document.documentElement.removeAttribute("data-theme");
  }
}

これでスイッチがオンの時にダークモードにオフの時ライトモードに切り替わりましたがまだ何も変わりません。

最後にCSSでダークモードならこの色、ライトモードならこの色を適応させるようにすれば終わりです。

:root {
  --bgColor: #fff;
}

[data-theme="dark"] {
  --bgColor: #101010;
}

body {
  background-color: var(--bgColor);
}

これで完成!!

ログを確認しろ！！

当たり前ですが「ログを確認しろ！！」です。
ログにはエラーの原因が必ず書いています。(英語なので読む気が失せますが。。。)

自分の場合も遠回りしましたがログを見ました。
その内容がこれです。

[16:53:54.204] Cloning github.com/watataku8911/watataku-blog (Branch: develop_ver.14, Commit: 7200375) [16:53:54.952] Cloning completed: 748.213ms [16:53:55.338] No Build Cache available [16:53:55.375] Running "vercel build" [16:53:55.851] Vercel CLI 28.2.5 [16:53:56.135] Detected `package-lock.json` generated by npm 7+... [16:53:56.143] Installing dependencies... [16:54:20.016] [16:54:20.016] added 824 packages in 24s [16:54:20.017] [16:54:20.017] 133 packages are looking for funding [16:54:20.017] run `npm fund` for details [16:54:20.044] Detected Next.js version: 12.0.7 [16:54:20.052] Running "npm run build" [16:54:20.346] [16:54:20.347] > build [16:54:20.347] > next build [16:54:20.347] [16:54:22.229] Attention: Next.js now collects completely anonymous telemetry regarding usage. [16:54:22.230] This information is used to shape Next.js' roadmap and prioritize features. [16:54:22.230] You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL: [16:54:22.230] https://nextjs.org/telemetry [16:54:22.230] [16:54:22.245] Browserslist: caniuse-lite is outdated. Please run: [16:54:22.245] npx browserslist@latest --update-db [16:54:22.245] [16:54:22.245] Why you should do it regularly: [16:54:22.245] https://github.com/browserslist/browserslist#browsers-data-updating [16:54:22.286] info - Checking validity of types... [16:54:27.983] info - Creating an optimized production build... [16:54:28.045] > [PWA] Compile client (static) [16:54:28.045] > [PWA] Auto register service worker with: /vercel/path0/node_modules/next-pwa/register.js [16:54:28.046] > [PWA] Service worker: /vercel/path0/.next/sw.js [16:54:28.046] > [PWA] url: /sw.js [16:54:28.047] > [PWA] scope: / [16:54:28.214] Browserslist: caniuse-lite is outdated. Please run: [16:54:28.215] npx browserslist@latest --update-db [16:54:28.215] [16:54:28.215] Why you should do it regularly: [16:54:28.215] https://github.com/browserslist/browserslist#browsers-data-updating [16:54:28.238] > [PWA] Compile server [16:54:38.048] Failed to compile. [16:54:38.048] [16:54:38.048] Please check your GenerateSW plugin configuration: [16:54:38.048] [WebpackGenerateSW] 'pwa' property is not expected to be here. [16:54:38.048] [16:54:38.048] [16:54:38.048] > Build failed because of webpack errors [16:54:38.075] Error: Command "npm run build" exited with 1

見てるだけで吐き気を起こしてしまいます。
でも、よく見るとエラーの原因が書いてありました。

Browserslist: caniuse-lite is outdated. Please run: [16:54:28.215] npx browserslist@latest --update-db

Browserslist: caniuse-lite は古くなっています。npx browserslist@latest --update-dbを実行してください。

とりあえず指示通りに書きコマンドを実行しました。

$ npx browserslist@latest --update-db

実行後、デプロイできました。良かった良かったw

まとめ

ログを見ろ！！以上。さすれば解決できる。

参考文献

• アプリのビルド時にBrowserslistの更新を要求されるので対処してみる
• Browserslistをdbを更新しろというエラー

IntersectionObserverって？

IntersectionObserverとは、Intersection：交差　, Observer：観察者という意味があります。つまり、特定の要素が指定領域内に入ったかどうかを検知するAPIのことです。なので、スクロールイベント等を実装するときに使用するAPIです。
https://developer.mozilla.org/ja/docs/Web/API/IntersectionObserverAPI

IntersectionObserverの基本的な使い方

基本的には IntersectionObserver を呼び出して、第1引数に実行したい関数、第2引数にオプション設定を記述します

const options = {
  root: document.querySelector('#scrollArea'),
  rootMargin: '0px',
  threshold: [0.2, 1.0]
}
 
const observer = new IntersectionObserver(callback, options);

options オブジェクトは、以下のフィールドがあります:

root

ターゲットとなる要素が見えるかどうかを判定するためのベース部分を指定します。デフォルトはブラウザのビューポートです。

rootMargin

交差を計算する際は、実際は基準要素の領域にここで指定した余白値を足した領域が計算基準となる。つまり例えばここに正の値を指定すれば、実際に見える前に交差していると判定させることができる。デフォルトは 0px です。

threshold

関数を実行するタイミングを 0〜1 の間で記述します。コールバックを実行する交差の閾値リスト。交差の割合が閾値を上回るか下回ったときのみコールバック関数が実行される。[0, 0.5, 1] のように配列形式でも記述できます。上の例でいうと、見えている割合が20％および100％を上回るか下回ったときにコールバックが実行される。デフォルトでは0 です。

IntersectionObserverの設定

では、実際にIntersecftionObserverを設定し、要素の監視をしてみましょう。

// 交差を監視する要素の取得
const boxes = document.querySelectorAll(".box");

const options = {
  root: null, // 今回はビューポートをルート要素とする
  rootMargin: "-50% 0px", // ビューポートの中心を判定基準にする
  threshold: 0 // 閾値は0
};
const observer = new IntersectionObserver(doWhenIntersect, options);

// それぞれのboxを監視する
boxes.forEach(box => {
  observer.observe(box);
});

/**
 * 交差したときに呼び出す関数
 * @param entries
 */
function doWhenIntersect(entries) {
  entries.forEach(entry => {

    // --------------------- この構文が肝 ------------------------------
　　　 // 交差検知をしたもののなかで、isIntersectingがtrueのDOMにactiveクラスを付与。そうでなければ、activeクラスを取り除く
    if (entry.isIntersecting) {
      entry.target.classList.add("active");
    } else {
      entry.target.classList.remove("active");
    }
    // ---------------------------------------------------------------------

  });
}

.box {
  option: 0;
}
.box.active {
  option: 1;
}

最後までお読みいただきありがとうございました。
参考になれば幸いです

※閾値(しきいち)とは、境界となる値。

おはようございます。こんにちは。こんばんは。
Watatakuです。
今回の書いていく内容なんですけれども、タイトルから分かる通り仕様が変わっていました。
v8までを使用している方は以前の書き方で大丈夫なのですが、これから新規でfirebaseのプロジェクトを始めるときに書き方が変わりますというお話です。
その中でも今回はstorageをやっていきます。
storageはcloud storageと呼ばれ、Firebaseが提供している機能の一つで、写真や動画など、ユーザーが作成したコンテンツを保管、提供する必要のあるアプリ デベロッパー向けに構築されています。

以前はQiitaの方に書かせて頂いたのは仕様が変わる前の記事になっているので、仕様変更前と後の見比べに合わせてご覧ください。
https://qiita.com/watataku8911/items/7292a04590aad5b4dd19

画像をアップロードする

import { initializeApp } from "firebase/app";
import { getStorage, ref, uploadBytes  } 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 storage = getStorage(app);

// ファイルへの参照を作る。
const　imageRef = ref(storage, 'hogehoge.jpg');

// 'file' は Blob または File API から取得される。
uploadBytes(storageRef, file).then((snapshot) => {
  console.log('アップロードができました');
}).catch(() => {
  console.log('アップロードができませんでした');
});

「ファイルへの参照を作る」に関しては下記のように記述するとフォルダとファイルを作れるようになります。

const　imageRef = ref(storage, 'bowbow/hogehoge.jpg');

保存した画像の保存先URLを取得する

保存した画像の保存先URLを取得するメソッドはgetDownloadURL()を使用します。

import { initializeApp } from "firebase/app";
import { getStorage, ref, getDownloadURL } 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 storage = getStorage(app);

const　imageRef = ref(storage, 'hogehoge.jpg');
getDownloadURL(imageRef).then((downloadURL) => {
  console.log(downloadURL);
}).catch(() => {
  console.log("ダウンロードURLが取得せきませんでした");
});

この取得した、downloadURLをfirestoreなどに保存してやってください。

https://firebase.google.com/docs/storage/web/start?hl=ja

おはようございます。こんにちは。こんばんは。
Watatakuです。
今回の書いていく内容なんですけれども、タイトルから分かる通り仕様が変わっていました。
v8までを使用している方は以前の書き方で大丈夫なのですが、これから新規でfirebaseのプロジェクトを始めるときに書き方が変わりますというお話です。
その中でも今回はauthenticationをやっていきます。

以前はQiitaの方に書かせて頂いたのは仕様が変わる前の記事になっているので、仕様変更前と後の見比べに合わせてご覧ください。
https://qiita.com/watataku8911/items/9f134b44ead087abe68b

authentication

公式ページ

Firebaseが提供してくれているサービスの１つでFirebase Authentication を使用すると、ユーザーがアプリにログインする際に、
メールアドレスとパスワードのログイン、Google ログインや Facebook ログインなどのフェデレーション ID プロバイダなど、複数のログイン方法を使用できるようになります。

ユーザ登録

使用するメソッド

createUserWithEmailAndPassword(authインスタンス, "emailアドレス", "パスワード")

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) => {
  console.log('user created');
  console.log(userCredential)
})
.catch((error) => {
  alert(error.message)
  console.error(error)
}); 

ログイン

使用するメソッド

signInWithEmailAndPassword(authインスタンス, "emailアドレス", "パスワード")

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) => {
  console.log('ログイン成功=', user.user.uid)
})
.catch((error) => {
  console.error(error)
});

その他のログイン

• Googleログイン

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) => {
  console.log('Googleアカウントでログインしました。')
})
.catch((error) => {
  console.error(error)
});

• Facebookログイン

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) => {
  console.log('Facebookアカウントでログインしました。')
})
.catch((error) => {
  console.error(error)
});

• Twitterログイン

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) => {
  console.log('Twitterアカウントでログインしました。')
})
.catch((error) => {
  console.error(error)
});

• Githubログイン

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) => {
  console.log('Githubアカウントでログインしました。')
})
.catch((error) => {
  console.error(error)
});

サインアウト

使用するメソッド

signOut(authインスタンス)

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) => {
  console.log('ログアウトしました')
})
.catch((error) => {
  console.log(`ログアウト時にエラーが発生しました (${error})`);
});

現在ログインしているユーザーを取得する

使用するメソッド

onAuthStateChanged(authインスタンス, () => {})

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) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    const uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});

あとは、ドキュメントを見て。。。。

おはようございます。こんにちは。こんばんは。
Watatakuです。
今回の書いていく内容なんですけれども、タイトルから分かる通り仕様が変わっていました。
v8までを使用している方は以前の書き方で大丈夫なのですが、これから新規でfirebaseのプロジェクトを始めるときに書き方が変わりますというお話です。
その中でも今回はfirestoreをやっていきます。

firestore

公式ページ

• firebaseが提供しているNoSQLのデータベース。
• firebaseには同じくRealTimeDatabaseというものもありますが基本的にはfirestoreの仕様が推奨されている。

create

データの作成は、ドキュメントIDを指定する場合と指定せずに自動採番してもらう方法があります。
ID指定してドキュメントを作成する方法

import { initializeApp } from "firebase/app";
import { doc , setDoc , getFirestore } 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 db = getFirestore(app);
// データの書き込み＝通信を挟む＝非同期処理
await setDoc(doc(db,"users", "000"), {
  address: {
    prefecture: "沖縄",
    region: "沖縄",
  },
  age: 20,
  createdAt: "2020年11月10日 15:00:00 UTC+9",
  friends: ["003"],
  userName: "山田太郎",
});
await setDoc(doc(db,"users", "001"), {
  address: {
    prefecture: "北海道",
    region: "北海道",
  },
  age: 20,
  createdAt: "2020年11月8日 12:00:00 UTC+9",
  friends: [],
  userName: "小島三郎",
});
await setDoc(doc(db,"users", "002"), {
  address: {
    prefecture: "東京",
    region: "関東",
  },
  age: 19,
  createdAt: "2020年11月1日 9:14:00 UTC+9",
  friends: ["001"],
  userName: "山田花子",
});
await setDoc(doc(db,"users", "003"), {
  address: {
    prefecture: "大阪",
    region: "関西",
  },
  age: 50,
  createdAt: "2020年11月10日 15:00:00 UTC+9",
  friends: [""],
  userName: "山田花子",
});

[TIPS]

IDを指定せずに作るパターン

import { initializeApp } from "firebase/app";
import { collection , addDoc , getFirestore } 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 db = getFirestore(app);
const userReference = addDoc(collection(db, "users_sub"), {
  address: {
    prefecture: "名古屋",
    region: "中部",
  },
  age: 26,
  createdAt: "2021年1月3日 19:4:00 UTC+9",
  friends: ["004"],
  userName: "小一のしょういち",
});

createだけを見てみても前との書き方の差がありますね。

update

データの更新になります。

import { initializeApp } from "firebase/app";
import { doc. updateDoc, getFirestore } form "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 db = getFirestore(app);
const userRef = doc(db, "users" , "００３")
await updateDoc(userRef, {
  address: {
    prefecture: "群馬",
    region: "北関東",
  },
  age: 27,
  createdAt: "2022年12月2日 19:4:00 UTC+9",
  friends: ["001"],
  userName: "小五のしょうご",
});

delete

ドキュメントの削除についてです。

import { initializeApp } from "firebase/app";
import { doc , deleteDoc, getFirestore } 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 db = getFirestore(app);

// 匿名アカウントの情報を削除します
await deleteDoc(doc(db, "users" , "００3");

read

今のデータを見るとこうなっています。

// コレクション
users: {
  // ドキュメント
  "000": {
    // フィールド
    address: {
      prefecture: "沖縄",
      region: "沖縄",
    },
    age: 20,
    createdAt: "2020年11月10日 15:00:00 UTC+9",
    friends: ["003"],
    userName: "山田太郎",
  },
  "001": {
    address: {
      prefecture: "北海道",
      region: "北海道",
    },
    age: 29,
    createdAt: "2020年11月8日 12:00:00 UTC+9",
    friends: [],
    userName: "小島三郎",
  },
  "002": {
    address: {
      prefecture: "東京",
      region: "関東",
    },
    age: 19,
    createdAt: "2020年11月1日 9:14:00 UTC+9",
    friends: ["001"],
    userName: "山田花子",
  },
}

このデータを用いてクエリを投げていきます。

全件取得

import { initializeApp } from "firebase/app";
import {
  doc,
  getDocs,
  getFirestore
} 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 db = getFirestore(app);
const usersRef = doc(db, "users");

getDocs(usersRef).then(snapshot => {
  snapshot.forEach(doc => {
    console.log(`${doc.id}: ${doc.data().userName}`);
  })
})

上記の結果は以下の通り。

000:山田太郎
001:小島三郎
002: 山田花子

where

< : ~より小さい

• 未成年（20歳未満）のユーザを抽出

import { initializeApp } from "firebase/app";
import {
  collection,
  getDocs,
  getFirestore,
  query,
  where,
} 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 db = getFirestore(app);
const usersRef = collection(db, "users");

getDocs(query(usersRef, where("age", "<", 20))).then(snapshot => {
  snapshot.forEach(doc => {
    console.log(`${doc.id}: ${doc.data().userName}`);
  })
})

上記の結果は以下の通り。

002: 山田花子

<= ： 以下

• ユーザIDが001以下のユーザを抽出する

firebase.firestore.FieldPath.documentId()でドキュメントIDを参照できる

import { initializeApp } from "firebase/app";
import {
  collection,
  documentId,
  getDocs,
  getFirestore,
  query,
  where,
} 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 db = getFirestore(app);
const usersRef = collection(db, "users");

getDocs(query(usersRef, where(documentId(), "<=", "001"))).then(snapshot => {
  snapshot.forEach(doc => {
    console.log(`${doc.id}: ${doc.data().userName}`);
  })
})

上記の結果は以下の通り。

000: 山田太郎
001: 小島三郎

== ： 等しい

• 東京在住のユーザを抽出する

フィールド内のオブジェクトにあるプロパティはjsで参照するときと同様に、オブジェクト名.プロパティ名で参照できる

import { initializeApp } from "firebase/app";
import {
  collection,
  getDocs,
  getFirestore,
  query,
  where,
} 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 db = getFirestore(app);
const usersRef = collection(db, "users");

getDocs(query(usersRef, where("address.prefecture", "==", "東京"))).then(snapshot => {
  snapshot.forEach(doc => {
    console.log(`${doc.id}: ${doc.data().userName}`);
  })
})

上記の結果は以下の通り。

002: 山田花子

!= ： 等しくない

• 東京に住んでいないユーザを抽出

import { initializeApp } from "firebase/app";
import {
  collection,
  getDocs,
  getFirestore,
  query,
  where,
} 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 db = getFirestore(app);
const usersRef = collection(db, "users");

getDocs(query(usersRef, where("address.prefecture", "!=", "東京"))).then(snapshot => {
  snapshot.forEach(doc => {
    console.log(`${doc.id}: ${doc.data().userName}`);
  })
})

上記の結果は以下の通り。

000: 山田太郎
001: 小島三郎

>= ： ~以上

• 作成日が2020年11月9日以降のユーザを抽出

FirebaseのTimestamp型は、日付オブジェクトをクエリに利用できる。

import { initializeApp } from "firebase/app";
import {
  collection,
  getDocs,
  getFirestore,
  query,
  where,
} 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 db = getFirestore(app);
const usersRef = collection(db, "users");

// 2020年11月9日の日付インスタンスを生成
const targetDate = new Date("2020-11-09");

getDocs(query(usersRef, where("createdAt", ">=", targetDate))).then(snapshot => {
  snapshot.forEach(doc => {
    console.log(`${doc.id}: ${doc.data().userName}`);
  })
})

上記の結果は以下の通り。

000: 山田太郎

array-contains：配列内に、右辺の要素が含まれている

• ユーザID「003」がフレンドのユーザを抽出

import { initializeApp } from "firebase/app";
import {
  collection,
  getDocs,
  getFirestore,
  query,
  where,
} 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 db = getFirestore(app);
const usersRef = collection(db, "users");

getDocs(query(usersRef, where("friends", "array-contains", "003"))).then(snapshot => {
  snapshot.forEach(doc => {
    console.log(`${doc.id}: ${doc.data().userName}`);
  })
})

上記の結果は以下の通り。

000: 山田太郎

array-contains-any：配列内に、右辺の要素のいずれかが含まれている

• ユーザID「002, 003, 004」のいずれかがフレンドのユーザを抽出

import { initializeApp } from "firebase/app";
import {
  collection,
  getDocs,
  getFirestore,
  query,
  where,
} 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 db = getFirestore(app);
const usersRef = collection(db, "users");

getDocs(query(usersRef, where("friends", "array-contains-any", ["001", "002", "003"]))).then(snapshot => {
  snapshot.forEach(doc => {
    console.log(`${doc.id}: ${doc.data().userName}`);
  })
})

上記の結果は以下の通り。

000: 山田太郎

in：右辺のいずれかが含まれている

• ユーザ名が「山田太郎」もしくは「山田花子」を抽出

import { initializeApp } from "firebase/app";
import {
  collection,
  getDocs,
  getFirestore,
  query,
  where,
} 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 db = getFirestore(app);
const usersRef = collection(db, "users");

getDocs(query(usersRef, where("userName", "in", ["山田太郎", "山田花子"]))).then(snapshot => {
  snapshot.forEach(doc => {
    console.log(`${doc.id}: ${doc.data().userName}`);
  })
})

上記の結果は以下の通り。

000: 山田太郎
002: 山田花子

not-in：右辺のいずれも含まれない

• ユーザ名が「山田太郎」でも「山田花子」でもないユーザを抽出

import { initializeApp } from "firebase/app";
import {
  collection,
  getDocs,
  getFirestore,
  query,
  where,
} 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 db = getFirestore(app);
const usersRef = collection(db, "users");

getDocs(query(usersRef, where("userName", "not-in", ["山田太郎", "山田花子"]))).then(snapshot => {
  snapshot.forEach(doc => {
    console.log(`${doc.id}: ${doc.data().userName}`);
  })
})

上記の結果は以下の通り。

001: 小島三郎

複合クエリ ： AND

• 20代のユーザを抽出する

import { initializeApp } from "firebase/app";
import {
  collection,
  getDocs,
  getFirestore,
  query,
  where,
} 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 db = getFirestore(app);
const usersRef = collection(db, "users");

getDocs(query(usersRef, where("age", ">=", 20), where("age", "<=", 29))).then(snapshot => {
  snapshot.forEach(doc => {
    console.log(`${doc.id}: ${doc.data().userName}`);
  })
})

上記の結果は以下の通り。

000: 山田太郎
001: 小島三郎

orderBy

ソートはorderByで行う。orderBy("age")とすることで、ageで昇順ソート、orderBy("age", "desc")とすると、ageで降順ソートされる。

年齢を昇順で表示

import { initializeApp } from "firebase/app";
import {
  collection,
  getDocs,
  getFirestore,
  orderBy,
  query,
} 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 db = getFirestore(app);
const usersRef = collection(db, "users");

getDocs(query(usersRef, orderBy("age"))).then(snapshot => {
  snapshot.forEach(doc => {
    console.log(`${doc.id}: ${doc.data().userName}`);
  })
})

上記の結果は以下の通り。

山田花子, 19歳
山田太郎, 20歳
小島三郎, 29歳

年齢を降順で表示

import { initializeApp } from "firebase/app";
import {
  collection,
  getDocs,
  getFirestore,
  orderBy,
  query,
} 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 db = getFirestore(app);
const usersRef = collection(db, "users");

getDocs(query(usersRef, orderBy("age", "desc"))).then(snapshot => {
  snapshot.forEach(doc => {
    console.log(`${doc.id}: ${doc.data().userName}`);
  })
})

上記の結果は以下の通り

小島三郎, 29歳
山田太郎, 20歳
山田花子, 19歳

limit

最大表示件数の指定はlimit()で行う。limit(1)とすると最大1件分、limit(10)とすると最大10件分取得する

import { initializeApp } from "firebase/app";
import {
  collection,
  getDocs,
  getFirestore,
  limit,
  query,
} 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 db = getFirestore(app);
const usersRef = collection(db, "users");

getDocs(query(usersRef, limit(1))).then(snapshot => {
  snapshot.forEach(doc => {
    console.log(`${doc.id}: ${doc.data().userName}`);
  })
})

上記の結果は以下の通り。

山田太郎, 20歳

最後に

firebase本当に便利なので使って見てください。
この記事を見てみてfirebaseの設定がわからない方や以前の書き方ってどうだったんだろうと気になるかたは、
以前私がQiitaにまとめた記事がありますので良ければご覧ください。
https://qiita.com/watataku8911/items/ac040f4671c0f9a62bd4

また近いうちに「firebase storage」や「firebase authentication」について書きます。

おはようございます。こんにちは。こんばんは。
Watatakuです。
突然ですが、$ npx creat-react-app ができなくなりました。

$ npx create-react-app my-app
Need to install the following packages:
  create-react-app
Ok to proceed? (y) y

You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0).

We no longer support global installation of Create React App.

Please remove any global installs with one of the following commands:
- npm uninstall -g create-react-app
- yarn global remove create-react-app

The latest instructions for creating a new app can be found here:
https://create-react-app.dev/docs/getting-started/

は？

とりあえず、指示通りやる

$ npm uninstall -g create-react-app

up to date, audited 1 package in 237ms

found 0 vulnerabilities

無理。。。

ちょっと待て・・・！！

Need to install the following packages:
  create-react-app

あっ・・・
ちゃんとエラー見よな。。。

解決法

キャッシュクリアする。

$ npx clear-npx-cache

参考

npx create-react-app できない時

おはようございます。こんにちは。こんばんわ。
Watatakuです。
今回の書いていく内容は「Next.js における環境変数の基本的な設定方法」です。

env ファイルの基本的な使い方の参考になれば幸いです！

環境変数の基本的な設定方法

バージョン 9.4 以上の Next.js から、環境変数のサポートが組み込まれています。

環境変数を設定する基本的な方法は以下の通りです。

• 基本的には .env.local に環境変数を定義（詳細は後述）
• 設定した環境変数を呼び出すときは process.env.環境変数名 とする
• ブラウザで環境変数を使用したい場合は、先頭の文字を NEXT_PUBLIC_ とする

// .env
API_KEY=abcdefghijk

// pages/index.tsx
import { GetStaticProps } from 'next';

// サーバー側で実行
export const getStaticProps: GetStaticProps = async () => {
  console.log(process.env.API_KEY);
  ...
};

// クライアント側で実行
export default function Index(): JSX.Element {
  return (
    <>
      {process.env.API_KEY}
    </>
  );
}

Next.js では env ファイル名に応じて、開発 / 本番環境で切り替えることができます。具体的なルールは以下の通りです。

• .env：常に読み込み
• .env.development：開発環境
• .env.production：本番環境
• .env.local：常に読み込み
• .env.development.local：開発環境
• .env.production.local：本番環境

基本的にシークレットな値は .env*.local で定義を行い、.gitignore でリポジトリから除外します。
一方で、.env / .env.development / .env.production は、リポジトリに含めます。URL や企業名などデフォルト値などを定義するときに使いましょう。

参考文献

https://nextjs-ja-translation-docs.vercel.app/docs/basic-features/environment-variables
https://fwywd.com/tech/next-env

おはようございます。こんにちは。こんばんは。Watatakuです。
今回のお話はこのサイトに「目次をつけた」ってお話です。

目次をつけたいけどどうやってつけるかわからなかったのですが
調べると意外と簡単につけれたのでご紹介したいと思います。

必要パッケージのインストール

以下のパッケージをインストールしてください。

$ npm install cheerio

これは、データクロール用の非常に強力なJavaScriptライブラリです。

また、今回はTypescriptを扱うのでこちらの方もインストールします。

$ npm install --save @types/cheerio

目次を作る

インストールしたパッケージを読み込む。

import cheerio from "cheerio";

getstaticProps()内に以下のコードを追加してください。

export const getStaticProps = async (
  context: GetStaticPropsContext<{ id: string }>
) => {
  const data = await fetch( ・・・ ); // ブログデータ取得
  
// ---------------------------追加----------------------------------
  const $ = cheerio.load(data.body);　// data.bodyにはブログの記事情報が入っている。

  const headings = $("h1, h2, h3, h4, h5").toArray();

  const toc = headings.map((data: any) => ({
    text: data.children[0].data,
    id: data.attribs.id,
    name: data.name,
  }));
// ---------------------------追加----------------------------------


  return {
    props: {
      toc,
    },
  };
};

目次を表示する。

<ul id="lists">
  {toc.map((toc, index) => (
    <li id={"list" + toc.name} key={index}>
        <a href={"#" + toc.id}>{toc.text}</a>
    </li>
  ))}
</ul>

まとめ

以上。
意外と簡単にできましたね。
もし目次の付け方がわからない人はご参考に。

おはようございます。こんにちは。こんばんは。
Watatakuです。

今回の記事はこのブログにシンタックスハイライトをつけた話です。
では、やっていきます。

必要モジュールをインストールする

まずは下記コマンドで必要なモジュールをインストールします。

$ npm install highlight.js cheerio

typescriptをお使いの方は下記も一緒に。

$ npm install --save @types/highlightjs @types/cheerio

実装する

下記コードをgetStaticProps に追加してください。

import cheerio from "cheerio";
import hljs from "highlight.js";
import type {
  InferGetStaticPropsType,
  GetStaticPropsContext,
  NextPage,
} from "next";

type Props = InferGetStaticPropsType<typeof getStaticProps>;

export const getStaticProps = async (
  context: GetStaticPropsContext<{ id: string }>
) => {
  const data = await client.get({
    endpoint: "blog",
    contentId: context.params?.id,
  });

  const $ = cheerio.load(data.body); // data.body はブログの本文が入っていると思ってください

// ------------------------------------------ 追加 ------------------------------------------
  $("pre code").each((_, elm) => {
    const result = hljs.highlightAuto($(elm).text());
    $(elm).html(result.value);
    $(elm).addClass("hljs");
  });
// ------------------------------------------ 追加 ------------------------------------------
  return {
    props: {
      highlightedBody: $.html(),
    },
  };
};

const Detail: NextPage<Props> = ({ highlightedBody }) => {
    return (
        <div dangerouslySetInnerHTML={{ __html: highlightedBody }} />
    )
};
export default Detail;
 

なお、このページに、

import 'highlight.js/styles/hybrid.css';

を追加して、見た目を修正しています。
これで、このブログのようにソースコードのシンタックスハイライトが実現できました。

最後に

技術ブログを作るにあたり、シンタックスハイライトをつけたい方のご参考に
なればと思います。

• 参考
• 参考２

おはようございます。こんにちは。こんばんは。
Watatakuです。
今回の記事は題名にもなっていますが、公式ページからnode.jsをダウンロードするよりnodebrewでインストールしましょう
という記事になります。

その理由は、もちろん公式のサイトからnode.jsをダウンロードすれば簡単にお持ちのPC にインストールされますが、
node.jsのバージョンの管理がめちゃめちゃ大変になります。
経験を積んでいくとプロジェクトにより、node.jsのバージョンのハシゴをしないといけないこともあるでしょう。
公式サイトからダウンロードをしていればその度にnode.jsのダウンロード先に行ってインストーラを削除し、必要なバージョンを入れ直さなければなりません。めんどくさいですよね。
なので、nodebrew を使いましょうってことです。

ここからは実際にnodebrewの使い方からインストール方法を見ていきましょう。

インストール

nodebrewはHomebrewを使ってインストールします。
Homebrewのインストール方法はこちら
※nodebrewは別にHomebrewをインストールしなくてもいいのですが、
今後、Homebrewを扱う機会がいっぱいあると思うのでこの機会に。。。

もしHomebrewインストールしたくないよって方がいればこちらを

インストールが完了すれば下記コマンドを入力してください。

$ brew install nodebrew

インストールが完了すれば下記コマンドで確認を入力してください。

$ nodebrew -v

確認後、環境変数を追加します。
下記コマンドを入力します。

$ vi ~/.bash_profile

この中に下記を追加してください。

export PATH=$HOME/.nodebrew/current/bin:$PATH

追記後コロン + w + Enterを入力し、コロン + q + Enterを入力してください。
※場合によってはコロン + w or q + ! + Enter

入力後、下記コマンド類を入力しnodebrewのセットアップが完了です。
お疲れ様でした。

nodebrewを使ってnode.jsをインストールする。

インストールする前に下記コマンドを入力し、インストール可能なバージョンを確認しましょう。

$ nodebrew ls-remote

計り知れないバージョンがインストールできますね。

ver.17.0.0をインストールしてみましょう。

$ nodebrew install-binary v17.0.0

※　nodebrew installでインストールするとスゴイ時間がかかるので、上記のコマンドが良いらしい。

インストールされたかどうかの確認は下記コマンドで確認します。

$ nodebrew list or $ nodebrew ls

正確にいうとインストールされているバージョンの一覧です。
因みに、currentの値が現在使用しているnodeのバージョンです。

node.jsのバージョンの切り替え

下記コマンドでnode.jsのバージョンを切り替えます。

$ nodebrew use vバージョンNo

ex)v15.11.0に切り替える

$ nodebrew use v15.11.0

切り替え後、$ nodebrew ls を入力しcurrentの値が変わっていればOKです。
変わらなければ、過去に公式サイトからインストーラーをダウンロードしちゃっているので、そいつが悪さしています。
インストーラーを uninstall すれば大丈夫です。

まとめ

以上。node.jsのインストールにはnodebrewを使いましょうと言うお話でした。

おはようございます。こんにちは。こんばんは。
Watatakuです。
今回の記事はこのサイトをPWAにしたよと報告と
Next.jsでのPWAの仕方を書いていきます。

PWAとは

PWAはプログレッシブウェブアプリ(Progressive web apps)の略で、
ウェブアプリをネイティブアプリのように使えるようにする仕組みのことです。

実際にやっていく

以下のコマンドを用いて、next-pwaをインストールします。

$ npm install next-pwa

インストール後、next.config.jsに以下を記述。

const withPWA = require("next-pwa");

module.exports = withPWA({
  pwa: {
    dest: "public",
  },
});

PWA実装に必要なものは

• アイコン
• App Manifest（manifest.json）
• Service Worker

他にもWEBサイトのURLがhttpsでないといけないなど様々な条件があります。詳しくはこちら。

そこで便利なのがこちらの様々なファビコンを一括生成。favicon generator
こちらでアイコンとApp Manifestなどが作られるので、全てpublicディレクトリ
に格納してください。

格納後、manifest.jsonを編集します。
※下記マニフェストはこのサイトでのマニフェストです。

{
  "name": "Watataku's ブログ",
  "short_name": "ブログ",
  "description": "",
  "start_url": "/",
  "display": "standalone",
  "orientation": "any",
  "background_color": "#fff",
  "theme_color": "#fff",
  "icons": [
    {
      "src": "/android-chrome-36x36.png",
      "sizes": "36x36",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-48x48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

編集後、src/pagesディレクトリに_document.tsxを作成し、
以下のようにHeadのなかでアイコン、manifest.jsonなどを読み込んでいきます。

import Document, {
  Html,
  Head,
  Main,
  NextScript,
} from "next/document";

class MyDocument extends Document {
  render() {
    return (
      <Html lang="ja-JP" dir="ltr">
        <Head>
          {/* windows */}
          <meta
            name="msapplication-square70x70logo"
            content="/site-tile-70x70.png"
          />
          <meta
            name="msapplication-square150x150logo"
            content="/site-tile-150x150.png"
          />
          <meta
            name="msapplication-wide310x150logo"
            content="/site-tile-310x150.png"
          />
          <meta
            name="msapplication-square310x310logo"
            content="/site-tile-310x310.png"
          />
          <meta name="msapplication-TileColor" content="#000" />


          {/* safari */}
          <meta name="apple-mobile-web-app-capable" content="yes" />
          <meta name="apple-mobile-web-app-status-bar-style" content="#000" />
          <meta name="apple-mobile-web-app-title" content="myapp" />
          <link
            rel="apple-touch-icon"
            sizes="180x180"
            href="/apple-touch-icon-180x180.png"
          />
          {/* 一般 */}
          <meta name="application-name" content="myapp" />
          <meta name="theme-color" content="#000" />
          <link rel="icon" sizes="192x192" href="/icon-192x192.png" />
          <link rel="icon" href="/favicon.ico" />
          <link rel="manifest" href="/manifest.json" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

PWAの確認

localhostで開き、デベロッパーツールを見るとServiceWorkerが登録されていることがわかります。
一回読み込んでしまえば、オフラインにして再読み込みしてもちゃんと読み込まれます。これでオフラインで動作する事は確認はできました！

また、右上に以下のダウンロードボタンも確認できます。

追記(2022.01.27)

PWAになっていない問題。
この記事で解決できました。

追記(2023.06.11)

next-pwaの設定が方法が5.6から変わっていました。
下記のようにnext.config.jsを書き換えてください。出ないとエラりますw

 /** @type {import('next').NextConfig} */
const withPWA = require('next-pwa')({
  dest: 'public'
})

module.exports = withPWA({
  reactStrictMode: true
});

まとめ

以上がNext.jsでのPWAの仕方です。
もし、Next.jsのPWAの仕方がわからない方へのご参考になればと思います。

Next.jsのImageコンポーネントで画像が表示されない
事態が起こってしまったので、調べてみた。

本題

• 表示される例

ローカルに画像ファイルを持っている場合

const imagePath = "./image.png"

<Image
  src={imagePath}
  width={100}
  height={80}
  alt={"画像"}
/>

• 表示されない例

外部サーバに画像ファイルがある場合

const imagePath = "https://example.com/img/image.png"

<Image
  src={imagePath}
  width={100}
  height={80}
  alt={"画像"}
/>

解決方法

next.config.jsに以下を追記。

module.exports = {
  images: {
    domains: ["example.com"] // 画像ファイルがあるドメインを指定
  },
};

おはようございます。こんにちは。こんばんは。
Watatakuと申します。技術ブログを作りました。よろしくお願いします。

今流行りのJamstackという手法で開発しています。
ホスティングはVercelを使用しています。

初回の今回はこのブログのことを書いていきます。
ソースコード

環境

• React:17.0.2
• Next.js:v.12.0.7 (7/11日現在 : v.13.4.3)
• typescript:v4.5.4

このブログで書いていくこと

フロントエンドのことを中心にWeb（Jamatack）について書いていきます。

このブログを作成した目的

単純にブログを作りたかったからw
以上。

・・・ではなく、真面目に回答していくと上記の動機もありますが他に下記に記載の理由があります。

• 将来の自分の為の知識の貯蔵
• 自分と同じ問題にぶち当たっている人に対して、解決策を紹介したい
• 文章力向上の為

投稿頻度はさほど多くはないとは思いますがよろしくお願いします。