`Term`コンポーネントを書くための`[[用語]]`記法を導入 #898

chvmvd · 2025-11-23T04:59:05Z

Termコンポーネントを書くための[[用語]]記法を導入しました。この記法にした理由としては、Wikipediaなどでも使用されているようによく使われている直感的な記法であること、入力が極めて容易であること、将来的に記法を拡張する余地があることが挙げられます。

仕様は、TSDocの通りで、[[用語]]のように中身がテキストの場合、あるいは[[**用語**]]のように中身が単一のASTノードである場合のみ、正しくパースされます。

参考

Docusaurusのremarkのpluginの作成に関するドキュメント https://docusaurus.io/docs/markdown-features/plugins#creating-new-rehyperemark-plugins
remarkでのプラグインの作成に関するドキュメント
ASTの構造に関するドキュメント
- https://unifiedjs.com/learn/guide/syntax-trees-typescript/
- https://github.com/syntax-tree/mdast
remarkでのMDXに関するドキュメント
- https://mdxjs.com/packages/remark-mdx/
remarkでのMDXのASTの構造に関するドキュメント
- https://github.com/syntax-tree/mdast-util-mdx
- https://github.com/syntax-tree/mdast-util-mdx-jsx

cloudflare-workers-and-pages · 2025-11-23T05:01:11Z

Deploying utcode-learn with Cloudflare Pages

Latest commit:	`a3a4555`
Status:	✅ Deploy successful!
Preview URL:	https://403ab934.utcode-learn.pages.dev
Branch Preview URL:	https://add-remark-term.utcode-learn.pages.dev

View logs

chvmvd · 2025-11-29T07:18:11Z

docs/1-trial-session/04-javascript/index.mdx

「JavaScriptことはじめ」の節全体のみに、新しい記法を取り入れました。

chvmvd · 2025-11-29T07:35:30Z

src/remark/remark-term.ts

+import type { Nodes, Root, RootContent } from "mdast";
+import { phrasing } from "mdast-util-phrasing";
+
+const remarkTerm: Plugin<[], Root> = () => (tree) => transform(tree);


Plugin型とRoot型を使うのが良さそうです。
cf. https://github.com/unifiedjs/unified/blob/45d8fa503157d20a656b3fa00e4b010dc0e50748/readme.md#types
cf. https://github.com/unifiedjs/unified/blob/45d8fa503157d20a656b3fa00e4b010dc0e50748/readme.md#plugin

chvmvd · 2025-11-29T07:37:49Z

src/remark/remark-term.ts

@@ -0,0 +1,114 @@
+import type { Plugin } from "unified";
+import type { Nodes, Root, RootContent } from "mdast";


READMEには書かれていない型もあるため、型定義を直接読んで必要な型を探す必要があります。
https://github.com/syntax-tree/mdast/blob/b1cf7f76fe879ba7a3cdc09a3e477f0e50e06f81/readme.md
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/86f44b5ee78b2ea5c25b8deb9f6f5d846042cf56/types/mdast/index.d.ts

chvmvd · 2025-11-29T07:47:28Z

src/remark/remark-term.ts

+      continue;
+    }
+
+    if (!phrasing(innerElement)) {


MdxJsxTextElement.childrenプロパティの型はArray<PhrasingContent>でありここで絞り込みをする必要があるため、mdast-util-phrasingパッケージのphrasing関数を使用しています。

cf. https://github.com/syntax-tree/mdast-util-mdx-jsx/blob/998d98d0aa29fe9ed12c636ddf1ed39f9a018096/readme.md#mdxjsxtextelement
cf. https://github.com/syntax-tree/mdast-util-phrasing

chvmvd · 2025-11-29T07:55:44Z

src/remark/remark-term.ts

+    }
+    if (segmentedText.startsWith("[[")) {
+      transformedChildren.push({
+        type: "mdxJsxTextElement",


Termコンポーネントを表すASTのノードは、MdxJsxTextElementです。
https://github.com/syntax-tree/mdast-util-mdx-jsx/blob/998d98d0aa29fe9ed12c636ddf1ed39f9a018096/readme.md#mdxjsxtextelement

chvmvd · 2025-11-30T03:17:56Z

src/remark/remark-term.ts

@@ -0,0 +1,116 @@
+import type { Plugin } from "unified";
+import type { Nodes, Root, RootContent } from "mdast";
+import "mdast-util-mdx-jsx";


mdast-util-mdx-jsxによって、mdastの型に、MDX JSXに関する型が拡張されています。
https://github.com/syntax-tree/mdast-util-mdx-jsx/blob/998d98d0aa29fe9ed12c636ddf1ed39f9a018096/index.d.ts#L254-L279
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/86f44b5ee78b2ea5c25b8deb9f6f5d846042cf56/types/mdast/index.d.ts#L301-L307

ここだけランタイムに不要なインポートが発生しちゃってませんか？

chelproc

変換ロジックがやや冗長な気がします。↓みたいな感じでどうでしょう？Rootを特別扱いする必要もない気がします！

childrenを前から順番に走査しながら、

非テキストノード → 再帰
(.+)\[\[(.+)\]\](.+) を見つけた → 現在のノードを $1, [[, $2, ]], $3 に分割して挿入
(.+)\[\[ を見つけた → 先読みして \]\].+ が見つかったら Term を挿入

chelproc · 2026-01-10T11:00:14Z

src/remark/remark-term.ts

@@ -0,0 +1,116 @@
+import type { Plugin } from "unified";
+import type { Nodes, Root, RootContent } from "mdast";
+import "mdast-util-mdx-jsx";


ここだけランタイムに不要なインポートが発生しちゃってませんか？

Copilot

Pull request overview

Termコンポーネントを手書き JSX ではなく、Markdown 内の [[用語]] 記法から自動生成できるようにするための remark プラグイン導入PRです。Docusaurus の remarkPlugins に組み込み、既存ドキュメントの一部も新記法へ置き換えています。

Changes:

[[...]] を <Term>...</Term> 相当の MDX JSX ノードへ変換する remark-term プラグインを追加
Docusaurus 設定に remarkTerm を追加し、必要な依存関係/型拡張を追加
サンプルとして JavaScript ドキュメントの <Term> を [[...]] に置換

Reviewed changes

Copilot reviewed 4 out of 7 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
tsconfig.json	TypeScript の `strict` を有効化
src/types/mdast-mdx-jsx.d.ts	mdast に MDX JSX ノード型を追加するための型拡張 import を追加
src/remark/remark-term.ts	`[[...]]` を `mdxJsxTextElement (Term)` に変換する remark プラグインを新規追加
docusaurus.config.ts	docs の `remarkPlugins` に `remarkTerm` を追加
package.json	プラグイン実装/型付けに必要な依存を追加
package-lock.json	依存追加に伴う lockfile 更新
docs/1-trial-session/04-javascript/index.mdx	`<Term>` を `[[...]]` 記法へ置換

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/remark/remark-term.ts

package.json

na-trium-144 mentioned this pull request Nov 23, 2025

ut.code(); LearnのTerm記法をパクる ut-code/my-code#118

Open

TypeScriptをセットアップ

2ac1f9c

chvmvd force-pushed the add-remark-term branch from e786566 to 8a96283 Compare November 29, 2025 07:07

chvmvd changed the base branch from main to add-typescript-support November 29, 2025 07:07

chvmvd force-pushed the add-remark-term branch 2 times, most recently from 5fdced0 to a0180af Compare November 29, 2025 07:16

Termコンポーネントを書くための[[用語]]記法を導入

996b744

chvmvd force-pushed the add-remark-term branch from a0180af to 996b744 Compare November 30, 2025 03:14

chvmvd commented Nov 30, 2025

View reviewed changes

コメントを追加

9c70287

chvmvd marked this pull request as ready for review November 30, 2025 03:57

chvmvd added 2 commits November 30, 2025 21:06

Merge branch 'main' into add-typescript-support

388c35c

Merge branch 'add-typescript-support' into add-remark-term

d065a6c

Base automatically changed from add-typescript-support to main December 6, 2025 12:58

Merge branch 'main' into add-remark-term

0913a74

chelproc reviewed Jan 10, 2026

View reviewed changes

chvmvd added 2 commits February 7, 2026 19:46

remarkTermをリファクタリング

5e44918

Merge branch 'main' into add-remark-term

49d9c2e

chvmvd requested a review from Copilot February 7, 2026 10:57

Copilot started reviewing on behalf of chvmvd February 7, 2026 10:58 View session

Copilot AI reviewed Feb 7, 2026

View reviewed changes

src/remark/remark-term.ts Show resolved Hide resolved

src/remark/remark-term.ts Show resolved Hide resolved

package.json Show resolved Hide resolved

不要な変更を削除

a3a4555

chvmvd requested a review from chelproc February 7, 2026 13:23

		@@ -0,0 +1,114 @@
		import type { Plugin } from "unified";
		import type { Nodes, Root, RootContent } from "mdast";

Termコンポーネントを書くための[[用語]]記法を導入 #898

Are you sure you want to change the base?

Termコンポーネントを書くための[[用語]]記法を導入 #898

Uh oh!

Conversation

chvmvd commented Nov 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cloudflare-workers-and-pages bot commented Nov 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying utcode-learn with Cloudflare Pages

Uh oh!

chvmvd Nov 29, 2025

Choose a reason for hiding this comment

Uh oh!

chvmvd Nov 29, 2025

Choose a reason for hiding this comment

Uh oh!

chvmvd Nov 29, 2025

Choose a reason for hiding this comment

Uh oh!

chvmvd Nov 29, 2025

Choose a reason for hiding this comment

Uh oh!

chvmvd Nov 29, 2025

Choose a reason for hiding this comment

Uh oh!

chvmvd Nov 30, 2025

Choose a reason for hiding this comment

Uh oh!

chelproc Jan 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

chelproc left a comment

Choose a reason for hiding this comment

Uh oh!

chelproc Jan 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

`Term`コンポーネントを書くための`[[用語]]`記法を導入 #898

`Term`コンポーネントを書くための`[[用語]]`記法を導入 #898

chvmvd commented Nov 23, 2025 •

edited

Loading

cloudflare-workers-and-pages bot commented Nov 23, 2025 •

edited

Loading

chelproc Jan 10, 2026 •

edited

Loading

chelproc Jan 10, 2026 •

edited

Loading