前提
準備
方法
終わりに

おはこんにちばんは

Obsidian、使いやすいですよね。
私も、同僚に教えていただき使ってみたところ、使いやすく、メモなどに使っています。

このObsidianでは、コミュニティプラグインを用いることで、JavaScriptを実行できることができました。

ということで、本記事では、ObsidianでJavaScriptを実行するための方法を紹介していきたいと思います。

前提

以下ですが、設定の表示方法など基本的な部分を省略して記載しております。そのため、ある程度Obsidianのことを理解している、という前提で話していきます。

準備

まずは、コミュニティプラグインをインストールしていきます。インストールするプラグインは以下の2つです。

CustomJS

github.com

DataView

github.com

これらプラグインを必要とする理由を簡単に説明すると、

DataViewで、JavaScriptを読み込み、
CustomJSで、外部スクリプトを読み込めるようにする。

ということになります。

プラグインをインストールしたら、プラグインを有効化します。
また、CustomJSだけ設定画面でscriptを配置するフォルダを指定しておいてください。

方法

では、今回はTOC（目次）を自動作成するスクリプトを作成していきます。

任意のディレクトリにJavaScriptファイルを作成します。
そして、作成したファイルにコードを記載してください（以下参照）。

// toc.js

class TableOfContents {
    /**
     * Table of Contents（目次）の取得
     * @param path Obsidianのルートディレクトリを基準としたファイルの相対パス
     * @param fileName ファイル名
   */
    getTOC(path, fileName) {
        const fs = require("node:fs");
        
        // ファイル内のコンテンツを取得する
        const ABSOLUTE_PATH_TO_OBSIDIAN = ""
        const absolutePath = ABSOLUTE_PATH_TO_OBSIDIAN + path;
        const contents = fs.readFileSync(absolutePath, { encoding: "utf8" });
        
        // コンテンツ内の見出しのみを取得する
        const REG_EXP_HEADING = /^(# |## |### |#### ).*/gm;
        const headingList = contents.match(REG_EXP_HEADING);
        
        // obsidianでの内部リンク方法
        // [[{fileName}# {headingName}|{name}]]
        // 例：[[ObsidianのnoteをJavaScriptで解析する#前提|test]]
        const REG_EXP_HEADING_TITLE = /^(# |## |### |#### )/gm;
        const headingTitleList = headingList.map((heading) => {
            return heading.replace(REG_EXP_HEADING_TITLE, "");
        });
        const markdownList = headingList.map((heading, index) => {
            const headingHash = heading.split(" ")[0];
            const headingNumber = headingHash.length;
            const indent = "- ".repeat(headingNumber);
            
            return `${headingNumber > 0 && `${indent}##### `}[${
                headingTitleList[index]
            }](${heading.replace(" ", "")})`;
        });
    
        return { markdownList };
    }
}

（※ ここでは、コードのロジックについては、説明致しません）

コードを書く上での注意点は以下になります。

必ずclassを使って書きましょう。関数を使ってimportしようとしても読み込んできれません。
npmなどを使って、ライブラリをインストールして使用することはできません。ただし、nodeは使うことができます。

このコードを、DataViewで読み込みます。

任意のObsinianのノートで、以下のコードブロックを記載します。

  ```dataviewjs
    const { TableOfContents } = customJS
    const name = dv.current().file.name
    const path = dv.current().file.path
    const toc = TableOfContents.getTOC(path, name)
    
    dv.header(3, "目次");
    dv.paragraph(toc.markdownList);
  ```

このコードブロックの下に#や##などを使って見出しを書きます。

設定などがうまく出来ていれば、目次が表示されるようになり、かつ見出しへのアンカーリンクとして使用することができます。

終わりに

実装することはできましたでしょうか。

Obsidianでは、すでに目次を表示する機能があるので、今回のtoc.jsは不要です（私がこれを作成した時は、目次の機能に気づきませんでした。。。）。

しかし、この方法を応用して便利な使い方ができると、Obsidianを使うのがもっと楽しくなりますね！

もしかしたら、もっと簡単な方法があるかもですが、今回はここまでとさせていただきます。

ここまでお読みいただきありがとうございました！

kostumブログ

勉強したことやノート代わりのアウトプットに使っています。

ObsidianのnoteをJavaScriptで解析する

前提

準備

方法

終わりに