
# はじめに

本記事では、Next.js による開発をこれから始めたい方が最初にすべきことについて紹介します。
必要ソフトウェアのインストールし、 Hello World を表示し、作成したソースコードを GitHub で管理できる状態にするまでを目標にします。

# 環境構築

まず、開発環境の構築から行います。OS によって詳細手順が異なりますが、ここでは Windows の場合を紹介します。

## 1. Node.js をインストールする

Next.js は **Node.js** というシステムで動作します。これは簡単に言うと、普段 Google Chrome や Edge や Safari などの Web ブラウザ上で動いている JavaScript のプログラムをサーバー上で動かせるシステムです。**npm** という、各種 Web 開発関連の機能を動作させるシステムも付属していて、こちらも多用することになります。

以下のサイトからダウンロードし、インストールします。
（npm は Node.js をインストールする際に自動でインストールされます）

<LinkCard
  href="https://nodejs.org/ja/download/"
  title="ダウンロード | Node.js"
  description="Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine."
  image="https://nodejs.org/static/images/logo-hexagon-card.png"
/>

インストーラーを起動するといろいろとオプションを選択できますが、すべてデフォルトの設定で問題ありません。

## 2. Git をインストールする

**Git** というシステムもインストールします。
これは作成したコードの変更履歴を管理したりバックアップをとっておいてくれるシステムで、
後述する **GitHub** と組み合わせると、インターネット上にソースコードを置いて他の人と共有したり、
複数人でソースコードを編集したりすることができます。

Windows の場合は以下のサイトからダウンロードし、インストールします。

<LinkCard
  href="https://gitforwindows.org/"
  title="Git for Windows"
  description="We bring the awesome Git VCS to Windows"
  image="https://gitforwindows.org/img/gwindows_logo.png"
/>

## 3. Visual Studio Code をインストールする

続けて、Next.js のコーディングをするためのツールを導入します。
いくつか手段はありますが、Visual Studio Code（以下、VSCode） が特におすすめです。
非常に高速に動作し、様々なプログラミング言語の開発がこれ一つでできる上、Next.js 開発との相性も抜群です。

以下のサイトからダウンロードし、インストールします。

<LinkCard
  href="https://code.visualstudio.com"
  title="Visual Studio Code - Code Editing. Redefined"
  description="Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows."
  image="https://code.visualstudio.com/opengraphimg/opengraph-home.png"
/>

## 4. VSCode の拡張機能をインストールし、初期設定する

次に、インストールした VSCode に拡張機能をインストールします。
標準機能だけでも使えなくはありませんが、<span className="marker">拡張機能を使うと開発効率が一気にアップします。</span>

今回は以下の 4 つをインストールします。
VSCode のショートカットキー[ctrl + shift + X]で拡張機能を開き、以下の機能をそれぞれ検索してインストールボタンを押すとインストールできます。

- Japanese Language Pack for Visual Studio Code
- ES7 React/Redux/GraphQL/React-N
- ESLint
- Prettier - Code formatter

上から順番に、VSCode の日本語化、コードのハイライト表示、コードのエラーチェック、コードの自動整形の機能になります。

なお、 **Prettier - Code formatter** のみインストールした後で手動の設定が必要になります。
VSCode の[ctrl + ,]で設定画面を開き、 Format On Save にチェックを入れ、 Default Formatter で Prettier -Code formatter を選択します。
これで設定完了です。

# Next.js のプロジェクトを新規作成する

VSCode の[ctrl + @]で ターミナル を開き、以下のコマンドを入力します。
最初のコマンドを実行するとプロジェクト名を聞かれるので、任意のプロジェクト名を入力しましょう。
以降は<span className="marker">作成したプロジェクトのフォルダが作業フォルダになります。</span>

```shell
> npx create-next-app --typescript
> cd (作成したプロジェクト名)
```

`--typescript`オプションについてですが、これをつけると TypeScript の形式でコードを作成してくれます。
（短縮形の`--ts`で書いても OK）

**TypeScript** とは、通常の JavaScript に加えてデータ型やクラスを書けるようにした言語です。
データ型が書けるようになったことで、変なデータが変数に入ることを防ぐことができます。

以降は TypeScript の形式（.tsx）でコードを書きますが、もし JavaScript の形式（.js）で書きたい場合は、
以下の TypeScript の Prayground で JavaScript に翻訳をかけてくれるので、これをご活用ください。

<LinkCard
  href="https://www.typescriptlang.org/play"
  title="TS Playground - An online editor for exploring TypeScript and JavaScript"
  description="The Playground lets you write TypeScript or JavaScript online in a safe and sharable way."
  image="https://www.typescriptlang.org/favicon-32x32.png"
/>

# Next.js の初期画面を表示してみる

ここまでできたら、Next.js の初期画面を表示してみましょう。
ターミナルで以下のコマンドを実行します。

```shell
> npm run dev
```

コマンドを実行すると、URL が表示されます（通常は [localhost:3000](http://localhost:3000)）。
その URL をクリックして Web ブラウザで以下のような画面が表示されれば成功です。
（この時点ではまだネットには公開されません）

![default-nextjs](/images/default-nextjs.png)

なお、このコマンドでブラウザに画面を表示している間はコードを編集すると自動で画面に反映されますが、
ターミナルが動きません。このモードは、[ctrl + c]で停止できます。

# Next.js の余計なファイルを削除して最小限の構成にする

初期画面が無事表示されましたので、次は最初に作成されたファイル群から以下の不要なものを削除していきます。

- `pages/api`
- `pages/api/hello.ts`
- `styles/Home.module.css`
- `public/vercel.svg`

次に、プロジェクトフォルダ直下に`src`フォルダを作成し、その中に`pages`フォルダと`styles`フォルダを移動させます。

また、`src/pages/index.tsx`を以下のように最小限の内容にしておきます。
`return();`で HTML タグを含むコードを返すと、それがそのまま HTML の文書としてページに表示されます。

```tsx:src/pages/index.tsx
import type { NextPage } from "next";

const Home: NextPage = () => {
  return (
    <>
      <h2>hello world!!</h2>
    </>
  );
};

export default Home;
```

ここまでで一旦、先ほども使ったコマンドで Web サイトの内容を確認してみます。

```shell
> npm run dev
```

今度は以下のような画面が表示されるかと思います。

![hello-world](/images/hello-world.png)

なおここまでで、以下のようなフォルダ構造になったかと思います。

```
（プロジェクトフォルダ）
　├─ /.next
　├─ /node_modules
　├─ /public
　│　　└─ favicon.ico
　├─ /src
　│　　├─ /pages
　│　　│　　├─ _app.tsx
　│　　│　　└─ index.tsx
　│　　└─ /styles
　│　　　 　└─ globals.css
　├─ .eslintrc.json
　├─ .gitignore
　├─ next-env.d.ts
　├─ next.config.js
　├─ package-lock.json
　├─ package.json
　├─ README.md
　└─ tsconfig.json
```

ここで簡単に主要ファイルやフォルダの説明をしておきます。

`public`フォルダには、サイトで使う画像ファイルなどを格納できます。

サイト全体に関する共通設定は`_app.tsx`内に記述できます。
ただし、`<link>`タグなどの一部の設定は`_document.tsx`というファイルを作り、そこに記述する必要があります。

`pages`フォルダに tsx ファイルを追加すると、それがそのまま Web ページになります。
例えば`page.tsx`を作成すると`http://localhost:3000/page`のリンク先のページを作成できます。

# GitHub でソースコードを管理する

基本的な部分ができたところで、**GitHub** を使ってソースコードをネットに上げましょう。
GitHub とは先述した Git をネット上で使えるクラウドサービスで、 **リモートリポジトリ** という箱を作ってその中にソースコードの変更履歴をためていくことができます。
GitHub が一番有名ですが、後述する Cloudflare Pages では類似のシステムである GitLab も対応しているので、そちらを使っても構いません。

まずは以下のサイトで GitHub のアカウントを作成しましょう。

<LinkCard
  href="https://github.com"
  title="GitHub: Let’s build from here"
  description="GitHub is where over 94 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and feat..."
  image="https://github.githubassets.com/images/modules/site/social-cards/campaign-social.png"
/>

次に、先ほど説明したリモートリポジトリを作成します。
このとき **public** を選択すれば、ネット上にソースコードが公開される公開リポジトリを、
**private** を選択すれば招待したユーザしか見れない非公開リポジトリを作成できます。

注意点として、<span className="marker">GitHub の公開リポジトリにファイルを上げた時点で、そのファイルは全世界から見れる状態になっています。パスワードや個人情報などを載せないように気をつけましょう。</span>
有料クラウドサービスのアカウントが流出して何千ドルも被害が出るようなケースもあります。
非公開リポジトリであってもそういった情報はむやみに載せないのが鉄則です。

リモートリポジトリが作成できたところで、VSCode で Git を動かして GitHub にソースコードを上げていきます。
初回は以下のとおりコマンドが多いですが、二回目以降は以下のとおりコマンドが少なく済みます。

```shell
# 初回
> git init
> git config user.name （GitHubのアカウントのユーザ名）
> git config user.email （GitHubのアカウントのメールアドレス）
> git remote add origin https://～（リモートリポジトリのURL）.git
> git branch -M master
> git add *
> git commit -m "first commit"
> git push origin master
```

```shell
# 次回以降コミット（保存）したい場合
> git add *
> git commit -m "（保存時のコメント）"
> git push origin master
```

これで GitHub にソースコードが上がりました。
GitHub にアクセスするとコードの内容を確認できます。

GitHub では多人数でソースコードを編集することもできます。
その場合はいろいろ作法がありますが、今回は個人開発なので割愛します。

# 作成したサイトをインターネットに公開するまでの流れ

私の場合は、GitHub に登録したソースコードを **Cloudflare Pages** に自動で転送するように設定しています。
また、**お名前ドットコム** でカスタムドメインを取得し、取得したドメインでサイトが表示されるように設定しています。
（お名前ドットコムは初年度無料ですが更新料が高めなので、更新日が近づいたら他のサービスを検討します）

<LinkCard
  href="https://pages.cloudflare.com/"
  title="Cloudflare Pages"
  description="Build your next application with Cloudflare Pages"
  image="https://blog.cloudflare.com/content/images/2020/12/twitter-shared-link-18.png"
/>

<LinkCard
  href="https://www.onamae.com/"
  title="ドメイン取得は最安値0円～｜ドメイン取るならお名前.com"
  description="お名前.comは国内最大級のドメイン公式登録サービスです。ドメイン登録実績2800万件を超えました。人気の.com .net .jpドメインを含め580種類以上のドメインを取り扱っています。ドメイン取得は早い者勝ちです。第三者に取得される前に、まずは検索を！新規登録と同時申込みでWhois情報公開代行が無料。"
  image="https://www.onamae.com/common/images/og.jpg"
/>

ここまでの設定でサイトをインターネット上に公開することができます。
（このあたりの流れについては別記事を作成する予定です）

# まとめ

本記事では、Next.js による開発をこれから始めたい方が最初にすべきことについて紹介しました。
必要ソフトウェアのインストールし、 Hello World を表示しました。
また、作成したソースコードを GitHub で管理できる状態にしました。

実際には、ここまでに作った土台の上に様々なコーディングをかけることで、ブログなどのサイトになるようにしていきます。
そのやり方については「Next.js」の検索ワードなどで調べながら少しずつ手を入れていただければと思います。

本ブログでも、様々なブログパーツの開発について紹介していきます。


Next.js の必要ソフトのインストール方法と開発環境構築について解説します。GitHubとも連携し、ソースコードを管理できる状態にします。

【Next.js】30分でできる! Next.js 開発の始め方（インストール、開発環境構築）【入門】


# 演奏動画

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/XqmPRZKJP1M"
  title="YouTube video player"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowFullScreen
></iframe>

# 基本情報

- 曲名: メロス万歳
- 作曲: Y. Tamura
- 編成: バグパイプ、シタール、パーカッション
- 演奏時間: 1 分 55 秒

# 楽曲の解説

メロスシリーズ第二弾。エスニック風のオリジナル曲です。

最後の大団円をイメージして作っています。


オリジナル曲『メロス万歳』の紹介記事です。

【オリジナル曲紹介】メロス万歳


# 「トップへ戻るボタン」を実装する

Next.js で定番ブログパーツである「トップへ戻るボタン」を実装します。
Styled-JSX で CSS をコンポーネント内に入れ込むため、このコードをそのままどのサイトにも流用できます。

# 「トップへ戻るボタン」とは

「トップへ戻るボタン」とは、押すとページの一番上にスクロールするボタンです。
最近は縦に長いページが多く、スクロールの手間を減らすために右下に置いているサイトがよく目につきます。

# 少しスクロールしたらボタンを表示するようにする

フックを使うと、スクロール量を検知することができます。
これを利用して、少しスクロールしたらボタンを表示するようにします。

ボタンのアイコンは **react-icons** で作ります。使い方については、[前回の記事](/posts/20221213-code-block-2)を参照ください。

<LinkCard
  href="https://www.yuta-extend.com/posts/20221213-code-block-2"
  title="【Next.js】next-mdx-remoteでインラインコードとコードブロックコピーボタンを実装する | YuTa Extend"
  description="Next.jsのnext-mdx-remoteで作られたMDXブログについて、インラインコードとコードブロックコピーボタンを実装します。"
  image="https://www.yuta-extend.com/images/highlight.jpg"
/>

また、ボタン自体を画面右下に固定するには、CSS の`position: fixed;`を使います。

```tsx:BackToTopButton.tsx
import { BiChevronsUp } from "react-icons/bi";
import { useEffect, useState } from "react";

const BackToTopButton: React.FC = () => {
  const [isButtonActive, setIsButtonActive] = useState(false);

  useEffect(() => {
    window.addEventListener("scroll", scrollWindow);
    return () => {
      window.removeEventListener("scroll", scrollWindow);
    };
  }, []);

  const scrollWindow = () => {
    const top = 100; //ボタンを表示させたい位置
    let scroll = 0;
    scroll = window.scrollY;
    if (top <= scroll) {
      setIsButtonActive(true);
    } else {
      setIsButtonActive(false);
    }
  };

  const normalStyle = {
    opacity: 0,
    transition: "0.5s",
    pointerEvents: "none",
  };
  const activeStyle = {
    opacity: 1,
    transition: "0.5s",
  };
  const style = isButtonActive ? activeStyle : normalStyle;

  return (
    <>
      <div id="back-to-top-btn" style={style}>
        <BiChevronsUp size="2rem" color="white" />
      </div>
      <style jsx>{`
        #back-to-top-btn {
          position: fixed;
          bottom: 20px;
          right: 20px;
          z-index: 10000;
          background-color: #333;
          border-radius: 4rem;
          padding: 0.6rem;
          box-shadow: 0 2px 8px #4385bb88;
        }
        #back-to-top-btn:hover {
          cursor: pointer;
        }
      `}</style>
    </>
  );
};

export default BackToTopButton;
```

# react-scroll でデバイスに依存しないスムーススクロールを実装する

スクロールを JavaScript で実装する際、<span className="marker">デバイスや OS によっては特別な書き方を求められる場合があります。</span>
**react-scroll** というプラグインを使うと、どのデバイスや OS でも同じ書き方でスクロールを実装できます。

<LinkCard
  href="https://www.npmjs.com/package/react-scroll"
  title="react-scroll"
  description="A scroll component for React.js. Latest version: 1.8.9, last published: 10 days ago. Start using react-scroll in your project by running `npm i react-scroll`. There are 608 other projects in the npm registry using react-scroll."
  image="https://static.npmjs.com/338e4905a2684ca96e08c7780fc68412.png"
/>

以下のコマンドで react-scroll をインストールします。

```shell
> npm i react-scroll
> npm i --save-dev @types/react-scroll
```

```tsx:BackToTopButton.tsx
import { animateScroll as scroll } from "react-scroll";
import { BiChevronsUp } from "react-icons/bi";

const BackToTopButton: React.FC = () => {
  const scrollToTop = () => {
    scroll.scrollToTop();
  };
  return (
    <>
      <div id="back-to-top-btn" onClick={scrollToTop}>
        <BiChevronsUp size="2rem" color="white" />
      </div>
      <style jsx>{`
        #back-to-top-btn {
          position: fixed;
          bottom: 20px;
          right: 20px;
          z-index: 10000;
          background-color: #333;
          border-radius: 4rem;
          padding: 0.6rem;
          box-shadow: 0 2px 8px #4385bb88;
        }
        #back-to-top-btn:hover {
          cursor: pointer;
        }
      `}</style>
    </>
  );
};

export default BackToTopButton;
```

# まとめ

最終的には以下のようになりました。

```tsx:BackToTopButton.tsx
import { animateScroll as scroll } from "react-scroll";
import { BiChevronsUp } from "react-icons/bi";
import { useEffect, useState } from "react";

const BackToTopButton: React.FC = () => {
  const scrollToTop = () => {
    scroll.scrollToTop();
  };

  const [isButtonActive, setIsButtonActive] = useState(false);

  useEffect(() => {
    window.addEventListener("scroll", scrollWindow);
    return () => {
      window.removeEventListener("scroll", scrollWindow);
    };
  }, []);

  const scrollWindow = () => {
    const top = 100; //ボタンを表示させたい位置
    let scroll = 0;
    scroll = window.scrollY;
    if (top <= scroll) {
      setIsButtonActive(true);
    } else {
      setIsButtonActive(false);
    }
  };

  const normalStyle = {
    opacity: 0,
    transition: "0.5s",
    pointerEvents: "none",
  };
  const activeStyle = {
    opacity: 1,
    transition: "0.5s",
  };
  const style = isButtonActive ? activeStyle : normalStyle;

  return (
    <>
      <div id="back-to-top-btn" style={style} onClick={scrollToTop}>
        <BiChevronsUp size="2rem" color="white" />
      </div>
      <style jsx>{`
        #back-to-top-btn {
          position: fixed;
          bottom: 20px;
          right: 20px;
          z-index: 10000;
          background-color: #333;
          border-radius: 4rem;
          padding: 0.6rem;
          box-shadow: 0 2px 8px #4385bb88;
        }
        #back-to-top-btn:hover {
          cursor: pointer;
        }
      `}</style>
    </>
  );
};

export default BackToTopButton;
```

# まとめ

今回は定番ブログパーツである「トップへ戻るボタン」を実装しました。
Styled-JSX で CSS をコンポーネント内に入れ込んでいるため、このコードをそのままどのサイトにも流用できます。

# 参考文献

<LinkCard
  href="https://qiita.com/TK-C/items/57f8e2283b46655b98f0"
  title="React(Next.js)でTopへ戻るボタンを実装する方法【ライブラリ使用無し】 - Qiita"
  description="React(Next.js)でTopへ戻るボタンを実装する方法になります。ライブラリ等は使用しないので、導入もしやすいかと思います。"
  image="/images/qiita-logo.png"
/>


Next.jsで定番ブログパーツである「トップへ戻るボタン」を実装します。Styled-JSX で CSS をコンポーネント内に入れ込むため、このコードをそのままどのサイトにも流用できます。

【Next.js】「トップへ戻るボタン」を実装する


# next-mdx-remote でインラインコードとコードブロックコピーボタンを実装する

[前回の記事](/posts/20221208-code-block)では、next-mdx-remote で作られた MDX のブログにファイル名つきシンタックスハイライトを実装しました。
今回はさらに、インラインコードとコードブロックコピーボタンを実装します。

next-mdx-remote の導入やコードブロックの表示方法については、[前回の記事](/posts/20221208-code-block)を参照ください。

<LinkCard
  href="https://www.yuta-extend.com/posts/20221208-code-block"
  title="【Next.js】Markdown ブログでコードブロックにシンタックスハイライトをかける | YuTa Extend"
  description="Next.jsのMarkdown（またはMDX）ブログでコードブロックにシンタックスハイライトをかけます。基本構文だけでなくファイル名を表示する方法も記載します。"
  image="https://www.yuta-extend.com/images/highlight.jpg"
/>

```tsx:PostPage.tsx
import type { InferGetStaticPropsType, NextPage } from "next";
import { ReactNode } from "react";
import path from "path";
import fs from "fs";
import matter from "gray-matter";
import { serialize } from "next-mdx-remote/serialize";
import { MDXRemote } from "next-mdx-remote";
import CodeBlock from "CodeBlock";

export async function getStaticProps() {
  const postFilePath = path.join(process.cwd(), "public/sample.mdx");
  const source = fs.readFileSync(postFilePath);
  const { content, data } = matter(source);
  const mdxSource = await serialize(content, {
    mdxOptions: {
      remarkPlugins: [],
      rehypePlugins: [],
    },
    scope: data,
  });

  return {
    props: {
      mdxSource: mdxSource,
    },
  };
}

const components = {
  code: (props: JSX.IntrinsicAttributes & { children?: ReactNode }) => (
    <CodeBlock {...props} />
  ),
};

type Props = InferGetStaticPropsType<typeof getStaticProps>;
const PostPage: NextPage<Props> = (props: Props) => {
  return <MDXRemote {...props.mdxSource} components={components} />;
};

export default PostPage;
```

# インラインコードを実装する

インラインコードですが、そのまま書くとコードブロックと区別がつかないらしく、うまく実装する方法が以下のリンク先に書かれています。
`<code>`タグの親の`<pre>`タグを`CodeBlock.tsx`コンポーネントに渡すと、コードブロックかどうか判定できるみたいですね。

<LinkCard
  href="https://github.com/hashicorp/next-mdx-remote/issues/244"
  title="No Difference between Code Block and inline code · Issue #244 · hashicorp/next-mdx-remote"
  description=""
  image="https://github.githubassets.com/images/modules/open_graph/github-logo.png"
/>

```tsx
import CodeBlock from "./CodeBlock";

const components = {};

components.pre = CodeBlock;

export default components;
```

```tsx:CodeBlock.tsx
import React from 'react'
import Highlight, { defaultProps } from 'prism-react-renderer'
import vsDark from 'prism-react-renderer/themes/vsDark'

const CodeBlock = ({ children }) => {
	if (!children || children.type !== 'code') return null

	const {
		props: { className, children: code = '' },
	} = children

	const language = className ? className.replace(/language-/, '') : ''

	return (
		<Highlight
			{...defaultProps}
			theme={vsDark}
			code={code.trim()}
			language={language}
		>
			{({ className, style, tokens, getLineProps, getTokenProps }) => (
				<pre className={className} style={{ ...style, padding: '20px' }}>
					{tokens.map((line, i) => (
						<div key={i} {...getLineProps({ line, key: i })}>
							{line.map((token, key) => (
								<span key={key} {...getTokenProps({ token, key })} />
							))}
						</div>
					))}
				</pre>
			)}
		</Highlight>
	)
}

export default CodeBlock
```

ただし<span className="marker">上記のやり方では TypeScript に対応していないため、本記事では TypeScript に対応した書き方にしてみます。</span>
もともと `React.ReactNode` 型だった入力をコードブロック用の型に落とし込むため、**型ガード**
という構文を使ってみます。

```tsx:PostPage.tsx
import type { InferGetStaticPropsType, NextPage } from "next";
import { ReactNode } from "react";
import path from "path";
import fs from "fs";
import matter from "gray-matter";
import { serialize } from "next-mdx-remote/serialize";
import { MDXRemote } from "next-mdx-remote";
import CodeBlock from "CodeBlock";

export async function getStaticProps() {
  const postFilePath = path.join(process.cwd(), "public/sample.mdx");
  const source = fs.readFileSync(postFilePath);
  const { content, data } = matter(source);
  const mdxSource = await serialize(content, {
    mdxOptions: {
      remarkPlugins: [],
      rehypePlugins: [],
    },
    scope: data,
  });

  return {
    props: {
      mdxSource: mdxSource,
    },
  };
}

// code ⇒ preに変更
const components = {
  pre: (props: JSX.IntrinsicAttributes & { children?: ReactNode }) => (
    <CodeBlock {...props} />
  ),
};

type Props = InferGetStaticPropsType<typeof getStaticProps>;
const PostPage: NextPage<Props> = (props: Props) => {
  return <MDXRemote {...props.mdxSource} components={components} />;
};

export default PostPage;
```

```tsx:CodeBlock.tsx
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { atomDark } from "react-syntax-highlighter/dist/cjs/styles/prism";

interface Code {
  props: { className: string; children: string };
  type: string;
}
type Props = {
  children?: Code | React.ReactNode;
};
// 型ガード関数
function isCodeBlock(children: any): children is Code {
  return children.type === "code";
}
const CodeBlock: React.FC<Props> = ({ children }: Props) => {
  // コードブロックでない場合は終了
  if (!children || !isCodeBlock(children)) {
    return null;
  }

  // コードブロックの各要素を設定
  const match = /language-(\w+)(:?.*)/.exec(children.props.className || "");
  const language = match && match[1] ? match[1] : "";
  const fileName = match && match[2] ? match[2].slice(1) : "";
  const code = String(children.props.children).replace(/\n$/, "");
  const syntaxHighlighterClass = fileName
    ? "code-block-with-title"
    : "code-block";
  return (
    <>
      <div className="code-block-wrapper">
        {fileName && <div className="code-block-title">{fileName}</div>}
        <SyntaxHighlighter
          language={language}
          style={atomDark}
          className={syntaxHighlighterClass}
        >
          {code}
        </SyntaxHighlighter>
      </div>
      <style jsx>{`
        .code-block-wrapper {
          font-size: 0.9rem;
          margin-bottom: 2rem;
        }
        .code-block-title {
          display: inline-block;
          border-radius: 0.3rem 0.3rem 0 0;
          background-color: #323e52;
          padding: 0.55rem 1rem;
          color: white;
          font-size: 0.8rem;
          font-family: Inconsolata, Monaco, Consolas, "Courier New", Courier,
            monospace;
        }
      `}</style>
      <style jsx global>{`
        .code-block {
          border-radius: 0.3rem !important;
          padding: 1.5rem !important;
        }
        .code-block-with-title {
          border-radius: 0 0.3rem 0.3rem 0.3rem !important;
          padding: 1.5rem !important;
          margin-top: 0 !important;
        }
      `}</style>
    </>
  );
};

export default CodeBlock;
```

これでコードブロックとインラインコードの判定ができました。

あとは装飾ですが、インラインコードは`<p>`タグの子になっていて、コードブロックでは逆にそうならないはずなので、`PostPage.tsx`側に styled-jsx を global で書いておきます。

（`CodeBlock.tsx`側に書きたいところですが、`CodeBlock.tsx`が一度も呼び出されないと CSS も呼び出されないので、仕方ありませんが`PostPage.tsx`側に書きます）

```tsx:PostPage.tsx
  ～ 省略 ～
type Props = InferGetStaticPropsType<typeof getStaticProps>;
const PostPage: NextPage<Props> = (props: Props) => {
  return (
    <>
      <MDXRemote {...props.mdxSource} components={components} />
      <style jsx global>{`
        p code {
          background-color: #eee;
          padding: 0.3rem;
          margin: 0 0.2rem;
          border-radius: 0.3rem;
          font-family: Inconsolata, Monaco, Consolas, "Courier New", Courier,
            monospace;
        }
      `}</style>
    </>
  );
};

export default PostPage;
```

これで無事にインラインコードの装飾もできました。

# コードブロックコピーボタンを実装する

次にコピーボタンの実装です。クリップボードにテキストをコピーするには **react-copy-to-clipboard** というプラグインを使うのが便利です。

<LinkCard
  href="https://www.npmjs.com/package/react-copy-to-clipboard"
  title="react-copy-to-clipboard"
  description="Copy-to-clipboard React component. Latest version: 5.1.0, last published: 8 months ago. Start using react-copy-to-clipboard in your project by running `npm i react-copy-to-clipboard`. There are 1352 other projects in the npm registry using react-copy-to-clipboard."
  image="https://static.npmjs.com/338e4905a2684ca96e08c7780fc68412.png"
/>

以下のコマンドで react-copy-to-clipboard をインストールします。

```shell
> npm i react-copy-to-clipboard
> npm i --save-dev @types/react-copy-to-clipboard
```

また、コピーボタンにアイコンを使いたい場合は、**react-icons** というプラグインを使うのが便利です。

<LinkCard
  href="https://www.npmjs.com/package/react-icons"
  title="react-icons"
  description="SVG React icons of popular icon packs using ES6 imports. Latest version: 4.7.1, last published: 15 days ago. Start using react-icons in your project by running `npm i react-icons`. There are no other projects in the npm registry using react-icons."
  image="https://static.npmjs.com/338e4905a2684ca96e08c7780fc68412.png"
/>

以下のコマンドで react-icons をインストールします。

```shell
> npm i react-icons
```

そして以下のサイトで使いたいアイコンを探し、サイト内のサンプルコードの通りに参照すればアイコンを表示できます。

<LinkCard
  href="https://react-icons.github.io/react-icons"
  title="React Icons"
  description="Include popular icons in your React projects easly with react-icons."
  image="https://camo.githubusercontent.com/48d099290b4cb2d7937bcd96e8497cf1845b54a810a6432c70cf944b60b40c77/68747470733a2f2f7261776769742e636f6d2f676f72616e67616a69632f72656163742d69636f6e732f6d61737465722f72656163742d69636f6e732e737667"
/>

コピーボタンの実装についてですが、 **「コードブロックにカーソルが入るとコピーボタンの表示/非表示を切り替える」**
**「コピーボタンを押すとコピー完了メッセージを出す」** といった要件で作ります。

このように<span className="marker">状態に応じて要素や装飾に動きをつける場合は「フック（React Hooks）」という機能を使います。</span>
使い方は以下のコードでご確認ください。
（コードの`useState()`の部分でフックを使っています）

一通り使う技術を紹介したところで、`CodeBlock.tsx`の全文がこちらになります。

```tsx:CodeBlock.tsx
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { atomDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
import { useState } from "react";
import CopyToClipboard from "react-copy-to-clipboard";
import { BiCheck, BiCopy } from "react-icons/bi";

interface Code {
  props: { className: string; children: string };
  type: string;
}
type Props = {
  children?: Code | React.ReactNode;
};
// 型ガード関数
function isCodeBlock(children: any): children is Code {
  return children.type === "code";
}
const CodeBlock: React.FC<Props> = ({ children }: Props) => {
  // コピーボタンの処理
  const [isButtonActive, setIsButtonActive] = useState(false);
  const normalStyle = {
    opacity: 0,
    transition: "0.1s",
  };
  const activeStyle = {
    opacity: 1,
    transition: "0.1s",
  };
  const copyBtnStyle = isButtonActive ? activeStyle : normalStyle;

  // コピー完了メッセージの処理
  const [isCopied, setCopied] = useState(false);
  const handleClick = () => {
    setCopied(true);
    setTimeout(() => {
      setCopied(false);
    }, 3000);
  };
  const copiedStyle = isCopied ? activeStyle : normalStyle;

  // コードブロックでない場合は終了
  if (!children || !isCodeBlock(children)) {
    return null;
  }

  // コードブロックの各要素を設定
  const match = /language-(\w+)(:?.*)/.exec(children.props.className || "");
  const language = match && match[1] ? match[1] : "";
  const fileName = match && match[2] ? match[2].slice(1) : "";
  const code = String(children.props.children).replace(/\n$/, "");
  const syntaxHighlighterClass = fileName
    ? "code-block-with-title"
    : "code-block";
  return (
    <>
      <div>
        {fileName && <div className="code-block-title">{fileName}</div>}
        <div
          className="code-block-wrapper"
          onMouseEnter={() => setIsButtonActive(true)}
          onMouseLeave={() => setIsButtonActive(false)}
        >
          <div className="copied-tooltip" style={copiedStyle}>
            Copied!!
          </div>
          <div className="copy-button" style={copyBtnStyle}>
            <CopyToClipboard text={code} onCopy={() => handleClick()}>
              {isCopied ? (
                <BiCheck color="grey" size={20} />
              ) : (
                <BiCopy color="grey" size={20} />
              )}
            </CopyToClipboard>
          </div>
          <SyntaxHighlighter
            language={language}
            style={atomDark}
            className={syntaxHighlighterClass}
          >
            {code}
          </SyntaxHighlighter>
        </div>
      </div>
      <style jsx>{`
        .code-block-wrapper {
          font-size: 0.9rem;
          margin-bottom: 2rem;
          position: relative;
        }
        .code-block-title {
          display: inline-block;
          border-radius: 0.3rem 0.3rem 0 0;
          background-color: #323e52;
          padding: 0.55rem 1rem;
          color: white;
          font-size: 0.8rem;
          font-family: Inconsolata, Monaco, Consolas, "Courier New", Courier,
            monospace;
        }
        .copy-button {
          display: inline-block;
          position: absolute;
          top: 0.8rem;
          right: 0.8rem;
          background-color: rgba(50, 50, 50, 0.1);
          border: 1px solid grey;
          border-radius: 0.3rem;
          padding: 0.2rem;
        }
        .copy-button:hover {
          background-color: rgba(50, 50, 50, 0.9);
          cursor: pointer;
        }
        .copied-tooltip {
          position: absolute;
          top: 0.8rem;
          right: 3.2rem;
          color: white;
          background-color: rgba(50, 50, 50, 0.5);
          border-radius: 0.2rem;
          padding: 0.3rem;
        }
      `}</style>
      <style jsx global>{`
        .code-block {
          border-radius: 0.3rem !important;
          padding: 1.5rem !important;
        }
        .code-block-with-title {
          border-radius: 0 0.3rem 0.3rem 0.3rem !important;
          padding: 1.5rem !important;
          margin-top: 0 !important;
        }
      `}</style>
    </>
  );
};

export default CodeBlock;
```

一点注意点ですが、<span className="marker">フックの処理は分岐や return 文の前に処理しなければならない制約があります。</span>
このサンプルではコードブロックかどうかの判定で`return null;`を使っていますので、その前にフックの処理を記述しないと ESLint に怒られるので気を付けましょう。

（特にこだわりがなければ、ブロックの最初の方に処理を書いておくのがおすすめです）

# まとめ

[前回の記事](/posts/20221208-code-block)では、next-mdx-remote で作られた MDX のブログにファイル名つきシンタックスハイライトを実装し、
今回はそれに対してインラインコードとコードブロックコピーボタンを実装しました。

個人的にはこれで満足いくデザインのコードブロックに仕上がりました。

次は next-mdx-remote の導入をちゃんと解説した記事を作りたいと思います。


Next.jsのnext-mdx-remoteで作られたMDXブログについて、インラインコードとコードブロックコピーボタンを実装します。

【Next.js】next-mdx-remoteでインラインコードとコードブロックコピーボタンを実装する


# Markdown とは

Markdown とは一定のルールで書かれたテキスト形式のデータを HTML 形式のデータに変換できる言語です。
Next.js も Markdown から HTML を生成して表示できます。

ルールというのは例えば、以下のように見出しや箇条書きを「#」や「-」で表現します。

```markdown
# 見出し

本文

- 箇条書き 1
- 箇条書き 2
- 箇条書き 3
```

↓

![markdown](/images/markdown.png)

普通の Markdown では変換前の素のテキストに HTML タグや JSX を仕込めませんが、 **MDX** という、
Markdown にそれらを仕込める形式があって、私はそれを使っています。
Next.js で MDX を使うには、**next-mdx-remote** というプラグインを使うのがおすすめです。

<LinkCard
  href="https://www.npmjs.com/package/next-mdx-remote"
  title="next-mdx-remote"
  description="utilities for loading mdx from any remote source as data, rather than as a local import. Latest version: 4.2.0, last published: a month ago. Start using next-mdx-remote in your project by running `npm i next-mdx-remote`. There are 47 other projects in the npm registry using next-mdx-remote."
  image="https://static.npmjs.com/338e4905a2684ca96e08c7780fc68412.png"
/>

（これの使い方については、別記事を書く予定です）

# Markdown のコードブロックにシンタックスハイライトをかける

ここからが本題。

技術ブログを見ると、以下のようにプログラムコードのサンプルが強調表示されているのを見かけることがあると思います。

```js
// アラートを表示する
function alert() {
  window.alert("アラート");
}
```

これが今回実装したい **シンタックスハイライト** です。
これを実装するにはまずは **react-syntax-highlighter** というプラグインを導入します。

<LinkCard
  href="https://www.npmjs.com/package/react-syntax-highlighter"
  title="react-syntax-highlighter"
  description="syntax highlighting component for react with prismjs or highlightjs ast using inline styles. Latest version: 15.5.0, last published: 9 months ago. Start using react-syntax-highlighter in your project by running `npm i react-syntax-highlighter`. There are 987 other projects in the npm registry using react-syntax-highlighter."
  image="https://static.npmjs.com/338e4905a2684ca96e08c7780fc68412.png"
/>

導入方法はとっても簡単。以下の 2 つのコマンドを実行するだけです。

```shell
> npm i react-syntax-highlighter
> npm i --save-dev @types/react-syntax-highlighter
```

次に、Markdown でコードブロックを書いたときに呼び出すコンポーネントを作成します。TypeScript 対応の tsx 形式で書いていきます。

```tsx:CodeBlock.tsx
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { atomDark } from "react-syntax-highlighter/dist/cjs/styles/prism";

type Props = {
  className?: string;
  children?: React.ReactNode;
};
const CodeBlock: React.FC<Props> = ({ className, children = "" }: Props) => {
  const match = /language-(\w+)/.exec(className || "");
  const language = match && match[1] ? match[1] : "";
  const code = String(children).replace(/\n$/, "");
  return (
    <>
      <div>
        <SyntaxHighlighter language={language} style={atomDark}>
          {code}
        </SyntaxHighlighter>
      </div>
    </>
  );
};

export default CodeBlock;
```

`<SyntaxHighlighter>` の `language` には、`CodeBlock.tsx` に渡された `className` の値を加工して設定します。
`className` の値は **「language-(言語)」** の形式なので、正規表現を使って言語の部分だけ切り出して `language` に設定します。

また、`<SyntaxHighlighter>` の `style` は、以下のリストからお好みで選んで設定します。
私は **atomDark** を選びました。

<LinkCard
  href="https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/master/AVAILABLE_STYLES_PRISM.MD"
  title="react-syntax-highlighter/AVAILABLE_STYLES_PRISM.MD at master · react-syntax-highlighter/react-syntax-highlighter"
  description="syntax highlighting component for react with prismjs or highlightjs ast using inline styles - react-syntax-highlighter/AVAILABLE_STYLES_PRISM.MD at master · react-syntax-highlighter/react-syntax-hi..."
  image="https://opengraph.githubassets.com/2835d5f51664b89b6cf6f9069c417b508c7d117a7ea4c5d476b7330fdd643b34/react-syntax-highlighter/react-syntax-highlighter"
/>

最後に `code` ですが、こちらはコードブロック内の本文の改行を消すだけです。これも正規表現を使うと簡単に実現します。

これで `CodeBlock.tsx` はいったん完成です。

続いて、この `CodeBlock.tsx` をコードブロックのコンポーネントとして呼び出します。
**gray-matter**と**next-mdx-remote** のプラグインを使っていますが、他のプラグインを使う場合は、適宜読み替えてください。

```tsx:PostPage.tsx
import type { InferGetStaticPropsType, NextPage } from "next";
import { ReactNode } from "react";
import path from "path";
import fs from "fs";
import matter from "gray-matter";
import { serialize } from "next-mdx-remote/serialize";
import { MDXRemote } from "next-mdx-remote";
import CodeBlock from "CodeBlock";

export async function getStaticProps() {
  const postFilePath = path.join(process.cwd(), "public/sample.mdx");
  const source = fs.readFileSync(postFilePath);
  const { content, data } = matter(source);
  const mdxSource = await serialize(content, {
    mdxOptions: {
      remarkPlugins: [],
      rehypePlugins: [],
    },
    scope: data,
  });

  return {
    props: {
      mdxSource: mdxSource,
    },
  };
}

const components = {
  code: (props: JSX.IntrinsicAttributes & { children?: ReactNode }) => (
    <CodeBlock {...props} />
  ),
};

type Props = InferGetStaticPropsType<typeof getStaticProps>;
const PostPage: NextPage<Props> = (props: Props) => {
  return <MDXRemote {...props.mdxSource} components={components} />;
};

export default PostPage;
```

最後に、読み込む MDX ファイルを作成します。

````js:public/sample.mdx
```js
// アラートを表示する
function alert() {
  window.alert("アラート");
}
```
````

コードブロックの「js」の部分はハイライトする言語を示しています。以下のリンク先の言語に対応しています。

<LinkCard
  href="https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/master/AVAILABLE_LANGUAGES_PRISM.MD"
  title="react-syntax-highlighter/AVAILABLE_LANGUAGES_PRISM.MD at master · react-syntax-highlighter/react-syntax-highlighter"
  description="syntax highlighting component for react with prismjs or highlightjs ast using inline styles - react-syntax-highlighter/AVAILABLE_LANGUAGES_PRISM.MD at master · react-syntax-highlighter/react-syntax..."
  image="https://opengraph.githubassets.com/2835d5f51664b89b6cf6f9069c417b508c7d117a7ea4c5d476b7330fdd643b34/react-syntax-highlighter/react-syntax-highlighter"
/>

うまく読み込まれると、以下のように表示されます。

```js
// アラートを表示する
function alert() {
  window.alert("アラート");
}
```

# コードブロックにファイル名を表示する

この調子でコードブロックにファイル名を表示してみましょう。
ファイル名は以下のように言語設定の後に「:」区切りで書くことにします。

````js:public/sample.mdx
```js:public/sample.mdx
// アラートを表示する
function alert() {
  window.alert("アラート");
}
```
````

そして、`CodeBlock.tsx` 側では、正規表現でファイル名を取得します。

```tsx:CodeBlock.tsx
  ～ 省略 ～
  const match = /language-(\w+)(:?.*)/.exec(className || "");
  const language = match && match[1] ? match[1] : "";
  const fileName = match && match[2] ? match[2].slice(1) : "";
  const code = String(children).replace(/\n$/, "");
  ～ 省略 ～
```

次にファイル名の配置ですが、`<SyntaxHighlighter>` タグのラッパーを用意して、
その中に配置すれば OK です。

ただし、本ブログのように CSS で装飾したい場合は `<SyntaxHighlighter>` タグにもデフォルトで CSS が効いているので、
これを上書きする必要があります。

これは styled-jsx を使って以下のように記述できます。

```tsx:CodeBlock.tsx
  ～ 省略 ～
  const syntaxHighlighterClass = fileName
    ? "code-block-with-title"
    : "code-block";
  return (
    <>
      <div className="code-block-wrapper">
        {fileName && <div className="code-block-title">{fileName}</div>}
        <SyntaxHighlighter
          language={language}
          style={atomDark}
          className={syntaxHighlighterClass}
        >
          {code}
        </SyntaxHighlighter>
      </div>
      <style jsx>{`
        .code-block-wrapper {
          font-size: 0.9rem;
          margin-bottom: 2rem;
        }
        .code-block-title {
          display: inline-block;
          border-radius: 0.3rem 0.3rem 0 0;
          background-color: #323e52;
          padding: 0.55rem 1rem;
          color: white;
          font-size: 0.8rem;
          font-family: Inconsolata, Monaco, Consolas, "Courier New", Courier,
            monospace;
        }
      `}</style>
      <style jsx global>{`
        .code-block {
          border-radius: 0.3rem !important;
          padding: 1.5rem !important;
        }
        .code-block-with-title {
          border-radius: 0 0.3rem 0.3rem 0.3rem !important;
          padding: 1.5rem !important;
          margin-top: 0 !important;
        }
      `}</style>
    </>
  );
};

export default CodeBlock;
```

最終的には以下のようになりました。

```tsx:CodeBlock.tsx
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { atomDark } from "react-syntax-highlighter/dist/cjs/styles/prism";

type Props = {
  className?: string;
  children?: React.ReactNode;
};
const CodeBlock: React.FC<Props> = ({ className, children = "" }: Props) => {
  const match = /language-(\w+)(:?.*)/.exec(className || "");
  const language = match && match[1] ? match[1] : "";
  const fileName = match && match[2] ? match[2].slice(1) : "";
  const code = String(children).replace(/\n$/, "");
  const syntaxHighlighterClass = fileName
    ? "code-block-with-title"
    : "code-block";
  return (
    <>
      <div className="code-block-wrapper">
        {fileName && <div className="code-block-title">{fileName}</div>}
        <SyntaxHighlighter
          language={language}
          style={atomDark}
          className={syntaxHighlighterClass}
        >
          {code}
        </SyntaxHighlighter>
      </div>
      <style jsx>{`
        .code-block-wrapper {
          font-size: 0.9rem;
          margin-bottom: 2rem;
        }
        .code-block-title {
          display: inline-block;
          border-radius: 0.3rem 0.3rem 0 0;
          background-color: #323e52;
          padding: 0.55rem 1rem;
          color: white;
          font-size: 0.8rem;
          font-family: Inconsolata, Monaco, Consolas, "Courier New", Courier,
            monospace;
        }
      `}</style>
      <style jsx global>{`
        .code-block {
          border-radius: 0.3rem !important;
          padding: 1.5rem !important;
        }
        .code-block-with-title {
          border-radius: 0 0.3rem 0.3rem 0.3rem !important;
          padding: 1.5rem !important;
          margin-top: 0 !important;
        }
      `}</style>
    </>
  );
};

export default CodeBlock;
```

# さらなる改善案

頑張ればインラインコードを装飾したり、コードをクリップボードにコピーするボタンを作ったり、特定の行だけ色を変えたりすることも可能です。

ぜひ研究してみてください。

# 参考文献

<LinkCard
  href="https://goodlife.tech/posts/react-markdown-code-highlight/"
  title="react-markdownでコードをシンタックスハイライトさせる"
  description="react-markdownを使用したとき、コードブロックをシンタックスハイライトさせる方法の備忘録です。 "
  image="https://goodlife.tech/img/ogp.jpg"
/>

<LinkCard
  href="https://amirardalan.com/blog/syntax-highlight-code-in-markdown"
  title="Syntax Highlight Code in Markdown – Amir Ardalan"
  description="Call attention to specific lines of code."
  image="https://ogimage.amirardalan.vercel.app/Syntax%20Highlight%20Code%20in%20Markdown?fontSize=150px"
/>


Next.jsのMarkdown（またはMDX）ブログでコードブロックにシンタックスハイライトをかけます。基本構文だけでなくファイル名を表示する方法も記載します。

【Next.js】Markdown ブログでコードブロックにシンタックスハイライトをかける


# ブログのデザインを新しくしました

ブログのデザインを作りこみました。<span className="marker">おしゃれで見やすくなっただけでなく、カテゴリ検索やアーカイブ検索もできるようにしました。</span>Next.js のコンポーネント機能のおかげで、かなり簡潔にコードを記述することができます。

Before
![before](/images/before.jpg)

↓

After
![after](/images/after.jpg)

# 地味に HTML の構造も見直しています

今回の収穫として、&lt;h1&gt; タグやメタタグの配置方法を学べたことが大きいと思います。これは SEO 対策としてかなりのアプローチになったはず。

SSG を使うと一般的な動的サイトと比べて表示速度が非常に速いはずなのでその点は問題ありませんが、<span className="marker">
コーディングだけではサイトの構造がおかしい部分に気づけなかったりします。</span>

こういうの作る人は HTML の基礎的な知識も大事です。
地味ではありますが、知識は一生もの。
地道に経験を重ねると人間として大きくなれる気がします。

# ちなみにコードのハイライト表示もご覧の通りばっちりです

```ts:src/lib/api.ts
// カテゴリー一覧と件数を取得する
export const getCategories = () => {
  const categoryDic: { [key: string]: number } = {};
  getAllPosts().forEach((post) => {
    categoryDic[post.category] = (categoryDic[post.category] || 0) + 1;
  });
  const categories = Object.keys(categoryDic)
    .sort()
    .map((key) => {
      return { label: key, number: categoryDic[key] };
    });
  return categories;
};
```

**react-syntax-highliter** というプラグインをベースに多少手を入れて作っています。
これでいくらでも技術ブログを書くことができますね。

作り方は追って記事にしていきます。

<LinkCard
  href="https://www.npmjs.com/package/react-syntax-highlighter"
  title="react-syntax-highlighter"
  description="syntax highlighting component for react with prismjs or highlightjs ast using inline styles. Latest version: 15.5.0, last published: 9 months ago. Start using react-syntax-highlighter in your project by running `npm i react-syntax-highlighter`. There are 987 other projects in the npm registry using react-syntax-highlighter."
  image="https://static.npmjs.com/338e4905a2684ca96e08c7780fc68412.png"
/>

# まとめ

自画自賛ですが、もう WordPress と遜色ないデザインになってきているのでは！？

最初から WordPress の有料テーマを使えばまともなデザインでブログを始められるのは間違いないと思いますが、<span className="marker">
私のようにコンテンツ作成スキルがプログラミングスキルより大分劣っている者からしたら費用が
10 分の 1 以下でここまでできる Next.js に素直に軍配が上がります。</span>

プログラミングもやってて結構楽しいですしね。

さーて、あとはコンテンツ作成スキルが追いつけばね……


ブログのデザインを作りこみました。おしゃれで見やすくなっただけでなく、カテゴリ検索やアーカイブ検索もできるようにしました。

ブログのデザインを新しくしました


久しぶりの投稿になります。

このたび、Zenn でブログサイトの開発手順を公開しました。
これを読むことで本ブログのような Next.js ベースのサイトを構築できるようになるかと思います。

# Zenn とは

Zenn とは、エンジニアが技術・開発についての知見をシェアする場所として使える情報共有コミュニティです。
本を制作して販売したり、投稿記事にバッジを贈ることで収益を得ることができるのが特徴です。
技術をしっかり学べることが多く、私もよくお世話になっています。

<LinkCard
  href="https://zenn.dev/"
  title="Zenn｜エンジニアのための情報共有コミュニティ"
  description="Zennはエンジニアが技術・開発についての知見をシェアする場所です。本の販売や、読者からのバッジの受付により対価を受け取ることができます。"
  image="https://zenn.dev/images/logo-only-dark.png"
/>

# リンク先はこちら

早速ですが、開発手順は以下のリンク先になります。

<LinkCard
  href="https://zenn.dev/yuta_extend/books/a23ce072bdf8b8"
  title="Next.js ではじめる本格ブログサイト開発（TypeScript 対応）"
  description="■概要
自分専用の商用ブログや Web サイトを作って情報発信したいと思ったことはありませんか？
本書では商用利用できるブログサイトを開発し、公開するまでの手順を解説します。
本書ではフロントエンド技術のうちの一つである Next.js を利用します。
Next.js を用い"
  image="https://res.cloudinary.com/zenn/image/upload/s--BBuya1HO--/g_center%2Ch_280%2Cl_fetch:aHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYm9va19jb3Zlci84NGY4MzczZmQ4LmpwZWc=%2Cw_200/v1627283836/default/og-base-book_yz4z02.jpg"
/>

価格は 1,500 円となっていますが、肝となる next-mdx-remote によるブログ記事表示のところもしっかりと解説やサンプルコードを書きました。

Twitter でフォローや DM をいただければフィードバックも考えていますので、よろしくお願いします。

また、本の執筆は初めてなので、随時追記して充実させていければと思います。


Zenn でブログサイトの開発手順を公開しました。これを読むことで本ブログのような Next.js ベースのサイトを構築できます。

【Next.js】Zenn でブログサイトの開発手順を公開しました


# サイトマップとは

**サイトマップとは、検索エンジンに Web サイトにどのようなページが存在するか伝えるためのファイルのことです。**
大きいサイトの場合はサイトマップを用意しておくことで、検索エンジンが効率よくサイトを巡回する（＝検索結果の一覧にそのサイトを候補として出せるようになる）ことができます。

本ブログでも[サイトマップ](https://www.yuta-extend.com/sitemap.xml)を用意していますので参考にしてください。
本ブログのように小規模なサイトの場合はあまり SEO 効果は望めませんが、Next.js のサイトの場合は本記事の方法で一度設定しておけば自動更新できますので、**無いよりはまし** だと思ってとりあえず作成しておいて損はないと思います。

# next-sitemap をインストールする

Next.js でサイトマップを扱うには、 **next-sitemap** というプラグインを使うのが便利です。

<LinkCard
  href="https://www.npmjs.com/package/next-sitemap"
  title="next-sitemap"
  description="Sitemap generator for next.js. Latest version: 3.1.52, last published: 13 days ago. Start using next-sitemap in your project by running `npm i next-sitemap`. There are 23 other projects in the npm registry using next-sitemap."
  image="https://static.npmjs.com/338e4905a2684ca96e08c7780fc68412.png"
/>

以下のコマンドで next-sitemap をインストールします。

```shell
> npm i next-sitemap
```

# next-sitemap の設定を記述する

## sitemap.config.js

まず、next-sitemap の設定ファイル `sitemap.config.js` を一番上のディレクトリに作成します。

```js:sitemap.config.js
module.exports = {
  siteUrl: "https://www.yuta-extend.com",
  generateRobotsTxt: true,
  generateIndexSitemap: false,
  sitemapSize: 7000,
  outDir: "./out",
};
```

詳しくは公式サイトで調べていただきたいですが、`siteUrl`にはドメイン名を指定し、他は任意で設定します。

`generateIndexSitemap`はデフォルト`true`のところを`false`にしました。
これはファイルを分割するかどうかを指定するもので、`false`にしておくと sitemap.xml を一つだけ出力します。
大きいサイトでは分割する必要があるとのことです。

## .eslintrc.json

次に、ESLint の設定を記述します。`.eslintrc.json`ファイルを以下のように追記します。

```json:.eslintrc.json
{
  "extends": "next/core-web-vitals",
  "ignorePatterns": ["*.config.js"]
}
```

これで設定ファイルのエラーが出なくなります。

## package.json

次に、`package.json`の`scripts`の部分を編集します。以下のように、`build`の際に next-sitemap が実行されるように記述すれば OK です。

```json:package.json
  ・・・
  "scripts": {
    "dev": "next dev",
    "build": "next build && next export && next-sitemap --config sitemap.config.js",
    "start": "next start",
    "lint": "next lint"
  },
  ・・・
```

# ローカルでビルドしてみる

以下のコマンドで試しにビルドしてみます。`out`フォルダに`sitemap.xml`が出力されれば成功です。

```shell
> npm run build
```

# Cloudflare Pages 側も設定する

ネット上のサイトに`sitemap.xml`を出力するにはホスティングサービス側も設定が必要です。
**Cloudflare Pages** の場合は、 **「設定」タブ ⇒「ビルド&デプロイ」メニュー ⇒ ビルドの構成 ⇒ ビルドコマンド** の部分で設定できます。

```
next build && next export && next-sitemap --config sitemap.config.js
```

![build_command](/images/build_command.png)

# サイトマップを Google Search Console と Bing Webmaster Tools に登録する

仕上げに、 **作成したサイトマップを Google と Bing に登録しておきましょう。** サイトマップに異常がないかどうかも見てくれます。

以下のサービスにアカウントを作ることでサイトマップを登録できます。

<LinkCard
  href="https://search.google.com/search-console/about"
  title="Google Search Console"
  description="Search Console のツールやレポートを使うことで、サイトの検索トラフィックや掲載順位を測定できるほか、問題を修正し、Google 検索結果でのサイトの注目度を高めることができます"
  image="https://ssl.gstatic.com/search-console/scfe/search_console-128.png"
/>

<LinkCard
  href="https://www.bing.com/webmasters/about"
  title="Bing Webmaster Tools"
  description="Bing Web マスター ツールにログインまたはサインアップして、あなたのサイトの検索パフォーマンスを向上しましょう。無料のレポートやツール、リソースにアクセスできます。"
  image="https://www.bing.com/webmasters/Content/PWA/iOS/logo/bing-logo-152.png"
/>

# まとめ

今回は Next.js でサイトマップを自動生成して検索エンジンに登録させる方法を解説しました。
記事内で言ったとおり、これを設定したからといって必ず検索上位に出るというものではありませんが、
一度設定すれば自動更新してくれるものなので、やっておいて特に損はないです。


Next.jsでサイトマップを自動生成して検索エンジンに登録させる方法を解説します。

【Next.js】サイトマップを自動生成して検索エンジンに登録させる方法


# はじめに

私は将来、一作曲家としてオーケストラの曲を作曲したいと思っています。
ただ、今までやってきた西洋楽器はピアノくらいなものなので、
オーケストラの楽器については一から勉強する必要があります。

私の作曲の手段は基本的に打ち込みのみですが、
各楽器の特性を知っていないと無茶な音域や音型で作ってしまうことになります。
それは本意ではないので、きちんと楽器の特性を把握して効果的に作曲したいものです。
（もし叶うのならば実際に演奏してみたい）

なので、まずは各楽器の特徴や有名な曲をざっくり調べてまとめてみました。
まずは以下の曲などを聴いて楽器の特性を把握したいと思います。

# 木管楽器

## ピッコロ

ピッコロはフルートの長さを半分にして、1 オクターブ高い音が出るようにした楽器です。

オーケストラの楽器の中で最も高い音が出るのでハイトーンを担当します。
メインで使われるというよりは、フルート奏者が一時的に持ち替えて使われることが多いです。

高い音は耳に入りやすいのでこれを使うと目立ちます。

**＜ピッコロが活躍する有名曲＞**

- 交響曲第 5 番ハ短調『運命』第 4 楽章／ベートーヴェン
- 星条旗よ永遠なれ／スーザ
- 交響曲第 4 番第 3 楽章／チャイコフスキー

## フルート

フルートは倍音の少ない澄んだ音が特徴で、鳥の鳴き声のような音がする楽器です。
甘い優雅なメロディを担当します。

素早い運指も可能で、スピード感のある演奏もできます。

**＜フルートが活躍する有名曲＞**

- 牧神の午後への前奏曲／ドビュッシー
- 「アルルの女」より『メヌエット』／ビゼー
- ハンガリー田園幻想曲／ドップラー

## オーボエ

オーボエは木管楽器の一種で、繊細かつ息の長い、高い表現力が求められるメロディが得意な楽器です。

音域によって音色が異なり、低音域では暗く、中音域では哀愁があり感情豊か、
高音域では明るくキンキンした音色になると言われています。（得意なのは中音域です）

また、ロングトーンも得意で、フルートと比べて二倍三倍も長い音を出すことができるのも特徴です。

**＜オーボエが活躍する有名曲＞**

- 「白鳥の湖」より『情景』／チャイコフスキー
- オーボエ協奏曲ハ長調 K.314／モーツァルト
- オーボエ協奏曲ニ短調第 2 楽章／マルチェッロ

## クラリネット

クラリネットは木管楽器の一種で、広い音域を柔らかい音色でカバーするのが得意な楽器です。

また、ブルーノートの微妙な表現力が要求される演奏も得意で、ジャズに使われたりするのも特徴です。

作曲の際の注意点として、フラット系の楽曲は B 管、シャープ系は A 管のように別種のクラリネットが必要なため、
同一楽章内で持ち替える場合は十分な休符が必要です。

**＜クラリネットが活躍する有名曲＞**

- ラプソディ・イン・ブルー／ガーシュウィン
- クラリネット・ソナタ／ブラームス
- だったん人の踊り／ボロディン

## ファゴット

ファゴットは木管楽器の一種で、低音で支えたり、コミカルな雰囲気を作るのが得意な楽器です。
前者の用途としては音域が低音域に広く、木管のハーモニーに厚みを持たせることができます。
後者の用途としてはクセのあるちょっと不気味な音色がするため、それが効果的に使われることがあります。

**＜ファゴットが活躍する有名曲＞**

- 「ペール・ギュント」より『山の魔王の宮殿にて』／グリーグ
- 交響詩『魔法使いの弟子』／デュカス
- 春の祭典／ストラヴィンスキー

# 金管楽器

## トランペット

トランペットは金管楽器の一種で、メロディを担当することが多い楽器です。

金管楽器の中では最も高い音を出してはっきり音が聞こえるため、ファンファーレの主役として適しています。

とにかく目立つ花形楽器のため、トランペットソロから始まる曲も沢山あります。

**＜トランペットが活躍する有名曲＞**

- 「展覧会の絵」より『プロムナード』／ムソルグスキー（ラヴェル編）
- ツァラトゥストラはかく語りき／R.シュトラウス
- 交響曲第 5 番嬰ハ短調第 1 楽章／マーラー

## ホルン

ホルンは金管楽器の一種で、ハーモニーに厚みを持たせるのが得意な楽器です。

無理なく柔らかい音を重ねられるので、和音作りに重宝するそうです。
特に開放音（バルブを使わずに吹く音）によるドミナントの五度の和音は「ホルン五度」と呼ばれ、使われています。

哀愁のある音色を出すこともでき、その効果を狙ってソロで使われることもあります。

**＜ホルンが活躍する有名曲＞**

- 「惑星」より『木星』／ホルスト
- ホルン協奏曲第 1 番ニ長調 K.412／モーツァルト
- 亡き王女のためのパヴァーヌ／ラヴェル

## トロンボーン

トロンボーンは金管楽器の一種で、ハーモニーの中低音を担当することが多い楽器です。

また、管をスライドさせて音程を合わせる構造上、グリッサンドやポルタメントができる金管楽器としても使われます。

微妙な音程変化が求められるジャズでは重宝されるようです。

**＜トロンボーンが活躍する有名曲＞**

- 「ニーベルングの指環」より『ワルキューレの騎行』／ワーグナー
- 「レクイエム」より『トゥーバ・ミルム』／モーツァルト
- オリオン・マシーン／吉松隆

## チューバ

チューバは金管楽器の一種で、ハーモニーの低音を担当することが多い楽器です。

オーケストラにおいては必須楽器ではなく、どちらかというと吹奏楽で活躍する楽器です。

出せる音域は広いですが、得意な音域は中音域になります。

**＜チューバが活躍する有名曲＞**

- バス・チューバと管弦楽のための協奏曲／ウィリアムズ
- 幻想交響曲第 5 楽章／ベルリオーズ
- 交響曲第 1 番『巨人』第 3 楽章／マーラー

# 打楽器

## ティンパニ

ティンパニは打楽器の一種です。リズムをとるだけでなく、ペダルによって音程調節もできます。

他の打楽器にないパターンとして、他の楽器がリズミカルな演奏をしたときに追随して演奏するパターンがあり、
ティンパニの音でうまく全体の音楽をつなげることができます。

**＜ティンパニが活躍する有名曲＞**

- 交響曲第 9 番第 2 楽章／ベートーヴェン
- 交響曲第 5 番第 4 楽章／ショスタコーヴィチ
- 交響曲第 103 番『太鼓連打』／ハイドン

# 弦楽器

## ヴァイオリン

ヴァイオリンは弦楽器の一種で、オーケストラの主役を担当します。
オーケストラのコンサートマスターも通常第一ヴァイオリンの首席奏者が担当します。

弦楽器の中では一番高い音が出て、メロディを担当することが多いです。

表現が多彩で、いくつかの奏法が存在します。

**＜ヴァイオリンが活躍する有名曲＞**

- G 線上のアリア／バッハ（ウィルヘルミ編）
- 愛の挨拶／エルガー
- アイネ・クライネ・ナハトムジーク／モーツァルト

## ヴィオラ

ヴィオラは弦楽器の一種で、ヴァイオリンを一回り大きくしたような見た目をしています。

音域はヴァイオリンの 5 度下にあたり、
ヴァイオリンとチェロの間を取り持って弦楽パートのハーモニーに厚みを持たせる役割があります。

ヴァイオリンよりも人の声の音域に近いため、親しみやすい音色が期待できます。

**＜ヴィオラが活躍する有名曲＞**

- ヴィオラと管弦楽のためのロマンス／ブルッフ
- 無伴奏ヴィオラのためのソナタ／ヒンデミット
- ヴィオラ協奏曲／テレマン

## チェロ

チェロは弦楽器の一種で、ハーモニーの中低音やメロディを担当します。

ヴァイオリンやヴィオラよりも大分弦が長いため、その分響きもかなり豊かになります。

また、弓を使わずに弦を弾くピチカート奏法も得意です。

**＜チェロが活躍する有名曲＞**

- 「動物の謝肉祭」より『白鳥』／サン＝サーンス
- 「無伴奏チェロ組曲第 1 番」より『プレリュード』／バッハ
- チェロ協奏曲ロ短調／ドヴォルザーク

## コントラバス

コントラバスは弦楽器の一種で、ハーモニーの低音を担当します。

安心感かつ重厚感のある低音でオーケストラを支えることが多い反面、メロディを担当することはあまりありません。

チェロとオクターブのユニゾンを弾くと効果的と言われています。

**＜コントラバスが活躍する有名曲＞**

- 交響曲第 9 番第 4 楽章／ベートーヴェン
- コントラバス協奏曲嬰ヘ短調／クーセヴィツキー
- 「動物の謝肉祭」より『象』／サン＝サーンス

# まとめ

今回はオーケストラの各楽器について、特徴や有名な曲をまとめてみました。
具体的な音域や得意な表現についてはまだ全然触れられていませんが、追々調べていくことにします。
