dek

日本語

English

日本語

English

テーマ

はじめる ​

このページでは、何もない状態から発表できるデッキまでを作ります。やることは 3 つです。

  1. プロジェクトと最初のデッキを作り、dek をそこに入れる
  2. 台本を書き、生成されたスライドをブラウザで送る
  3. 会場用の HTML を 1 ファイル書き出す

HTML は書きません。声も動画も触りません。ゴールは、同梱テーマの骨格スライドで喋れる状態です。

前提 ​

Bun 1.4 以上。dek は Bun でだけ動くので、npx ではなく bunx を使ってください。

プロジェクトを作る ​

dek のリポジトリの外に、トーク用のプロジェクトを作ります。

bash
bunx @hajimism/dek init my-talks --deck 2026-04-vite

init は書いたファイルを並べ、最後に次に打つコマンドを表示します。

next:
  cd my-talks
  bun add -d @hajimism/dek
  cd decks/2026-04-vite
  $EDITOR script.md
  bunx dekc

上から順に実行します。bun add -d で dek をプロジェクトに入れ、以降の bunx dekc はその dek を動かします。固定されるのは CLI のバージョンだけで、デッキの HTML が node_modules を見ることはありません。

コマンドは dek ではなく dekc

パッケージは @hajimism/dek で、入るコマンドは dek ではなく dekc です。npm の dek は無関係の別パッケージで、bunx dek はそれをダウンロードして実行します。プロジェクトの中では bunx dekc がそこに入れた dek を動かします。プロジェクトの外では bunx @hajimism/dek を使ってください。

プロジェクトを作るのは最初の一度だけです。最初のデッキも一緒にでき、以降は dekc new <name> で足します。init をもう一度実行しても安全です。足りないものだけを書き、あるファイルはすべて残し、init の内容と違うものには (kept) と表示します。プロジェクトの中では 2 つ目のプロジェクトを作らず、dekc new を案内します。

何ができたか ​

my-talks/
├── package.json        # `bun add` が作り、dek のバージョンを固定する
├── dek.toml            # プロジェクトの設定。既定値を変えるまでは空
├── AGENTS.md           # AI エージェント向けの規約。sync のたびに書き直す
├── .gitignore          # dist/ .cache/ .dek/server.json node_modules/ refs/
├── .rumdl.toml         # script.md 用の Markdown ルール
├── theme.css           # 新しいデッキの出発点
├── tsconfig.json       # スライドのスクリプト用のエディタ設定
├── assets/             # 素材置き場。デッキは使うものをコピーする
├── decks/
│   └── 2026-04-vite/
│       ├── script.md   # 唯一の真実
│       ├── theme.css   # このデッキ専用のコピー
│       ├── slides/     # 1 スライド 1 HTML。最初は骨格
│       └── assets/
└── .dek/
    ├── schema.json     # frontmatter のスキーマ（エディタ用）
    └── slide.d.ts      # スライドのスクリプト用の DekSlide 型

デッキが 1 つでも decks/ は必ずあります。プロジェクト直下の theme.css はテンプレートで、dekc init と dekc new が新しいデッキの中へコピーします。

台本を書く ​

script.md を開きます。init が短いお手本の台本を書いてあり、中身がそのまま使い方の説明です。セクションがスライドに、### の見出しがビートになり、1 分の duration が持ち時間なので、bunx dekc ls の時点で見積もりと持ち時間が並びます。これを自分のトークに書き換えます。## の見出しひとつが 1 枚になります。

markdown
---
# yaml-language-server: $schema=../../.dek/schema.json
title: HTML スライドツールを作った話
event: Tokyo Frontend Meetup #42
date: 2026-04-18
duration: 20m
---

## intro

こんにちは。今日は、スライドツールを自分で作った話をします。

> 自己紹介は短く。時計を見ない。

## 今日持ち帰ってほしいこと {#architecture}

さて、ここが今日いちばん覚えて帰ってほしいところです。

### script.md が親 {#script-parent}

まず script.md がいて、

### スライドがぶら下がる {#slides-hang}

その下にスライドがぶら下がっている。逆ではありません。

覚えることは少しです。## が 1 枚。### は ビート で、喋りの区切りであり、画面が進んでもよい瞬間です。段落が喋る言葉。> の引用はト書きで、声にも尺にも入りません。

見出しは表示される文字で、{#id} がスライドのファイル名になります。## intro は id だけの見出しで、slides/intro.html という名前になりますが、スライド自身のタイトルにはなりません。先頭のセクションは代わりにデッキの title を取り、2 枚目以降で id だけの見出しはタイトルのないスライドになります。そういう見出しには、## 今日持ち帰ってほしいこと {#architecture} のように文字と id を両方書きます。

開発サーバを起動する ​

デッキの中で実行します。

bash
bunx dekc

見出しごとに骨格スライドが生成されます。先頭のセクションはデッキの title を見出しに取り、「今日持ち帰ってほしいこと」はビートを列挙した 1 枚になります。保存するたびに再描画、再同期、lint が走ります。表示された URL を開いて右矢印を押し、ビートが順に現れるのを確かめてください。

サーバが立っている間、dekc sync や dekc lint を自分で叩く必要はありません。

会場用に書き出す ​

bash
bunx dekc build

decks/2026-04-vite/dist/2026-04-vite.html ができます。この 1 ファイルをブラウザで開けば発表できます。プロジェクト直下の dist/ にまとめたいときは --root-dist を付けます。

次 ​

MIT License

Copyright © dek