Haystack Editorとは
Haystack Editorは、Y Combinatorのプログラムに参加しているUSのエンジニア2人が開発しているVSCodeベースのエディタです。*1主な機能は、キャンバス上にコードを展開してグラフィカルに閲覧できる点と、展開したグラフに対してコードを生成して追加・編集できる点です。SNS上では、派手なデモ動画にみんな驚いているようでした。
公式サイトからダウンロードできます。
ただし、コード生成の過程でソースコードがOpenAIのAPIに送信される可能性があり、FAQにはオプトイン方式と記載されている一方で、実際の設定ではオプトアウト設定がデフォルトオフになっているという点があります。どっちやねん。
この記事では、Haystackのコード閲覧機能に絞って紹介します。
Haystackのコード閲覧機能
Haystack Editorのエディタ画面は一見するとブロックベースのビジュアルプログラミング環境を連想させますが、見た目が似ているだけです。コーディング対象はブロックではなく従来のプレーンテキストなソースコードになります。
Haystackでは、ソースコードをスコープごとに分解し、そのスコープの呼び出し元と呼び出し先を自動で解析します。その結果を入出力の単位としてウィンドウに分割して描画します。
これは、普段プログラマーがVSCodeなどのIDEの機能を使って脳内で行っている作業を視覚化したものと言えます。
『プログラマー脳 ～優れたプログラマーになるための認知科学に基づくアプローチ』では、複雑なコードを読み解く方法として、ソースコードを印刷し、依存関係グラフのためのアノテーションを自分でつけるという話が出てきます。
複雑な構造を持つコードがワーキングメモリに過負荷をかけるパターンには2種類あります。一つ目は、コードのどの部分を読むべきなのかが、正確にわからない場合です。そのため、必要以上にコードを読む必要が発生し、ワーキングメモリが処理しきれなくなってしまいます。
二つ目は、よく整理されたコードであっても、脳は、コードのそれぞれの行を理解することと、コードの構造を理解してどこまで読み進めるかを決めることという、同時に2つのことを行おうとしてしまう場合があることです。たとえば、正確な機能を知らないメソッド呼び出しに遭遇した場合、呼び出しのコードを読み続ける前に、そのメソッドを探して読む必要が出てきたりするのが、このパターンです。
この前提を踏まえ、よく知られた巨大なOSS代表であるReactのリポジトリのコードリーディングを例にHaystackの使い方を見てみましょう。
Reactのコードリーディング例
react-compilerには"use memo" "use no memo"というディレクティブを検知して、ユーザーがスコープをメモ化対象に追加/除外するという暫定的な機能があります。*2
これがどこで実装されて処理されているのかを特定します。
まず、ドキュメントからAPIの名前がはっきりしているので、ソースコードをgrepしてみます。検索結果が膨大であれば、検索対象やクエリを工夫する必要がありますが、今回はすぐに見つかりました。
❯ pt "use no memo" compiler compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-no-memo-simple.js 2: 'use no memo'; compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts 46:export const OPT_OUT_DIRECTIVES = new Set(['use no forget', 'use no memo']); compiler/packages/react-compiler-runtime/rollup.config.js 59:"use no memo";` // DO NOT REMOVE
Haystack Editorでcompiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.tsを開きます。
- OPT_OUT_DIRECTIVES定数をハイライトすると、それを使うfindDirectiveDisablingMemoization()が見つかるので、カーソルを移動します。③
- callersのナビゲーションをクリックすると、processFnとから呼び出されているのがわかります。④
- processFnはreact-forgetのbabel-plugin経由で再帰的に呼び出されていて①
- compileProgram内でASTをqueueに入れて1つずつディレクティブをチェックして有効無効を分岐していることがわかります。
補助的な機能として、ファイルウィンドウの上の「↑」ボタンは、スコープにフォーカスイン/アウトして、必要な範囲にのみ最小化できるようになっています。
サイドバーのアウトライン表示はVSCodeが備えているデフォルトの機能です。他にも、シンボルジャンプ（Cmd＋クリック）やFind All Refferemces(Alt+Shift+F12)なども組み合わせて連携できます。
以下のようにこのキャンバスをスナップショットとして保存できます。
感想
以上、Haystack Editorのコード閲覧機能を中心に使い方を解説しました。
個人的には、Haystack Editorを使ったからといって劇的にコードが読みやすくなるということはありませんでした。ただこれは、普段からエディタ環境でのOSSのコードリーディングに慣れているためかもしれません。
そのため、あまりコードリーディングをしたことがない人がHaystack Editorを使ってどう感じるのか聞いてみたいと思い、この記事を書きました。
私自身が分かりづらいと感じた点は、今どのファイルを開いていて全体のどの位置にいるのかが直感的に判断しづらいことでした。ソースコードをツリー状に理解するメンタルモデルが解放されてしまっているからかもしれません。別のウィンドウで同じファイルを開いている状況もよくあるのですが、迷子になることが多かったです。
世間の評判では「これを使うには広いモニタが必要」というものがありました。またマウス操作が必要なことも難点として挙げられていました。解像度や老眼は腕力で解決するのは難しそうですが、VSCodeエコシステムに則っていればキーボード操作の方はなんとかなりそうです。一方私は単にでかいモニタを買いました。*3
それ以外には、近年VSCodeフォークした独自エディタが一般的になっていることに関心しました。Haystackは小規模チームでフォークして開発しているようなので、年々独自エディタ開発の敷居が下がっているように感じます。
私自身もAI組み込み文章執筆アプリケーションを作ってみたいと思っているので、このような有用なソフトがOSSで公開されていたら参考にしたいと思います。*4
