<p>以下の記事でFirebase v9にて初期化はできましたが、Firestoreでコレクションやドキュメントの追加、アップデート、削除などで書き方が変わっていました。<br><br><a href="https://www.mismith.me/blog/web/firebase-version9" target="_blank" rel="noopener noreferrer">https://www.mismith.me/blog/web/firebase-version9</a><br><br>ある程度書いたら書き方分かってきます。コレクションを取得するときは <code>collection</code>  、ドキュメントを取得するときは <code>doc</code>  、それぞれ追加や更新するときは <code>addDoc</code>  や <code>updateDoc</code>  、<code>deleteDoc</code>  を使います。<br></p><h2 id="h0733387e72">データの取得</h2><h3 id="h867ac3b084">コレクションリストの取得</h3><p>以下のように、初期化したfirestoreをimportし、collection以下の階層はコンマ区切りで指定していきます。</p><pre><code>import {
  getDocs,
  collection,
  query,
  orderBy,
  DocumentData,
} from 'firebase/firestore'
import { db } from '@/lib/firebase'

// 省略

const getData = async () =&gt; {
  const q = query(
    collection(firestore, 'users', user.uid, 'todo'),
    orderBy('createdAt', 'desc')
  )

  const querySnapshot = await getDocs(q)

  const reduceList = querySnapshot.docs.reduce(
    (acc: TodoItem[], doc: DocumentData) =&gt; [
      ...acc,
      {
        id: doc.id,
        title: doc.data().title,
        details: doc.data().details,
      },
    ],
    []
  )

  setData(reduceList)
}</code></pre><p><br></p><h3 id="hb4ff9e1638">ドキュメントの取得</h3><p>コレクションにぶら下がってるドキュメントの取得です。 <code>routerQuery</code>  は取得したいドキュメントのidを何かしらの方法で取得している前提です。個人的にはNext.jsを使ってるので、URLからidを取得したパターンで書いてます。</p><pre><code>import {
  getDoc,
  doc,
} from 'firebase/firestore'
import { db } from '@/lib/firebase'

// 省略

const getData = async () =&gt; {
  const docRef = doc(
    db,
    'users',
    user.uid,
    'todo',
    routerQuery.todoid
  )

  const querySnapshot = await getDoc(docRef)
  setData(querySnapshot.data())
}</code></pre><p><br></p><h2 id="h418415c78b">データの追加</h2><p>次はデータの追加です。ざっと以下のように書きます。Timestampを使いたい場合はfirestoreからimportします。</p><pre><code>import { addDoc, collection, Timestamp } from 'firebase/firestore'
import { db } from '@/lib/firebase'

// 省略

const addData = async (data: addData) =&gt; {
  const docRef = await addDoc(
    collection(db, 'users', user.uid, 'todo'),
    {
      title: data.title,
      details: data.details,
      createdAt: Timestamp.fromDate(dayjs(new Date()).toDate()),
    }
  )
  console.log(docRef.id)
}</code></pre><p><br></p><h2 id="h3063e90945">データの更新</h2><p>データの更新にはupdateとsetがあります。updateはデータがあれば上書きするだけなのに対し、setはデータがなければ作成し、データがあれば上書きします。場面に応じて使い分けましょう。<br>書き方に大差はないのですが、一応どちらも書いときます。</p><pre><code>import {
  updateDoc,
  setDoc,
  doc,
} from 'firebase/firestore'
import { db } from '@/lib/firebase'

// 省略
  
const updateData = async (data: FromValue) =&gt; {
  await updateDoc(
    doc(
      db,
      'users',
      user.uid,
      'todo',
      routerQuery.id
    ),
    {
      title: data.title,
      details: data.details,
    }
  )
}
  
const setData = async (data: FromValue) =&gt; {
  await setDoc(
    doc(
      db,
      'users',
      user.uid,
      'todo',
      routerQuery.id
    ),
    {
      title: data.title,
      details: data.details,
    }
  )
}</code></pre><p><br></p><h2 id="h8aad3887d6">データの削除</h2><p>もうここまでくれば何となくわかると思います。</p><pre><code>import {
  deleteDoc,
  doc,
} from 'firebase/firestore'

// 省略

const deleteData = async () =&gt; {
  await deleteDoc(
    doc(
      db,
      'users',
      user.uid,
      'todo',
      routerQueryid
    )
  )
}</code></pre><p><br></p><h2 id="h1afe451c43">さいごに</h2><p>最初は書いてて分からん状態でしたが、書き進めて慣れてくると理解できるし、むしろ前よりコードがスッキリしたかなと思います。<br></p><h2 id="h335a87b5ef">参考サイト</h2><p>その他詳しいことはドキュメントを見てください<br></p><ul><li><a style="color:#202124" href="https://firebase.google.com/docs/firestore/query-data/get-data?hl=ja" target="_blank" rel="noopener noreferrer">Cloud Firestore でデータを取得する</a></li><li><a style="color:#202124" href="https://firebase.google.cn/docs/firestore/manage-data/add-data?hl=ja" target="_blank" rel="noopener noreferrer">Cloud Firestore にデータを追加する</a></li></ul>

Firebase v8からv9へ移行するときのFirestoreでのコレクションやドキュメント操作の書き方

<p>以前は記事にカテゴリ名を表示だけはしていたのですが、ページネーションを実装したついでに、カテゴリ一覧も追加しました。<br>ただ、調べてもなかなか実装方法でてこなかったので、備忘録でまとめておきます。<br></p><h2 id="h00b8af9eb7">仕様</h2><p>以下のように作ります</p><ul><li>カテゴリ別に一覧ページを作る</li><li>各カテゴリ別にページングを作る</li><li>パスの例 <code>example.com/blog/web/page/1</code>  </li></ul><p><br></p><h2 id="h5237216ef8">そもそもセレクトフィールドが間違いだった</h2><p>記事に表示のためにセレクトフィールドをスキーマに持たせていて、カテゴリの表示だけはしていました。<br><a style="background-color:#ffffff" href="https://blog.microcms.io/add-select-field/" target="_blank" rel="noopener noreferrer">https://blog.microcms.io/add-select-field/</a><br><br>当初は記事にカテゴリ持たせといて、filterかけて取得したら一覧作れるのかなと思ってたけど違ったみたいです。早めに気づいて良かった。<br><br>実際は、microCMSのヘルプに書かれてるように、カテゴリのためのコンテンツ（API）を作り、カテゴリを付けたいコンテンツの方で「コンテンツ参照」のスキーマを作る必要があります。<br><a href="http://help.microcms.io/ja/knowledge/categories-and-tabs" target="_blank" rel="noopener noreferrer">http://help.microcms.io/ja/knowledge/categories-and-tabs</a><br><br>ブログの記事にカテゴリの表示だけなら当初の方法でいいのですが、カテゴリ一覧メニューや、カテゴリ別ページを作るためにはカテゴリだけを取得できるAPIが必要です。タグのような複数選択の場合は「<span style="color:#33475b">コンテンツ複数参照」でスキーマを作ります。</span><br><br><span style="color:#33475b">ブログを作る場合のスキーマは、microCMSが自社ブログのソースコードをGitHubに上げてくれてるので、Readmeに書いてあるスキーマを参考にするのがいいです。</span><br><a href="https://github.com/microcmsio/microcms-blog" target="_blank" rel="noopener noreferrer">https://github.com/microcmsio/microcms-blog</a><br></p><h2 id="h71e5f7c2cf">Pages</h2><p>pages以下blogのところを抜き出すとこのような構成にしています。細かいとこはやりやすいようにしてください。</p><pre><code>├── pages
│&nbsp; &nbsp;├── blog
│&nbsp; &nbsp;│&nbsp; &nbsp;├── [category]
│&nbsp; &nbsp;│&nbsp; &nbsp;│&nbsp; &nbsp;├── [id]
│&nbsp; &nbsp;│&nbsp; &nbsp;│&nbsp; &nbsp;│&nbsp; &nbsp;└── index.tsx // ブログ個別ページ
│&nbsp; &nbsp;│&nbsp; &nbsp;│&nbsp; &nbsp;└── page
│&nbsp; &nbsp;│&nbsp; &nbsp;│&nbsp; &nbsp; &nbsp; &nbsp;└── [id]
│&nbsp; &nbsp;│&nbsp; &nbsp;│&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;└── index.tsx // カテゴリの一覧ページ
│&nbsp; &nbsp;│&nbsp; &nbsp;├── index.tsx // ブログトップ（blog/page/1と表示は同じ）
│&nbsp; &nbsp;│&nbsp; &nbsp;└── page
│&nbsp; &nbsp;│&nbsp; &nbsp; &nbsp; &nbsp;└── [id]
│&nbsp; &nbsp;│&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;└── index.tsx // ブログ一覧（pagination用。blog/page/[ページ数]）</code></pre><p><br></p><h2 id="hfda00e257e">実装のポイント</h2><p>全部書くとしんどいので、ポイントになるとこだけピックアップ。全体はGitHubのリポジトリ見てください。<br><a href="https://github.com/mismith0227/mismith.me" target="_blank" rel="noopener noreferrer">https://github.com/mismith0227/mismith.me</a><br><br>getStaticPathsでパスを生成するのですが、記事全体のページング作る実装に加えて、まずはカテゴリを取得して、その分をmapする必要があります。</p><pre><code>export const getAllCategoryPagePaths = async () =&gt; {
  const resCategory = await client.get({
    endpoint: 'blog-category',
  })

  const paths: string[] = await Promise.all(
    resCategory.contents.map((item: BlogCategory) =&gt; {
      const result = client
        .get({
          endpoint: 'blog',
          queries: {
            filters: `category[equals]${item.id}`,
          },
        })
        .then(({ totalCount }) =&gt; {
          const range = (start: number, end: number) =&gt;
            [...Array(end - start + 1)].map((_, i) =&gt; start + i)

          return range(1, Math.ceil(totalCount / BLOG_PER_PAGE)).map(
            (repo) =&gt; `/blog/${item.id}/page/${repo}`
          )
        })
      return result
    })
  )


  return paths.flat()
}


export const getStaticPaths: GetStaticPaths = async () =&gt; {
  const paths = await getAllCategoryPagePaths()

  return { paths, fallback: false }
}</code></pre><p><br>ポイントとしてはこれが全てなんですが、冒頭でも書いた通り当初は記事のAPIの中でセレクトフィールドでカテゴリを付けていたため、getStaticPathsでどうやってカテゴリ情報とればいいのか悩んでました。<br>コンテンツ参照の存在を知って、実装することができました。<br></p><h2 id="h1afe451c43">さいごに</h2><p>今まで最低限の機能しか持たせてなかったですが、カテゴリとか一般的なブログの機能を実装しようとするとまだまだ知らないこと多いです。<br>今後もNext.jsの知見貯めたいので、もっと一般的なブログに近い実装を追加していきたいです。</p>

Next.js + microCMSでカテゴリ一覧ページの作り方が調べてもいまいち分からなかったので試しながら実装しました。

Next.js + microCMSでカテゴリ一覧ページを作る

<p><span style="color:#363636">npm scriptsで開発環境する手順です</span><br></p><h2 id="h137a0f7a86">やってみること</h2><p>最低限で以下をやってみます。</p><ul><li>htmlをdistへコピー（ejsやpugは使わないです）</li><li>SassをCSSへコンパイルしdistへ</li><li>BabelでJSをトランスパイルしてdistへ</li><li>browser-syncでブラウザを立ち上げる</li><li>各ファイルの更新を監視</li></ul><p><br></p><h2 id="h7255e71066">ディレクトリ</h2><p>こんな感じになります。</p><pre><code>├── babel.config.json
├── dist
│&nbsp;&nbsp; ├── css
│&nbsp;&nbsp; │&nbsp;&nbsp; └── style.css
│&nbsp;&nbsp; ├── index.html
│&nbsp;&nbsp; └── js
│&nbsp;&nbsp;     └── index.js
├── package.json
├── src
│&nbsp;&nbsp; ├── html
│&nbsp;&nbsp; │&nbsp;&nbsp; └── index.html
│&nbsp;&nbsp; ├── js
│&nbsp;&nbsp; │&nbsp;&nbsp; └── index.js
│&nbsp;&nbsp; └── sass
│&nbsp;&nbsp;     ├── base.scss
│&nbsp;&nbsp;     └── style.scss
└── yarn.lock</code></pre><h2 id="h2e3240617b">npm-run-all</h2><p>まず、npm-run-allというモジュールをインストールしておき、タスクをまとめて実行できるようにしておきます。</p><pre><code>yarn add npm-run-all -D</code></pre><h2 id="hda1205ad89">html</h2><p>htmlはejsやpugを使わずにそのままdistへコピーします。 コピーするには&nbsp;<code>cpx</code>&nbsp;というモジュールを使います。Macだと&nbsp;<code>cp</code>&nbsp;コマンドでもいいのですが、Windowsでは&nbsp;<code>copy</code>&nbsp;というコマンドらしく異なるため、どちらの環境でも動作するようにしてみます。</p><h3 id="h31c01ffa04">cpx</h3><pre><code>yarn add cpx -D</code></pre><p><br></p><h3 id="hc6a9bd6981">ファイル作成</h3><p>適当にhtmlのファイルを作ります。ディレクトリは冒頭の構成を参考にしてください。</p><pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;link rel="stylesheet" href="./css/style.css" /&gt;
    &lt;script type="text/javascript" src="./js/index.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;タイトル&lt;/h1&gt;
    &lt;section&gt;
      &lt;h2&gt;セクションタイトル&lt;/h2&gt;
    &lt;/section&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre><h3 id="h010248e8b0">package.json</h3><p>以下をscriptsに追加します。最初にインストールした&nbsp;<code>npm-run-all</code>&nbsp;を使い&nbsp;<code>html:*</code>&nbsp;このような指定をすることで&nbsp;<code>html:</code>&nbsp;がついた処理をまとめて行います。htmlに関してはタスクが一つですが、後述のタスクで役に立ちます。</p><pre><code>"scripts": {
  "html:plain": "cpx 'src/html/**/*.html' 'dist/'",
  "html": "npm-run-all html:*",
},</code></pre><p>以下のコマンドを打つとhtmlをコピーしてくれます</p><pre><code>yarn run html</code></pre><p><br></p><h2 id="h20b4c98e2a">CSS</h2><p>SassをCSSにコンパイルします。 ほぼ必須といってもいい&nbsp;<code>autoprefixer</code>&nbsp;でプレフィックスも付くようにします。</p><h3 id="hc197e6fff5">modules</h3><pre><code>yarn add sass postcss postcss-cli autoprefixer -D</code></pre><p><code>postcss</code>&nbsp;は&nbsp;<code>autoprefixer</code>&nbsp;を使うためですが、ブログによっては&nbsp;<code>postcss-cli</code>&nbsp;だけしか使っていない記事もあります。その記事が間違っているわけではなくて、<code>postcss-cli</code>&nbsp;のバージョンによるみたいです。詳しくは以下を参考にしてください。今回はv8系を使ってるので&nbsp;<code>postcss</code>&nbsp;も入れています。<br><a style="color:#222222" href="https://blog.mismith.me/entry/2021/05/22/230025" target="_blank" rel="noopener noreferrer">postcss-cliをインストールすると Cannot find module postcss とエラーが出てしまう - RX100で撮り歩くブログ</a></p><h3 id="hc6a9bd6981">ファイル作成</h3><p>Sassのファイルを作ります（中身は本当に適当です）。ディレクトリは冒頭の構成を参考にしてください。</p><pre><code>body {
  background-color: #fff;
}

h1 {
  font-size: 48px;
  user-select: none;

  span {
    color: blue;
  }
}

.box {
  display: flex;
  align-items: center;
  justify-content: center;
}</code></pre><h3 id="h010248e8b0">package.json</h3><p>CSSに関するタスクを追加します。browserslistも追加します。どのブラウザに対応したいかは書き方を調べてみてください。package.jsonに追記するのではなく、<code>.browserslistrc</code>&nbsp;というファイルを作成して書いてもいいです。</p><pre><code>"scripts": {
  "html:plain": "cpx 'src/html/**/*.html' 'dist/'",
  "html": "npm-run-all html:*",
  "css:sass": "sass src/sass/style.scss:dist/css/style.css --style=expanded --no-source-map",
  "css:postcss": "postcss dist/css/style.css -u autoprefixer -d dist/css/",
  "css": "npm-run-all -s css:*",
},
"browserslist": [
  "&gt;0.25% in JP",
  "not ie &lt;= 10",
  "not op_mini all"
],</code></pre><p>以下のコマンドを打つと&nbsp;<code>css:</code>&nbsp;で始まるタスクを実行してくれます</p><pre><code>yarn run css</code></pre><h2 id="hd148c32f21">JavaScript</h2><p>BabelでJavaScriptをトランスパイルします。もうサポート終了予定の発表がされましたが、一応IE11対応してみます。この辺りの設定は必要に応じて変えてみてください。&nbsp;<code>uglify-js</code>&nbsp;で圧縮もします</p><h3 id="hc197e6fff5">modules</h3><pre><code>yarn add @babel/cli @babel/core @babel/preset-env uglify-js -D</code></pre><h3 id="hc6a9bd6981">ファイル作成</h3><p>JavaScript</p><pre><code>const test = () =&gt; {
  console.log("test2");
};

test();</code></pre><p>babel.config.json</p><pre><code>{
  "presets": [
    [
      "@babel/env",
      {
        "targets": {
          "ie": "11"
        }
      }
    ]
  ]
}</code></pre><h3 id="h010248e8b0">package.json</h3><p>JavaScriptのタスクを追加します。&nbsp;<code>yarn run js</code>&nbsp;で動くはずです</p><pre><code>"scripts": {
  "html:plain": "cpx 'src/html/**/*.html' 'dist/'",
  "html": "npm-run-all html:*",
  "css:sass": "sass src/sass/style.scss:dist/css/style.css --style=expanded --no-source-map",
  "css:postcss": "postcss dist/css/style.css -u autoprefixer -d dist/css/",
  "css": "npm-run-all -s css:*",
  "js:babel": "./node_modules/.bin/babel ./src/js --out-dir ./dist/js",
  "js:uglifyjs": "uglifyjs dist/js/index.js -o dist/js/index.js",
  "js": "npm-run-all -s js:*",
},</code></pre><h2 id="h125ae2d190">browser-syncでブラウザ立ち上げ、ファイルの更新を監視</h2><p>それぞれのタスクを登録できたので、browser-syncでブラウザを立ち上げて、ファイルを変更したら自動的にブラウザに反映するようにします。ここまでできたら最低限のコーディング作業はできますよね</p><h3 id="hc197e6fff5">modules</h3><p>browser-syncと監視用のwatchを入れます。</p><pre><code>yarn add browser-sync watch -D</code></pre><p><br></p><h3 id="h010248e8b0">package.json</h3><p>watchとbrowser-syncのタスクを追加します。</p><pre><code>"scripts": {
  "html:plain": "cpx 'src/html/**/*.html' 'dist/'",
  "html": "npm-run-all html:*",
  "css:sass": "sass src/sass/style.scss:dist/css/style.css --style=expanded --no-source-map",
  "css:postcss": "postcss dist/css/style.css -u autoprefixer -d dist/css/",
  "css": "npm-run-all -s css:*",
  "js:babel": "./node_modules/.bin/babel ./src/js --out-dir ./dist/js",
  "js:uglifyjs": "uglifyjs dist/js/index.js -o dist/js/index.js",
  "js": "npm-run-all -s js:*",
  "watch:html": "watch 'npm run html' ./src/html",
  "watch:css": "watch 'npm run css' ./src/sass",
  "watch:js": "watch 'npm run js' ./src/js",
  "watch:server": "browser-sync start --server dist --files 'dist, **/*.html, !node_modules/**/*'",
  "watch": "npm-run-all -p watch:*"
},</code></pre><p><code>yarn run watch</code>&nbsp;でブラウザが立ち上がります。html、Sass、JavaScriptを更新するとブラウザがリロードされて変更が反映されます。</p><h2 id="h1afe451c43">さいごに</h2><p>最低限の環境は簡単に作ることができました。 gulpもnpm scriptsも一長一短で好きな方を使えばいいと思いますが、いろいろと変遷しているタスクランナーに依存しないのはいいところですね。<br>とはいえgulp使ってる人多いし、gulpでいいかと思いますが、選択肢の一つとして覚えておくといいと思いました。</p>

タスクランナーにgulpではなくnpm scriptsを使ってみました

タスクランナーにgulpではなくnpm scriptsを使う

<p>jQueryを使っていた時によく使っていたスライダーのライブラリ「Swiper」をReactで使ってみました。<br><a href="https://swiperjs.com/" target="_blank" rel="noopener noreferrer">https://swiperjs.com/</a><br><br>写真のポートフォリオサイトのモーダルで、画像をスライドさせるために使っています。<br><a href="https://photo.mismith.me/" target="_blank" rel="noopener noreferrer">https://photo.mismith.me/</a><br></p><h2 id="h33dc6056f2">Reactで使う</h2><p><span style="color:#363636">Reactでの導入方法もドキュメントに書かれています。この通りやれば導入はできます。</span><br><a href="https://swiperjs.com/react/" target="_blank" rel="noopener noreferrer">https://swiperjs.com/react/</a></p><pre><code>npm i swiper

or

yarn add swiper</code></pre><p><span style="color:#363636">Swiperを使いたいところで以下のように書きます。&nbsp;</span><code>swiper.scss</code><span style="color:#363636">&nbsp;のimportは環境によりますが、Next.jsだと</span><em style="color:#363636">app.js or </em><span style="color:#363636">app.tsxで読み込むようにエラーがでるかもしれません。その時は_appでimportしましょう。また、scssを導入していなければ、&nbsp;</span><code>import 'swiper/swiper.min.css'</code><span style="color:#363636">&nbsp;でOKです。</span></p><pre><code>import { Swiper, SwiperSlide } from 'swiper/react';

import 'swiper/swiper.scss';

export default () =&gt; {
  return (
    &lt;Swiper&gt;
      &lt;SwiperSlide&gt;Slide 1&lt;/SwiperSlide&gt;
      &lt;SwiperSlide&gt;Slide 2&lt;/SwiperSlide&gt;
      &lt;SwiperSlide&gt;Slide 3&lt;/SwiperSlide&gt;
      &lt;SwiperSlide&gt;Slide 4&lt;/SwiperSlide&gt;
    &lt;/Swiper&gt;
  );
};</code></pre><p><br></p><h2 id="h32a67f9128">オプション</h2><p><span style="color:#363636">オプションはAPIページに書いてあります。全て試してないですが。</span><br><a href="https://swiperjs.com/swiper-api" target="_blank" rel="noopener noreferrer">https://swiperjs.com/swiper-api</a><br><br><span style="color:#363636">冒頭で紹介した写真サイトでは以下のようにしてみました。</span></p><pre><code>import { Swiper, SwiperSlide } from 'swiper/react'
import SwiperCore, { Navigation } from 'swiper'
SwiperCore.use([Navigation])

// 省略

&lt;Swiper
  spaceBetween={50}
  slidesPerView={1}
  initialSlide={initialSlide}
  loop={true}
  navigation={{
    prevEl: '.button_prev',
    nextEl: '.button_next',
  }}
&gt;
  &lt;SwiperSlide&gt;Slide 1&lt;/SwiperSlide&gt;
  &lt;SwiperSlide&gt;Slide 2&lt;/SwiperSlide&gt;
  &lt;SwiperSlide&gt;Slide 3&lt;/SwiperSlide&gt;
  &lt;SwiperSlide&gt;Slide 4&lt;/SwiperSlide&gt;
&lt;/Swiper&gt;</code></pre><p>| オプション | |<br>| --- | --- |<br>| <span style="color:#363636">spaceBetween | スライド間のマージン指定 |</span><br>| <span style="color:#363636">slidesPerView | スライドコンテナで見せるスライドの枚数 |</span><br>| <span style="color:#363636">initialSlide | 最初のスライド番号 |</span><br>| <span style="color:#363636">loop | ループさせるかどうか |</span><br>| <span style="color:#363636">navigation | 左右ナビゲーションの設定 |</span><br><br>initialSlideはモーダルを開いた時にどの画像を表示させるかを設定するために書いてます。画像をクリックするとその画像のindexをinitialSlideに渡すようにしています。<br>navigationはobjectかbooleanで指定できます。&nbsp;<code>nativagtion={true}</code>&nbsp;を指定し、追加で&nbsp;<code>import 'swiper/components/navigation/navigation.scss'</code>&nbsp;or&nbsp;<code>import 'swiper/components/navigation/navigation.min.css'</code>&nbsp;をimportすると、Swiperで用意されている左右の矢印が表示されます。上記のようにオブジェクトでclass名を指定すると、cssでカスタマイズできます。<br>Paginationも同じようにできるはずです。<br></p><h2 id="h1afe451c43">さいごに</h2><p><span style="color:#363636">お世話になってたSwiper、Reactでも便利に使えました。スマホでのフリック操作を実装してくれてるところがありがたいです。面倒なところはこういったライブラリを使うのがいいですね。</span></p>

ReactでスライダーライブラリのSwiperを使う時の書き方

ReactでスライダーライブラリのSwiperを使う

<p>Gatsbyに不満があったわけではないですが（むしろ今回の移行でGatsbyのありがたみも感じられた）、ほとんど動向を追えてないし、案件で使うとしたらNext.jsだろうなとか、Next.jsの方が盛り上がりを見ると、Next.jsに集中した方がいい気がしたので移行しました。NetlifyからVercelにしたのは惰性です。<br><br>Gatsbyの部分をNext.jsに変えただけで、既存のスタイルやコンポーネントはほとんどそのまま活かしました。ただ、Netlifyやめたせいで、Netlify Formが使えなくなり、お問い合わせフォームはなくなりました。個人なのでそんなに必要ないし問題ないです。<br></p><h2 id="h79f708eed5">ざっくり手順</h2><p><br></p><ol><li>Gatsby関連のライブラリをpackage.jsonから削除</li><li>関係ないとこでCreate Next Appして生成されたpackage.jsonやファイル構成を適用する</li><li>Gatsby独自の書き方をNext.jsに置き換えていき、全画面で問題ないか確認</li><li>NetlifyのGitHub連携を切る</li><li>VercelとGitHubを連携し、デプロイする</li><li>Vercelで独自ドメインの設定をし、ドメインの管理会社でネームサーバーの設定を変更する</li><li>完成</li><li>後片付け（Netlifyでプロジェクト削除など）</li></ol><p><br></p><h2 id="haba26375cd">GatsbyではOKだったけど、Next.jsではNGだったこと</h2><p><br></p><h3 id="h8853244ec8">Linkタグ直下はタグひとつ</h3><p><br>こういうのがダメみたいです</p><pre><code>&lt;Link href="/about"&gt;
  &lt;a&gt;To About&lt;/a&gt;
  &lt;a&gt;Second To About&lt;/a&gt;
&lt;/Link&gt;</code></pre><p><br><a href="https://nextjs.org/docs/messages/link-multiple-children" target="_blank" rel="noopener noreferrer">https://nextjs.org/docs/messages/link-multiple-children</a><br></p><h3 id="h2be7de5add">Linkタグの中にaタグを書くときはpassHrefつける</h3><p><br>GatsbyのLinkはスタイリングするときにLinkを直接emotionで上書きしてましたが、<code>next/link</code>  はそれはできないので、Linkはそのままで直下にスタイリングしたaタグを置くのですが、その時の指定です。<br><br><a href="https://nextjs.org/docs/messages/link-passhref" target="_blank" rel="noopener noreferrer">https://nextjs.org/docs/messages/link-passhref</a><br></p><h2 id="h8d78e14043">感想</h2><p>Gatsbyのプラグインってありがたいなー。<br></p><h2 id="h335a87b5ef">参考サイト</h2><ul><li><a href="https://nextjs.org/docs/migrating/from-gatsby" target="_blank" rel="noopener noreferrer">Migrating from Gatsby</a></li><li><a href="https://github.com/hbsnow-sandbox/nextjs-micro-cms-sdk-example" target="_blank" rel="noopener noreferrer">nextjs-micro-cms-sdk-example</a></li><li><a href="https://blog.microcms.io/microcms-next-jamstack-blog/" target="_blank" rel="noopener noreferrer">microCMS + Next.jsでJamstackブログを作ってみよう</a></li><li><a href="https://qiita.com/xrxoxcxox/items/ad84e4cedde92c737001" target="_blank" rel="noopener noreferrer">ポートフォリオサイトをNetlifyからVercelへ移行した</a></li></ul>

Gatsby + Netlify から Next.js + Vercelに乗り換えました

<p>Firebaseがv9になり、必要なものだけをインポートするようになり、パフォーマンスやサイズが改善されたようです。<br>ただ、書きかたが少し変わったことで、初期化にちょっとハマったところがありました。<br><br>ちなみにCOMPATというv8の書き方のままv9にアップデートする方法もありますが、この方法だとパフォーマンスやサイズの恩恵が受けられないですし、将来的には完全に使えなくなる予定なので、できれば今のうちにv9の書き方にしておきたいです。<br></p><h2 id="h23f332d8e4">v8での初期化</h2><p>以下のように書いてました。windowについては、Next.jsのサーバーサイド処理で、ブラウザ側にしかないグローバルオブジェクトのwindowが参照できないとエラーになるため条件に書いています。<code>firebase.apps.length === 0</code>  は、複数回初期化してエラーになるのを防ぎます。</p><pre><code>import firebase from 'firebase/app'
import 'firebase/analytics'
import 'firebase/auth'
import 'firebase/firestore'

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
}

if (typeof window !== 'undefined' &amp;&amp; firebase.apps.length === 0) {
  firebase.initializeApp(firebaseConfig)
  firebase.analytics()
}</code></pre><p><br></p><h2 id="h3d8a7b9a9e">v9での書き方</h2><p>以下のように変えました。v8でやっていた複数回初期化エラーの回避のために何を使ったらいいのか分かりませんでしたが、getAppsでいけました。</p><pre><code>import { initializeApp, getApps, FirebaseApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { getFirestore, Firestore } from 'firebase/firestore'
import {
  getAuth,
  Auth,
} from "firebase/auth";

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
};

let firebaseApp: FirebaseApp;
let auth: Auth;
let firestore: Firestore

if (typeof window !== "undefined" &amp;&amp; !getApps().length) {
  firebaseApp = initializeApp(firebaseConfig);
  auth = getAuth();
  firestore = getFirestore()
}
export { firebaseApp, auth, firestore };</code></pre><p><br></p><h2 id="h335a87b5ef">参考サイト</h2><ul><li><a href="https://firebase.google.com/docs/web/modular-upgrade?hl=ja" target="_blank" rel="noopener noreferrer">Firebase: バージョン8からモジュラーWebSDKにアップグレードします</a></li><li><a href="https://zenn.dev/hiro__dev/articles/605161cd5a7875" target="_blank" rel="noopener noreferrer">これからFirebaseでプロジェクトを始めようとする全ての人が知っておくべきこと v8→v9リリース</a></li><li><a href="https://zenn.dev/daiki_skm/articles/9f890ae15403f6" target="_blank" rel="noopener noreferrer">Firebase v9 with Nuxt.js</a></li></ul>

FIrebase v9のアップデートで書き方が変わりハマったところ

FIrebase v9 + Next.js + Vercelの初期化でハマったところ

<p><a href="https://greensock.com/gsap/" target="_blank" rel="noopener noreferrer">GSAP</a><br>GreenSock社が開発したアニメーションライブラリ。<br>個人的な肌感ではアワード系サイトに載ってるサイトのうち6,7割ぐらいは使ってるので、アニメーションするときは、とりあえず入れていいライブラリだと思います。<br>2019年11月にGSAP 2からGSAP 3に移行したため、web上ではGSAP2の書き方の情報が混在していて注意が必要です。<br>従来はTweenLite, TweenMax, TimelineLite, TimelineMaxと分割してたので、 これらが記述されてる記事はGSAP2の書き方と思っていいです。<br>使い方は公式や、いろんなサイトで紹介されてるので、ここではざっと概要を。<br></p><h2 id="h0669eefa7c">目次</h2><ul><li>簡単なデモとGSAPの使い所</li><li>メリット<ul><li>複雑な動きの実装をスッキリかける</li><li>GSAPのプラグインを使うことで拡張できる</li><li>スクロールイベントの間引き処理がされていてパフォーマンスがいい</li><li>軽量</li></ul></li><li>npm経由で使う</li><li>ライセンス</li><li>ドキュメントなど</li><li>有料プラグイン</li></ul><p><br></p><h2 id="h9137fb0e8d">簡単なデモ</h2><p>簡単なデモを作りました。最後の動きは有料プラグインです（Codepen用にお試しで使えるコードを使ってます）<br><a href="https://codepen.io/mismith0227/full/JjyEdEZ" target="_blank" rel="noopener noreferrer">https://codepen.io/mismith0227/full/JjyEdEZ</a><br>使い所としては、デモのようにスクロールして要素が表示された時に、何かアニメーションしたいとき、スクロールに応じて要素を動かしたい時、複数のアニメーションを順番に動かしたい時など。<br>ただ、こういった動きは自分で実装しようと思えばできるし、他にもライブラリがあるのにGSAPが多くのサイトで使われてるのは何故でしょう？<br></p><h2 id="h3ab24f6f50">メリット</h2><h3 id="h0347ba2df1">複雑な動きの実装をスッキリかける</h3><p>例えば、連続的なアニメーションの実装は、GSAPのtimelineを使えば見やすく書けます。</p><pre><code>// スクロールして.sectionの上部が、ブラウザのtopに到達したときに、
// 1. div1をy方向に200%、2秒かけて動かす
// 2. div1をy方向に100%、1秒かけて動かす
// 3. 3秒待つ
// 4. div2をy方向に-200%、2秒かけて動かす
gsap
    .timeline({
      scrollTrigger: {
        trigger: '.section'
        start: 'top top',
      }
    })
    .from('.div1', { yPercent: 200, duration: 2 })
    .to('.div1', { xPercent: 100, duration: 1 })
    .to('.div2', { duration: 3 })
    .to('.div2', { yPercent: -200, duration: 2 })</code></pre><h3 id="hfab9869f8d">GSAPのプラグインを使うことで拡張できる</h3><p>プラグインを使うことでさらにアニメーションの幅が広がります。<br>有料のもあるので注意</p><h3 id="h55cc58e8fb">スクロールイベントの間引き処理がされていてパフォーマンスがいい</h3><p>スクロールイベントを普通に書くとスクロールの度にすごい頻度でイベントが発火してしてしまいます（他にもマウスを動かした時や、リサイズ処理など）。<br>そのスクロールの負荷対策としてdebounce（デバウンス）処理をするのですが、これをGSAP側でやってくれてます。スクロールイベントを一定間隔で間引いてくれてます。<br></p><h3 id="hd4662dd09d">軽量</h3><p>ファイルサイズが軽いらしいです。GSAP2よりも3はさらに半分軽くなったとか。<br>どれぐらい軽いかを書いてるところが見つからないので、情報得たら書きます。<br></p><h2 id="he5ea0086cd">npm経由で使う</h2><p>CDNで使う方法はよくブログで紹介されてますが、実制作では <code>npm install</code>して使うと思うので書いておきます。</p><pre><code>npm i gsap
or
yarn add gsap</code></pre><p>importとプラグインを使う</p><pre><code>import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger.js'

gsap.registerPlugin(ScrollTrigger)

// 複数プラグインを使う場合
// gsap.registerPlugin(MotionPathPlugin, TextPlugin);</code></pre><p><br></p><h2 id="hc1b2f1de01">ライセンス</h2><p>GSAPはMITやGPLではなく、独自ライセンスのため注意。<br>無料で公開されているサイトであれば無料ですが、有料なコンテンツがある場合は有料のライセンス登録が必要です。<br>普通のwebサイトなら大丈夫ですが、何か課金があったり、販売するサイトはライセンス料を払う必要があります。<br><a href="https://greensock.com/licensing/" target="_blank" rel="noopener noreferrer">https://greensock.com/licensing/</a><br></p><h2 id="hde05627694">ドキュメントなど</h2><p>公式ドキュメントのどこ見たらいいかなどのまとめ</p><h3 id="h2aeb2fa1e8">プラグイン一覧</h3><p><a href="https://greensock.com/products/" target="_blank" rel="noopener noreferrer">https://greensock.com/products/</a></p><h3 id="h8f27fbddf6">ドキュメント</h3><p><a href="https://greensock.com/docs/v3/GSAP" target="_blank" rel="noopener noreferrer">https://greensock.com/docs/v3/GSAP</a></p><h3 id="hf82cc7e56f">フォーラム</h3><p>コミュニティもあるので、何か分からなければ質問もできます。ただし英語。<br><a href="https://greensock.com/forums/" target="_blank" rel="noopener noreferrer">https://greensock.com/forums/</a></p><h3 id="h85b634cb63">Easing</h3><p>easinの指定をしたいときはここで実際の動きを見れる<br><a href="https://greensock.com/docs/v3/Eases" target="_blank" rel="noopener noreferrer">https://greensock.com/docs/v3/Eases</a><br></p><h2 id="hc07a99f4a6">有料プラグイン</h2><p>GreenSock会員になれば使える有料プラグインがあります。<br>プラグインをフルに使うには「Shockingly」プライン以上が必要です。<br>Codepenではサンプルで使えるようにしてくれてるので、有料プラグインを試したいときはCodepenを使うといいです。<br><a href="https://greensock.com/club/" target="_blank" rel="noopener noreferrer">https://greensock.com/club/</a><br></p>

デファクトスタンダードになっているアニメーションライブラリGSAPについて

アニメーションライブラリGSAPについて

<p>このサイトはNext.js + microCMS + Vercelで作っていて、Jamstackなサイト高速だし、個人で使う分にはお金かからないしいいなと思ってますが、深くメリット・デメリットを知らなかったので、改めて調べてみました。<br></p><pre><code>より良いパフォーマンスを提供するウェブサイトとアプリを構築するための最新の方法</code></pre><p><a href="https://jamstack.org/" target="_blank" rel="noopener noreferrer">https://jamstack.org/</a><br>webサイトのまとめサイトに載ってるサイトの技術をchrome拡張機能で見ると、Jamstackなサイトは増えてきてます。<br>CDNの詳しい仕組みはよく分からんですが、今どきのフロントエンド技術で、高速なサイト作れるというイメージ持っといて、とりあえず何か作ってみるといいと思います<br></p><h2 id="h0669eefa7c">目次</h2><ul><li>Jamstackとは</li><li>WordPressなどのCMSとどう違うのか</li><li>データはどうしてるのか</li><li>メリット</li><li>デメリット</li><li>Jamstackでよく使われるサービスや技術</li><li>Jamstackで始めるほぼ0円ブログ生活</li></ul><h2 id="h70ace14742">Jamstackとは</h2><p>JavaScript、API、Markupの組み合わせで作るアーキテクチャのこと。JAMはそれぞれの頭文字。<br>対比としてWordPressなどのCMSを使ったサイトが挙げられます<br>最初はJavaScript、API、Markupの構成を指していたが、「HTMLを事前にレンダリングしているサイト」や「サーバーサイドとクライアントサイドが分離してるサイト」など定義の範囲は広がっていってるらしい<br></p><h2 id="ha117653a1f">WordPressなどのCMSとどう違うのか</h2><p>WordPressのメリットはブログや新着情報など、webサイトに更新する機能を持たせられることです。サイトにアクセスがあった時に、そのURLに応じてデータを取得して、動的にサイトを表示できます。<br>WordPressで作られたサイトにアクセスした時に画面が表示するまでの流れはこうなっています。</p><pre><code>1. サイトへアクセス
2. webサーバーが該当のデータをデータベースから取得
3. 取得したデータをもとにページを構築
4. webサーバーがHTMLを返す</code></pre><p>この方式の問題点は</p><ol><li>webサーバーが必要になるため、サーバーが停止した時にサイトが表示できなくなる</li><li>大量のアクセスに弱い。アクセスが集中してサーバーがダウンということも起こり得る。それに備えてに事前にサーバーを増強するなどのコストも必要になってくる</li><li>セキュリティの懸念。この辺は詳しくないですが、webサイトへの攻撃者はwebサーバーの処理の穴をつくらしいです。</li></ol><p>一方、Jamstackではこうなります。データベースがなくHTMLを返すだけなので、表示が高速になります</p><pre><code>1. サイトへアクセス
2. CDNがHTMLを返す</code></pre><p>CDNについてはこちら（<a href="https://developer.mozilla.org/ja/docs/Glossary/CDN" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/ja/docs/Glossary/CDN</a>）<br></p><h2 id="hb9d4ed6ddf">データはどうしてるのか</h2><p>じゃあWordPressで表示する動的なコンテンツはどうしてるのかというと、事前にビルドしてHTMLを生成しています。<br>例えば、新しい記事を書いたり、過去の記事を更新したのをきっかけに、ビルドを開始させて、サイト全体のHTMLを生成しています。<br></p><h2 id="h3ab24f6f50">メリット</h2><ul><li>基本的にはNetlifyやVercel、Firebase HostingといったCDN（コンテンツデリバリネットワーク）を使ってデータを返してるので高速になる<ul><li>ビルドしたHTMLを置ければいいので、レンサバでも可能だけど、上記サービスを使った方が恩恵受けられる</li></ul></li><li>大量のアクセスに強い<ul><li>CDNにはアクセスが集中したときに自動的に分散する仕組みがある</li></ul></li><li>フロントとAPIが分離することで技術選定の幅が広がったり、フロント、APIそれぞれ独立して技術の切り替えが可能。</li><li>事前にビルドしてHTMLをCDNに置いてるだけなので、セキュリティを気にする範囲が限定的になり比較的安全（管理画面はサイトとは全く別のところにある）</li></ul><p><br></p><h2 id="h7e4a670898">デメリット</h2><ul><li>クライアントワークでは、理解を得られづらいかもしれない<ul><li>使い慣れた管理画面のWordPressがいいってなる</li></ul></li><li>ビルドでどれぐらい時間かかるか読めないので、特定の時間ぴったりに記事を公開しづらい。<ul><li>ページが増えるほどビルド時間が長くなることもあったが、差分がある画面だけをビルドする仕組みもある</li></ul></li><li>WordPressならプラグインで簡単にできたことを、自分で頑張る必要がある<ul><li>人気記事の表示とか</li></ul></li><li>ちょっとしたデザインやサイトの表示設定などの変更をWordPressなら管理画面でできていたことが、必ずエンジニアの手を借りる必要が出てくる</li><li>記事を書くときのプレビュー機能がない（ただし、後述のHeadless CMSを使うことがほとんどで、これらのサービスはプレビュー機能を提供してるのでデメリットではなくなってきてる）</li></ul><p><br></p><h2 id="h0daede3c7a">Jamstackでよく使われるサービスや技術</h2><h3 id="h795f036a6e">Headless CMS</h3><p>JamstackのAPIにあたる部分のサービス。訳すと頭がないCMSで、表示部分以外を提供してくれています。WordPressのように管理画面とデータベースは提供してくれてますが、表示に関しては自分でAPIを取得して表示することになります。<br>代表的なもの。個人で使うぐらいなら無料で使えるサービスもあります。</p><ul><li>microCMS（日本製）</li><li>Contentful</li><li>Shifter（WordPressをHeadless CMSとして使えるサービス）</li><li>NetlifyCMS</li></ul><p>こういったサービスを使わなくても、WordPressをAPIとして使うこともできますし、このNotionをAPIにしてブログを作ったという記事もあります。<br>サービスを使ったら楽というだけで、APIを返してくれるものならなんでもOK（なはず）。</p><h3 id="h55a3cd035f">静的サイトジェネレーター</h3><p>APIからデータを取得して、HTMLを生成するライブラリです。<br>代表的なものはこちら</p><ul><li>Next.js（React製）</li><li>Gatsby（React製）</li><li>Nuxt.js（Vue製）</li><li>Gridsome（Vue製）</li></ul><h3 id="hc3f4aa8cd8">ホスティングサービス（CDNプロバイダ）</h3><p>生成したHTMLをweb上で公開するための置き場です。<br>代表的なものはこちら。これらも個人で無料枠で不自由なく使えます。</p><ul><li>Netlify</li><li>Vercel</li><li>Firebase Hosting</li></ul><h2 id="h1e4772854f">Jamstackで始めるほぼ0円ブログ生活</h2><p>上記のサービスを使えばほぼ0円でサイトを運用できます。<br>WordPressでブログを運用する場合は、レンタルサーバー代や、ドメイン代が必要でしたが、ホスティングはNetlifyやVercelを使うと不要になるので、必要なのはドメイン代だけになります。</p><pre><code>例
## フロントエンド
Next.js（0円）

## API（ブログ書くところ）
microCMS（0円）

## ホスティング
Vercel（0円）

## ドメイン
ムームードメイン（初年数十円のドメインを買う）</code></pre><p>ドメインは取得初年は数十円で、更新以降は1000円ちょいみたいなドメインを使えば、格安でブログや個人サイトを持つことができます。</p>

Jamstackについていろいろ調べてみた

Jamstackなサイトとは

<p>結論から書くと、pxかremならどっちでもいいです。<br>どっちでもいいですが、違いはあるので知った上でどちらを使うか判断しましょう<br></p><h2 id="h0669eefa7c">目次</h2><ul><li>単位いろいろ<ul><li>px</li><li>em</li><li>rem</li><li>%</li><li>vw</li></ul></li><li>px vs rem</li><li>remのルート指定いろいろ</li><li>em の使いどころ</li><li>有名なサイトではどうなってるか</li></ul><p><br></p><h2 id="he16d20db91">単位別の特徴</h2><pre><code>絶対値・・・どんな環境でも一定の値
相対値・・・他の値を基準にして決まる値</code></pre><h3 id="hce39fe1662">px</h3><ul><li>絶対値指定</li><li>ブラウザのフォントサイズの設定が効かなくなる<ul><li>chromeだと「設定→デザイン→フォントサイズ」</li></ul></li><li>ただし、ブラウザのズーム機能では拡大される</li></ul><h3 id="h99dc44cf09">em</h3><ul><li>相対値指定</li><li>親要素のフォントサイズを継承する</li><li>emの中にemがあると複利計算されていく</li></ul><pre><code>&lt;div&gt;
  &lt;p&gt;こんにちは&lt;span&gt;あああああ&lt;/span&gt;&lt;/p&gt;
&lt;/div&gt;

// CSS
div {
	font-size: 16px;
}

p {
	font-size: 2em; // これは32pxになる
}

span {
	font-size: 2em; // これは64pxになる
}</code></pre><h3 id="hedfc6405f0">rem</h3><ul><li>相対値指定</li><li>root emの略でroot（html）のフォントサイズから計算される</li></ul><pre><code>&lt;p&gt;こんにちは&lt;span&gt;あああああ&lt;/span&gt;&lt;/p&gt;

// CSS
html {
	font-size: 16px;
}

p {
	font-size: 2em; // これは32pxになる
}

span {
	font-size: 2em; // これも32pxになる
}</code></pre><h3 id="h5ef620ffb2">%</h3><p>フォントサイズにおいて%の挙動はemと同じなので割愛</p><h3 id="h58808d197f">vw</h3><ul><li>ビューポート（画面幅）を基準にしたサイズ指定</li><li>例えば320pxのデバイスで16pxにしたい時は5vwになる。（16/320 ×100）</li><li>デバイス幅によって発生する改行位置の違いや左右マージンの余白の違いなど、デバイス幅による差異が生まれにくくなるため、使われることがある。</li><li>ただし、上記の例の場合375pxのデバイスでは18.75px相当になり、デザインと違ってくる可能性があるため、注意が必要</li></ul><h2 id="h6bcb0e43d3">px vs rem</h2><p>pxかremかはたびたびTwitterなどで論争が起こります。<br>違いはブラウザのフォントサイズ設定が効くかどうかです。</p><ul><li>ユーザーのフォントサイズ設定をちゃんと反映させてあげたいならrem</li><li>フォントサイズ設定無視しても、ブラウザズームで拡大できるし、開発のしやすさ選ぶならpx</li></ul><p>という大筋だと思います。<br>以下はpx or remの時によく出る話</p><h3 id="h8c1b0fc7eb">remは計算が必要なところ以外特に悪いところはない</h3><p>remを使えばフォントサイズの設定も反映されるし特に悪いとこはないです<br>使わない場合の理由は、どちらかというと開発側の事情です</p><ul><li>計算が必要（ルートの指定方法やSassで緩和できる：後述）</li><li>確認者のフォントサイズ設定が異なる場合にデザインと違うと指摘される可能性がある</li><li>納品後にCSSを触る可能性がある場合、rem計算のことを伝える必要がある</li><li>外部のCSSがremだった場合、ルートの指定が合ってるか注意する必要がある（聞いたことないけどあるかもしれない）</li></ul><h3 id="haedba668de">pxは設定のフォントサイズを無効にするからアクセシビリティ的に悪い？</h3><p>視力が悪くフォントサイズ設定を大きくしてる人にとってpx指定はよくないのでは、という話です。<br>ただし、ズーム機能という選択肢がありますし、これだけでアクセシビリティ的に悪いとは断定できません。アクセシビリティで訴訟が起こるアメリカの大手サイトでさえpxを使ってますし。</p><h3 id="h95aac300b6">remを使えばレスポンシブ対応しやすい？</h3><p>ルートのフォントサイズを変えれば全てが変わるので、メディアクエリでルートのフォントサイズを変えるだけでレスポンシブ対応できるという考えです。</p><pre><code>// つまりこういうこと
html {
  /* デフォルト（SPサイズ）ではベースのfont-sizeは12px相当 */
  font-size: 75%;
}

@media screen and (min-width:768px) {
  html {
    /* 768px以上ではベースのfont-sizeは16px相当 */
    font-size: 100%;
  }
}</code></pre><p>でも、実際の現場で一括でフォントサイズを変えて対応できるデザインなんてないと思います。<br>それならSassの変数で管理する方がずっとメンテナンス性高いです</p><h2 id="h2b5382929c">remのルート指定いろいろ</h2><p>デフォルトでは <code>1rem = 16px</code>相当で、18pxにしようとすると <code>1.125rem</code> を指定することになり、そのままだと計算がめんどうなremですが、ルートの指定やSassで楽することができます<br>どっちでもいいですが、個人的にはSassが使える環境ならfunction作ります</p><h3 id="h089ff0cfb7">62.5%</h3><p>htmlに <code>font-size: 62.5%</code>を指定する方法。62.5%が10px相当になるため16pxは <code>1.6rem</code>になります。デフォルトより分かりやすい。<br>%で10px相当に指定してるのは、 <code>html {font-size: 10px}</code>とするとルートがpxなのでフォントサイズ設定が効かなくなるからです（当たり前ですが）</p><pre><code>html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
}

p {
  font-size: 2.4rem;
}</code></pre><h3 id="h0e903f440b">Sassのfunctionを使う</h3><p>Sassが使える環境ならfunctionを作っておくといいです。</p><pre><code>@function rem($value) {
    $remValue: ($value / 16) + rem; 
    @return $remValue;
}

p {
    font-size: rem(24);
}

/* 出力: 24px相当 */
p {
  font-size: 1.5rem;
}</code></pre><h2 id="hbac305d359">emの使い所</h2><p>使い回しするコンポーネントの中にある要素のフォントサイズはemで指定すると使いやすい場面があります。<br>一例ですが、例えばアイコン付きボタンのアイコン</p><pre><code>// html
&lt;button class="button"&gt;
	&lt;svg&gt;....&lt;/svg&gt;
	ボタン
&lt;/button&gt;

// css
// ボタンの基本スタイル
.button {
	font-size: 16px；
}

.button svg {
  font-size: 1em；
}

// 使い回す時
// html
&lt;button class="button secondary"&gt;
	&lt;svg&gt;....&lt;/svg&gt;
	ボタン
&lt;/button&gt;

// css
// こうするだけでsvgアイコンの方もフォントサイズが24pxに変わる
.button.secondary {
	font-size: 24px; 
}</code></pre><p>こんな感じでCSS設計するときに、Blockレベルはremやpx、Elementはemで書くという人もいます。<br>emを指定しておくと使い回す時に便利そうだなと思うときはemを使ってみましょう。<br></p><h2 id="ha5b2462570">有名サイトは何を使ってるか</h2><ul><li>px<ul><li>Apple（日本）</li><li>Airbnb</li><li>Amazon</li><li>Twitter</li></ul></li><li>rem<ul><li>Google（企業サイト）</li><li>Yahoo Japan</li></ul></li></ul><p><br></p>

フォントサイズの単位は何を使えばいいかについて

フォントサイズの単位について

<h2 id="h0669eefa7c">目次</h2><ul><li>種類</li><li>Sass<ul><li>SASS</li><li>SCSS</li><li>PostCSS</li><li>その他</li></ul></li><li>SassとPostCSSの組み合わせ</li><li>importルールの廃止とDart Sass</li></ul><p><br></p><h2 id="he665b3e0a1">種類</h2><h3 id="h6321f8cf3a">Sass</h3><p>Sassには記法が2つあります。いつも書いている「サス」というのは、後述のSCSSのことで、実はSASSが存在します。<br>SCSSの方が閉じかっこがあって分かりやすかったり、Sassが分からなくてもCSSで書くこともできるので、「サス」というと一般的にはSCSSの方を指すようになりました。<br></p><h4 id="ha6752d868e">SASS</h4><p>拡張子は <code>.sass</code><br>SASS記法で書くとこうなります</p><pre><code>div
    margin: 0 auto
    p
        padding: 20px
        span
            font-color: red;</code></pre><p><br></p><h4 id="hb704ab42a8">SCSS</h4><p>拡張子は <code>.scss</code><br>SCSS記法で書くとこうなります。</p><pre><code>div {
  margin: 0 auto;
  p {
    font-size: 1em;
  }
}</code></pre><p>Sassには簡単に書き方を試せるPlaygroundがあります。出力がよく分からんというときは、ここで試してみるといいです<br><a href="https://www.sassmeister.com/" target="_blank" rel="noopener noreferrer">https://www.sassmeister.com/</a><br></p><h3 id="h3426421af8">PostCSS</h3><p>一応プリプロセッサの一つとして挙げられますが、PostCSS自体はCSSを加工しやすいようにパースし、結果をCSSとして出力するだけです。<br><br>PostCSS用のプラグインを利用することで、SassのようなCSSのプリプロセッサとして使えます。<br><br>例えば、 <code>postcss-nested</code>というプラグインを使えば、ネスト（入れ子）で書けるようになります。<br><br>PostCSSのメリットとしては、自分で必要な機能だけを使った環境を作れることと、最新のCSSのpolyfillプラグイン（まだブラウザで対応されてないが、後に使えるようになる予定のCSS）を使えば、学習コストはCSSだけになります。<br><br>一方で環境構築のコストや管理の手間はかかります<br></p><h3 id="ha739b3b8f6">その他</h3><p>StylusやLessというのもあります。かなり前は聞きましたが、もう聞かなくなりました。<br>よっぽど物好きでない限りはSassでいいでしょう<br></p><h2 id="ha5cfe2ca50">SassとPostCSSの組み合わせ</h2><p>SassとPostCSSを組み合わせた環境はよく見られます。<br><br>Sassで生成されたCSSをさらにPostCSSで後処理をします。<br><br>例えば以下のようなことをします。</p><ul><li>autoprefixer: プレフィックスを自動でつけてくれる</li><li>css-mqpacker: 同じメディアクエリをまとめてくれる</li><li>cssnano: CSSの圧縮</li></ul><p><br><code>gulp-autoprefixer</code> というgulp用のプラグインもありますが、PostCSSとautopurefixerを使う理由は <code>gulp-autoprefixer</code>は結局PostCSSをautoprefixerを内包してるだけのgulp用ラッパープラグインだからです。なので、autoprefixerはバージョンアップしてるのに、 <code>gulp-autoprefixer</code>はまだ対応されてないということも起こりえます。<br></p><h2 id="h60799aef03">importルールの廃止とDart Sass</h2><p>Sassの <code>@import</code>ルールは廃止されることが予定されています。 <code>@import</code>は別のSassファイルを読み込んで変数を利用したり、一つにまとめることができます。<br><br>原文の予定では2022年の10月1日に廃止されます。<br><a href="https://sass-lang.com/blog/the-module-system-is-launched#future-plans" target="_blank" rel="noopener noreferrer">https://sass-lang.com/blog/the-module-system-is-launched#future-plans</a><br><code>@import</code>は <code>@use</code>や <code>@forward</code>といったルールに置き換わります。<br><br>このルールが実装されてるのがDart Sassです。Node Sassはもう開発が行われておらず非推奨になっています。<br>gulp-sassは現状はデフォルトではNode Sassですが、設定すればDart Sassが使えるので、今からDart Sassを使っておきましょう。<br><br><a href="https://www.npmjs.com/package/node-sass" target="_blank" rel="noopener noreferrer">https://www.npmjs.com/package/node-sass</a></p><blockquote>Warning: LibSass and Node Sass are deprecated. While they will continue to receive maintenance releases indefinitely, there are no plans to add additional features or compatibility with any new CSS or Sass features. Projects that still use it should move onto Dart Sass.</blockquote><p>Node SassはC++で開発されているLibSassをNode.jsで使えるようにしているラッパーライブラリです。<br>Dart SassはDartで開発されています。<br><br>さらに前にはRuby Sassがありましたが、2019年にサポート終了しています。</p>

SaaaやPostCSSなどCSSプリプロセッサについて

BlogCategory: web

Firebase v8からv9へ移行するときのFirestoreでのコレクションやドキュメント操作の書き方

Next.js + microCMSでカテゴリ一覧ページを作る

タスクランナーにgulpではなくnpm scriptsを使う

ReactでスライダーライブラリのSwiperを使う

Gatsby + Netlify から Next.js + Vercelに乗り換えました

FIrebase v9 + Next.js + Vercelの初期化でハマったところ

アニメーションライブラリGSAPについて

Jamstackなサイトとは

フォントサイズの単位について

CSSプリプロセッサについて（SassやPostCSS）

Category

Blog.css-a4b7kp{display:inline-block;margin-left:24px;font-size:18px;}@media (max-width: 37.5em){.css-a4b7kp{display:block;margin-left:8px;font-size:16px;}}Category: web

Firebase v8からv9へ移行するときのFirestoreでのコレクションやドキュメント操作の書き方

Next.js + microCMSでカテゴリ一覧ページを作る

タスクランナーにgulpではなくnpm scriptsを使う

ReactでスライダーライブラリのSwiperを使う

Gatsby + Netlify から Next.js + Vercelに乗り換えました

FIrebase v9 + Next.js + Vercelの初期化でハマったところ

アニメーションライブラリGSAPについて

Jamstackなサイトとは

フォントサイズの単位について

CSSプリプロセッサについて（SassやPostCSS）

Category

BlogCategory: web