Next.jsブログでKaTeXを使って数式を表示する方法

はじめに (対象読者・この記事でわかること)

この記事は、Next.jsでブログを構築している開発者、特に技術記事に数式を表示したいと考えている方を対象にしています。数学や科学技術の記事を執筆する際には、LaTeX形式の数式を表示したいことが多々あります。本記事では、Next.js環境でKaTeXを導入し、Markdown記事内に数式を簡単に表示する方法を具体的に解説します。

この記事を読むことで、以下のことができるようになります： - Next.jsブログにKaTeXを正しく導入する方法を理解できます - Markdownファイル内でLaTeX記法による数式を記述できるようになります - 数式の表示スタイルをカスタマイズする方法を学べます - いくつかの複雑な数式の実装例を参考にできます

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。 - Next.jsの基本的な知識 - Reactの基本的な知識 - Markdownの基本的な知識 - npm/yarnの基本的なコマンド操作

KaTeXとは？なぜブログで数式表示が必要なのか

KaTeX（Khan Academy TeX）は、Khan Academyが開発した高速で美しい数式レンダリングライブラリです。LaTeX記法で記述された数式をHTML/CSSに変換して表示する機能を提供します。

ブログで数式表示が必要になる場面は多々あります。技術ブログでは、数学の公式、アルゴリズムの説明、統計モデリングなど、数式を用いて概念を説明することが非常に効果的です。特に科学技術や数学の分野では、数式なしの記事は不十分であることが多いです。

Next.jsブログで数式を表示する際の課題は、パフォーマンスと表示の美しさです。従来のLaTeXレンダリングライブラリであるMathJaxは機能が豊富ですが、重く表示速度が遅いという問題がありました。一方、KaTeXは軽量かつ高速で、Webサイトのパフォーマンスに悪影響を与えずに美しい数式を表示できます。

KaTeXを選んだ理由は以下の通りです： 1. 表示速度が非常に速い 2. 依存関係が少ない 3. 出力結果がCSSベースで、モバイルフレンドリー 4. Next.jsとの親和性が高い 5. カスタマイズ性が高い

具体的な手順や実装方法

では、実際にNext.jsブログにKaTeXを導入し、数式を表示する手順を解説します。

ステップ1: 必要なパッケージのインストール

まず、KaTeX本体とMarkdownで数式をパースするためのパッケージをインストールします。ターミナルで以下のコマンドを実行します：

Bash

npm install katex react-katex
# または
yarn add katex react-katex

react-katexは、KaTeXをReactで使いやすくするためのラッパーライブラリです。これにより、ReactコンポーネントとしてKaTeXを簡単に組み込むことができます。

ステップ2: KaTeXのスタイルシートのインポート

数式を正しく表示するためには、KaTeXのスタイルシートをインポートする必要があります。通常は、_app.jsまたは_app.tsxでグローバルにインポートします：

Javascript

import 'katex/dist/katex.min.css';

ステップ3: Markdownコンポーネントの作成

Markdownをレンダリングするコンポーネントを作成し、数式を処理するロジックを実装します。ここでは、react-markdownとremark-math、rehype-katexを使用します。まず、必要なパッケージをインストールします：

Bash

npm install react-markdown remark-math rehype-katex
# または
yarn add react-markdown remark-math rehype-katex

次に、Markdownコンポーネントを作成します：

Jsx

import React from 'react';
import ReactMarkdown from 'react-markdown';
 remarkMath from 'remark-math';
 rehypeKatex from 'rehype-katex';
 'katex/dist/katex.min.css';

const MarkdownRenderer = ({ content }) => {
  return (
    <ReactMarkdown
      remarkPlugins={[remarkMath]}
      rehypePlugins={[rehypeKatex]}
    >
      {content}
    </ReactMarkdown>
  );
};

export default MarkdownRenderer;

このコンポーネントは、Markdownコンテンツを受け取り、数式を含む部分をKaTeXでレンダリングします。

ステップ4: ブログ記事での数式の記述方法

Markdownファイル内で数式を記述するには、LaTeX記法を使用します。インライン数式（文章中に表示する数式）は $...$ 、ディスプレイ数式（段落として表示する数式）は$$...$$で囲みます。

例えば、以下のように記述します：

Markdown

これはインライン数式の例：$E=mc^2$ です。

ディスプレイ数式の例：
$$
\int_{a}^{b} f(x)dx = F(b) - F(a)
$$

上記のMarkdownをレンダリングすると、以下のように表示されます：

インライン数式：$E=mc^2$ です。
ディスプレイ数式： $$ \int_{a}^{b} f(x)dx = F(b) - F(a) $$

ステップ5: ブログ記事での使用例

実際のブログ記事での使用例を示します。ブログ記事のコンポーネントで、先ほど作成したMarkdownRendererを使用します：

Jsx

import MarkdownRenderer from '../components/MarkdownRenderer';

const BlogPost = ({ content }) => {
  return (
    <div className="blog-post">
      <MarkdownRenderer content={content} />
    </div>
  );
};

export default BlogPost;

そして、ブログ記事のデータでMarkdownコンテンツを渡します：

Javascript

const blogPosts = [
  {
    id: 1,
    title: "数学の基礎",
    content: `
# 数学の基礎

## 微積分

微分の基本は以下の式で表されます。

$$
\\frac{d}{dx}x^n = nx^{n-1}
$$

## 確率論

条件付き確率は以下のように定義されます。

$$
P(A|B) = \\frac{P(A \\cap B)}{P(B)}
$$

## 線形代数

行列の積は以下のように計算されます。

$$
(AB)_{ij} = \\sum_{k=1}^{n} a_{ik}b_{kj}
$$
    `
  }
  // ... 他の記事
];

ステップ6: 数式のスタイルカスタマイズ

KaTeXの表示スタイルをカスタマイズするには、rehype-katexのオプションを使用します。例えば、フォントサイズを変更するには：

Jsx

const MarkdownRenderer = ({ content }) => {
  return (
    <ReactMarkdown
      remarkPlugins={[remarkMath]}
      rehypePlugins={[
        [rehypeKatex, {
          throwOnError: false,
          output: 'html',
          displayMode: true,
          fleqn: true,
          leqno: true,
          strict: false,
          trust: true,
          macros: {
            "\\RR": "\\mathbb{R}"
          }
        }]
      ]}
    >
      {content}
    </ReactMarkdown>
  );
};

主なカスタマイズオプション： - throwOnError: エラー時に例外を投げるかどうか（falseにするとエラー表示をスキップ） - displayMode: ディスプレイ数式モードかどうか - fleqn: 数式を左寄せにするかどうか - macros: カスタムコマンドの定義

ハマった点やエラー解決

エラー1: KaTeXのCSSが適用されない

症状: 数式がプレーンテキストとして表示される

原因: KaTeXのCSSがインポートされていない

解決策: _app.jsまたは_app.tsxでimport 'katex/dist/katex.min.css';を正しく記述しているか確認します。Next.jsでは、カスタム_appファイルが存在しない場合、作成する必要があります。

エラー2: 数式のレンダリングに時間がかかる

症状: ページの読み込みが遅い、特に数式が多いページ

解決策: 1. 数式を遅延ロードする 2. 必要な数式のみをレンダリングする 3. Code Splittingを適用する

遅延ロードの例：

Jsx

import dynamic from 'next/dynamic';

const MarkdownRenderer = dynamic(() => import('../components/MarkdownRenderer'), {
  ssr: false,
  loading: () => <p>Loading...</p>
});

エラー3: 特殊な記号が正しく表示されない

症状: 一部の数式記号が崩れる

原因: KaTeXがサポートしていないLaTeXコマンドを使用している

解決策: KaTeXがサポートしていないコマンドがある場合は、マクロとして定義します。例えば：

Jsx

rehypePlugins={[
  [rehypeKatex, {
    macros: {
      "\\N": "{\\mathbb{N}}",
      "\\Z": "{\\mathbb{Z}}",
      "\\Q": "{\\mathbb{Q}}",
      "\\R": "{\\mathbb{R}}"
    }
  }]
]}

パフォーマンスに関する注意点

数式が多い場合、ページのパフォーマンスに影響を与える可能性があります。以下の対策を検討してください：

数式を必要なものだけに絞る
画像として事前にレンダリングした数式を使用する（静的サイト生成時）
Code Splittingを適用して、数式関連のライブラリを遅延ロードする

まとめ

本記事では、Next.jsブログにKaTeXを導入し、Markdown記事内で数式を表示する方法について解説しました。

KaTeXの導入方法と基本的な設定
Markdownコンポーネントの実装
数式の記述方法と表示例
カスタマイズとパフォーマンス対策

この記事を通して、技術ブログに数学的な内容を豊富に表現できるようになり、読者により分かりやすい記事を作成できるようになったことを願っています。今後は、より複雑な数式の表示方法や、ブログ全体のテーマに合わせた数式スタイルのカスタマイズについても記事にする予定です。

参考資料

参考にした記事、ドキュメント、書籍など：

Next.jsブログでKaTeXを使って数式を表示する方法📐