インラインコードの前後の半角スペースを削除

ut-code · Jul 26, 2024 · 51436d5 · 51436d5
1 parent d6e9547
commit 51436d5
Show file tree

Hide file tree

Showing 40 changed files with 716 additions and 716 deletions.
diff --git a/docs/1-trial-session/01-get-started/index.mdx b/docs/1-trial-session/01-get-started/index.mdx
@@ -43,9 +43,9 @@ Visual Studio Codeは、[公式サイト](https://code.visualstudio.com)から
 
 ## プロジェクトを格納するフォルダを作成する
 
-これから皆さんはたくさんのプログラムを書いていくことになります。プログラムは他のファイルと扱い方がかなり異なるので、専用のフォルダを作っておきましょう。ホームフォルダ (macOS) /ユーザーフォルダ (Windows) の中に `projects` という名前のフォルダを作り、その中にプロジェクトごとのフォルダを作っていくと良いです。ホームフォルダ (macOS) /ユーザーフォルダ (Windows) の場所については次の動画をご確認ください。
+これから皆さんはたくさんのプログラムを書いていくことになります。プログラムは他のファイルと扱い方がかなり異なるので、専用のフォルダを作っておきましょう。ホームフォルダ (macOS) /ユーザーフォルダ (Windows) の中に`projects`という名前のフォルダを作り、その中にプロジェクトごとのフォルダを作っていくと良いです。ホームフォルダ (macOS) /ユーザーフォルダ (Windows) の場所については次の動画をご確認ください。
 
-次の例では、`hello-world` の名前でプロジェクト用のフォルダを作成しています。
+次の例では、`hello-world`の名前でプロジェクト用のフォルダを作成しています。
 
 <Tabs groupId="os">
   <TabItem value="mac" label="macOS">
@@ -58,13 +58,13 @@ Visual Studio Codeは、[公式サイト](https://code.visualstudio.com)から
 
 :::info
 
-これから作成するプログラムは、さきほど作成したホームフォルダ (macOS) /ユーザーフォルダ (Windows) の中の `projects` フォルダの中に保存するようにしてください。これは、ドキュメントフォルダなどのフォルダはクラウドストレージサービスによって自動的に同期されることがあり、Visual Studio Codeなどの開発ツールが期待通りに動作しなくなってしまうことがあるからです。
+これから作成するプログラムは、さきほど作成したホームフォルダ (macOS) /ユーザーフォルダ (Windows) の中の`projects`フォルダの中に保存するようにしてください。これは、ドキュメントフォルダなどのフォルダはクラウドストレージサービスによって自動的に同期されることがあり、Visual Studio Codeなどの開発ツールが期待通りに動作しなくなってしまうことがあるからです。
 
 :::
 
 ## Visual Studio Codeでプロジェクトフォルダを開く
 
-`File` メニューから `Open Folder...` をクリックして、先ほど作成したフォルダをVS Codeで開きます。
+`File`メニューから`Open Folder...`をクリックして、先ほど作成したフォルダをVS Codeで開きます。
 
 <Tabs groupId="os">
   <TabItem value="mac" label="macOS">
@@ -77,6 +77,6 @@ Visual Studio Codeは、[公式サイト](https://code.visualstudio.com)から
 
 :::info
 
-最初にフォルダを開いたとき、`Do you trust the authors of the files in this folder?` と聞かれるのは、インターネットからダウンロードした悪意のあるフォルダをVS Codeで開いたとき、VS Codeによって勝手に実行されてしまうのを防ぐためです。自分で作成したフォルダの場合は問題ありません。
+最初にフォルダを開いたとき、`Do you trust the authors of the files in this folder?`と聞かれるのは、インターネットからダウンロードした悪意のあるフォルダをVS Codeで開いたとき、VS Codeによって勝手に実行されてしまうのを防ぐためです。自分で作成したフォルダの場合は問題ありません。
 
 :::
diff --git a/docs/1-trial-session/02-html/index.mdx b/docs/1-trial-session/02-html/index.mdx
@@ -13,7 +13,7 @@ Web開発に必ず用いられる言語があります。<Term>**HTML**</Term>
 
 ## <Term>HTML</Term>を書き始める
 
-VS Codeの画面左端には、ファイル一覧が表示されています。新しいファイルを作成して、`index.html` と名付けましょう。ファイルの中身を次のようにした後、保存します。保存にはショートカットキー (<kbd>command</kbd> + <kbd>S</kbd> (macOS) / <kbd>Ctrl</kbd> + <kbd>S</kbd> (Windows) ) を用いてください。
+VS Codeの画面左端には、ファイル一覧が表示されています。新しいファイルを作成して、`index.html`と名付けましょう。ファイルの中身を次のようにした後、保存します。保存にはショートカットキー (<kbd>command</kbd> + <kbd>S</kbd> (macOS) / <kbd>Ctrl</kbd> + <kbd>S</kbd> (Windows) ) を用いてください。
 
 ```html title="index.html"
 <!doctype html>
@@ -32,15 +32,15 @@ VS Codeの画面左端には、ファイル一覧が表示されています。
 
 ## ブラウザで<Term>HTML</Term>ファイルを開く
 
-前頁で作成したフォルダを開き、`index.html` が作成されていることを確認しましょう。このファイルをダブルクリックして開きます。`Hello World!` (`World` の部分だけ太字) が表示されましたか？
+前頁で作成したフォルダを開き、`index.html`が作成されていることを確認しましょう。このファイルをダブルクリックして開きます。`Hello World!` (`World`の部分だけ太字) が表示されましたか？
 
 <video src={openInBrowserVideo} controls />
 
 :::info[拡張子]
 
-VS Code上で作成したファイルは `index.html` でした。しかしながら、Windowsでフォルダの中身を見ると `index` しか表示されません (macOSの場合は正しく表示されます)。なぜでしょうか？
+VS Code上で作成したファイルは`index.html`でした。しかしながら、Windowsでフォルダの中身を見ると`index`しか表示されません (macOSの場合は正しく表示されます)。なぜでしょうか？
 
-ファイル名の `.` (ピリオド) 以降の部分は<Term>**拡張子**</Term>と呼ばれ、ファイルの種類を識別するために用いられることが多いです。先ほど `index.html` という名前のファイルを作成したのは、<Term>HTML</Term>ファイルであることを明示するためです。
+ファイル名の`.` (ピリオド) 以降の部分は<Term>**拡張子**</Term>と呼ばれ、ファイルの種類を識別するために用いられることが多いです。先ほど`index.html`という名前のファイルを作成したのは、<Term>HTML</Term>ファイルであることを明示するためです。
 
 実はWindowsでは、拡張子は標準で表示されません。下の動画を参考に、拡張子を表示する設定に変更しておきましょう。
 
@@ -52,15 +52,15 @@ VS Code上で作成したファイルは `index.html` でした。しかしな
 
 それでは、先ほどのファイルの中身を見ていきましょう。
 
-`<strong>World</strong>` の部分に注目してください。
+`<strong>World</strong>`の部分に注目してください。
 
-<Term>HTML</Term>ファイルは、文書に意味を持たせるために、<Term>**タグ**</Term>と呼ばれる構造を持つことができます。<Term>タグ</Term>は、`<tag>` のような、`<` と `>` で囲まれた英数字のまとまりです。
+<Term>HTML</Term>ファイルは、文書に意味を持たせるために、<Term>**タグ**</Term>と呼ばれる構造を持つことができます。<Term>タグ</Term>は、`<tag>`のような、`<`と`>`で囲まれた英数字のまとまりです。
 
 {/* prettier-ignore */}
-<Term>タグ</Term>は、`<tag>内容</tag>` のように、<Term>タグ</Term>名の先頭にスラッシュを付けるか否かの区別により<Term>**開始タグ**</Term>と<Term>**終了タグ**</Term>に分かれ、内部にテキストや別のタグを挟み込むことができます。
+<Term>タグ</Term>は、`<tag>内容</tag>`のように、<Term>タグ</Term>名の先頭にスラッシュを付けるか否かの区別により<Term>**開始タグ**</Term>と<Term>**終了タグ**</Term>に分かれ、内部にテキストや別のタグを挟み込むことができます。
 <Term>開始タグ</Term>から<Term>終了タグ</Term>までのまとまりを<Term>**要素**</Term>といいます。
 
-`body` 要素の中身を書き換え、次のようにしてみましょう。
+`body`要素の中身を書き換え、次のようにしてみましょう。
 
 {/* prettier-ignore */}
 ```html title="index.html"
@@ -92,9 +92,9 @@ VS Code上で作成したファイルは `index.html` でした。しかしな
 
 <video src={reloadBrowserVideo} muted controls />
 
-`<a href="https://www.google.com/">～</a>` は **`a` <Term>要素</Term>** です。<Term>開始タグ</Term>の中に `href="https://www.google.com/"` という部分があります。これが<Term>**属性**</Term>です。<Term>属性</Term>は、<Term>開始タグ</Term> の中に `属性名="値"` のように記述され、<Term>要素</Term>の特徴を表します。`a` <Term>要素</Term>の **`href` <Term>属性</Term>** は、ハイパーリンクのリンク先を表す<Term>属性</Term>です。
+`<a href="https://www.google.com/">～</a>`は **`a`<Term>要素</Term>** です。<Term>開始タグ</Term>の中に`href="https://www.google.com/"`という部分があります。これが<Term>**属性**</Term>です。<Term>属性</Term>は、<Term>開始タグ</Term> の中に`属性名="値"`のように記述され、<Term>要素</Term>の特徴を表します。`a`<Term>要素</Term>の **`href`<Term>属性</Term>** は、ハイパーリンクのリンク先を表す<Term>属性</Term>です。
 
-これにより、ハイパーリンクが設定されます。この例では `a` <Term>要素</Term>の中に `strong` <Term>要素</Term>が含まれています。このように、HTMLタグは<Term type="htmlNest">**ネスト**</Term>させることにより、効果を重ね掛けすることができます。
+これにより、ハイパーリンクが設定されます。この例では`a`<Term>要素</Term>の中に`strong`<Term>要素</Term>が含まれています。このように、HTMLタグは<Term type="htmlNest">**ネスト**</Term>させることにより、効果を重ね掛けすることができます。
 
 ![ネストされた要素](./nested-elements.png)
 
@@ -110,15 +110,15 @@ VS Code上で作成したファイルは `index.html` でした。しかしな
 
 という、「このファイルは<Term>HTML</Term>ファイルだ！」と宣言する定型句から始まります。
 
-続けて記述されるのは `<html lang="ja">`、つまり **`html` <Term>要素</Term>** です。<Term>HTML</Term>は、この `html` <Term>要素</Term>を根とした木構造になっています。このため、`html` <Term>タグ</Term>の閉じ<Term>タグ</Term>はファイルの末尾に現れます。
+続けて記述されるのは`<html lang="ja">`、つまり **`html`<Term>要素</Term>** です。<Term>HTML</Term>は、この`html`<Term>要素</Term>を根とした木構造になっています。このため、`html`<Term>タグ</Term>の閉じ<Term>タグ</Term>はファイルの末尾に現れます。
 
-`html` <Term>要素</Term>の直属の子<Term>要素</Term>は、 **`head` <Term>要素</Term>** と **`body` <Term>要素</Term>** の二つだけです。このうち、後者 (`body` <Term>要素</Term>) が実際にブラウザの表示領域上に表示されることになります。
+`html`<Term>要素</Term>の直属の子<Term>要素</Term>は、 **`head`<Term>要素</Term>** と **`body`<Term>要素</Term>** の二つだけです。このうち、後者 (`body`<Term>要素</Term>) が実際にブラウザの表示領域上に表示されることになります。
 
 ![HTMLの構造](./html-structure.drawio.svg)
 
 :::info
 
-ブラウザの画面内に表示される情報を表すのは `body` <Term>要素</Term>中だけなので、<Term>HTML</Term>ファイルの編集は通常 `body` <Term>要素</Term>内部が中心となります。このドキュメントでも、これ以降掲載する<Term>HTML</Term>のサンプルコードは `body` <Term>要素</Term>内部のみを記述することとします。
+ブラウザの画面内に表示される情報を表すのは `body`<Term>要素</Term>中だけなので、<Term>HTML</Term>ファイルの編集は通常 `body`<Term>要素</Term>内部が中心となります。このドキュメントでも、これ以降掲載する<Term>HTML</Term>のサンプルコードは `body`<Term>要素</Term>内部のみを記述することとします。
 
 :::
 
@@ -132,8 +132,8 @@ VS Code上で作成したファイルは `index.html` でした。しかしな
 
 :::info[ヒント]
 
-- 「遠足の持ち物」という見出しがあります。`h1` タグについて調べてみてください。
-- 箇条書きを表現するには、単に先頭に「・」と書くのではなく箇条書きを表すタグを用います。`ul` タグと `li` タグについて調べてみてください。
+- 「遠足の持ち物」という見出しがあります。`h1`タグについて調べてみてください。
+- 箇条書きを表現するには、単に先頭に「・」と書くのではなく箇条書きを表すタグを用います。`ul`タグと`li`タグについて調べてみてください。
 
 :::
 
@@ -170,9 +170,9 @@ VS Code上で作成したファイルは `index.html` でした。しかしな
 
 :::info[ヒント]
 
-- `ID` や `パスワード` といった文字が表形式に並んでいます。`table` タグで実現できます。
-- テキストボックスは `input` タグで作成できます。
-- 最後の箇条書きには `ul` タグや `li` タグを使用しています。
+- `ID`や`パスワード`といった文字が表形式に並んでいます。`table`タグで実現できます。
+- テキストボックスは`input`タグで作成できます。
+- 最後の箇条書きには`ul`タグや`li`タグを使用しています。
 
 :::
 

diff --git a/docs/1-trial-session/03-javascript/index.mdx b/docs/1-trial-session/03-javascript/index.mdx
@@ -13,9 +13,9 @@ import helloWorldByJavascriptVideo from "./hello-world-by-javascript.mp4";
 
 ## <Term>JavaScript</Term>でHello World!
 
-プログラミングの世界では、まず画面に `Hello World!` と表示させることが慣例になっています。<Term>JavaScript</Term>を用いて画面に `Hello World!` を表示してみましょう。
+プログラミングの世界では、まず画面に`Hello World!`と表示させることが慣例になっています。<Term>JavaScript</Term>を用いて画面に`Hello World!`を表示してみましょう。
 
-まずは、`index.html` を次のように書き換えます。
+まずは、`index.html`を次のように書き換えます。
 
 ```html title="index.html"
 <!doctype html>
@@ -30,13 +30,13 @@ import helloWorldByJavascriptVideo from "./hello-world-by-javascript.mp4";
 </html>
 ```
 
-続いて、`script.js` を作成し、内容として次の通りに保存します。
+続いて、`script.js`を作成し、内容として次の通りに保存します。
 
 ```javascript title="script.js"
 document.write("Hello World!");
 ```
 
-**`index.html`** をダブルクリックして開いてください。`Hello World!` と表示されましたか？開くのは、`script.js` ではなく `index.html` なので、気をつけてください。
+**`index.html`** をダブルクリックして開いてください。`Hello World!`と表示されましたか？開くのは、`script.js`ではなく`index.html`なので、気をつけてください。
 
 <video src={helloWorldByJavascriptVideo} controls />
 
@@ -48,11 +48,11 @@ document.write("Hello World!");
 <script src="./script.js"></script>
 ```
 
-まず、この記述によって、`script.js` ファイルがブラウザによって読み込まれます。この `script.js` に記述されているのが<Term>JavaScript</Term>です。
+まず、この記述によって、`script.js`ファイルがブラウザによって読み込まれます。この`script.js`に記述されているのが<Term>JavaScript</Term>です。
 
 :::info
 
-この講座の中では、`script` <Term>要素</Term>を常に **`body` <Term>要素</Term>の末尾**に記述するようにします。これは、<Term>JavaScript</Term>が読み込まれるタイミングで他のすべての<Term>HTML要素</Term>がすでに表示されていることを保証するためです。
+この講座の中では、`script`<Term>要素</Term>を常に **`body`<Term>要素</Term>の末尾** に記述するようにします。これは、<Term>JavaScript</Term>が読み込まれるタイミングで他のすべての<Term>HTML要素</Term>がすでに表示されていることを保証するためです。
 
 :::
 
@@ -61,7 +61,7 @@ document.write("Hello World!");
 {/* prettier-ignore */}
 <Term>JavaScript</Term>のプログラムで、セミコロンで区切られた部分を<Term>文</Term>と呼びます。
 <Term>JavaScript</Term>の実行環境は、プログラム中に含まれる<Term>文</Term>を上から下に向けて順番に実行していきます。
-`document.write` はブラウザの画面に出力するための命令です。
+`document.write`はブラウザの画面に出力するための命令です。
 
 ```javascript title="script.js"
 document.write("Hello World1");
@@ -71,13 +71,13 @@ document.write("Hello World3");
 
 :::tip
 
-改行が表示されず困っていますか？`document.write` で出力したテキストは、HTMLとして解釈されます。`br` 要素や `p` 要素を使いましょう。
+改行が表示されず困っていますか？`document.write`で出力したテキストは、HTMLとして解釈されます。`br`要素や`p`要素を使いましょう。
 
 :::
 
 ## コメント
 
-`//` から行末までの部分や、`/*` から `*/` で囲まれた部分は**コメント**とみなされ、プログラムの実行に影響を与えません。この講座内でもプログラムの意味を説明するのに利用していきます。
+`//`から行末までの部分や、`/*`から`*/`で囲まれた部分は**コメント**とみなされ、プログラムの実行に影響を与えません。この講座内でもプログラムの意味を説明するのに利用していきます。
 
 ```javascript title="script.js"
 // この部分はコメントです