diff --git a/docs/1-trial-session/01-get-started/index.md b/docs/1-trial-session/01-get-started/index.md
index aa1072fc5..da54b26f4 100644
--- a/docs/1-trial-session/01-get-started/index.md
+++ b/docs/1-trial-session/01-get-started/index.md
@@ -2,8 +2,6 @@
title: はじめての Web 開発
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
import installChromeOnMacVideo from "./install-chrome-on-mac.mp4";
import installChromeOnWindowsVideo from "./install-chrome-on-windows.mp4";
import installVscodeOnMacVideo from "./install-vscode-on-mac.mp4";
diff --git a/docs/1-trial-session/02-html/index.md b/docs/1-trial-session/02-html/index.md
index 8bb68c689..e019368d2 100644
--- a/docs/1-trial-session/02-html/index.md
+++ b/docs/1-trial-session/02-html/index.md
@@ -2,9 +2,6 @@
title: HTML
---
-import Answer from "@site/src/components/Answer";
-import Term from "@site/src/components/Term";
-import ViewSource from "@site/src/components/ViewSource";
import createFileVideo from "./create-file.mp4";
import openInBrowserVideo from "./open-in-browser.mp4";
import showFileExtensionsVideo from "./show-file-extensions.mp4";
diff --git a/docs/1-trial-session/03-javascript/index.md b/docs/1-trial-session/03-javascript/index.md
index b48d6499c..6c081ef96 100644
--- a/docs/1-trial-session/03-javascript/index.md
+++ b/docs/1-trial-session/03-javascript/index.md
@@ -2,7 +2,6 @@
title: JavaScript ことはじめ
---
-import Term from "@site/src/components/Term";
import helloWorldByJavascriptVideo from "./hello-world-by-javascript.mp4"
## JavaScript
diff --git a/docs/1-trial-session/04-expressions/index.md b/docs/1-trial-session/04-expressions/index.md
index dbba5b785..813199e13 100644
--- a/docs/1-trial-session/04-expressions/index.md
+++ b/docs/1-trial-session/04-expressions/index.md
@@ -2,8 +2,6 @@
title: 値と式と演算子
---
-import Term from "@site/src/components/Term";
-
## 値
次のコードを実行すると、`Hello World` が画面に表示されました。
diff --git a/docs/1-trial-session/05-variables/index.md b/docs/1-trial-session/05-variables/index.md
index b76140764..ee3c24daa 100644
--- a/docs/1-trial-session/05-variables/index.md
+++ b/docs/1-trial-session/05-variables/index.md
@@ -2,9 +2,6 @@
title: 変数
---
-import Term from "@site/src/components/Term";
-import ViewSource from "@site/src/components/ViewSource";
-
## 変数とは
変数を用いると、値を一時的に保存し、再利用することができます。数学における変数は通常数値を表すものですが、プログラムにおける変数は、文字列等を含め、全ての種類の「値」を格納することができます。
diff --git a/docs/1-trial-session/06-boolean/index.md b/docs/1-trial-session/06-boolean/index.md
index cc72ab3a6..36a799871 100644
--- a/docs/1-trial-session/06-boolean/index.md
+++ b/docs/1-trial-session/06-boolean/index.md
@@ -2,9 +2,6 @@
title: 論理値と論理演算子
---
-import Term from "@site/src/components/Term";
-import ViewSource from "@site/src/components/ViewSource";
-
## 論理値
JavaScript で利用できる「値」として、これまで文字列と数値を扱いました。JavaScript ではこの他に、論理値 と呼ばれる、「正しいか、正しくないか」を表すための値が存在します。
diff --git a/docs/1-trial-session/07-if-statement/index.md b/docs/1-trial-session/07-if-statement/index.md
index e5bbc0857..e939d0f69 100644
--- a/docs/1-trial-session/07-if-statement/index.md
+++ b/docs/1-trial-session/07-if-statement/index.md
@@ -2,10 +2,6 @@
title: 条件分岐
---
-import Term from "@site/src/components/Term";
-import ViewSource from "@site/src/components/ViewSource";
-import Answer from "@site/src/components/Answer";
-
## if 文
**if 文**は、JavaScript の制御構造で、特定の条件下のみで実行されるプログラムを記述することができます。
diff --git a/docs/1-trial-session/08-loop/index.md b/docs/1-trial-session/08-loop/index.md
index f32596da2..6d02a8fdd 100644
--- a/docs/1-trial-session/08-loop/index.md
+++ b/docs/1-trial-session/08-loop/index.md
@@ -2,10 +2,6 @@
title: 繰り返し
---
-import CodeBlock from '@theme/CodeBlock';
-import Term from "@site/src/components/Term";
-import ViewSource from "@site/src/components/ViewSource";
-import Answer from "@site/src/components/Answer";
import whileLoopVideo from "./while-loop.mp4";
## while 文
diff --git a/docs/1-trial-session/09-functions/index.md b/docs/1-trial-session/09-functions/index.md
index eeb45e60a..163dc0921 100644
--- a/docs/1-trial-session/09-functions/index.md
+++ b/docs/1-trial-session/09-functions/index.md
@@ -2,9 +2,6 @@
title: 関数
---
-import Term from "@site/src/components/Term";
-import Answer from "@site/src/components/Answer";
-import ViewSource from "@site/src/components/ViewSource";
import returnValueVideo from "./return-value.mp4";
## 処理の共通化
diff --git a/docs/1-trial-session/10-array/index.md b/docs/1-trial-session/10-array/index.md
index 2d9ebfad9..5dcf2c455 100644
--- a/docs/1-trial-session/10-array/index.md
+++ b/docs/1-trial-session/10-array/index.md
@@ -2,11 +2,6 @@
title: 配列
---
-import CodeBlock from '@theme/CodeBlock';
-import Term from "@site/src/components/Term";
-import ViewSource from "@site/src/components/ViewSource";
-import Answer from "@site/src/components/Answer";
-
## 配列
JavaScript における配列は、複数の値を並べて一つにまとめた値です。`[` から `]` で囲まれた部分は配列を生成する式になります。
diff --git a/docs/1-trial-session/11-object/index.md b/docs/1-trial-session/11-object/index.md
index 0d91faf2e..bddfde70c 100644
--- a/docs/1-trial-session/11-object/index.md
+++ b/docs/1-trial-session/11-object/index.md
@@ -2,10 +2,6 @@
title: オブジェクト
---
-import Answer from "@site/src/components/Answer";
-import Term from "@site/src/components/Term";
-import ViewSource from "@site/src/components/ViewSource";
-
## オブジェクト
JavaScript で扱うことのできる値の種類として、これまで数値、文字列、論理値を扱ってきました。オブジェクトもまた、JavaScript の値ですが、今まで扱ってきた値とは少し性質が異なります。
diff --git a/docs/1-trial-session/12-css/index.md b/docs/1-trial-session/12-css/index.md
index e362fb3b4..ec4c57295 100644
--- a/docs/1-trial-session/12-css/index.md
+++ b/docs/1-trial-session/12-css/index.md
@@ -2,10 +2,6 @@
title: ウェブサイトの見た目を整える
---
-import Answer from "@site/src/components/Answer";
-import Term from "@site/src/components/Term";
-import ViewSource from "@site/src/components/ViewSource";
-
今までは HTML と JavaScript を勉強してきました。今回は Web 開発で用いられるもう一つの言語、CSS について学びましょう。CSS は Web サイトの「見た目」をつかさどる言語です。多くの HTML 要素 は、 CSS を用いることで、その見た目を細かくカスタマイズすることができます。

diff --git a/docs/1-trial-session/13-dom/index.md b/docs/1-trial-session/13-dom/index.md
index c39911e3d..6a3f52330 100644
--- a/docs/1-trial-session/13-dom/index.md
+++ b/docs/1-trial-session/13-dom/index.md
@@ -2,10 +2,6 @@
title: DOM
---
-import Answer from "@site/src/components/Answer";
-import Term from "@site/src/components/Term";
-import ViewSource from "@site/src/components/ViewSource";
-
## HTML 要素を JavaScript で取得する
DOM(Document Object Model)は、HTML 構造を JavaScript のオブジェクトとして扱うための枠組みです。HTML と CSS のほとんどの機能は JavaScript から制御することができます。
diff --git a/docs/1-trial-session/14-events/index.md b/docs/1-trial-session/14-events/index.md
index e6ebde0ce..6813878b0 100644
--- a/docs/1-trial-session/14-events/index.md
+++ b/docs/1-trial-session/14-events/index.md
@@ -2,11 +2,6 @@
title: イベント
---
-import Term from "@site/src/components/Term";
-import Details from "@theme/Details";
-import CodeBlock from '@theme/CodeBlock';
-import ViewSource from "@site/src/components/ViewSource";
-
import handleClickVideo from "./handle-click.mp4";
import projectMovieForDom from "./project-movie-for-dom.mp4";
diff --git a/docs/1-trial-session/15-project/index.md b/docs/1-trial-session/15-project/index.md
index 9a3296dd7..f1a6c8281 100644
--- a/docs/1-trial-session/15-project/index.md
+++ b/docs/1-trial-session/15-project/index.md
@@ -2,8 +2,6 @@
title: プロジェクト
---
-import Term from "@site/src/components/Term";
-import ViewSource from "@site/src/components/ViewSource";
import omikujiVideo from "./omikuji.mp4";
import stopwatchVideo from "./stopwatch.mp4";
diff --git a/docs/1-trial-session/16-deploy-application/index.md b/docs/1-trial-session/16-deploy-application/index.md
index e7e32e140..14bff6f1b 100644
--- a/docs/1-trial-session/16-deploy-application/index.md
+++ b/docs/1-trial-session/16-deploy-application/index.md
@@ -2,7 +2,6 @@
title: 作ったウェブアプリを公開する
---
-import Term from "@site/src/components/Term";
import deployOnNetlifyDropVideo from "./deploy-on-netlify-drop.mp4";
## Netlify Drop を用いてウェブアプリを公開する
diff --git a/docs/2-browser-apps/01-inspector/index.md b/docs/2-browser-apps/01-inspector/index.md
index ceeb610b3..f1a1e08b9 100644
--- a/docs/2-browser-apps/01-inspector/index.md
+++ b/docs/2-browser-apps/01-inspector/index.md
@@ -2,9 +2,6 @@
title: ブラウザの開発者ツール
---
-import CodeBlock from '@theme/CodeBlock';
-import Term from "@site/src/components/Term";
-import ViewSource from "@site/src/components/ViewSource";
import inspectElementsVideo from "./inspect-elements.mp4";
import { GrSelect } from "react-icons/gr";
diff --git a/docs/2-browser-apps/02-reference/index.md b/docs/2-browser-apps/02-reference/index.md
index 9432fe82d..9878ba5bb 100644
--- a/docs/2-browser-apps/02-reference/index.md
+++ b/docs/2-browser-apps/02-reference/index.md
@@ -2,11 +2,6 @@
title: オブジェクトの参照
---
-import CodeBlock from '@theme/CodeBlock';
-import Term from "@site/src/components/Term";
-import ViewSource from "@site/src/components/ViewSource";
-import Answer from "@site/src/components/Answer";
-
## 参照
[オブジェクト](../../1-trial-session/11-object/index.md)で扱ったように、JavaScript の値はオブジェクトとプリミティブに分けられます。前回は、プリミティブを「それ以上分解できない値」のように説明しました。もう少し詳しくみてみましょう。
diff --git a/docs/2-browser-apps/03-class/index.md b/docs/2-browser-apps/03-class/index.md
index 535f34763..2788d6335 100644
--- a/docs/2-browser-apps/03-class/index.md
+++ b/docs/2-browser-apps/03-class/index.md
@@ -2,11 +2,6 @@
title: クラス
---
-import CodeBlock from '@theme/CodeBlock';
-import Term from "@site/src/components/Term";
-import ViewSource from "@site/src/components/ViewSource";
-import Answer from "@site/src/components/Answer";
-
## クラスとインスタンス
オブジェクトを使うと、複数の値をひとまとまりに扱うことができました。実世界においては、同じプロパティ(属性)を持つオブジェクトを多く扱う場合が多いです。例えば、学生をオブジェクトとして表すことを考えてみましょう。学生には必ず名前と年齢という属性があるはずなので、ひとまず `name` と `age` をプロパティに持つとしましょう。
diff --git a/docs/2-browser-apps/04-anonymous-function/index.md b/docs/2-browser-apps/04-anonymous-function/index.md
index f6b3fafae..e6d0d15a4 100644
--- a/docs/2-browser-apps/04-anonymous-function/index.md
+++ b/docs/2-browser-apps/04-anonymous-function/index.md
@@ -2,10 +2,6 @@
title: 無名関数
---
-import Term from "@site/src/components/Term";
-import ViewSource from "@site/src/components/ViewSource";
-import Answer from "@site/src/components/Answer";
-
## 無名関数
[イベント](../../1-trial-session/14-events/index.md)の節で、関数もオブジェクトの一種であることを説明しました。このため、関数は通常の値と同じように変数やプロパティに代入したり、関数の引数や戻り値になったりできます。
diff --git a/docs/2-browser-apps/05-css-arrangement/index.md b/docs/2-browser-apps/05-css-arrangement/index.md
index 4b2b83c0e..ffb51e30e 100644
--- a/docs/2-browser-apps/05-css-arrangement/index.md
+++ b/docs/2-browser-apps/05-css-arrangement/index.md
@@ -2,19 +2,10 @@
title: CSS による配置(発展)
---
-import CodeBlock from '@theme/CodeBlock';
-import Term from "@site/src/components/Term";
-import ViewSource from "@site/src/components/ViewSource";
-import ExternalVideoPlayer from "@site/src/components/ExternalVideoPlayer";
-
import absoluteScroll from "./position-absolute-scroll.mp4"
-
import fixedScroll from "./position-fixed-scroll.mp4"
-
import percentCss from "./percent-css.mp4"
-
import maxMinWidth from "./max-width-min-width.mp4"
-
import mediaQuery from "./mediaquery.mp4"
## CSS のボックスモデル
diff --git a/docs/2-browser-apps/06-project/index.md b/docs/2-browser-apps/06-project/index.md
index 8df1fb787..ed4acee88 100644
--- a/docs/2-browser-apps/06-project/index.md
+++ b/docs/2-browser-apps/06-project/index.md
@@ -2,9 +2,6 @@
title: プロジェクト
---
-import Term from "@site/src/components/Term";
-import ViewSource from "@site/src/components/ViewSource";
-import ExternalVideoPlayer from "@site/src/components/ExternalVideoPlayer";
import calendarVideo from "./calendar.mp4";
ここまでの知識を使って、今月分の予定管理アプリを作ってみましょう。
diff --git a/docs/3-web-servers/01-wsl-setup/index.md b/docs/3-web-servers/01-wsl-setup/index.md
index 16c787bb1..bcb4cd152 100644
--- a/docs/3-web-servers/01-wsl-setup/index.md
+++ b/docs/3-web-servers/01-wsl-setup/index.md
@@ -2,11 +2,6 @@
title: WSL のセットアップ (Windows のみ)
---
-import CodeBlock from '@theme/CodeBlock';
-import Term from "@site/src/components/Term";
-import ViewSource from "@site/src/components/ViewSource";
-import ExternalVideoPlayer from "@site/src/components/ExternalVideoPlayer";
-
## Linux と WSL
現在、Web サービスを提供するコンピューターのほとんどに、**Linux** という名前の OS が搭載されています。このため、Web サービスを開発するには、Linux を用いて開発することが理想です。しかしながら、現在流通している一般的なコンピューターに搭載されている OS は、Windows または macOS です。
diff --git a/docs/3-web-servers/02-node-js/index.md b/docs/3-web-servers/02-node-js/index.md
index c72c0303a..5063d98d1 100644
--- a/docs/3-web-servers/02-node-js/index.md
+++ b/docs/3-web-servers/02-node-js/index.md
@@ -2,11 +2,6 @@
title: はじめての Node.js
---
-import CodeBlock from '@theme/CodeBlock';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import Term from "@site/src/components/Term";
-import ViewSource from "@site/src/components/ViewSource";
import installNvmInWslVideo from "./install-nvm-in-wsl.mp4";
import installNvmInMacVideo from "./install-nvm-in-mac.mp4";
import openFolderInWslVideo from "./open-folder-in-wsl.mp4";
diff --git a/docs/3-web-servers/03-module/index.md b/docs/3-web-servers/03-module/index.md
index 99c9c5783..d53de0c73 100644
--- a/docs/3-web-servers/03-module/index.md
+++ b/docs/3-web-servers/03-module/index.md
@@ -2,10 +2,6 @@
title: モジュールと npm
---
-import CodeBlock from '@theme/CodeBlock';
-import Term from "@site/src/components/Term";
-import ViewSource from "@site/src/components/ViewSource";
-import Answer from "@site/src/components/Answer";
import commandsAnswerVideo from "./commands-answer.mp4";
import npmInitVideo from "./npm-init.mp4";
import npmInstallVideo from "./npm-install.mp4";
diff --git a/docs/3-web-servers/04-server/index.md b/docs/3-web-servers/04-server/index.md
index d1c60f24f..6211f889c 100644
--- a/docs/3-web-servers/04-server/index.md
+++ b/docs/3-web-servers/04-server/index.md
@@ -2,10 +2,6 @@
title: Express によるサーバー構築
---
-import CodeBlock from '@theme/CodeBlock';
-import Term from "@site/src/components/Term";
-import ViewSource from "@site/src/components/ViewSource";
-
## ウェブサイトが動作する仕組み
[「Web プログラミングの基礎を学ぼう」](../../1-trial-session/index.md) の章では、ウェブサイトを表示するために HTML ファイルと JavaScript ファイルを作成し、ブラウザから開きました。しかしながら、通常のウェブサイトではこのような手順は踏まず、URL をブラウザに入力することにより閲覧することができます。
diff --git a/docs/3-web-servers/05-form/index.md b/docs/3-web-servers/05-form/index.md
index 2f763f361..69a1df0a5 100644
--- a/docs/3-web-servers/05-form/index.md
+++ b/docs/3-web-servers/05-form/index.md
@@ -2,10 +2,6 @@
title: フォーム
---
-import CodeBlock from '@theme/CodeBlock';
-import Term from "@site/src/components/Term";
-import ViewSource from "@site/src/components/ViewSource";
-
## クエリパラメータの利用
入力した内容によって、次に移る(表示される)ページが異なるウェブページがあります。例として、Google で `utcode` と検索した際に表示される検索結果のページを考えてみましょう。
diff --git a/docs/3-web-servers/06-get-post/index.md b/docs/3-web-servers/06-get-post/index.md
index 20376dad8..892144dc7 100644
--- a/docs/3-web-servers/06-get-post/index.md
+++ b/docs/3-web-servers/06-get-post/index.md
@@ -2,9 +2,6 @@
title: GET リクエストと POST リクエスト
---
-import CodeBlock from '@theme/CodeBlock';
-import Term from "@site/src/components/Term";
-import ViewSource from "@site/src/components/ViewSource";
import postInDevelopment1 from "./postInDevelopment1.mp4";
import postInDevelopment2 from "./postInDevelopment2.mp4";
import postInDevelopment3 from "./postInDevelopment3.mp4";
diff --git a/docs/3-web-servers/07-database/index.md b/docs/3-web-servers/07-database/index.md
index ebf9a4357..eb87c8c50 100644
--- a/docs/3-web-servers/07-database/index.md
+++ b/docs/3-web-servers/07-database/index.md
@@ -2,9 +2,6 @@
title: データベース
---
-import CodeBlock from '@theme/CodeBlock';
-import Term from "@site/src/components/Term";
-import ViewSource from "@site/src/components/ViewSource";
import newPostgresqlInstanceVideo from "./new-postgresql-instance.mp4";
import connectDbeaverToDatabaseVideo from "./connect-dbeaver-to-database.mp4";
import prismaInitVideo from "./prisma-init.mp4";
diff --git a/docs/3-web-servers/08-cookie/index.md b/docs/3-web-servers/08-cookie/index.md
index 7373306c2..619c37c78 100644
--- a/docs/3-web-servers/08-cookie/index.md
+++ b/docs/3-web-servers/08-cookie/index.md
@@ -2,9 +2,6 @@
title: Cookie と認証(発展)
---
-import CodeBlock from '@theme/CodeBlock';
-import Term from "@site/src/components/Term";
-import ViewSource from "@site/src/components/ViewSource";
import cookieCounterVideo from "./cookie-counter.mp4";
## HTTP ヘッダ
diff --git a/docs/3-web-servers/09-git-github-init/index.md b/docs/3-web-servers/09-git-github-init/index.md
index 482e3ca01..ef5cb7247 100644
--- a/docs/3-web-servers/09-git-github-init/index.md
+++ b/docs/3-web-servers/09-git-github-init/index.md
@@ -2,10 +2,6 @@
title: Git と GitHub のセットアップ
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import Term from "@site/src/components/Term";
-import ViewSource from "@site/src/components/ViewSource";
import installCommandLineDeveloperToolsVideo from "./install-command-line-developer-tools.mp4";
import registerGitHubVideo from "./register-github.mp4";
import setupGitVideo from "./setup-git.mp4";
diff --git a/docs/3-web-servers/10-git-github/index.md b/docs/3-web-servers/10-git-github/index.md
index 85b0a87c6..4a77987f5 100644
--- a/docs/3-web-servers/10-git-github/index.md
+++ b/docs/3-web-servers/10-git-github/index.md
@@ -2,10 +2,6 @@
title: Git と GitHub
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import Term from "@site/src/components/Term";
-import ViewSource from "@site/src/components/ViewSource";
import gitInitVideo from "./git-init.mp4";
import gitInitWithCliVideo from "./git-init-with-cli.mp4";
import stageChangesVideo from "./stage-changes.mp4";
diff --git a/docs/3-web-servers/12-deploy-on-render/index.md b/docs/3-web-servers/12-deploy-on-render/index.md
index 0210bf9e2..c81b4e87a 100644
--- a/docs/3-web-servers/12-deploy-on-render/index.md
+++ b/docs/3-web-servers/12-deploy-on-render/index.md
@@ -2,8 +2,6 @@
title: Render へのデプロイ
---
-import Term from "@site/src/components/Term";
-import ViewSource from "@site/src/components/ViewSource";
import registerRenderVideo from "./register-render.mp4";
import connectGitHubVideo from "./connect-github.mp4";
import staticSiteDeployVideo from "./static-site-deploy.mp4";
diff --git a/docs/4-advanced/01-fetch-api/index.md b/docs/4-advanced/01-fetch-api/index.md
index 397094462..04238412e 100644
--- a/docs/4-advanced/01-fetch-api/index.md
+++ b/docs/4-advanced/01-fetch-api/index.md
@@ -2,10 +2,6 @@
title: Fetch API
---
-import CodeBlock from '@theme/CodeBlock';
-import Term from "@site/src/components/Term";
-import ViewSource from "@site/src/components/ViewSource";
-import ExternalVideoPlayer from "@site/src/components/ExternalVideoPlayer";
import chatAppVideo from "./chat-app.mp4";
## ブラウザで動く JavaScript から HTTP リクエストを発行する
diff --git a/docs/4-advanced/02-bundler/index.md b/docs/4-advanced/02-bundler/index.md
index 4b396c80f..c6f0e4d7d 100644
--- a/docs/4-advanced/02-bundler/index.md
+++ b/docs/4-advanced/02-bundler/index.md
@@ -2,10 +2,6 @@
title: トランスパイラとモジュールバンドラ
---
-import CodeBlock from '@theme/CodeBlock';
-import Term from "@site/src/components/Term";
-import ViewSource from "@site/src/components/ViewSource";
-import ExternalVideoPlayer from "@site/src/components/ExternalVideoPlayer";
import getStartedWithViteVideo from "./get-started-with-vite.mp4";
import buildVideo from "./build.mp4";
diff --git a/docs/4-advanced/03-typescript/index.md b/docs/4-advanced/03-typescript/index.md
index 6dc276911..c9cbf599e 100644
--- a/docs/4-advanced/03-typescript/index.md
+++ b/docs/4-advanced/03-typescript/index.md
@@ -3,11 +3,6 @@ title: TypeScript
---
import { SiTypescript } from "react-icons/si";
-import CodeBlock from '@theme/CodeBlock';
-import Term from "@site/src/components/Term";
-import ViewSource from "@site/src/components/ViewSource";
-import Answer from "@site/src/components/Answer";
-import ExternalVideoPlayer from "@site/src/components/ExternalVideoPlayer";
import typescriptDemoVideo from "./typescript-demo.mp4";
import setupTypeScriptNodeVideo from "./setup-typescript-node.mp4";
import typesPackageVideo from "./types-package.mp4";
diff --git a/docs/4-advanced/04-react/index.md b/docs/4-advanced/04-react/index.md
index e7c12484f..96002f880 100644
--- a/docs/4-advanced/04-react/index.md
+++ b/docs/4-advanced/04-react/index.md
@@ -2,10 +2,6 @@
title: React
---
-import Term from "@site/src/components/Term";
-import Answer from "@site/src/components/Answer";
-import ViewSource from "@site/src/components/ViewSource";
-import ExternalVideoPlayer from "@site/src/components/ExternalVideoPlayer";
import createReactProjectVideo from "./create-react-project.mp4";
import componentRenderingVideo from "./component-rendering.mp4";
diff --git a/docs/5-team-development/01-git-workflow/index.md b/docs/5-team-development/01-git-workflow/index.md
index d390efa75..44f421526 100644
--- a/docs/5-team-development/01-git-workflow/index.md
+++ b/docs/5-team-development/01-git-workflow/index.md
@@ -3,10 +3,6 @@ title: Git と GitHub を用いたワークフロー
---
import outdent from "outdent";
-import CodeBlock from '@theme/CodeBlock';
-import Term from "@site/src/components/Term";
-import ViewSource from "@site/src/components/ViewSource";
-import ExternalVideoPlayer from "@site/src/components/ExternalVideoPlayer";
import branchedGraphVideo from "./branched-graph.mp4";
import mergeVideo from "./merge.mp4";
import editCommitMessageWithVim from "./edit-commit-message-with-vim.mp4";
diff --git a/src/theme/MDXComponents.js b/src/theme/MDXComponents.js
new file mode 100644
index 000000000..5907db3b0
--- /dev/null
+++ b/src/theme/MDXComponents.js
@@ -0,0 +1,37 @@
+import React from "react";
+import MDXComponents from "@theme-original/MDXComponents";
+
+/*
+Export components in this file,
+and they become available on every page.
+cf. https://docusaurus.io/docs/markdown-features/react#mdx-component-scope
+*/
+
+// libraries
+import Details from "@theme/Details";
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import CodeBlock from "@theme/CodeBlock";
+
+// custom components
+import Answer from "@site/src/components/Answer";
+import Term from "@site/src/components/Term";
+import ViewSource from "@site/src/components/ViewSource";
+import ExternalVideoPlayer from "@site/src/components/ExternalVideoPlayer";
+
+export default {
+ // Re-use the default mapping
+ ...MDXComponents,
+
+ // export libraries
+ Details,
+ Tabs,
+ TabItem,
+ CodeBlock,
+
+ // export custom Components
+ Answer,
+ Term,
+ ViewSource,
+ ExternalVideoPlayer,
+};