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

300日前原文(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とかじゃなくてさ。

Observableはいつもデモが良くてカッコいいけど、ビジネスでの使い方がよくわからなかった。誰か仕事で使ってる人いる？

└

自分は定量的ユーザーリサーチチームで働いてて、実験から得たデータを分析して可視化するのにノートブックがすごく役立ってる。Googleで働いてるんだけど、UXRの同僚はJSよりもPythonの方が得意だからGoogle Colabを使ってる。でも、もしそうじゃなかったらObservableを使ってたと思う。

Bostockたちが報酬をもらえたらいいのに。オープンソースの辛さってこういうことなんだよね。他の人が自分の人生の仕事で儲けていくのを見てるだけ。まあそれは置いといて、デスクトップアプリのアイデアはいいと思う。ノートブックが他の製品とどう絡むのかはちょっとわからないけど、Frameworkは実際に結構役立つよね。

└

もっと詳しく教えて？

└

Bostockたちが報酬をもらえたらいいのに。彼らは報酬をもらってるよ。Observableはチームやエンタープライズライセンスを販売してるからね。: https://observablehq.com/pricing

└

誰が「D3JS」ってナンバープレートのポルシェを高級なパシフィック・ハイツの前に停めるんだろう？

更新された構文が素晴らしいね — 古いノートブックをアップグレードして試してみるのが待ちきれない！Canvasの発表以降、Observableの未来が心配だったけど、ノートブックが徐々に廃止されていく感じがしてた。でも、間違ってたことが証明されて嬉しい。新しいフォーマットをWebエディタに持ってくるタイムラインはあるの？自分にとって、Observableの最大の魅力は、何のセットアップもなしにデータをすぐに探索して可視化できることなんだよね（ローカルファイルを作ったり、依存関係をインストールしたり、開発サーバーを立ち上げたりとか）。ただ「新しいノートブック」をクリックするだけで、スムーズに始められるのがいい。これが優先事項であり続けることを願ってる。あと、データビジュアライゼーションコミュニティの側面も言及する価値があるね。昔はすごく楽しんでたんだけど、特定のユーザーをフォローしたり、その人の新しいノートブックをフィードで見ることができなくなったのは残念だし、トレンドのノートブックがユーザーのホームページに表示されず、ヘルプメニューの下に隠れてしまったのも残念。これが自分がプラットフォームに戻る頻度が減った理由の一つかもしれないけど、コミュニティを作るのが難しくて、マネタイズも大変なのは理解してるから、ただシェアしたかっただけ。

└

ありがとう。まだWebエディタの公開タイムラインを約束することはできないけど、これは最優先事項だから安心してね。Webエディタの便利さ、瞬時のコラボレーション、コミュニティも大事にしてるよ！

Observable DesktopのmacOSアプリは11.8MBのダウンロードで、解凍すると23.9MBのアプリになるんだ。200MB以上のElectronアプリが溢れてる中で、これはすごく新鮮な変化だね！

ノートブックのフォーマットがいろいろあって面白いよね。JupyterはJSONを使ってるし、RMarkdownは（推測できると思うけど）Markdown、ObservableはHTMLを使ってる。

AI搭載のデスクトップアプリをデモする動画は、AIに対する私の不安を完璧に示してるよ。郡コードのマッピングを修正するように頼んだら、自分でルックアップテーブルを生成しちゃった。楽しんでテストしてね。それでうまくいかないときは、ランダムな国が混ざっても大体は動くから。

└

うん、将来的には改善されると思うし、これは技術プレビューだしね。でも、動画からの私の印象は、まだ信頼するにはちょっと雰囲気が不安定すぎるってこと。もし私が会社でジュニアデータアナリストを指導していて、彼らがこのコードを書いたら、改善のためにフィードバックを喜んであげるけど、AIの場合は多分自分で分析しちゃうかな。ハードコーディングされたルックアップテーブルに加えて、生成されたコードについての他のメモもあるよ：1. 結果の最初のページにすべてのデータが含まれてるって静かに仮定するのはちょっと脆弱に感じる。もしページングを気にしないなら、少なくとも最初のページにすべてが含まれてるって主張するべきだと思う。2. コードコメントが主張するように、2022年は最新のデータがある年じゃなくて、2023年だよ。これが心配な理由は、差が大きいからじゃなくて、方法論的な影響があるから。2022年のデータは、同じデータセットを分析してた他のコードから「記憶」した詳細から来てるみたいで、分析すべきデータセットの現在のバージョンを見てないみたい。3. 世界の集計を削除するためのコードは実際には機能してない（地図には関係ないけど）。d.country.id !== "WLD"って書いてあるところは、d.country.id !== "1W"かd.countryiso3code !== "WLD"にするべきだよ。これをフィルタリングすることが本当に重要なら、他の集計もフィルタリングするのが重要だと思う。4. テキストには「より暗い色が高い寿命を示す」と書いてあるけど、これは私がこのカラースキームを説明するのとは真逆だね。5. 提供された分析は「特定の地域が寿命に関して集まる傾向があり、似たような経済、医療、社会的条件を反映している」とか言ってるけど、これはすごく平凡な意見だね。データを見る前に書けたことのように感じる。もっと具体的で面白いものを探すようにアナリストを促したい。6. 地図からすぐに目に入るのは、中央アフリカ共和国が寿命18.8年の大きな外れ値で、他の国はすべて50年以上ってこと。これは信じられないよ。全体の地図の色が混乱しないように何か対策をしたい。

Bostock Observableは、私の限られた実験の中で最初から魅力的でインスピレーションを与えてくれるプラットフォームだと思ってる。実装しているデザインパターンの有名な名前をつけないでほしいな、会話の中で「ほら、Bostockのやつ」って呼ばなきゃいけなくなるから。でも、1 + 2を計算するために""をタイプしたくないし、実際の計算を見つけるためにそれをスキャンしたくもない。だから、Bostock Observable Notebooks 1.0にインスパイアされ続けるしかないね。GitHub風のMarkdownで書き続けられるから、これはフリーソフトウェアで、すでにGitにチェックインされてるし。

ハクソク