FlutterKaigi 2026 公式サイトにコントリビュートした話と、Jaspr 開発者によるセッションのレポート
はじめに
こんにちは、クラスメソッドのabeです。
FlutterKaigi 2026（10/29・30）、運営スタッフとして参加してきました！
当日はお手伝いをしつつ、開催前は Web サイトチームとして公式サイトの実装にも関わらせてもらっていました。
公式サイトは Dart 製の Web フレームワーク Jaspr で作られています。
普段はモバイルアプリ開発がメインで Web はあまりやってこなかったので、個人的にはチャレンジでした。
また当日は、Jaspr の作者である Kilian Schulte さん（@schultek_dev）と、Dart / Flutter のドキュメントや Web サイトに携わる Parker Lougheed さん（@parlough）による Jaspr のセッション「Jaspr in Production: How we rebuilt Dart and Flutter's Web Presence」もありました。
この記事では、セッションの内容をもとに Jaspr の概要を紹介しつつ、FlutterKaigi 2026 公式サイトで使ってみて学んだことをまとめていきます。
Jaspr とは
Jaspr は、Dart で Web サイトを作るためのフレームワークです。
セッションの冒頭では、このスライドで紹介されていました。
出典：セッション動画（以下のスライド画像も同様）
Flutter から Canvas への描画を取り除き、代わりに HTML と CSS を出力する、というイメージです。
一般的な Web サイトと同じ仕組みなので、表示が速く、SEO にも強いのが特徴です。
書き方は Flutter とほぼ同じで、Widget が Component に、Column や Text が div や p などの HTML 要素に置き換わります。
CSS も Dart で記述でき、ビルド時に CSS ファイルとして出力されます。
レンダリングモード
Jaspr には client / server / static の3つのレンダリングモードがあり、pubspec.yaml で指定します。
- static：ビルド時に HTML を作る（SSG）
- server：アクセスのたびに HTML を作る（SSR）
- client：HTML を事前に作らず、ブラウザで描画する（CSR。Flutter Web と同じ SPA）
static と server では、@client を付けたコンポーネントだけをブラウザで動かすこともできます。
詳しくは公式ドキュメントをご参照ください。
dart.dev も flutter.dev も、すでに Jaspr で動いている
セッションの前半は、dart.dev・docs.flutter.dev・flutter.dev・公式ブログを Jaspr へ移行した事例の紹介でした。
もともとはサイトごとにビルドの仕組みがバラバラで、JavaScript や Python（かつては Ruby も）など、使われている技術も異なっていたそうです。Dart に統一したことで、コントリビュートの手順も1つにまとまったとのことです。
移行の過程で Jaspr 本体の API も見直され、たとえば build メソッドは Flutter と同じく Component を1つ返す形に変わりました。
Google Open Source Blog の記事によると、jaspr_content で配信されているページは3,900ページ以上あるそうです。この規模のドキュメントサイトで実際に運用されているのは、導入を検討するうえで心強い材料になると思います。
移行の詳細は、以下から動画で確認できます。
これからの Jaspr
セッションの後半では、移行の中で生まれた新機能がデモされていました。いずれも Jaspr の beta 版で試せると紹介されていました。
ホットリロード（13:00〜）
Flutter と同じように、状態を保ったままコードの変更を反映できます。
クライアントのコードだけでなく、CSS やサーバー側のコード、Markdown のコンテンツまで対象です。
Server Components（15:00〜）
これまで @client を付けた部品は、その子要素まで含めて JS に変換されていました。
セッションでは Flutter ドキュメントの展開カードが例に挙がっていました。動きは「開く・閉じる」だけなのに、中に入っている長い文章まで JS に含まれてしまう、という課題です。
Server Components を使うと、動きのある部品の中に、サーバーで生成した HTML をそのまま組み込めます。
展開カードであれば、開閉の動きだけが JS になり、中身は HTML のままです。動きのある UI を増やしても、JS のサイズを小さく保てるようになります。
FlutterKaigi 2026 公式サイトで使ってみて
サイトの構成
FlutterKaigi 2026 のサイトは static モードで作られていて、@client を付けたコンポーネントは使っていません。
公開先は Cloudflare Workers で、静的ファイルの配信が中心です（一部の URL のリダイレクトだけを Worker で処理しています）。
リポジトリはモノレポ構成で、Web サイト・カンファレンスアプリ（Flutter）・運営用ダッシュボード（Flutter Web）が packages/data のモデルを共有しています。サイトとアプリに加えて、データを生成するスクリプトまで Dart で書けています。
タイムテーブル
私が主に担当したのはタイムテーブルです！2日間・4会場のセッションを、Day ごとのタブと会場ごとの列で表示しています。
会場によって開始時刻がそろわないため（30分のセッションの横で10分の LT が続くなど）、その日のすべての開始・終了時刻を行の区切りにした CSS Grid で配置しています。実装は timetable_section.dart をご覧ください。
Sessionize からセッション情報を取り込む
セッション情報は Sessionize で管理しています。
Sessionize は、カンファレンスの登壇募集（CFP）から採択、タイムテーブルの作成までを一括で管理できるサービスです。API でセッションや登壇者の情報を取得できます。
FlutterKaigi 2026 では、次の流れでサイトに反映しています。
- import_sessions.dart：Sessionize の API から Firestore に取り込みます。ダッシュボードで編集した翻訳やアーカイブ URL は上書きしません
- generate_sessions.dart：ビルド時に Firestore を読み込み、セッション一覧を Dart の定数として生成します
セッション情報については、サイトは Firestore にアクセスせず、ビルド済みの HTML を配信するだけです。
学んだこと・次に活かしたいこと
更新のたびに手作業での反映が必要だった
カンファレンスでは、登壇情報やタイムテーブルの調整など、開催直前までセッション情報が更新されることも珍しくありません。
FlutterKaigi 2026 でも開催当日の朝まで更新があり、そのたびに、次の手順で反映していました…。
- Sessionize で情報を更新する
- 手元で
import_sessions.dartを実行して Firestore に反映する - GitHub Actions でサイトをビルドし直してデプロイする
static モードは内容がビルド時点で固定されるため、更新のたびにデプロイが必要になるのは仕組み上避けられません。
レンダリングモードの違いを理解した今思うと、ここは作り始める前にちゃんと考えておくべきでしたね。サイトのデータがどのくらいの頻度で変わるかで、選ぶべきモードや更新の仕組みが変わります。
来年に向けて
改善の選択肢としては、次の3つが考えられます。
- static のまま、反映を自動化する：定期実行で取り込みからデプロイまでを回し、急ぎの変更はダッシュボードのボタンからすぐに反映する
- server モードにする：アクセスのたびに Firestore を読むのでデプロイは不要。ただし、Dart サーバーを動かし続ける環境（Cloud Run など）と、その運用・障害対応が必要になる
- タイムテーブルだけ
@clientにする：ブラウザから Firestore を読む。最新の情報を表示できるが、その部分はビルド時の HTML に含まれないため、SEO の面では不利になりやすい
カンファレンスサイトの規模であれば、サーバーを持つよりも、static のまま反映を自動化するのが現実的かなと思っています。
Server Components を試してみたい
今回はダイアログやタブを @client なしで実装しました。
動きのある UI を増やしても JS を軽く保てるのであれば、実装の選択肢が広がりそうなので、これはぜひ触ってみたいところです。
まとめ
Jaspr は、Flutter に近い書き方で、表示が速く SEO にも強い Web サイトを Dart で作れるフレームワークです。dart.dev や flutter.dev でも使われていて、ホットリロードや Server Components などの新機能も出てきています。
FlutterKaigi 2026 の公式サイトで使ってみて、レンダリングモードはサイトのデータが変わる頻度に合わせて選ぶのが大事、というのが今回一番の学びでした。
Jaspr が気になっている方の参考になればうれしいです。
お知らせ
クラスメソッド リテールアプリ共創部では、一緒に働くメンバーを募集しています。
Flutter / モバイルアプリ開発に興味のある方はぜひご覧ください！
