Observable Notebooks 2.0 テクノロジープレビュー

2025年7月29日原文(observablehq.com)

概要

Observable Notebooks の次世代版「Notebooks 2.0」の技術プレビュー発表
Observable Notebook Kit と Observable Desktop の2つの新ツール公開
ファイルベース ・ バニラJavaScript 対応で柔軟性と再利用性向上
AI統合 ・カスタマイズ性強化・静的サイト生成対応
ユーザーからのフィードバック を重視、今後の開発に反映予定

Observable Notebooks 2.0 技術プレビュー概要

Observable Notebooks の新世代バージョン「Notebooks 2.0」発表
Observable Notebook Kit ：オープンなノートブックファイル形式と静的サイト生成ツール
Observable Desktop ：macOS向けローカルファイル編集アプリ、AI統合型
ローカルファースト アプローチ採用、今後はWeb版も提供予定
技術プレビュー 段階でユーザーのフィードバックを歓迎

Notebooks 2.0 の主な目標

ファイルベースワークフロー 対応でノートブック活用範囲拡大
バニラJavaScript 採用で学習コスト軽減・再利用性向上
最新構文・ライブラリ 対応によるモダン化
高速な静的サイト生成 で最適な閲覧体験の実現

Observable Notebook Kit の特徴

オープンソースCLI およびViteプラグインとして提供
自作ホスティング やCI/CD、カスタムWebアプリ統合が可能
ノートブックの 静的サイト化 によりSEO・パフォーマンス向上
npm install @observablehq/notebook-kit で導入
package.json にスクリプトを追加し簡単にビルド・プレビュー
- 例：
  - "docs:preview": "notebooks preview --root docs"
  - "docs:build": "notebooks build --root docs -- docs/*.html"
Vite ベースの高速ビルド、 GitHub Pages ・ Vercel ・ Netlify 等へのデプロイ容易
エディタ自由 で、Viteのプレビューサーバーによるライブ編集も可能

Observable Desktop の特徴

macOS 15+・Apple Silicon専用 のデスクトップアプリ
ローカルファイル編集 と AIアシスト による生産性向上
クリーンなUI とコーディングに特化した編集体験
AI統合 で創造性・学習・生産性を強化
将来的に Web版エディタ も提供予定、 Observable Workspace とのシームレスな連携

ノートブックファイル形式

HTMLベース のシンプルで可読性・編集性の高いフォーマット
<notebook> ルート要素、 <title>、各セルごとの <script> 要素で構成

バージョン管理 や 検索・置換 が容易

例：

<!doctype html>
<notebook>
  <title>Hello, world!</title>
  <script id="1" type="text/markdown">
    # Hello, world!
  </script>
  <script id="2" type="module" pinned>
    1 + 2
  </script>
</notebook>

バニラJavaScript対応の詳細

Observable JavaScript 独自仕様の廃止、 標準JavaScript に統一
セル内で const/let による複数変数宣言が可能
display(…) で複数・非同期の表示対応
view(…) で複数のリアクティブ入力定義が可能
npm・JSR・Web・ローカルモジュール からの標準的なimport対応
require 非推奨、 import 中心のモダンなモジュール管理

テーマ・カスタマイズ性強化

カスタムスタイルシート で自由なデザイン適用
フルブリード 表示でウィンドウ全幅活用
アニメーション背景 や テーマ選択 （ライト・ダーク両対応）
カスタムページテンプレート 追加でヘッダー・フッターも自由に設定可能

標準ライブラリのモダン化

md, html, tex タグ付きテンプレートが最新バージョンにアップグレード
JavaScriptモジュール 全面採用、 require 非推奨
npm, JSR, ローカル, リモート, Observableノートブック からのimport対応

静的サイトとしてのノートブック活用

Markdown・HTMLセル は静的レンダリングで高速表示
SEO最適化、クローラーによる内容認識が容易
Observable Desktop 不要で、任意のテキストエディタで編集・ビルド可能
今後はWebエディタから直接共有可能 に

フィードバックと今後の展望

GitHub Issues/Discussions でフィードバック受付中
👍リアクション や新規Issue投稿で開発優先度に反映
ユーザー作成例 はギャラリーに掲載可能
今後も追加機能・改善予定、ビジネス用途での利用も歓迎

まとめ

Observable Notebooks 2.0 は、ファイルベース・バニラJavaScript・AI統合・カスタマイズ性・静的サイト生成など、現代的なノートブック体験を提供
Observable Notebook Kit と Observable Desktop の2つの新ツールで、柔軟な開発・運用・共有が可能
ユーザーの声 を重視し、今後も進化を続けるプラットフォーム

Hackerたちの意見

ここでの提供内容がよく分からないな。ウェブサイトを読んで、動画も見たけど、いまいち意味がわからない。Notebook 2.0って、例えば「<e.g.>」から始まるHTMLのサブセットなの？それとも、ノートブックキットのnpmパッケージは何なの？それにエディターもあるし…。ページを見てちょっとイライラしちゃった。だって「ノートブックの未来がここにある」みたいな大げさなことから始まって、「hello world」の新しいノートブック2.0フォーマットはHTMLみたいだし、動画もただの一般的なAIチャットウィンドウに見える。今はお腹が空いてるし、疲れてるから、理解するのが難しいのかも。他の人の意見を読むのが楽しみ。

└

https://observablehq.com/@observablehq を見てみて、ちょっと触ってみて。特定の共有や視覚化の問題を解決する素晴らしいツールだよ（ニュースルームのデータ分析を考えてみて）。Observableは好きだけど、サービスが次のブーストを狙うプロダクトマネージャーに乗っ取られた感じが嫌だな。

└

何が変わっていないかをもっと上手く説明できたはずだと思う。Observable NotebooksはスプレッドシートやMakefileのように動く。セルは上から下に実行されるわけじゃなくて（Jupyter Notebookのように）、依存関係の順番で実行される。新しいシステムでもこれがまだ当てはまるみたいだね。> ビルドAPIはセルのソースコードを分析して、未バインドの参照を見つけて、Observable Runtimeを使って適切な変数グラフを初期化できるようにする。非JavaScriptセル（Markdown、HTML、SQLなど）については、ビルドAPIがソースをタグ付きテンプレートリテラル式にトランスパイルする。これは他のドキュメントフォーマットとは違う。今はセルが標準的なJavaScriptに見えるようになったけど（以前のJavaScriptのバリエーションとは違って）、実行モデルが異なるからファイルフォーマットも必然的に違う。ページが読み込まれるときにセルが正しい順番で実行されるようにするためのビルドステップがある。

古いオンラインノートブックをちょっと使ってみたけど、即時性がすごく好きだった。ただ、TypeScriptの構文サポートがいつも不足してるんだよね。2.0ではこれが改善されるの？後でViteで追加する必要があるのかな？それともローカルでしか使えないの？プロジェクトからObservableにコードをコピー＆ペーストできないのは残念だった。ローカルノートブックだと、自分のワークフローを作る可能性がもっと広がるけど、私にとっての利点は常にプラットフォームで、新しいことを始めるのがウェブページに行って「プラス」をクリックするだけで簡単だったこと。とにかく、オンラインエディターに入ったら遊ぶのが楽しみ！

└

TypeScriptセルモードを追加することに興味があるけど、最初は型を検証するのではなく型を剥がす形になると思う。純粋なJavaScriptの実装を期待してたけど、https://github.com/bloomberg/ts-blank-space を試してみるかも？エディター用に https://github.com/val-town/codemirror-ts も見てるけど、結構な機械が必要だね。

彼らを好きになりたいけど、無理だな。Pythonから移る理由が見つからない。JSにはこの用途でどんな利点があるの？Pythonで視覚化できないとは感じたことがないけど（でも、かっこいい新聞の図は作らないけどね）。

└

もしかしたら私が知らないPythonライブラリが多すぎるのかもしれないけど、Observableで見栄えのいいインタラクティブなビジュアルをほとんどすぐに作れるよ。

└

私も同じ状況だよ。理論的にはJavaScriptは細かく作られたビジュアルを作る可能性が高い。でも、君が言う通り、エコシステムが成熟しすぎてて、他のエコシステムが物足りなく感じる。けど、これが私の意見を変える何かになるかもしれない。

└

クライアントサイドのウェブページとしてエクスポートするのかな？自分はD3.jsのインタラクティブなチャートをプロトタイプするのに使ってたけど、後で自分のウェブサイトに移してた。あと、PythonよりもJSの方が得意な人もいるしね。

└

どこから来るかによると思うけど、ウェブは結構人気だよね。ウェブ開発者はHTML、CSS、JavaScriptやJavaScriptエコシステムのいろんなビジュアライゼーションライブラリに慣れてるし。Observable Plotは結構好きだよ。[1] PythonやJupyterについてはあまり詳しくないから、同じようなビジュアライゼーションをどう作るかは分からないけど、君は何を使うの？[1] https://observablehq.com/@observablehq/plot-gallery

└

marimoは同じアイデアのPython版だと思うよ。https://marimo.io/

└

Pythonを使ってビジュアライゼーションができないなんて思ったことないよ。うん、でも多分彼らが目指してるのは、フロントエンドのコードベースにそのままコピペできるミニアプリなんじゃないかな。変なPythonのDSLとかじゃなくてさ。

Hacker Newsで議論の続きを見る

ハクソク