Obsidian でタグ付き文と所属ノートを一覧表示する DataviewJS スニペット

背景：棚卸しのハードルを下げたくて

最近、Obsidianでノートの整理をしている中で、「進行中」「アイデア段階」などのステータスタグをうまく棚卸ししたいなと思っていた。

例えば #idea, #ongoing のようなタグを使って分類しているメモについて、 どのノートがそのタグ付きメモを含んでいるのか、どの文が該当するのかを一気に見たくなる 。

Obsidian では、備えつきの「タグ一覧」と「タグがついたノートと文を表示する」機能があって、サイドペインに表示してくれる。しかし、これだと複数のタグの状況を一覧することが難しい。行ったり来たりしているうちに何をやっていたか忘れてしまう。

習慣化するには、それにとりかかるハードルをいかに低くするかが大事。ステータスタグの棚卸しをスムーズに取りかかれるよう、Dataview (DataviewJS) を使うことにした。

つまり目的はこんな感じ：

複数のタグについて、それぞれの「該当ノートと文」を一覧表示したい
見える化することで、棚卸し（ふりかえり）をサッとできるようにしたい

実際のスニペットと使い方

以下が実際に使用しているDataviewJSのクエリです。

```dataviewjs
// ここでタグを指定 here define the tag you want to search and output
let tagName = "#idea"; // ここを変更するだけで対象タグを変えられる

let rows = [];
for (let page of dv.pages(tagName)) {
    let content = await dv.io.load(page.file.path);
    // codeblock, inline code 内のタグ文字列を対象から外す Exclude the specified tag in code blocks and inline code
    let tags = content.replace(/```[\s\S]*?```/g, '') // Remove code blocks
                       .match(new RegExp(`(?:^|\\n)(?!.*\`.*${tagName}.*\`)[^\\n]*${tagName}[^\\n]*`, 'g'));
    // HTMLエスケープを解除し、文の間に改行を追加
    let formattedTags = tags ? tags.map(tag => tag.replace(/^\s*-\s*/gm, '').replace(/\\n/g, '<br>')).join("<br><br>") + "<br><br>" : "No tags found";
    rows.push([`[[${page.file.name}]]`, formattedTags]);
}

// タイトルを表の前の冒頭に示すだけの構成にする Output the title before the table
dv.paragraph(`**\`${tagName}\` タグ付けされたノートと文**`);

// 表にスタイルを追加して、ノート間に薄い線を挿入
dv.table(["Title", "Tagged Texts"], rows, { tableClass: "custom-table" });

// CSSを追加して、特定のテーブルにだけ薄い線を挿入
const style = document.createElement('style');
style.textContent = `
.custom-table {
    border-collapse: collapse;
    width: 100%;
}
.custom-table tr {
    border-bottom: 1px solid #ddd;
}
.custom-table tr:last-child {
    border-bottom: none;
}
`;
document.head.appendChild(style);
```

このような形に出力できます：

この記事投稿時に obisidian 再起動したら罫線がうまく表示されていないと分かったので、改善必要。罫線表示以外の機能は働いているから活用・転用可能ではある。

取り込んだ工夫

このスニペットでは、以下のような工夫を取り入れた：

所属しているノートはもちろん、タグが付いた文そのものを表示させる
- 同じノートに何個もタグ付き文が現れる場合、ノート名称は一度だけ表示
コードブロック codeblock やインラインコード inline code 中のタグは除外するようにした
箇条書き（特にインデントつき）の変な表示をうまく整形させた
Dataviewデフォルトの表だと行の区切りが分かりにくいので、CSSで罫線を追加した
- ⚠︎ただ、この記事投稿時に obisidian 再起動したら罫線がうまく表示されていないので、改善必要です
let tagName = "#idea" の1箇所だけ変更すれば、他のタグにもすぐ使い回せるようにした

動作環境 / Compatibility

このスニペットは、以下の環境で動作確認を行った、というか実際に使っている。

Obsidian v1.8.10
Dataview Plugin v0.5.68

最低動作要件（推定）

テストしたわけではないが、おそらく以下のバージョンが揃っていれば動作するはず。

Obsidian v1.1.0 以上
Dataview Plugin v0.5.0 以上（必須）

非同期処理 await dv.io.load() を含むため、Dataview v0.5.0 以降が必要です。

GitHubで公開中

今回のスニペットはGitHub上にて公開している。

📦 GitHub Repository:
covacova/obsidian-tips/tree/main/dataview/extract-tagged-lines.md

今後の拡張案

使っていてニーズが高まったら、以下の拡張を実践したい。

複数タグの組合せ条件に対応
表のデザインをもう少し洗練させる
抽出・表示対象を特定のフォルダに限定させる
抽出・表示対象を特定の期間に限定させる

以上、「タグ付きの文を一覧にしたい」という自分の小さな欲から始まった DataviewJS スニペットの紹介でした。棚卸しがちょっと楽になることを願って、使っていきます。