【fx】JSONログをTUIで探索する入門

結論：fxでできること

fxには2つの使い方がある：

1. TUI表示: JSONをインタラクティブに探索・検索
2. JavaScript変換: 式でデータを変換・フィルタ（jqの代替）

JSONL（行区切りJSON）のログ解析にも対応。

# TUIで探索
curl https://api.github.com/users/octocat | fx

# ログをTUIで解析
cat app.jsonl | fx -s

こんな人におすすめ

• JSONログをターミナルでサクサク確認したい
• jqの構文を覚えるのが面倒（fxはJavaScriptで書け、カスタム関数も作れる）
• Claude CodeのセッションログをTUIで解析したい
• 自作ツールのJSONLログをTUIで可視化したい

fxとは

ターミナルで動作するJSON/YAML/TOMLビューア＆プロセッサ。TUIでインタラクティブに操作できるのが最大の特徴。Go製で高速、jqと違い独自DSLではなくJavaScriptで処理できる。

インストール

egetでGitHub Releaseから直接取得。egetについてはGitHub Releaseを5秒でインストールする方法【Eget】を参照。

eget antonmedv/fx

TUIの基本操作

起動方法

# ファイルを開く
fx data.json

# パイプで受け取る
curl https://api.example.com/users | fx

# JSONLをTUIで確認
cat logs.jsonl | fx -s

主要キーバインド

キー	動作
j/k	上下移動
J/K	次/前の兄弟要素にジャンプ
h/l	折りたたみ/展開
e/E	全展開/全折りたたみ
/	正規表現検索
n/N	次/前の検索結果
y	オブジェクトごとコピー
@	ファジー検索でジャンプ
.	パス入力（dig）

実践Tips：yキーの活用

y キーでコピーすると、選択中のノードがJSON形式でクリップボードにコピーされる。構造を保ったままコピーできる形式なのがポイント。

{
  "id": 1,
  "name": "alice",
  "profile": {
    "email": "[e-mail]",
    "age": 25
  }
}

profile オブジェクトで y を押すと：

{
  "email": "[e-mail]",
  "age": 25
}

JSONオブジェクトの構造を保ったままコピーできる。

実践Tips：J/Kで兄弟要素を移動

J/K キーで次/前の兄弟要素にジャンプできる。j/k だと1行ずつ移動するが、J/K なら配列の各要素間を一発で移動できる。

以下のJSONをfxで開いている場合：

[
  {
    "id": 1,
    "user": { ... },
    "items": [ ... ],
    "payment": { ... },
    "shipping": { ... }
  },
  {
    "id": 2,
    "user": { ... },
    "items": [ ... ],
    "payment": { ... },
    "shipping": { ... }
  },
  ...
]

最初の要素にカーソルがある状態で J を押すと次の要素へ、K で前の要素へジャンプ。リスト内のオブジェクトを順番に確認できる。

実践Tips：@キーでパスにジャンプ

@ キーを押すとファジー検索が起動し、JSONパスを入力して直接ジャンプできる。大きなJSONで特定のフィールドを探すときに便利。

# @を押して入力
users.0.email  → users配列の最初の要素のemailにジャンプ

JavaScript式で変換

fxの特徴は、jqの独自DSLではなくJavaScriptで処理できる点。

# ドット記法でアクセス
echo '{"user":{"name":"alice"}}' | fx '.user.name'
# → "alice"

# アロー関数
echo '[1,2,3,4,5]' | fx 'x => x.filter(n => n > 2)'
# → [3, 4, 5]

# map/filter
echo '{"users":[{"name":"alice","age":25},{"name":"bob","age":30}]}' \
  | fx '.users' 'x => x.filter(u => u.age >= 30).map(u => u.name)'
# → ["bob"]

実践：JSONLログをTUIで解析

ログファイルなどで使われるJSONL形式は-s（slurp）オプションで配列として読み込み、TUIで探索できる。

# JSONLをTUIで確認
cat logs.jsonl | fx -s

fxで式を評価すると結果は標準出力されるため、TUIで操作したい場合は | fx でパイプする。

実践：Claude Codeのセッション解析

Claude Codeは会話履歴を~/.claude/projects/にJSONL形式で保存している。fxのTUIで解析できる。

会話のみ抽出してTUIで確認

.fxrc.js にカスタム関数を定義しておくと、最新セッションの会話をワンコマンドで確認できる。

# 最新セッションの会話を抽出
fx -s claude_chat < "$(ls -t ~/.claude/projects/*/*.jsonl | head -1)" | fx

.fxrc.jsでカスタム関数

~/.fxrc.js にカスタム関数を定義できる。

// ~/.fxrc.js

// Claude Codeセッションから会話のみ抽出
function claude_chat(x) {
  return x
    .filter(m => ["user", "assistant"].includes(m.type))
    .map(m => {
      let c = m.message?.content;
      let text = typeof c === "string" ? c
        : Array.isArray(c)
          ? c.filter(b => !["thinking", "tool_use", "tool_result"].includes(b.type))
             .map(b => b.text).join(" ")
          : "";
      return { role: m.type, ts: m.timestamp?.slice(11, 19), text: text.trim() };
    })
    .filter(m => m.text)
    .map((m, i) => ({
      "#": i + 1,
      role: m.role[0].toUpperCase(),
      ts: m.ts,
      content: m.text.split("\n")
    }));
}

# Claude Codeの最新セッションを解析
fx -s claude_chat < "$(ls -t ~/.claude/projects/*/*.jsonl | head -1)" | fx

まとめ

やりたいこと	コマンド
TUIで探索	fx data.json または cat | fx
JavaScript式で変換	fx '.field' または fx 'x => ...'
JSONL読み込み	fx -s
変換後にTUIで確認	fx -s 'expr' | fx
オブジェクトごとコピー	yキー
兄弟要素に移動	J/Kキー
パスにジャンプ	@キー
正規表現検索	/キー

JSONログをターミナルで解析するなら、TUI付きのfxが便利。jqと違ってJavaScript構文なので学習コストも低い。

参考

• 公式サイト
• GitHub
• Getting Started
• Key Bindings
• GitHub Releaseを5秒でインストールする方法【Eget】