
css で長い文章を省略するときに `text-overflow: ellipsis` を使用して省略部分に「…」（三点リーダー）などを表示することができます。

省略されているときのみツールチップで全文が表示されるようにしたいといった場合に、JavaScript で `text-overflow: ellipsis` が適用されているかどうかを判定する必要があります。

1行の場合は [HTML text-overflow ellipsis detection](https://stackoverflow.com/questions/7738117/html-text-overflow-ellipsis-detection#answers) の回答にある方法で実現できますが、テキストが複数行になる場合は少し変更が必要です。

作成済みのデモはこちらです。ソースコードの全体はこちらでご確認ください。  
[デモ（CodePen）](https://codepen.io/chocolat5/pen/BaxQgEM)

## 実現したいこと

- テキストが指定より長い場合は省略して、末尾に省略記号「…」が表示される
- テキストが省略されている場合のみツールチップが表示される

## html を用意する

中にテキストを持つカードが並ぶレイアウトです。  
テキストは2行以下と3行（省略あり・なし）の3種類を用意しました。

```html
<div class="card-list">
  <div class="block">
    <p class="text">この文章はダミーです。文字の大きさ、量、字間、行間</p>
  </div>

  <div class="block">
    <p class="text">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、</p>
  </div>

  <div class="block">
    <p class="text">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文</p>
  </div>
</div>
```

## css でテキストが指定より長い場合は省略する

1行のみで省略する場合は以下の指定で省略できます。

```css
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
```

複数行の場合は以下のように指定します（ `-webkit-line-clamp` の数字が行数になります）。

```css
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
```

## JavaScript で text-overflow: ellipsis が適用されているか判定する

`text-overflow: ellipsis` が適用されるのは、要素の中身が指定よりも大きい場合です。  
要素の中身（テキスト全体）が、要素を表示する領域（cssで指定した3行分の高さ）よりも大きい場合は `true` を返すようにします。

要素の中身の高さを `Element.scrollHeight` 、要素を表示する領域の高さを `Element.offsetHeight` でそれぞれ取得して比較します。

テキスト要素を受け取り、 `text-overflow: ellipsis` が適用されているかを判定して `true` か `false` を返す関数を作成します。

```jsx
const isEllipsisActive = (el) => {
  return (el.offsetHeight < el.scrollHeight);
}
```

この関数をテキスト要素（サンプルの `.text` ）をひとつずつ渡して実行します。

```jsx
const elements = document.querySelectorAll('.text');

elements.forEach((el) => isEllipsisActive(el));
```

## text-overflow: ellipsis が適用されている場合はツールチップを表示する

ツールチップは `HTMLElement.title` を使用します。 html 要素に `title="このテキストがツールチップとして表示されます。"` のように指定します。

> 通常、テキストは、マウスがノード上にあるときに「ツールチップ」ポップアップに表示されます。  
ー [HTMLElement.title - Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/title)より引用
> 

先ほどの関数で `true` が返る場合のみ、html に title 要素を追加します。

```jsx
elements.forEach((el) => {
  if(isEllipsisActive(el)) {
    // テキスト全文を取得
    const text = el.textContent;
    // テキスト全文を title と共に追加
    el.setAttribute('title', text);
  }
});
```

## デモ

デモでは `text-overflow: ellipsis` の判定の関数の結果を Console に書き出すようにしているので、Console を開いて正しく判定されているか確認してみてください。

[CodePen で「テキスト省略時の text-overflow: ellipsis の適用を判定する方法（複数行）」のデモを見る](https://codepen.io/chocolat5/pen/BaxQgEM)

## 参照

- javascript - HTML text-overflow ellipsis detection - Stack Overflow [https://stackoverflow.com/questions/7738117/html-text-overflow-ellipsis-detection/10017343#10017343](https://stackoverflow.com/questions/7738117/html-text-overflow-ellipsis-detection/10017343#10017343)（2022-9-15参照）
- Element.scrollHeight - Web API | MDN [https://developer.mozilla.org/ja/docs/Web/API/Element/scrollHeight](https://developer.mozilla.org/ja/docs/Web/API/Element/scrollHeight) （2022-9-15参照）
- HTMLElement.offsetHeight - Web API | MDN [https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetHeight](https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetHeight) （2022-9-15参照）
- HTMLElement.title - Web API | MDN [https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/title](https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/title) （2022-9-15参照）

テキスト省略時の text-overflow: ellipsis の適用を判定する方法（複数行）


emotion の `Global` コンポーネントを使用するとサイト全体に共通のcssを適用することができます。

`@emotion/react` はインストール済みとします。

## 導入方法

### 全体に適用する css を用意する

```jsx
const global = css`
  body {
    color: #333;
  }
`
```

### _app.tsx で Global コンポーネントを import する

```jsx
import { Global, css } from '@emotion/react'
```

### Global コンポーネントにスタイルを適用する

```jsx
<Global styles={global} />
```

### _app.tsx の全体

```jsx
// _app.tsx

import type { AppProps } from 'next/app'
import { Global, css } from '@emotion/react'

export default function MyApp({ Component, pageProps }: AppProps) {
  const global = css`
    body {
      color: #333;
    }
  `

  return (
    <>
      <Global styles={global} />
      <Component {...pageProps} />
    </>
  )
}
```

## グローバル css を別ファイルにする場合

### global.ts を作成してスタイルを記述する

※ css は Next.js のデフォルトのスタイルです。

```jsx
// global.ts

import { css } from '@emotion/react'

export const global = css`
  html,
  body {
    padding: 0;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
      Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  * {
    box-sizing: border-box;
  }

  @media (prefers-color-scheme: dark) {
    html {
      color-scheme: dark;
    }
    body {
      color: white;
      background: black;
    }
  }

`
```

### _app.tsx で読み込み、Global コンポーネントに適用する

```jsx
// _app.tsx

import type { AppProps } from 'next/app'
import { Global } from '@emotion/react'

import { global } from '@styles/globals'

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <Global styles={global} />
      <Component {...pageProps} />
    </>
  )
}
```

## normalize.css を併用する場合

### ****normalize.css をインストールする****

```bash
npm install --save normalize.css
```

### global.ts で読み込む

```jsx
// global.ts

import 'normalize.css'
```

## 参照

- Emotion – Global Styles [https://emotion.sh/docs/globals](https://emotion.sh/docs/globals)（2022-9-11参照）

[Next.js] emotionのGlobal Stylesでサイト全体のCSSを指定する


当サイトでは記事は全てMarkdownファイルで作成・管理しています。Markdown ファイルをサイトで表示させるためにはHTMLに変換する必要があります。Markdown を解析してHTMLに変換する軽量のコンパイラ [marked](https://marked.js.org/) を使用しています。

[marked 公式ドキュメント](https://marked.js.org/)  
[marked GitHub](https://github.com/markedjs/marked)

marked を使用した Next.js での Markdown のカスタマイズ方法を紹介します。（記事内のコードはTypeScriptで記述しています。）


## インストール

```bash
npm install marked
```

## sanitize（XSS攻撃対策）

sanitize （サニタイズ・サニタイジング）とは

> 《消毒の意》インターネット上で、掲示板（BBS）などの入力フォームに入力されたテキストデータから、HTMLのタグやスクリプト言語などを検出し、別の安全な文字列に置き換えること。悪意あるプログラムなどが実行されるのを防ぐためのもの。無害化。サニタイズ。サニタイゼーション。  
引用: [サニタイジングとは何？わかりやすく解説 Weblio辞書](https://www.weblio.jp/content/%E3%82%B5%E3%83%8B%E3%82%BF%E3%82%A4%E3%82%B8%E3%83%B3%E3%82%B0)
> 

marked は出力するHTMLを sanitize しないため、sanitize 用のライブラリで別途対応する必要があります。[公式ドキュメント](https://marked.js.org/#usage)では sanitize 用のライブラリとして、[DOMPurify](https://github.com/cure53/DOMPurify) が推奨されており、ほかに [js-xss](https://github.com/leizongmin/js-xss) や [sanitize-html](https://github.com/apostrophecms/sanitize-html) 、 [insane](https://github.com/bevacqua/insane) が紹介されています。

当サイトでは公式推奨の DOMPurify を使用しますが、Next.js の SSG や ISR を使用しているためか公式サイトの記述そのままでは機能しませんでした。

「[DOMPurify.sanitize is not a function](https://github.com/cure53/DOMPurify/issues/526)」 の issue を参考に [isomorphic-dompurify](https://github.com/kkomelin/isomorphic-dompurify) を使用することでエラーが解消され、Markdownが表示されるようになりました。

### インストール

```bash
npm i isomorphic-dompurify
```

### 導入例

```jsx
import DOMPurify from 'isomorphic-dompurify';
import { marked } from 'marked';

const Post = ({ post }) => {
  const dirty = marked(post);
  return (
    <article dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(dirty) }} />
  );
}
```

## シンタックスハイライト（Prism.js）

記事内のコードブロックのシンタックスハイライトには [Prism.js](https://prismjs.com/) を使用しています。

marked のThe parse function を使用して設定します。

### インストール

```bash
npm i prismjs
```

### 導入例

```jsx
import Prism from 'prismjs';
import { marked } from 'marked';

const Post = ({ post }) => {
  const renderer = new marked.Renderer();
  
  // Set options
  marked.setOptions({
    renderer,
    highlight: function (code, lang) {
      if (Prism.languages[lang]) {
        return Prism.highlight(code, Prism.languages[lang], lang)
      } else {
        return code
      }
    }
  });

  return (
    <article dangerouslySetInnerHTML={{ __html: marked.parse(post) }} />
  );
}

```

## 目次（Table of Contents）

parser に渡されるトークンの配列を構築する `lexer` を使用します。

```jsx
marked.lexer(post)
```

以下のようなMarkdown本文のトークン配列が取得できます。

```jsx
[
  {
    type: 'heading',
    raw: '## Headline Text',
    depth: 2,
    text: 'Headline Text',
    tokens: Array(1)
  },
  {
    type: 'paragraph',
    raw: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod te'
  },
  {
    type: 'heading',
    raw: '### Headline Text',
    depth: 3,
    text: 'Headline Text',
    tokens: Array(1)
  },
  {
    type: 'paragraph',
    raw: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod te'
  },
  {
    type: 'paragraph',
    raw: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod te'
  },
]
```

取得したトークン配列にフィルターをかけて、見出しに当たる `heading` のみを取得して、 `map()` でhtmlタグなどを適宜追加して整えます。

h2, h3 などの見出しのレベルは `depth` で取得できるので、当サイトではカスタムデータ属性の `data-*` に `depth` を設定して見出しのレベルによってCSSを変えられるようにしています。

### 導入例

```jsx
import { marked } from 'marked';

const Post = ({ post }) => {
  let toc;
  // トークン配列を取得
  const tokens = marked.lexer(post);
  // フィルターをかけて見出しのみを取得
  const headings = tokens.filter(token => token.type === "heading");
  // map()で整える
  toc = headings.map((heading: any, index: any) => {
    let target = heading.text.replace(/ /g, "-").replace(".", "").toLowerCase()
    return (
      <li key={index} data-depth={heading.depth}>
        <Link href={`#${target}`}>
          <a>{heading.text}</a>
        </Link>
      </li>
    )
  });

  return (
    <ul>{toc}</ul>
  );
}

```

## 出力されるhtmlタグのカスタマイズ

`renderer` を使用して特定の html 出力を定義することができます。

カスタマイズできるタグ例

- code(string code, string infostring, boolean escaped)
- list(string body, boolean ordered, number start)
- paragraph(string text)
- link(string href, string title, string text)
- image(string href, string title, string text)　など

その他のオプション等は[公式ドキュメント](https://marked.js.org/using_pro#renderer)でご確認ください。

### 導入例: link（aタグ）

```jsx
import { marked } from 'marked';

const Post = ({ post }) => {
  const renderer = new marked.Renderer();

  renderer.link = function (href: string, title: string, text: string) {
    return `<a href="${href}" target="_blank" rel="noopener noreferrer">${text}</a>`
  }

  marked.setOptions({
    renderer,
  });

  return (
    <article dangerouslySetInnerHTML={{ __html: marked.parse(post) }} />
  );
}
```

## Reference 参照

- Better solution for TOC · Issue #1489 · markedjs/marked · GitHub [https://github.com/markedjs/marked/issues/1489](https://github.com/markedjs/marked/issues/1489)（2022-8-20参照）
- Use marked and prism.js to parse markdown and add syntax highlighting in Node.js [https://gist.github.com/lightpohl/f7786afa86ff2901ef40b1b1febf14e0](https://gist.github.com/lightpohl/f7786afa86ff2901ef40b1b1febf14e0)（2022-8-23参照）
- Add support for NextJS Image - bytemeta [https://bytemeta.vip/repo/markedjs/marked/issues/2252](https://bytemeta.vip/repo/markedjs/marked/issues/2252%EF%BC%882022-8-23%E5%8F%82%E7%85%A7%EF%BC%89)（2022-8-23参照）

Next.js + Markdown (marked) で作るブログサイト


勉強をかねてGatsbyから同じReact.jsベースで開発されたJavaScriptフレームワークの [Next.js](https://nextjs.org/) へ移行しました。

パフォーマンスの観点ではGatsbyのほうが良いという記事をいくつか読みましたが、移行を決めた理由は主に次の3つです。

- 更新の度にNetlify上でのデプロイのエラーが頻発
- GatsbyJSは便利なプラグインを多く利用できる反面、依存関係の脆弱性の問題がある
- Next.js と TypeScript でサイトを構築してみたかった


## Next.jsについて

[Next.js](https://nextjs.org/)はReactベースで開発されたJavaScriptフレームワークです。

> Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.

## 環境について

|                      | 移行前   | 移行後     |
|----------------------|----------|------------|
| フレームワーク       | GatsbyJS | Next.js    |
| 言語                 | React    | TypeScript |
| ホスティングサービス | Netlify  | Vercel     |


## 移行作業

サイトの構成などによって必要な移行作業は変わりますが、まずは Next.js の公式サイトで公開されている「[Migrating from Gatsby](https://nextjs.org/docs/migrating/from-gatsby)」ページの作業を行います。

当サイトで上記のページの手順以外に必要になった作業は主に次の4つです。

- 各記事のパーマネントリンクおよびディレクトリ構成を維持する
- 記事内の画像の読み込み
- 記事内のマークダウンにシンタックスハイライトを適用する
- 目次（Table of Contents）の表示
- カテゴリー、タグ一覧ページの作成
- Google Analytics, Google Adsens などの設定
- Netlify から Vercel への変更

### 各記事のパーマネントリンクおよびディレクトリ構成を維持する

CMSは未導入のため各記事のデータは `src` 内の markdown ファイルを読み込んでいます。  
Gatsbyでサイトを作成した際に他のサイトを参考にしながら以下のようなルールを決めてファイル管理を行っていました。

- 記事のファイルも投稿日順で管理できるようにするためファイル名を「 `日付-スラッグ.md` 」とする
- ただし、パーマネントリンクはスラッグのみ
- 記事内に画像がある場合は `日付-スラッグ` というフォルダを作成し、その中に `index.md` を作成する
- about, policy などのページもマークダウンで管理する

```md
src
├──contents
│   ├── pagegs
│   │   ├── about.md
│   │   └── policy.md
│   │
│   ├── posts
│   │   ├── blog
│   │   │    └── 日付-スラッグ.md
│   │   └── tips
│   │   │    ├── 日付-スラッグ.md
│   │   │    └── 日付-スラッグ
│   │   │          ├── index.md
│   │   │          └── image.jpg
```


上記を Next.js 移行後も維持したかったので、「[Migrating from Gatsby](https://nextjs.org/docs/migrating/from-gatsby)」の「Data Fetching」の項目の `getPostBySlug` にあたる部分でディレクトリ構造にあわせた修正が必要でした。

### 記事内の画像の読み込み

Next.js では静的ファイルは `public` フォルダで管理します。

当サイトでは、記事内の画像は記事の markdown ファイルと同じフォルダ内で管理しています。そうすることで記事内の画像の読み込みは以下のパスを書くだけで読み込むことができていました。

```markdown
![](./image.jpg)
```

方法を探る中で `next-optimized-images` ライブラリや loader を使用した方法などいくつか試しましたが上手く読み込めなかったため、正しいかどうかはわかりませんが、最終的に次の方法で、パスの書き換えなどをせずに記事内の画像が読み込まれるようにできました。

1. `copy-webpack-plugin` をインストール

2. `next.config.js` で記事内の画像データをビルド後に静的ファイルが置かれる `.next/static/media/` にコピーする。

```js
/** next.config.js */
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
  webpack: (config) => {
    config.plugins.push(
      new CopyWebpackPlugin({
        patterns: [
          {
            from: './src/contents/posts/**/**/*', // コピー元のファイルを指定
            to: './static/media/img/[path][name][ext]', // コピー先のフォルダを指定
            globOptions: {
              ignore: ['./**/*.md'], // 記事の markdown ファイルは除外
            }
          },
        ]
      })
    )
    return config
  }
}

```

Webpack プラグインの使用やカスタマイズについては、Next.js 公式サイトの「[Custom Webpack Config](https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config)」に説明がありますが、

> Note: changes to webpack config are not covered by semver so proceed at your own risk

という注意書きがありますので、ご使用はご自身の判断になります。


### 記事内のマークダウンにシンタックスハイライトを適用する

Gatsby では `gatsby-remark-prismjs` プラグインをインストールして使用していたので、Next.js でも同じ [Prism.js](https://prismjs.com/) を使用することにしました。

markdown への適用は、 markdown ファイルの変換方法によって変わりますが、おおまかな導入の流れとしては次の手順になります。

1. Gatsby用のプラグインの代わりに `prismjs` と `babel-plugin-prismjs` をインストール

2. `_app.tsx` で `prism.css` と使用したいテーマのCSSファイルを読み込む

```js
/** _app.tsx */
import '@(パス)/prism.css'
import '@(パス)/prism-tomorrow.css'
```

3. 記事コンポーネントで Prism.js を markdown に適用させる

4. Babel の設定ファイル `.babelrc` に使用言語やオプション等を記述する

```json
/** .babelrc */
{
  "plugins": [
    "@emotion/babel-plugin",
    [
      "prismjs",
      {
        "languages": [
          "javascript", 
          "typescript",
          "jsx",
          "css",
          "markup",
          "json",
        ],
        "plugins": ["show-language"], // 言語名のラベルを表示
        "css": true
      }
    ]
  ]
}

```

### 目次（Table of Contents）の表示

Gatsby では `gatsby-transformer-remark` プラグインを使用して `GraphQL` で目次を取得していました。

Next.js への移行にあたり、 markdown の変換に使用しているnpmパッケージ [marked](https://github.com/markedjs/marked) で目次を取得して表示させるようにしました。  
'marked` を使用したTable of Contents の作成方法の詳細は別記事としてまとめる予定です。

### Netlify から Vercel への変更

Next.js へ移行するにあたり、デプロイ先もNext.js を開発している [Vercel](https://vercel.com/) 社が提供するホスティングサービスに変更するほうが都合が良さそうだったため、あわせて変更しました。

Netlify へのデプロイはGitHubのリポジトリと連携させていたため、Vercelへの移行はとても簡単にできました。

デプロイ先の変更のほかに当サイトは独自ドメインを設定しているため、以下の手順でドメインの設定変更を行いました。

1. Netlify で独自ドメインの登録を削除する
2. Vercel でデプロイ後に独自ドメインを登録する
3. ドメイン契約会社の管理画面でネームサーバーの設定を変更する


## 追加した主なパッケージ

- **next**
- **gray-matter** : markdown ファイルのfront-matter解析
- **marked** : markdown 変換
- **prismjs** : シンタックスハイライト


## 最後に

Lighthouseで移行前と移行後に計測した結果です。  
事前に記事で読んでいた通り、パフォーマンスはGatsbyよりも数値が下がりましたが、これから改善していこうと思います。
（Accessibility の数値が少し上がっているのは背景と文字色のコントラストを少し変更したので、Next.jsへの移行によるものではありません。）

**移行前**
![](./migrating-from-gatsby-to-nextjs01.jpg)

**移行後**
![](./migrating-from-gatsby-to-nextjs02.jpg)


## Reference 参照
- Migrating from Gatsby | Next.js [https://nextjs.org/docs/migrating/from-gatsby](https://nextjs.org/docs/migrating/from-gatsby)（2022-8-15参照）
- Next.jsを利用した初めての本格的Markdownブログサイトの構築 [https://reffect.co.jp/react/nextjs-markdown-blog](https://reffect.co.jp/react/nextjs-markdown-blog)（2022-8-19参照）
- Build the static blog with Next.js and Markdown [https://medium.com/nextjs/build-the-static-blog-with-next-js-and-markdown-d438c2f74297](https://medium.com/nextjs/build-the-static-blog-with-next-js-and-markdown-d438c2f74297)（2022-8-19参照）
- Next.jsでmarkdownのコードブロックをPrismJSでシンタックスハイライトする [https://www.ibulog.com/posts/2021/08/nextjs-prismjs](https://www.ibulog.com/posts/2021/08/nextjs-prismjs)（2022-8-23参照）

GatsbyJS から Next.js へ移行


React/Next.js + TypeScript + Emotion + Netlify の環境構築およびデプロイまでの手順です。

[デモ](https://nextjs-typescript-netlify-starter.netlify.app/)  
[GitHubリポジトリ](https://github.com/chocolat5/nextjs-typescript-netlify-starter)

バージョン  
- Next.js : 12.1.5
- TypeScript : 4.7.4
- ESLint : 8.21.0
- Emotion : 11.10.0

## 実現したいこと

- React/Next.js + TypeScript + Emotion + Netlify でwebサイトを公開する

## 導入手順・環境設定

### Next.js のインストール

Netlify の公式サイトのスターターを使用します。

以下のリポジトリにアクセスして、Use this template ボタンからご自身のGitHubにリポジトリを作成します。リポジトリが作成できたらローカル環境にクローンします。  
[https://github.com/netlify-templates/next-netlify-starter](https://github.com/netlify-templates/next-netlify-starter)

### TypeScript のインストール

TypeScript をインストールします。

```bash
npm install typescript @types/node @types/react @types/react-dom --save-dev
```

`tsconfig.json` ファイルを作成する

```bash
touch tsconfig.json
```

`npx create-next-app@latest --ts` を実行した際に生成される場合と同じ内容を記述します。

```json
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}
```

`next-env.d.ts` ファイルを作成します。

```bash
touch next-env.d.ts
```

`npx create-next-app@latest --ts` を実行した際に生成される場合と同じ内容を記述します。

```js
/// <reference types="next" />
/// <reference types="next/image-types/global" />

// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.
```

`.gitignore` に追記します。

```gitignore
# typescript
next-env.d.ts
```

`next.config.js` ファイルを作成する。

```bash
touch next.config.js
```

こちらも `npx create-next-app@latest --ts` を実行した際に生成される場合と同じ内容を記述します。

```js
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
}

module.exports = nextConfig
```

### ESLint のインストール

ESLint をインストールします。

```bash
npm install eslint eslint-config-next --save-dev
```

`.eslintrc.json` ファイルを作成します。

```bash
touch .eslintrc.json
```

こちらも `npx create-next-app@latest --ts` を実行した際に生成される場合と同じ内容を記述します。

```json
{
  "extends": "next/core-web-vitals"
}
```

`_app.js` ファイルを `_app.tsx` に変更して、以下のように書き換えます。

```jsx
import type { AppProps } from 'next/app'

import '@styles/globals.css'

export default function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}
```

ここで一度 `npm run dev` を実行して、ブラウザで [http://localhost:3000](http://localhost:3000/) にアクセスしてみます。以下の画面が表示されれば問題ありません。

![](./nextjs-typescript-emotion-netlify-01.png)

### Emotion のインストール

Emotion をインストールします。Next.js で TypeScript と一緒に使用するために必要な `@emotion/babel-plugin` もあわせてインストールします。

```bash
npm install @emotion/react @emotion/babel-plugin --save-dev 
```

`.babelrc` を作成して、以下のように記述します。

```babelrc
{
  "presets": [
    [
      "next/babel",
      {
        "preset-react": {
          "runtime": "automatic",
          "importSource": "@emotion/react"
        }
      }
    ]
  ],
  "plugins": ["@emotion/babel-plugin"]
}
```

`tsconfig.json` に `"types": ["@emotion/react/types/css-prop"]` を追記します。

```json
	"compilerOptions": {
		"types": ["@emotion/react/types/css-prop"],
```

`index.js` のファイル名を `index.tsx` に変更して、Emotion でスタイルを変更してみます。

```jsx
import Head from 'next/head'
import Header from '@components/Header'
import Footer from '@components/Footer'
import { css } from '@emotion/react'

export default function Home() {
  return (
    <div className="container">
      <Head>
        <title>Next.js Starter!</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <Header title="Welcome to my app!" />
        <p css={desc}>
          Get started by editing <code>pages/index.js</code>
        </p>
      </main>

      <Footer />
    </div>
  )
}

const desc = css`
  color: green;
`
```

もう一度 `npm run dev` を実行して、ブラウザで [http://localhost:3000](http://localhost:3000/) にアクセスします。以下のように、テキストがcssで指定した色に変更されていれば問題ありません。

![](./nextjs-typescript-emotion-netlify-02.png)

### ファイルを src フォルダにまとめる場合

`src` フォルダを作成して、 `components` `pages` `styles` フォルダを移動します。

`tsconfig.json` に `baseUrl` と `paths` を追記します。

```json
{
  "compilerOptions": {
		// 省略
    "baseUrl": ".",
    "paths": {
      "@*": [
        "./src/*"
      ]
    },
  },
	// 省略
}
```

## Netlify にデプロイする

インストール・環境設定が完了したら、GitHubのリポジトリに作業内容をpushします。

[Netlify](https://www.netlify.com/) にログインして、 「Add new site」 > 「Import exising project」を選択します。

「Connect to Git provider」でGitHubを選択します。

![](./nextjs-typescript-emotion-netlify-03.png)

「Pick a repository from GitHub」に切り替わり、リポジトリの一覧が表示されるので、先ほどpushしたリポジトリを選択します。

「Basic build settings」はデフォルトのままで問題ありません。確認できたら「Deploy site」をクリックしてデプロイします。

![](./nextjs-typescript-emotion-netlify-04.png)

デプロイが完了してステータスが「Publihed」になったら、Netlifyで自動生成されたURLにアクセスします。以下の画面が表示されれば完了です。

![](./nextjs-typescript-emotion-netlify-05.png)

## デモ

[https://nextjs-typescript-netlify-starter.netlify.app/](https://nextjs-typescript-netlify-starter.netlify.app/)

## 参照

- Basic Features: TypeScript | Next.js [https://nextjs.org/docs/basic-features/typescript](https://nextjs.org/docs/basic-features/typescript)（2022-8-13参照）
- Reactでの開発力UPのため色々試してみたまとめ [https://zenn.dev/panyoriokome/scraps/3cf82075af96ed](https://zenn.dev/panyoriokome/scraps/3cf82075af96ed)（2022-8-14参照）
- next.js/examples/with-emotion at canary · vercel/next.js · GitHub [https://github.com/vercel/next.js/tree/canary/examples/with-emotion](https://github.com/vercel/next.js/tree/canary/examples/with-emotion)（2022-8-14参照）

React/Next.js + TypeScript + Emotion + Netlify の環境構築


slickプラグインで作成するスライダーに、次のスライドに切り替わるまでの進捗がわかるプログレスバーを実装する方法です。

## 実現したいこと

- プログレスバー付きのslickスライダーを実装する


## htmlを用意する

スライドする画像を用意します。

```html
<div class="slider">
  <img src="https://source.unsplash.com/LEpfefQf4rU" alt="">
  <img src="https://source.unsplash.com/dQ5G0h7sLno" alt="">
  <img src="https://source.unsplash.com/uy5t-CJuIK4" alt="">
  <img src="https://source.unsplash.com/hQPoYovqWR0" alt="">
</div>
```

## slickプラグインを動作させる

[slickの公式サイト](http://kenwheeler.github.io/slick/)からファイルをダウンロードして読み込みます。jQueryも読み込みます。

```html
<link rel="stylesheet" href="slick.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="slick.min.js"></script>
```


slickのオプションで必要な設定です。次のスライドが切り替わるまでの進捗を表するため `autoplay: true` で自動切り替えを有効にします。  
dotsの部分をプログレスバーとして使用するため `dots: true` と `dotsClass: 'slider-dots'` 、CSSのアニメーションでプログレスバーの進捗を実装するため `pauseOnHover: false` `pauseOnFocus: false` にします。

```js
$('.slider').slick({
  pauseOnHover: false,
  slidesToShow: 1,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 5000,
  dots: true,
  arrows: false,
  dotsClass: 'slider-dots',
});
```

## CSSでプログレスバーを実装する

slickプラグインのオプションで設定したclass名 `slider-dots` に対してスタイルを設定していきます。

slickプラグインで生成されるdotsをバーのような見た目にしたいので、横長になるようCSSで設定します。  
プログレスバーは `button` の `:after` を使用して実装します。

```css
.slider-dots {
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  list-style: none;
  
  li {
    display: inline-block;
    width: calc(25% - 8px); /* プログレスバーの横幅はスライドの枚数に合わせて調整してください */
    margin: 0 2px;
  }
  
  button {
    position: relative;
    width: 100%;
    height: 4px;
    border: 0;
    background-color: #ccc;
    font-size: 0;
    
    &:after {
      position: absolute;
      top: 0;
      left: 0;
      content: '';
      display: block;
      width: 0%;
      height: 100%;
    }
  }
}
```



slickでは現在表示されいてるスライドと対応するdotsに `slick-active` というclass名が付与されます。  
`slick-active` が付与されている場合に、プログレスバー（ `button:after` ）の `width` が0%から100%になるようにアニメーションを作成します。

アニメーションのdurationはslickのオプション `autoplaySpeed` に合わせて適宜調整してください。

```css
.slider-dots {
  /* 省略 */

  /* 追加 */
  .slick-active {
    button:after {
      background-color: #000;
      animation: progress 5.5s linear forwards;
    }
  }
}

@keyframes progress {
  from {
    width: 0%;
  }
  
  to {
    width: 100%;
  }
}
```


## デモ

<iframe height="550" style="width: 100%;" scrolling="no" title="Slick slider with progress bar" src="https://codepen.io/chocolat5/embed/preview/WNdEzeN?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/chocolat5/pen/WNdEzeN">
  Slick slider with progress bar</a> by chocolat5 (<a href="https://codepen.io/chocolat5">@chocolat5</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>


slickスライダーにプログレスバーを実装する


PCやスマートフォンなどのデバイスの外観の設定でダークモード（またはダークテーマ）を有効にすると、ユーザーインターフェースや対応されているWebサイトが暗い色で表示されます。

このダークモードはCSSの[カスタムプロパティ（Custom Properties）](https://developer.mozilla.org/ja/docs/Web/CSS/--*)や[メディアクエリ（media queries）](https://developer.mozilla.org/ja/docs/Web/CSS/Media_Queries/Using_media_queries)を使用することで簡単に実装することができます。

デバイスの設定に応じてWebサイトのテーマを切り替える方法に加えて、[Google Fonts](https://fonts.google.com/)のようにWebサイト独自でライトモード/ダークモードの切り替えを可能にするボタンの設置方法を紹介します。


## デバイスの設定に応じてWebサイトのテーマを切り替える

CSSの[カスタムプロパティ（Custom Properties）](https://developer.mozilla.org/ja/docs/Web/CSS/--*)とSCSSの `@mixin` を使用してライトモード/ダークモードそれぞれの場合のカラーコードを設定します。

```css
@mixin  light-theme {
  --color-primary: #bae8e8;
  --color-secondary: #e3f6f5;
  --color-text: #2d334a;
  --color-surface: #e3f6f5;
  --color-stroke: ##272343;
  --color-bg: #fffffe;
}

@mixin dark-theme {
  --color-primary: #bae8e8;
  --color-secondary: #72757e;
  --color-text: #fffffe;
  --color-surface: #121212;
  --color-stroke: #010101;
  --color-bg: #242629;
}
```

デバイスの設定に応じたCSSの切り替えには [メディアクエリ（media queries）](https://developer.mozilla.org/ja/docs/Web/CSS/Media_Queries/Using_media_queries)の `prefers-color-scheme` を使用します。 （ `prefers-color-scheme` のブラウザ対応状況は[こちら](https://caniuse.com/?search=prefers-color-scheme)です。）

```css
@media (prefers-color-scheme: dark) {
  /* ダークモード（ダークテーマ）を有効にしている場合に反映されます */
}

@media (prefers-color-scheme: light) {
  /* ライトモードを有効にしている場合または設定がデフォルトの場合に反映されます */
}
```

先ほど作成した `@mixin` を `@include` で呼び出します。

```css
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-theme;
  }
}

@media (prefers-color-scheme: light) {
  :root {
    @include light-theme;
  }
}
```

### デモ

デバイスの外観の設定が反映されるようになりました。

<iframe height="400" style="width: 100%;" scrolling="no" title="Dark Mode with Custom Properties" src="https://codepen.io/chocolat5/embed/preview/dyZrRgx?default-tab=" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/chocolat5/pen/dyZrRgx">
  Dark Mode with Custom Properties</a> by chocolat5 (<a href="https://codepen.io/chocolat5">@chocolat5</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

実際に切り替えた際の見え方です。  
![](./sample.gif)


## Webサイト独自のダークモード切り替えボタンを設置する

各テーマのCSSの設定は[デバイスの設定に応じてWebサイトのテーマを切り替える](#%E3%83%87%E3%83%90%E3%82%A4%E3%82%B9%E3%81%AE%E8%A8%AD%E5%AE%9A%E3%81%AB%E5%BF%9C%E3%81%98%E3%81%A6web%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AE%E3%83%86%E3%83%BC%E3%83%9E%E3%82%92%E5%88%87%E3%82%8A%E6%9B%BF%E3%81%88%E3%82%8B)と同じですが、 `@include` での呼び出し場所が変わります。 `body` タグの `class` 名によってライトテーマ/ダークテーマが切り替わるようにします。

```css
.light {
  @include light-theme;
}

.dark {
  @include dark-theme;
}
```

htmlに切り替え用のボタンを設置します。  
JavaScriptで切り替えの処理を行うためにボタンに `id="toggleTheme"` を付与しています。

```html
<button id="toggleTheme">
  <span>Dark</span> Mode
</button>
```

JavaScriptで切り替えの処理を記述していきます。  
デフォルトではライトテーマが設定されている（ `<body class="light"></body>` ）ことを前提としています。

切り替えボタンとテキストを変数として宣言します。

```js
const btn = document.getElementById('toggleTheme');
const btnText = document.querySelector('#toggleTheme span');
let theme;
```

クリックしたときに実行する処理を `toggleTheme` として宣言します。  
ボタンをクリックするたびに宣言した処理を実行したいので、 `addEventListener` で `click` イベントを指定します。

```js
const toggleTheme = () => {
  // ここにクリックした時の処理を記述する
}

btn.addEventListener('click', () => {
  toggleTheme();
});
```

`toggleTheme` の処理は、実行される度にbodyタグのclass名が `light <-> dark` となるようにします。  
class名は `element.classList.replace('現在のclass名', '変更後のclass名')` で付け替えます。

bodyタグのclass名を `element.classList.contains('class名')` で取得し、現在のclass名に応じて付け替えを行います。  
ボタン名は `element.innerHTML` で書き換えます。

```js
const toggleTheme = () => {
  if (document.body.classList.contains('light')) {
    document.body.classList.replace('light', 'dark');
    btnText.innerHTML = 'Light';
  } else {
    document.body.classList.replace('dark', 'light');
    btnText.innerHTML = 'Dark';
  }
}
```

ボタンをクリックする度にテーマが切り替わるようになりましたが、ブラウザを更新したりサイトを離れてしまうとデフォルトテーマに戻ってしまいます。  
`localStorage` を使用してユーザーが選択したテーマをWebサイトに覚えさせておくようにします。

適用するテーマを保存するための変数を宣言します。

```js
let theme;
```

`localStorage` に保存されているテーマを `localStorage.getItem('名前')` で取得し `currentTheme` として宣言します。  
保存されているテーマがない場合はデフォルトテーマ（`light`）が現在のテーマとして宣言されるようにします。

```js
const currentTheme = localStorage.getItem('theme') || 'light';
```

Webサイトが読み込まれた際の最初の見え方（表示テーマ）を、 `currentTheme` に応じてbodyタグのclass名およびボタン名を切り替えて設定します。

```js
if (currentTheme === 'dark') {
  document.body.classList.add('dark');
  btnText.innerHTML = 'Light';
} else if (currentTheme === 'light') {
  document.body.classList.add('light');
  btnText.innerHTML = 'Dark';
}
```

ボタンがクリックされる度に最初に宣言した `theme` の値が `light <-> dark` となるようにし、 `localStorage` に  `localStorage.setItem('名前', 値)`  で保存します。

```js
const toggleTheme = () => {
  if (document.body.classList.contains('light')) {
    document.body.classList.replace('light', 'dark');
    theme = 'dark';
    btnText.innerHTML = 'Light';
  } else {
    document.body.classList.replace('dark', 'light');
    theme = 'light';
    btnText.innerHTML = 'Dark';
  }
  localStorage.setItem('theme', theme);
}
```

### デモ

<iframe height="400" style="width: 100%;" scrolling="no" title="Dark Mode with Toggle Button" src="https://codepen.io/chocolat5/embed/preview/OJOqdqY?default-tab=" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/chocolat5/pen/OJOqdqY">
  Dark Mode with Toggle Button</a> by chocolat5 (<a href="https://codepen.io/chocolat5">@chocolat5</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>


## デバイスの設定とWebサイト独自の切り替えの両方に対応する

デバイスはダークモード（ダークテーマ）を有効にしていても、Webサイトはライトテーマで見たいという場合もあるかもしれません。  
紹介した2つの方法を組み合わせることで、Webサイトを最初に訪問した際はデバイスの設定に準じたテーマで表示され、ボタンによってユーザーが任意でテーマを切り替えることができるようになります。

デバイスの外観の設定をJavaScriptで取得するには `window.matchMedia('(prefers-color-scheme: dark)')` を使用します。    
デバイスの設定がダークモード（ダークテーマ）になっている場合は `true` を返します。  
この値を `prefersDarkTheme` として宣言します。

Webサイト訪問時に使用するテーマを判定する箇所に追記します。

```js
if (currentTheme === 'dark' || prefersDarkTheme.matches) {
  document.body.classList.add('dark');
  btnText.innerHTML = 'Light';
} else if (currentTheme === 'light' || !prefersDarkTheme.matches) {
  document.body.classList.add('light');
  btnText.innerHTML = 'Dark';
}
```

### デモ

<iframe height="400" style="width: 100%;" scrolling="no" title="Dark Mode with media queries and Toggle Button" src="https://codepen.io/chocolat5/embed/preview/WNXmdZJ?default-tab=" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/chocolat5/pen/WNXmdZJ">
  Dark Mode with media queries and Toggle Button</a> by chocolat5 (<a href="https://codepen.io/chocolat5">@chocolat5</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>


## Reference 参照

- prefers-color-scheme [https://developer.mozilla.org/ja/docs/Web/CSS/@media/prefers-color-scheme](https://developer.mozilla.org/ja/docs/Web/CSS/@media/prefers-color-scheme) （2022-3-7参照）  
- Window.localStorage [https://developer.mozilla.org/ja/docs/Web/API/Window/localStorage](https://developer.mozilla.org/ja/docs/Web/API/Window/localStorage) （2022-3-7参照）  
- window.matchMedia [https://developer.mozilla.org/ja/docs/Web/API/Window/matchMedia](https://developer.mozilla.org/ja/docs/Web/API/Window/matchMedia) （2022-3-7参照）  

CSSメディアクエリを使用したダークモードの実装方法


テキストにマウスhoverすると、画像が切り替わるスライドの作り方です。  
完成形は[こちら](#%E3%83%87%E3%83%A2)です。

## 実現したいこと

- テキストにマウスhoverすると画像が切り替わる


## 1. htmlを用意する

切り替わる画像エリア `slide-image` と、マウスhoverするテキストエリア `slide-text` の2つを用意します。

```html
<div class="slide-wrap">
  <ul class="slide-image">
    <li class="slide-image__item">
      <img src="https://source.unsplash.com/rkaahInFlBg/640x360" alt="">
    </li>
    <li class="slide-image__item">
      <img src="https://source.unsplash.com/3esjG-nlgyk/640x360" alt="">
    </li>
    <li class="slide-image__item">
      <img src="https://source.unsplash.com/9HnSQn4TVEg/640x360" alt="">
    </li>
  </ul>
  <div class="slide-text">
    <p class="slide-text__text">
      <span>Iron Man</span>
    </p>
    <p class="slide-text__text">
      <span>Thor</span>
    </p>
    <p class="slide-text__text">
      <span>Captain America</span>
    </p>
  </div>
</div>
```

## 2. cssでスタイルを設定する

画像エリアはマウスhoverで切り替わるようにするため、1枚だけ見える状態にします。  
1で作成したhtmlの1つ目の画像に `current` というclassを追加します。

```html
<li class="slide-image__item current">
  <img src="https://source.unsplash.com/rkaahInFlBg/640x360" alt="">
</li>
```

画像群は ` display: grid;` で重なるようにします。

後ほどJavaScriptでマウスhoverと連動して `current` の付け替えをしますが、
その際に `current` の場合に `opacity: 1;` および `visibility: visible;` 、
そうでないときは `opacity: 0;` および `visibility: hidden;` になるように設定します。
`transition` で切り替わるときの状態の変化も設定します。

```css
.slide-image {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  overflow: hidden;
  
  &__item {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity .45s cubic-bezier(0.65, 0, 0.35, 1),
      visibility .45s cubic-bezier(0.65, 0, 0.35, 1);
    
    &.current {
      opacity: 1;
      visibility: visible;
      transition:
        opacity .45s cubic-bezier(0.65, 0, 0.35, 1),
        visibility .45s cubic-bezier(0.65, 0, 0.35, 1);
    }
  }
}

```


## 3. JavaScriptでclassの付け替えをする

テキストにマウスhoverした場合にどの画像を `current` にするか、  
カスタムデータ属性の `data-*` と `id` を使用して対応するようにします。

また、JavaScriptから操作する時のために、  
画像に `js-target` テキストに `js-trigger` とそれぞれclassを追加します。

```html
<div class="slide-wrap">
  <ul class="slide-image">
    <li id="item-01" class="slide-image__item js-target current">
      <img src="https://source.unsplash.com/rkaahInFlBg/640x360" alt="">
    </li>
    <li id="item-02" class="slide-image__item js-target">
      <img src="https://source.unsplash.com/3esjG-nlgyk/640x360" alt="">
    </li>
    <li id="item-03" class="slide-image__item js-target">
      <img src="https://source.unsplash.com/9HnSQn4TVEg/640x360" alt="">
    </li>
  </ul>
  <div class="slide-text">
    <p data-target="item-01" class="slide-text__text js-trigger">
      <span>Iron Man</span>
    </p>
    <p data-target="item-02" class="slide-text__text js-trigger">
      <span>Thor</span>
    </p>
    <p data-target="item-03" class="slide-text__text js-trigger">
      <span>Captain America</span>
    </p>
  </div>
</div>
```

JavaScriptではまず画像群とテキスト群を変数として宣言します。

```js
const triggers = document.querySelectorAll('.js-trigger'); 
const images = document.querySelectorAll('.js-target');
```

テキストそれぞれにマウスhoverする度に処理を実行したいので、  
`triggers` に対して `forEach` を使用します。

カーソルが要素の上を移動したときにイベントが発生する `mouseover` を使用して、  
マウスhoverした際に処理が実行されるようにします。

```js
triggers.forEach(trigger => {
  trigger.addEventListener('mouseover', (e) => {
    // ここに処理を記述
  });
}
```

ここからは画像の切り替えに必要な `current` classの付け替え処理についてです。

マウスhoverされているテキストを取得して `item` に格納します。  
そのテキストに対応する画像idを取得して `target` に格納します。
取得したidをもとに表示させたい画像を取得して `current` に格納します。
```js
const item = e.currentTarget;
const target = item.getAttribute('data-target');
const current = document.getElementById(target);
```

現在 `current` になっている画像を非アクティブにするために
一旦、画像群に付与されている `current` classを削除します。

```js
images.forEach(image => {
  image.classList.remove('current');
});
```

最後に先ほど取得した `current` に class `current` を追加します。
```js
current.classList.add('current');
```

最終的なJavaScriptのソースコードです。

```js
const triggers = document.querySelectorAll('.js-trigger'); 
const images = document.querySelectorAll('.js-target');

triggers.forEach(trigger => {
  trigger.addEventListener('mouseover', (e) => {
    const item = e.currentTarget;
    const target = item.getAttribute('data-target');
    const current = document.getElementById(target);
    images.forEach(image => {
      image.classList.remove('current');
    });
    current.classList.add('current')；
  });
});

```


## デモ

テキストにマウスhoverすると画像が切り替わります。

<iframe height="350" style="width: 100%;" scrolling="no" title="Hover Slide" src="https://codepen.io/chocolat5/embed/JjOwVVJ?default-tab=" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/chocolat5/pen/JjOwVVJ">
  Hover Slide</a> by chocolat5 (<a href="https://codepen.io/chocolat5">@chocolat5</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>


## Reference 参照

- Array.prototype.forEach() [https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) （2022-3-4参照）  
- Element: mouseover イベント [https://developer.mozilla.org/ja/docs/Web/API/Element/mouseover_event](https://developer.mozilla.org/ja/docs/Web/API/Element/mouseover_event) （2022-3-4参照）

マウスhoverで画像が切り替わるスライド [jQuery不要]


278言語に対応しながら軽量で拡張可能なシンタックスハイライトライブラリ [PrismJS](https://prismjs.com/) を使用して、Gatsby JS製のブログの本文内のソースコード（コードブロック）をシンタックスハイライト表示する方法です。

シンタックスハイライトに加えて、当ブログのようにコードブロックにファイル名や言語名などタイトルを表示する方法もあわせてご紹介します。

## 実現したいこと

- Gatsby JS製のブログの本文内のソースコード（コードブロック）をシンタックスハイライト表示させる
- コードブロックにタイトルを表示させる


## 要件

- Gatsby JS製ブログ
- 本文記事をMarkdownで作成している


## 1. プラグインをインストールする

 [PrismJS](https://prismjs.com/) とGatsby JSでPrismJSを使用するためのプラグインをインストールします。

※ MarkdownファイルをHTMLに変換するためのプラグイン `gatsby-transformer-remark` はインストール済みとします。

```bash
npm install --save gatsby-remark-prismjs prismjs
```

インストールしたプラグインを有効にするため `gatsby-config.js` に記述し、必要に応じてオプションを設定します。

```js
/** gatsby-config.js */

plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-prismjs`,
          options: {
            // <pre>タグのclass名のプレフィックス名を設定
            // 例 : <pre class="language-js">
            classPrefix: "language-",
            // セパレーターを使用して、
            // シングルバックティックなどのインラインコードに言語を設定できる
            inlineCodeMarker: null,
            // 言語の別名を設定できる
            // 例 : { sh: "bash" }
            aliases: {},
            // 行番号の表示・非表示
            showLineNumbers: false,
            // true にするとインラインコードをハイライトしない
            noInlineHighlight: false,
          },
        }
      ]
    }
  }
]
```

上記以外に、新しい言語定義を追加したりすでに存在する言語定義を拡張するオプションなどもありますが、ここでは省略します。その他のオプションに関しての詳細は [gatsby-remark-prismjs（English）](https://www.gatsbyjs.com/plugins/gatsby-remark-prismjs/) をご覧ください。


## 2. シンタックスハイライトのテーマ用CSSを読み込む

 [PrismJS](https://prismjs.com/) に用意されている[8種類のテーマ](#prismjs%E3%81%AE%E3%83%86%E3%83%BC%E3%83%9E)から好きなものを選んでCSSを読み込みます。

Gatsby JSにグローバルCSSファイルを追加する方法は「[レイアウトコンポーネントを使用する](#%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%82%B0%E3%83%AD%E3%83%BC%E3%83%90%E3%83%ABcss%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B)」ものと「[レイアウトコンポーネントなしで追加する](#%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%AA%E3%81%97%E3%81%A7%E3%82%B0%E3%83%AD%E3%83%BC%E3%83%90%E3%83%ABcss%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B)」方法の2種類があります。


### レイアウトコンポーネントを使用してグローバルCSSファイルを追加する

ヘッダーやスタイルなどのサイト全体で共有されるレイアウトコンポーネント（ `Layout.js` など）でテーマ用のCSSを読み込みます。

 [PrismJS](https://prismjs.com/) から好きなテーマのCSSをダウンロードして、 `Layout.js` と同じ階層に配置します。（ `Layout.js` は `src/pages/index.js` で使用されているものとします。）


```md
src/
  │───components/
  │   │─ Layout.js
  │   └─ prism.css
  │
  └───pages/
        └─  index.js
```

`Layout.js`でテーマ用のCSSを読み込みます。

```jsx
/** src/components/Layout.js */

import React from "react"
/* DEFAULTテーマを読み込む場合の例です */
import "./prism.css"

const Layout = ({ children }) => {
  return <div>{children}</div>
}

export default Layout
```

### レイアウトコンポーネントなしでグローバルCSSファイルを追加する

Gatsby JSのテーマフォルダ直下に `gatsby-browser.js` を作成して、使用したい [PrismJS](https://prismjs.com/) のテーマCSSを読み込む。

```jsx
/** gatsby-browser.js */

/* DARKテーマを読み込む場合の例です */
import "prismjs/themes/prism-dark.css"

// または
// require("prismjs/themes/prism-dark.css")
```

### PrismJSのテーマ

**DEFAULT** `prism.css`  
![](./prism-default.jpg)

**DARK** `prism-dark.css`  
![](./prism-dark.jpg)

**FUNKY** `prism-funky.css`  
![](./prism-funky.jpg)

**OKAIDIA** `prism-okaidia.css`  
![](./prism-okaidia.jpg)

**TWILIGHT** `prism-twilight.css`  
![](./prism-twilight.jpg)

**COY** `prism-coy.css`  
![](./prism-coy.jpg)

**SOLARIZED LIGHT** `prism-solarizedlight.css`  
![](./prism-solarized.jpg)

**TOMORROW NIGHT** `prism-tomorrow.css`  
![](./prism-tomorrow.jpg)


そのほかの言語の例は [PrismJS](https://prismjs.com/) 公式サイトでご確認ください。

## 3. コードブロックにタイトルを表示する

プラグイン `gatsby-remark-prismjs-add-title` をインストールします。

```bash
npm install gatsby-remark-prismjs-add-title --save-dev
```

`gatsby-config.js` にインストールしたプラグインを設定します。

*※重要 コードブロックを使用する他のプラグインより前に定義する必要があります。*

```js
/** gatsby-config.js */

plugins: [
  {
    resolve: 'gatsby-transformer-remark',
    options: {
      plugins: [
        {
          resolve: 'gatsby-remark-prismjs-title',
          options: {
            className: 'your-custom-class-name'
          }
        }
      ]
    }
  }
]
```

タイトル部分のタグには `gatsby-code-title` クラスが設定されます。  
必要に応じてスタイルを設定してください。

本文記事内での使い方は、Markdownに `:title=表示するタイトル` と記述します。  
以下の例では `example-file.js` の部分がタイトルとしてコードブロックに表示されます。

```md
```js:title=example-file.js
alert('how cool is this!');
```js
```



## Reference 参照

- PrismJS [https://prismjs.com/](https://prismjs.com/) （2022-3-3参照）  
- gatsby-remark-prismjs [https://www.gatsbyjs.com/plugins/gatsby-remark-prismjs/](https://www.gatsbyjs.com/plugins/gatsby-remark-prismjs/) （2022-3-3参照）  
- gatsby-remark-prismjs-add-title [https://www.gatsbyjs.com/plugins/gatsby-remark-prismjs-title/](https://www.gatsbyjs.com/plugins/gatsby-remark-prismjs-title/) （2022-3-3参照）  
- Standard Styling with Global CSS Files [https://www.gatsbyjs.com/docs/how-to/styling/global-css/](https://www.gatsbyjs.com/docs/how-to/styling/global-css/) （2022-3-3参照）


[GatsbyJS] Prism.jsを使用してソースコードをハイライト表示する


マウスのカーソルを追従するマウスストーカーの作り方です。


## CSSでマウスストーカーのスタイルを設定する

マウスストーカーの色は `background` 、大きさは `width` `height` で変更できます。

マウスのカーソルを動かしたときに少し遅れて付いてくるようにしますが、  
そのときの遅延具合を `transition` の `transform` の数値で調整できます。  
数値を大きくすると追従する速度がより遅く、小さくするとより速くなります。

```scss
.mouse-stalker {
  background: rgba(green, 0.4);
  border-radius: 50%;
  position: fixed;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  transition:
    transform 0.6s,
    width .5s, height .5s,
    background-color .5s;
  transition-timing-function: ease-out;
  z-index: 999;

  @media screen and ( max-width: 599px ) {
    display: none;
  }
}
```

スマホでは非表示になるようにしています。class名は適宜変更してください。


## JavaScriptでマウスストーカーを作成する

`div` を作成して `body` に追加します。  
CSSでマウスストーカーのスタイルを設定するために `class` も付与しています。

```js
  const stalker = document.createElement('div');
  stalker.setAttribute('class', 'mouse-stalker');

  document.body.appendChild(stalker);
```

画面の左上に先ほど設定した色とサイズのマウスストーカーが表示されます。  
この時点ではまだマウスを追従しません。


## マウスのカーソルを追従させるfunctionを作成して実行する

`clientX` `clientY` でマウスのカーソルの位置（ウィンドウの左端と上からの距離）を取得します。  
CSSの `translate` に取得したマウスの座標を設定し、  
マウスストーカーの位置をマウスのカーソルの位置と同じ位置に移動させます。

`mousemove` でマウスが動くたびにfuntionが実行され、  
マウスのカーソルの位置 = マウスストーカーの位置が更新されます。

このとき最初にCSSで `transform` の値を遅延させるように設定しているので、  
マウスストーカーが少し遅れてカーソルを追従するような動きになります。

```js
const mouseMove = (e) => {
  stalker.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`;
}

document.addEventListener('mousemove', mouseMove);
```

## デモ

サンプルとソースはこちら

<iframe height="300" style="width: 100%;" scrolling="no" title="Mouse Stalker" src="https://codepen.io/chocolat5/embed/NWaqdQo?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/chocolat5/pen/NWaqdQo">
  Mouse Stalker</a> by chocolat5 (<a href="https://codepen.io/chocolat5">@chocolat5</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>


マウスのカーソルを追従するマウスストーカーの作り方


[GatsbyJS](https://www.gatsbyjs.com/)と[Netlify CMS](https://www.netlifycms.org/)を使用したブログの作り方です。

## 実現したいこと

- Gatsby JSでブログサイトを作成
- Netlify CMSを使用して記事を投稿できるようにする


## Gatsby JSでサイトを作成する

Gatsby JSに予め用意されているStarterの中から、Netlify CMSに対応済みの「gatsby-advanced-starter」を使用します。

[Gatsby JS Sterter](https://www.gatsbyjs.com/starters/Vagr9K/gatsby-advanced-starter)  
[GitHub](https://github.com/Vagr9K/gatsby-advanced-starter)

Starterをローカルにインストールします。

```shell
gatsby new <PROJECT_NAME> https://github.com/Vagr9K/gatsby-advanced-starter
```

インストールしたフォルダに移動してローカル環境で実行します。

```shell
cd <PROJECT_NAME>
gatsby develop
```

ブラウザで[http://localhost:8000/](http://localhost:8000/)にアクセスして下記の画面が表示されればインストールは完了です。

![](./netlify-cms-01.jpg)


## Netlify CMSをセットアップする

※ 本記事で使用しているStarter「gatsby-advanced-starter」はNetlify CMSのセットアップ済みのためこの手順は不要ですが、設定ファイル `config.yml` の内容を適宜書き換える必要があります。

Netlify CMSとGatsbyのプラグインをインストールします。

```shell
npm install netlify-cms-app gatsby-plugin-netlify-cms  --save
```

`gatsby-config.js` ファイルにNetlify CMSプラグインを記述します。

```js
/** gatsby-config.js */

module.exports = {
  plugins: [`gatsby-plugin-netlify-cms`],
}
```

Netlify CMSの構成ファイル `config.yml` を `static/admin/` フォルダに作成します。  
※ 下記は「gatsby-advanced-starter」インストール時に予め用意されているファイルに記述されている内容です。

```yml
## config.yml

backend:
  name: git-gateway
  branch: master
  repo: vagr9k/gatsby-advanced-starter 

media_folder: static/assets
public_folder: assets

collections:
  - name: blog
    label: "Post"
    folder: "content"
    create: true
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}.md"
    fields:
      - { label: "Title", name: "title", widget: "string" }
      - { label: "Publish Date", name: "date", widget: "datetime" }
      - { label: "Cover Image", name: "cover", widget: "image" }
      - { label: "Slug", name: "slug", widget: "string" }
      - { label: "Category", name: "category", widget: "string" }
      - { label: "Tags", name: "tags", widget: "list" }
      - { label: "Body", name: "body", widget: "markdown" }

```

サイトはGitHubのリポジトリにアップしてNetlifyにデプロイするため、 `backend` 部分は下記のように記述します。

```yml
backend:
  name: git-gateway
  branch: master # または main
  repo: vagr9k/gatsby-advanced-starter # ご自身のユーザー名とリポジトリ名
```


## Netlifyへデプロイしてサイトを公開する

Netlify CMSのコンテンツをGitリポジトリに保存するためにサイトのデータをGitHubのリポジトリにpushします。

Netlifyにログインし（初めて利用する場合はSign upしてください）、「[New site from Git](https://app.netlify.com/start)」をクリックし、画面の指示に従いながら先ほどpushしたGitHubのリポジトリからデプロイします。

デプロイが完了するとURLが生成され、先ほどローカル環境で閲覧したページが公開されているのを確認できます。

## GitHubで認証する/Git GatewayでサイトをGitHub APIに接続する

Netlifyのページ（[Use OAuth provider tokens on your site](https://docs.netlify.com/visitor-access/oauth-provider-tokens/#using-an-authentication-provider)/[Use OAuth provider tokens on your site](https://docs.netlify.com/visitor-access/git-gateway/) ）の手順通りに認証を進めます。

① GitHubのアカウントページ `Settings > Developper settings > OAuth Apps` に移動して、Netlify CMSを追加します。

![](./netlify-cms-02.jpg)


② Client secrets を生成します。  
③ Netlifyの管理画面にアクセスし、 `Site settings > Access control > OAuth` に移動してプロバイダーをインストールします。  
④ GitHubを選択し、Client IDとClient secretsを入力します。

![](./netlify-cms-03.jpg)

⑤ 引き続きNetlifyの管理画面で `Site settings > Identity` に移動し、「Enable Identity」をクリックします。

![](./netlify-cms-04.jpg)

⑥ `Services > Git Gateway` に移動し「Enable Git Gateway」をクリックします。



## Netlify CMSで記事を投稿する

デプロイして生成されたサイトURLに「/admin」を追加して、Netlify CMSの管理画面にアクセスします。

![](./netlify-cms-05.jpg)

「Login with Netlify Identity」をクリックし、Sign upします。

![](./netlify-cms-06.jpg)

入力したメールアドレスに届くメールに従い登録を完了させます。  
再度、管理画面に移動し登録したメールアドレスとパスワードでログインします。

ログインに成功するとNetlify CMSのダッシュボードが表示されます。記事一覧にはStarterに用意されていたサンプル記事が読み込まれています。

![](./netlify-cms-07.jpg)

テスト投稿をしてみます。入力が終わり右上の「Publish > Publish now」をクリックすると記事が保存され、自動的にNetlifyでデプロイが開始されます。

![](./netlify-cms-08.jpg)

デプロイ完了後、サイトのURLにアクセスして一番上にテスト投稿した記事のタイトルが追加されていれば設定は完了です。

以上で、Gatsby JSで作成したサイトにNetlify CMSから記事を投稿できるようになりました 🎉


[GatsbyJS] Netlify CMSを使用したブログの作り方


記事の公開日とは別に最終更新日を表示する方法です。


## 実現したいこと

* 記事の公開日とは別に更新日を表示する


## 記事のMarkdownファイルに最終更新日のフィールドを追加する

`modifieddate` の部分は好きな文字列に変えても問題ありません。

```json
/** post.md */

date: "2019-06-02"
modifieddate: "2019-10-02" /* 追加 */
```

## 表示させたいページのテンプレートのGraphQLに追加する

Markdownファイルに追加した `modifieddate` をGraphQLで取得します。

```jsx
query {
  markdownRemark {
    edges {
      node {
        frontmatter {
          date(formatString: "MMMM DD, YYYY")
          modifieddate(formatString: "MMMM DD, YYYY") /* 追加 */
        }
      }
    }
  }
}
```

`(formatString: "MMMM DD, YYYY")` の部分は日付の形式のフォーマット用の記述です。  
通常 `2019-10-02` と表示されるところを下記の場合、 `October 02, 2019` と表示されます。


## 表示させたいページのテンプレート（コンポーネント）で読み込む

以下は当ブログの記事詳細ページでの表示の例です。
日付表示以外の部分は省略しています。

```jsx
/** post.js（記事ページテンプレート） */

import React from "react";
import PostDetail from "../components/PostDetail";

const PostTemplate = props => {
  return (
    <PostDetail {...props} />
  );
}
```

```jsx
/** PostDetail.js（記事詳細ページ） */

import React from "react";

const PostDetail = props => {
  const postNode = props.data.markdownRemark;
  const post = postNode.frontmatter;

  return (
    <p>公開日 : {post.date}</p>
    <p>最終更新日 : {post.modifieddate}</p>
  );
}

export default PostDetail;
```

## 参照

- How to get 'Last Update Date' of a blog post in GATSBY.js [https://stackoverflow.com/questions/56025679/how-to-get-last-update-date-of-a-blog-post-in-gatsby-js](https://stackoverflow.com/questions/56025679/how-to-get-last-update-date-of-a-blog-post-in-gatsby-js) （2021-1-5参照）


Latest_Posts