本編

このファイルが教科書本体の 唯一の信頼できる情報源 (single source of truth) です。 章ごとのコンテンツは _*.qmd ファイル (アンダースコア接頭辞 = Quarto がレンダリング対象から除外) に分割し、 ここから {{< include >}} でまとめます。

filters: [r-wasm/live] をこのファイルに付けることで、配下のすべてのパーシャルで {ojs} / {pyodide} ブロックが有効になります (Quarto Live 拡張)。

---

第1章 序論

この章で学ぶこと

• パーシャルファイル (_*.qmd) は YAML フロントマター禁止。親 (textbook.qmd) に集約します。
• 数式は LaTeX で記述。インラインは $E = mc^2$、ディスプレイは:

\nabla \times \mathbf{B} - \frac{1}{c}\frac{\partial \mathbf{E}}{\partial t} = \frac{4\pi}{c}\mathbf{J} \tag{3.1}

式 7.1 は Maxwell-Ampère の法則です。

図表の例

flowchart LR
    A[原稿] --> B[validate-docs]
    B --> C{エラー?}
    C -->|Yes| D[fix]
    C -->|No| E[render-site]
    D --> B
    E --> F[GitHub Pages]

元 PDF へのリンク (任意)

教科書 PDF を quarto/assets/pdf/ に置いた場合の参照例:

元教科書 §1.2 を見る

第2章 サンプル

節の例

ここに本文を書きます。第1章 序論 で述べたように…

小節

ノート

Quarto の callout は HTML / PDF 両方で綺麗にレンダリングされます。

警告

パーシャルファイル内では fenced div (:::) の 閉じる前に空行が必要 です (validate-docs が検出します)。

第3章 インタラクティブ・シミュレーション (Quarto Live サンプル)

このページは Quarto Live を使った ブラウザ内 Python (Pyodide) シミュレーション のサンプルです。サーバー不要、 読者がスライダーを動かすたびにブラウザだけで再計算 → 再描画されます。

コード自体は素の numpy + matplotlib で書かれているので、Jupyter Notebook に そのままコピーしても動きます。

viewof amplitude = Inputs.range([0.1, 2.0], {step: 0.1, label: tex`\text{振幅 } A`,         value: 1.0})
viewof frequency = Inputs.range([0.5, 5.0], {step: 0.1, label: tex`\text{周波数 } f \text{ (Hz)}`, value: 1.0})

スライダーを動かしてグラフが再計算されることを確認したあと、下のアニメーションでは 位相 φ を時間で進めて波が動く様子を matplotlib.animation.FuncAnimation で表示します。 このコードは Jupyter / VSCode にそのままコピーしても同じように動きます (Pyodide 固有の 仕掛けは日本語フォントのロード部分のみ)。

このサンプルの仕組み

要素	役割
filters: [r-wasm/live] (YAML)	この qmd で {ojs} / {pyodide} を有効化
{ojs} ブロック	Inputs.range(...) でスライダー UI を生成
{pyodide} ブロック	ブラウザ内 Python で計算と描画
#| autorun: true	ページ表示時に自動実行
#| input: ["amplitude", ...]	スライダー値を Python 変数として受け取り、変更時に再実行
日本語フォントブロック	Pyodide のときだけ pyfetch で TTF をロード、それ以外は OS フォントに任せる
FuncAnimation + to_jshtml()	標準 Python の方法でアニメーションを構築 → JS プレイヤーとして埋め込み

なぜスライダーでアニメーションさせないのか

OJS のループでスライダーを高速更新して {pyodide} を毎フレーム再実行する方法は 避けています:

• Pyodide の matplotlib 再描画 (>100ms / frame) が間隔に追いつかず描画が固まる
• Quarto Live 専用の仕掛け (viewof.dispatchEvent など) になり、Jupyter / VSCode に コードをコピーしたときに動かない

FuncAnimation + to_jshtml() はフレームを Python 側で全部計算してから 1 つの インタラクティブ HTML プレイヤーとして書き出すので、上記の問題が両方解決します。 コードは Jupyter / VSCode でもそのまま動きます (Notebook なら最終行 HTML(ani.to_jshtml()) がそのまま表示される)。

新しい章を作るときのコピペ手順

1. このファイル (_03_interactive_demo.qmd) と同じパターンの新しい qmd を作る
2. YAML に filters: [r-wasm/live] を含める (パーシャル _*.qmd ならスキップ可。親の textbook.qmd 側で指定)
3. 日本語フォントブロック (try: pyfetch ...) は描画セルの先頭に置く — 順序が保証される
4. pyfetch の URL は ../../../assets/fonts/... で固定 (qmd の階層に合わせて変えない)
5. アニメーションは FuncAnimation で組み、最終行で HTML(ani.to_jshtml()) を返す

第4章 Plotly によるインタラクティブグラフ

Plotly は SVG / Canvas ベース のインタラクティブ グラフライブラリです。matplotlib と比べて以下の特徴があります:

• グラフがブラウザでネイティブに動く (拡大・パン・hover ツールチップが標準)
• 日本語が 追加フォント設定なし で表示できる (ブラウザの OS フォントを使う)
• アニメーションが animation_frame 1 行で書ける

Pyodide で必要なパッケージ (plotly, nbformat, jsonschema) は親 textbook.qmd の YAML pyodide.packages で宣言してあり、Quarto Live が Pyodide 起動時に 直列インストールします。これにより各 {pyodide} セルは await を持たずに済み、 Jupyter / VSCode にコピーした際もそのまま動きます。

静的グラフ: 3D サーフェス

ドラッグで回転、スクロールでズーム、右上のツールバーで PNG 保存ができます。

アニメーション: 減衰振動の時間発展

animation_frame を渡すと、Plotly が 再生・一時停止・スライダー UI を自動生成 します。 matplotlib の FuncAnimation よりさらに記述量が少なく、ホバーで値を読めるのが利点。

下の ▶ 再生ボタン を押すと、波形が時間とともに伸びていきます。スライダーを直接 ドラッグして任意のフレームに飛ぶこともできます。

このサンプルの仕組み

要素	役割
await micropip.install("plotly")	Pyodide で plotly を動的取得 (Jupyter では try 節で skip)
HTML(fig.to_html(include_plotlyjs="cdn"))	Pyodide / Jupyter / VSCode のどこでも図を HTML として埋め込み (fig.show() は Pyodide で renderer 検出に失敗するため避ける)
animation_frame="frame"	フレームごとの DataFrame 行を Plotly が拾って自動でスライダー UI を生成

matplotlib と Plotly の使い分け

	matplotlib (FuncAnimation)	Plotly
コード量	やや多い (figure / line / update 関数)	少ない (animation_frame 1 引数)
フォント設定	日本語は addfont 必須	OS フォント (追加設定不要)
インタラクション	コマ送り / 再生 / 停止	コマ送り / 再生 / 停止 / hover / pan / zoom
出力形式	PNG (静止画) または JS プレイヤー	SVG / WebGL ベースの interactive plot
論文用	ベクター PDF が綺麗、印刷向き	印刷用 export はやや弱い
データ次元	2D が中心	2D / 3D / 地理 / dashboard も得意

紙に載せる図は matplotlib、ウェブで読者が触る図は Plotly、と使い分けるのが標準です。

図解と数学環境

このセクションは Quarto の 図解 (Mermaid / Graphviz) と 数学環境 (定義・定理・証明) のショーケースです。コピペで自分の章に持ち込めます。

Mermaid フローチャート

flowchart LR
    A[入力] --> B{条件分岐}
    B -- yes --> C[処理 X]
    B -- no  --> D[処理 Y]
    C --> E[出力]
    D --> E

図 7.1: アルゴリズムのフロー

図 7.1 が示すように、Mermaid の flowchart で分岐構造を簡潔に描けます。

Mermaid シーケンス図

sequenceDiagram
    participant U as User
    participant S as Server
    U->>S: Request
    S-->>U: Response
    Note over U,S: ハンドシェイク完了

図 7.2: クライアント・サーバ間の通信

Mermaid 状態遷移

stateDiagram-v2
    [*] --> 赤
    赤 --> 青: 30s
    青 --> 黄: 25s
    黄 --> 赤: 5s

図 7.3: 信号機の状態遷移

Graphviz (DOT)

{mermaid} の代替として Graphviz も使えます。複雑なノード配置は DOT の方が制御しやすい場面があります。

図 7.4: Graphviz による有向グラフ

数式と cross-reference

ディスプレイ数式に {#eq-...} ラベルを付けると、本文から @eq-... で参照できます。

\nabla \times \vec{B} = \mu_0 \vec{J} + \mu_0 \varepsilon_0 \frac{\partial \vec{E}}{\partial t} \tag{7.1}

式 7.1 はマクスウェル方程式の Ampère-Maxwell 則です。電流密度に加えて変位電流 \partial_t \vec{E} が現れる点が古典 Ampère 則からの拡張になっています。

可換図式 (LaTeX array 環境)

数式環境内で \xrightarrow と縦矢印を組み合わせて可換図式を描けます。

\begin{array}{ccc} A & \xrightarrow{f} & B \\ \downarrow{\pi} & & \downarrow{\pi'} \\ A/{\sim} & \xrightarrow{\bar{f}} & B/{\sim} \end{array} \tag{7.2}

可換図式 (Mermaid)

同じ可換図式を Mermaid のグラフでも書けます。HTML 出力では Mermaid の方が見栄えが良いことも。

graph LR
    A((A)) -- f --> B((B))
    A -- π --> AS((A/~))
    B -- π' --> BS((B/~))
    AS -- f̄ --> BS

図 7.5: 可換図式 (Mermaid 版)

定義・定理・証明

Quarto は #thm- #def- #lem- #cor- #prp- #cnj- #exm- #exr- #sol- #rem- #alg- の theorem-like 環境を提供します。番号付け・cross-ref が自動。

定義

定義 7.1 (群 (group)) 集合 G と二項演算 \cdot : G \times G \to G の組 (G, \cdot) が 群 であるとは、以下を満たすこと。

1. 結合律: (a \cdot b) \cdot c = a \cdot (b \cdot c)
2. 単位元の存在: \exists e \in G,\ \forall a \in G,\ e \cdot a = a \cdot e = a
3. 逆元の存在: \forall a \in G,\ \exists a^{-1} \in G,\ a \cdot a^{-1} = a^{-1} \cdot a = e

定義 7.1 は代数学の出発点です。

補題と定理

補題 7.1 (消去律) 群 G において、a \cdot b = a \cdot c \Rightarrow b = c。

証明. 両辺に左から a^{-1} をかける。a^{-1} a b = a^{-1} a c より b = c。\square

定理 7.1 (単位元の一意性) 群の単位元は一意に定まる。

証明. e, e' をともに単位元とする。単位元の定義から e = e \cdot e' = e'。よって e = e'。\square

定理 7.1 は 補題 7.1 と独立に証明できる基本事実です。

系・命題

系 7.1 (逆元の一意性) 群の各元の逆元は一意に定まる。

命題 7.1 (冪則) \forall a \in G,\ \forall m, n \in \mathbb{Z}: a^m \cdot a^n = a^{m+n}。

例題と演習・解答

例 7.1 (例: 巡回群) 整数の加法群 (\mathbb{Z}, +) は単位元 0 をもち、1 で生成される無限巡回群である。

練習 7.1 (演習) 3 次対称群 S_3 の位数を求め、可換群でないことを示せ。

解答 7.1 (解答). |S_3| = 3! = 6。互換 (1\ 2) と (2\ 3) は可換でない: (1\ 2)(2\ 3) = (1\ 2\ 3) だが (2\ 3)(1\ 2) = (1\ 3\ 2)。

練習 7.1 の解答は Solution 7.1。

レイアウトと callout

ここでは Quarto の タブセット、グリッドレイアウト、callout (note/tip/warning/caution/important + custom) を実例で見せます。

タブセット (panel-tabset)

複数の言語実装や説明スタイルを 1 ヶ所に並べたい時に便利。タブの切り替え状態は group="..." 属性でページ間で同期できます。

Python

import numpy as np
def euclidean(x, y):
    return np.linalg.norm(np.asarray(x) - np.asarray(y))

R

euclidean <- function(x, y) sqrt(sum((x - y)^2))

Julia

euclidean(x, y) = sqrt(sum((x .- y) .^ 2))

タブの上にもう一度同じ group="lang" を付けると、片方のタブで Python を選ぶともう片方も追従します。

グリッドレイアウト

Bootstrap 12 列グリッド。.g-col-N で N/12 の幅を取ります。

左カラム

• 比較したい概念 A
• 数式: \sigma = \sqrt{\dfrac{1}{n}\sum (x_i - \bar{x})^2}
• 適用条件: 正規分布近似可

右カラム

• 比較したい概念 B
• 数式: \mathrm{MAD} = \dfrac{1}{n}\sum |x_i - \bar{x}|
• 適用条件: ロバスト推定

g-col-4 + g-col-8、3 等分なら g-col-4 を 3 つなど自由に組み合わせられます。

5 種の標準 callout

ノート

note: 補足情報の通常表示。{.callout-note} で囲むだけ。

ヒント

tip: 効率化や別解の提案。

警告

warning: 落とし穴や注意点。

注意

caution: 高リスクな操作 / 既知のバグ / 破壊的変更。

重要

important: 必須要件。読み飛ばすと後の議論が成立しない情報。

appearance バリエーション

appearance="simple" で枠とアイコンだけのコンパクト表示、appearance="minimal" で枠線のみ。

ヒントsimple appearance

線とアイコンだけのコンパクト表示。長い文章を 1 つのまとまりとして見せたい時に。

警告minimal appearance

枠線さえ薄い。本文と続けて読ませたい場合に。

折りたたみ callout

collapse="true" で初期状態 collapsed。長い証明・チェックリスト・解答を「読みたい人だけ展開」させる用途に。

ノートクリックで展開: 章末チェックリスト

• 5 種の callout を使い分けられる
• appearance の 3 段階の違いを説明できる
• collapse="true" がいつ便利か言える
• custom callout の追加方法を カスタム callout (.field-notes / .important-point) で確認した

カスタム callout (.field-notes / .important-point)

テンプレ同梱の templates/styles.css で 2 つのカスタム callout を定義しています。クラス名を変えるだけで独自分野色のメモが追加できます。

Field Notes クラスの使い方: .field-notes で囲んだ div は青系の独自スタイル + 見出し “Field Notes” 付きで表示されます。実装は quarto/templates/styles.css の数行です。教科の色 (緑 = 物理 / 紫 = 数学 / 茶 = 歴史) ごとにコピペしてクラス名を増やすだけで独自分野メモを足せます。

Important Point クラスの使い方: 重要事項を赤系で強調。.callout-important よりタイポグラフィ寄りの軽いトーンで、定理の核心や試験必出ポイントを際立たせるのに使います。

ヒントカスタム callout を新規追加する手順

1. quarto/templates/styles.css 末尾に新しい CSS クラスをコピーで追加 (.field-notes を雛形に)
2. ::before の content: 属性で見出しラベルを変更
3. background-color と border-left の色を変更
4. qmd で ::: {.your-class} ... ::: のように囲む

図表のレイアウト

ここでは Quarto の subfigure layout、margin / aside、lightbox gallery、pipe / grid table + table cross-ref を実例で見せます。

subfigure (layout-ncol)

複数の図を 1 つの figure コンテナにまとめ、N 列に並べる:

(a) sine 関数

(b) cosine 関数

図 9.1: 三角関数の比較

図 9.1 が親、図 9.1 (a) / 図 9.1 (b) が個別の subfigure を指します。

column: page で本文幅を超えて広げる

column: page を使うと本文幅 (1100px) より広い表示エリアを取れます。横長グラフや巨大な表に。

図 9.2: 横長サンプル — column: page

margin / aside (傍注)

本文の右マージンに補足情報を出す 2 つの方法。

これは .aside 形式の傍注です。本文の流れを止めずに補足できます。

通常の段落です。.aside で囲んだ inline テキストは右マージンに小さく表示されます。

Column-Margin Block

.column-margin 形式では複数行・図・表もマージンに置けます。下に小さな図を置いた例:

図 9.3: margin 内の図

.aside は inline、.column-margin は block レベルと使い分けます。

lightbox gallery

_quarto.yml で lightbox: auto を有効化済み。クリックすると拡大表示 + ギャラリーモードでナビゲーション。group="..." で同じグループの画像をまとめて見られます。

クリックして拡大、左右矢印で次の画像へ移動できます。

pipe table

軽量で読みやすい記法。テーブル幅は内容で自動調整。

表 9.1: 三角・指数・対数の微積分対応表

関数	微分	積分 (定数省略)
\sin x	\cos x	-\cos x
\cos x	-\sin x	\sin x
e^x	e^x	e^x
\ln x	1/x	x \ln x - x

表 9.1 のように {#tbl-...} ラベル + @tbl-... で参照できます。: の位置 (左/中央/右) で各列の整列を指定。

grid table

セル内で複数行 / リスト / コードブロックを使いたい時は grid table。罫線を + = - | で書きます。

表 9.2: Quarto の代表的な div 構文

環境	コード例	用途
theorem	::: {#thm-name}	定理 (番号付け)
proof	::: {.proof}	証明 (番号なし)
callout	::: {.callout-tip}	補足情報 (5 種)
tabset	::: {.panel-tabset}	タブ切替

表 9.2 には 5 種の標準 callout / タブセット (panel-tabset) / 定義・定理・証明 が対応します。

まとめ

• subfigure → layout-ncol=N を親 div に
• 横長 → .column-page
• マージン補足 → inline は .aside、block は .column-margin
• lightbox → _quarto.yml に lightbox: auto、group="..." でギャラリー化
• 表 → 軽い場合 pipe table、複雑なら grid table
• 図表参照 → {#fig-...} {#tbl-...} を付け @fig-... @tbl-... で本文から参照

テキスト要素と引用

ここでは Quarto の コード注釈 (annotation)、脚注、定義リスト、引用ブロック、video shortcode、conditional content、BibTeX 引用 + 参考文献 を実例で見せます。

コード注釈 (hover style)

<1> <2> … のマーカーをコード行に付け、後ろに番号付きリストで説明を書くと、HTML 出力ではマーカーホバーで対応する解説がポップアップ表示されます (code-annotations: hover 必要)。

1def trapezoid(f, a, b, n=100):
2    h = (b - a) / n
3    s = 0.5 * (f(a) + f(b))
    for i in range(1, n):
4        s += f(a + i * h)
5    return s * h

1

数値積分関数 trapezoid を定義。f は被積分関数、[a, b] は積分区間、n は分割数。

2

等間隔 h の刻み幅。

3

端点を 1/2 で重み付け (台形公式の境界項)。

4

内部点をフルウェイトで足し込む。

5

全体に h を掛けて積分の近似値を返す。

注釈モードは code-annotations: hover | below | none で切替。below はコード下に展開表示、hover はマーカーホバー、none で無効化。

脚注 (footnote)

本文中で軽く触れたいだけの補足は脚注で¹。番号は自動振りされ、ページ末にまとめて表示されます²。

定義リスト

用語と説明をペアで並べる時は 定義リスト (term : definition)。索引や用語集に向きます。

固有値 (eigenvalue)

線形写像 A: V \to V に対し、Av = \lambda v を満たす非ゼロベクトル v が存在するスカラー \lambda \in \mathbb{C}。

固有ベクトル (eigenvector)

上の関係を満たす非ゼロベクトル v。スカラー倍を除いて一意。

スペクトル (spectrum)

行列の固有値の集合 \sigma(A) = \{\lambda_1, \dots, \lambda_n\}。

引用ブロック (blockquote)

数学とは答えを得る術ではなく、より良い問いを立てる術である。

— ジョルジュ・カントール (出典不詳)

引用に出典をつける慣習は --- 著者 を末尾に。

video 埋め込み

YouTube / Vimeo / mp4 を直接埋め込めます。Quarto には shortcode がありますが、Quarto 1.8.x には shortcode 内部で nil 'fail' を呼ぶ既知バグがあるため、現状は raw HTML <iframe> が安定です。

<!-- Quarto shortcode (将来的にバグ修正されたら推奨) -->

下は iframe による埋め込み:

図 10.1: CERN: The Journey of Discovery

図 10.1 のように div で囲んで #fig-... を付けると figure として cross-ref できます。

conditional content (出力形式で出し分け)

.content-visible / .content-hidden クラスで HTML / PDF / docx 別に表示を切り替えられます。

この段落は HTML 出力でのみ見えます。インタラクティブな要素 (Quarto Live / 動画 / lightbox) を入れる時に。

逆に .content-hidden when-format="..." で「指定形式では非表示」も書けます。

BibTeX 引用

templates/references.bib の各エントリを @キー で参照すると、自動で文献番号と本文末の参考文献リストが生成されます。

• 力学の古典的教科書としては Landau と Lifshitz (1976年) が標準。
• 量子情報の包括的な教科書 Nielsen と Chuang (2010年) はほぼすべての研究者が手に取る一冊。
• 特殊相対性理論の原論文 Einstein (1905年) は Annalen der Physik に掲載された。
• 情報理論の創始 (Shannon 1948年) と組版システムの古典 (Knuth 1984年) は計算機科学側からも引かれる。
• Quarto 自体の公式ドキュメント (Quarto Authors 2024年) も参照。

カッコ付き参照は [@key]、文中参照は @key。複数参照は [@a; @b; @c]。

参考文献

Einstein, Albert. 1905年. 「Zur Elektrodynamik bewegter Körper」. Annalen der Physik 322 (10): 891–921.

Knuth, Donald E. 1984年. The TeXbook. Addison-Wesley.

Landau, L. D., と E. M. Lifshitz. 1976年. Mechanics. 3rd 版. Course of Theoretical Physics, Vol. 1. Butterworth-Heinemann.

Nielsen, Michael A., と Isaac L. Chuang. 2010年. Quantum Computation and Quantum Information: 10th Anniversary Edition. Cambridge University Press.

Quarto Authors. 2024年. Quarto: An open-source scientific and technical publishing system. Https://quarto.org/.

Shannon, Claude E. 1948年. 「A Mathematical Theory of Communication」. The Bell System Technical Journal 27: 379–423.

上の #refs div に Quarto が自動で参考文献リストを挿入します。csl: ... で APA / MLA / IEEE などの引用スタイルを切り替え可能。

---

1. 台形公式の誤差は \mathcal{O}(h^2) で、Simpson 公式の \mathcal{O}(h^4) より遅い収束です。

2. 脚注は Pandoc 拡張で、[^label]: 内容 を本文と離れた場所に書けば自動的にページ末にまとめてくれます。