学術発表用Slidevテーマ「slidev-theme-gtlabo」を作った

はじめに

学会発表や研究室のゼミ発表でスライドを作るとき，ずっとPowerPointを使っていました．

しかしあるときSlidevの存在を知り，乗り換えてみたところ非常に快適で，もうPowerPointには戻れなくなりました．

ただ，既存のSlidevテーマでは「いい感じの学術発表資料」が作りにくく，引用や数式まわりのコンポーネントを毎回自作していました．それならいっそパッケージとして公開してしまおうと思い，作ったのがこのテーマです．

コンポーネント一覧（スペックサイト）:

Slidevとは？

SlidevはVue.jsのコアチームメンバーでもあるAnthony Fu氏が開発した，開発者向けのMarkdownベースのプレゼンテーションツールです．

npm init slidev

これだけで始められます．GitHubのスター数はリリースからわずか数日で7,000を超えるほど注目を集めたOSSで，研究者やエンジニアに広く使われています．

---

なぜPowerPointからSlidevに乗り換えたか

PowerPointに不満があったというより，Slidevを触ってみたら「これだ」となりました．自分が感じたメリットを挙げます．

Vueコンポーネントが使える

スライドにVueコンポーネントをそのまま埋め込めます．引用番号の自動管理や，数式レンダリングなど，PowerPointでは絶対に無理だった表現が実現できます．

変数が使える

frontmatterで変数を定義して，スライド全体で使い回せます．著者名や発表日など，複数箇所に出てくる情報を一元管理できます．

UnoCSS（Tailwind CSS互換）が使える

items-center や text-sky-700 のようなユーティリティクラスをそのまま書けます．GUIで「中央揃え」ボタンを探す必要がなく，クラス名を書けば即反映されます．レイアウト調整のストレスが激減しました．

Claude CodeやGitHub Copilotが使える

テキストベースのファイルなので，AIコーディングツールとの相性が抜群です．「このコンポーネントをいい感じにして」と頼むだけで，スライドのデザインや構成を整えてくれます．

英語化が楽

発表資料を英語版に作り直すときも，テキストファイルなのでそのままAIに渡せます．PowerPointだとオブジェクトを一個ずつ翻訳していたのが，一気に終わります．

GitHubでバージョン管理ができる

.mdファイルなのでgitで管理できます．発表前の変更履歴が残り，「先週のバージョンに戻したい」がすぐできます．GitHub Copilotとの連携も自然です．

---

インストール

npm install slidev-theme-gtlabo

slides.md のfrontmatterに追加するだけで使えます．

---
theme: slidev-theme-gtlabo
---

---

主なコンポーネント

コンポーネントの詳細はスペックサイトで確認できます．
https://mksmkss.github.io/slidev-theme-gtlabo/#workflow

SectionTitle / SubSectionTitle

セクションの区切りに使うタイトルコンポーネントです．左側にカラーバーやアイコンが入ります．

<SectionTitle title="提案手法" color="sky-800" />
<SubSectionTitle title="アルゴリズムの概要" color="sky-700" />

UnoCSS/TailwindのカラーとHEX両方に対応しています．

Citation / CitationListPage

引用番号の管理が面倒だったので作りました．frontmatterに文献情報を書いておくと，インライン引用番号を自動で管理してくれます．

---
citations:
  smith2023:
    author: "Smith, J."
    title: "Research on AI"
    journal: "Journal of AI"
    year: "2023"
    doi: "10.1000/example"
---

この技術について<Citation id="smith2023" />の研究が参考になります．

CitationListPage を使えば，参考文献一覧ページも1行で生成できます．academic，ieee，apa の3スタイルに対応しています．

<CitationListPage style="apa" />

MathText

LaTeX数式とMarkdownを混在して書けます．KaTeXを使っているので，インライン数式（$...$）とブロック数式（$$...$$）の両方に対応しています．

<MathText
  text="損失関数 $L = \frac{1}{n}\sum_{i=1}^{n}(y_i - \hat{y_i})^2$ を最小化します．"
/>

Header

章・セクション構造をfrontmatterで定義しておくと，プログレスバーや現在位置を表示してくれます．

---
chapters:
  method:
    title: "手法"
    sections:
      approach:
        title: "アプローチ"
---

<Header
  :chapter-data="{ title: '研究手法' }"
  chapter="method"
  current-section="approach"
/>

TextColorBox

強調したい内容をボックスで囲むためのコンポーネントです．HTMLタグも使えます．

<TextColorBox
  title="重要なポイント"
  text="この手法により従来手法より<strong>20%</strong>の性能向上を実現しました．"
/>

---

BibTeX変換ツール（bib2slidev）

既存の .bib ファイルをSlidev用の引用形式に変換するPythonスクリプトも同梱しています．
論文執筆で使っているBibTeXファイルをそのまま流用できるので便利です．
dev/bib2slidev.ipynb を参照してください．

---

おわりに

素晴らしいOSSであるSlidevを開発してくださったAnthony Fu氏（@antfu）とコントリビューターの皆さんに感謝します．

とりあえず自分が使いたいものを作った感じなので，まだまだ荒削りですが，同じような悩みを持つ方の役に立てばうれしいです．

誰かの役に立ったら嬉しいです．