diff --git a/.github/.typo-ci.yml b/.github/.typo-ci.yml
new file mode 100644
index 000000000..b1b60f8f9
--- /dev/null
+++ b/.github/.typo-ci.yml
@@ -0,0 +1,43 @@
+# This is a sample .typo-ci.yml file, it's used to configure how Typo CI will behave.
+# Add it to the root of your project and push it to github.
+---
+# What language dictionaries should it use? By default Typo CI will select 'en' & 'en_GB'
+# Currently Typo CI supports:
+# de
+# en
+# en_GB
+# es
+# fr
+# it
+# nl
+# pt
+# pt_BR
+# tr
+dictionaries:
+  - en
+  - en_GB
+
+# Any files/folders we should ignore?
+excluded_files:
+  - "vendor/**/*"
+  - "node_modules/**/*"
+  - "*.key"
+  - "*.enc"
+  - "*.min.css"
+  - "*.css.map"
+  - "*.min.js"
+  - "*.js.map"
+  - "*.mk"
+  - "package-lock.json"
+  - "yarn.lock"
+  - "Gemfile.lock"
+  - ".typo-ci.yml"
+  - ".github/.typo-ci.yml"
+
+# Any words we should ignore?
+excluded_words:
+  - typoci
+  - OpenInColab
+
+# Would you like filenames to also be spellchecked?
+spellcheck_filenames: true
diff --git a/src/components/OpenInColab/OpenInColab.tsx b/src/components/OpenInColab/OpenInColab.tsx
index 3897bd13a..a2e28620f 100644
--- a/src/components/OpenInColab/OpenInColab.tsx
+++ b/src/components/OpenInColab/OpenInColab.tsx
@@ -2,6 +2,12 @@ import React from "react";
 import usePathname from "../usePathname";
 import styles from "./styles.module.css";
 
+/**
+ * OpenInColabへのリンクをつくるコンポーネント
+ * @param param0 現在ファイルからのipynbへの相対パス
+ * @returns OpenInColabへのリンク
+ */
+
 export default function OpenInColab({ path }) {
   const pathname = usePathname();
   return (
diff --git a/src/components/ViewSource/ViewSource.tsx b/src/components/ViewSource/ViewSource.tsx
index 580e323d0..c963a0bb6 100644
--- a/src/components/ViewSource/ViewSource.tsx
+++ b/src/components/ViewSource/ViewSource.tsx
@@ -3,20 +3,30 @@ import CodeBlock from "@theme/CodeBlock";
 import usePathname from "../usePathname";
 import OpenInColab from "../OpenInColab/OpenInColab";
 
+/**
+ * ipynbファイルからソースコードと出力、OpenInColabへのリンクを生成
+ * @param param0 現在ファイルからのipynbへの相対パス
+ * @param param1 Pythonの出力を表示するか
+ * @returns ソースコードと出力、OpenInColabへのリンク
+ */
+
 export default function ViewSource({ path, nooutput = false }) {
   const pathname = usePathname();
   const [sources, setSources] = useState<string[]>([]);
   const [outputs, setOutputs] = useState<string[]>([]);
   useEffect(() => {
     async function tmp() {
+      // 該当のipynbファイルをjson形式でとってくる
       const content = await import(
         `/docs/${pathname.slice(6)}${path.slice(0, -6)}.json`
       );
+      // ソースコードを取り出す
       setSources(
         content.cells
           .filter((cell) => cell.cell_type === "code")
           .map((cell) => cell.source.join(""))
       );
+      // outputを取り出す
       setOutputs(
         content.cells
           .filter((cell) => cell.cell_type === "code")
@@ -39,7 +49,9 @@ export default function ViewSource({ path, nooutput = false }) {
     <>
       {sources.map((source, i) => (
         <React.Fragment key={i}>
+          {/* ソースコード */}
           <CodeBlock language="python">{source}</CodeBlock>
+          {/* output */}
           {!nooutput && (
             <CodeBlock language="plaintext">{outputs[i]}</CodeBlock>
           )}
diff --git a/src/components/usePathname.tsx b/src/components/usePathname.tsx
index 6c0fa3643..152d96bcf 100644
--- a/src/components/usePathname.tsx
+++ b/src/components/usePathname.tsx
@@ -1,6 +1,11 @@
 import { useLocation } from "@docusaurus/router";
 import config from "@generated/docusaurus.config";
 
+/**
+ * ファイルの絶対パスを表示
+ * @returns ファイルの絶対パス
+ */
+
 export default function usePathname() {
   const pathname = useLocation().pathname.slice(config.baseUrl.length - 1);
   return pathname;