Skip to content

Commit 1d5a67a

Browse files
chvmvdchvmvd
committed
Merge branch 'master' into fix-broken-mdx
2 parents 3acb474 + fec2e0a commit 1d5a67a

File tree

31 files changed

+418
-287
lines changed

31 files changed

+418
-287
lines changed

‎docs/1-trial-session/02-html/index.mdx‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@ import openInBrowserVideo from "./open-in-browser.mp4";
77
import showFileExtensionsVideo from "./show-file-extensions.mp4";
88
import reloadBrowserVideo from "./reload-browser.mp4";
99

10-
Web 開発に必ず用いられる言語があります。<Term type="html">**HTML**</Term> と CSS、そして JavaScript です。これらは互いに異なる役割をもっています。まずは最も基本となる <Term type="html">HTML</Term> から学んでいきましょう。
10+
Web 開発に必ず用いられる言語があります。<Term>**HTML**</Term> と CSS、そして JavaScript です。これらは互いに異なる役割をもっています。まずは最も基本となる <Term>HTML</Term> から学んでいきましょう。
1111

1212
![Web開発で用いられる言語](./web-development-languages.drawio.svg)
1313

14-
## <Term type="html">HTML</Term> を書き始める
14+
## <Term>HTML</Term> を書き始める
1515

1616
VS Code の画面左端には、ファイル一覧が表示されています。新しいファイルを作成して、`index.html` と名付けましょう。ファイルの中身を次のようにした後、保存します。保存にはショートカットキー ( `command / Ctrl + S` ) を用いてください。
1717

@@ -30,7 +30,7 @@ VS Code の画面左端には、ファイル一覧が表示されています。
3030

3131
<video src={createFileVideo} controls />
3232

33-
## ブラウザで <Term type="html">HTML</Term> ファイルを開く
33+
## ブラウザで <Term>HTML</Term> ファイルを開く
3434

3535
前頁で作成したフォルダを開き、`index.html` が作成されていることを確認しましょう。このファイルをダブルクリックして開きます。`Hello World!` (`World`の部分だけ太字) が表示されましたか？
3636

@@ -40,25 +40,25 @@ VS Code の画面左端には、ファイル一覧が表示されています。
4040

4141
VS Code 上で作成したファイルは `index.html` でした。しかしながら、Windows でフォルダの中身を見ると `index` しか表示されません（Mac の場合は正しく表示されます）。なぜでしょうか？
4242

43-
ファイル名の `.` (ピリオド) 以降の部分は<Term type="fileExtension">**拡張子**</Term>と呼ばれ、ファイルの種類を識別するために用いられることが多いです。先ほど `index.html` という名前のファイルを作成したのは、<Term type="html">HTML</Term>ファイルであることを明示するためです。
43+
ファイル名の `.` (ピリオド) 以降の部分は<Term>**拡張子**</Term>と呼ばれ、ファイルの種類を識別するために用いられることが多いです。先ほど `index.html` という名前のファイルを作成したのは、<Term>HTML</Term>ファイルであることを明示するためです。
4444

4545
実は Windows では、拡張子は標準で表示されません。下の動画を参考に、拡張子を表示する設定に変更しておきましょう。
4646

4747
<video src={showFileExtensionsVideo} controls />
4848

4949
:::
5050

51-
## <Term type="html">HTML</Term> の構造
51+
## <Term>HTML</Term> の構造
5252

5353
それでは、先ほどのファイルの中身を見ていきましょう。
5454

5555
`<strong>World</strong>` の部分に注目してください。
5656

57-
<Term type="html">HTML</Term> ファイルは、文書に意味を持たせるために、<Term type="tag">**タグ**</Term>と呼ばれる構造を持つことができます。<Term type="tag">タグ</Term>は、`<tag>` のような、`<` と `>` で囲まれた英数字のまとまりです。
57+
<Term>HTML</Term> ファイルは、文書に意味を持たせるために、<Term>**タグ**</Term>と呼ばれる構造を持つことができます。<Term>タグ</Term>は、`<tag>` のような、`<` と `>` で囲まれた英数字のまとまりです。
5858

5959
{/* prettier-ignore */}
60-
<Term type="tag">タグ</Term>は、`<tag>内容</tag>` のように、<Term type="tag">タグ</Term>名の先頭にスラッシュを付けるか否かの区別により<Term type="startTag">**開始タグ**</Term>と<Term type="endTag">**終了タグ**</Term>に分かれ、内部にテキストや別のタグを挟み込むことができます。
61-
<Term type="startTag">開始タグ</Term>から<Term type="endTag">終了タグ</Term>までのまとまりを<Term type="element">**要素**</Term>といいます。
60+
<Term>タグ</Term>は、`<tag>内容</tag>` のように、<Term>タグ</Term>名の先頭にスラッシュを付けるか否かの区別により<Term>**開始タグ**</Term>と<Term>**終了タグ**</Term>に分かれ、内部にテキストや別のタグを挟み込むことができます。
61+
<Term>開始タグ</Term>から<Term>終了タグ</Term>までのまとまりを<Term>**要素**</Term>といいます。
6262

6363
`body` 要素の中身を書き換え、次のようにしてみましょう。
6464

@@ -76,7 +76,7 @@ VS Code 上で作成したファイルは `index.html` でした。しかしな
7676
</html>
7777
```
7878

79-
繰り返しになりますが、<Term type="html">HTML</Term> を編集したら、`command / Ctrl + S` キーを押してファイルを保存します。ファイル名の横に表示されている丸い記号が消えたら保存が完了しています。
79+
繰り返しになりますが、<Term>HTML</Term> を編集したら、`command / Ctrl + S` キーを押してファイルを保存します。ファイル名の横に表示されている丸い記号が消えたら保存が完了しています。
8080

8181
![ファイルを保存する](./save-file.png)
8282

@@ -92,33 +92,33 @@ VS Code 上で作成したファイルは `index.html` でした。しかしな
9292

9393
<video src={reloadBrowserVideo} autoPlay muted loop controls />
9494

95-
`<a href="https://www.google.com/">～</a>` は **`a` <Term type="element">要素</Term>** です。<Term type="startTag">開始タグ</Term>の中に `href="https://www.google.com/"` という部分があります。これが<Term type="attribute">**属性**</Term>です。<Term type="attribute">属性</Term>は、<Term type="startTag">開始タグ</Term> の中に `属性名="値"` のように記述され、<Term type="element">要素</Term>の特徴を表します。`a` <Term type="element">要素</Term>の **`href` <Term type="attribute">属性</Term>**は、ハイパーリンクのリンク先を表す<Term type="attribute">属性</Term>です。
95+
`<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>です。
9696

97-
これにより、ハイパーリンクが設定されます。この例では `a` <Term type="element">要素</Term>の中に `strong` <Term type="element">要素</Term>が含まれています。このように、HTML タグは<Term type="htmlNest">**ネスト**</Term>させることにより、効果を重ね掛けすることができます。
97+
これにより、ハイパーリンクが設定されます。この例では `a` <Term>要素</Term>の中に `strong` <Term>要素</Term>が含まれています。このように、HTML タグは<Term type="htmlNest">**ネスト**</Term>させることにより、効果を重ね掛けすることができます。
9898

9999
![ネストされた要素](./nested-elements.png)
100100

101-
## <Term type="html">HTML</Term> の文法
101+
## <Term>HTML</Term> の文法
102102

103-
それでは、作成した <Term type="html">HTML</Term> をもう一度見直してみましょう。
103+
それでは、作成した <Term>HTML</Term> をもう一度見直してみましょう。
104104

105-
すべての <Term type="html">HTML</Term> ファイルは、
105+
すべての <Term>HTML</Term> ファイルは、
106106

107107
```html title="index.html"
108108
<!doctype html>
109109
```
110110

111-
という、「このファイルは <Term type="html">HTML</Term> ファイルだ！」と宣言する定型句から始まります。
111+
という、「このファイルは <Term>HTML</Term> ファイルだ！」と宣言する定型句から始まります。
112112

113-
続けて記述されるのは `<html lang="ja">` 、つまり **`html` <Term type="element">要素</Term>** です。<Term type="html">HTML</Term> は、この `html` <Term type="element">要素</Term>を根とした木構造になっています。このため、`html` <Term type="tag">タグ</Term>の閉じ<Term type="tag">タグ</Term>はファイルの末尾に現れます。
113+
続けて記述されるのは `<html lang="ja">` 、つまり **`html` <Term>要素</Term>** です。<Term>HTML</Term> は、この `html` <Term>要素</Term>を根とした木構造になっています。このため、`html` <Term>タグ</Term>の閉じ<Term>タグ</Term>はファイルの末尾に現れます。
114114

115-
`html` <Term type="element">要素</Term>の直属の子<Term type="element">要素</Term>は、**`head` <Term type="element">要素</Term>**と**`body` <Term type="element">要素</Term>**の二つだけです。このうち、後者 (`body` <Term type="element">要素</Term>) が実際にブラウザの表示領域上に表示されることになります。
115+
`html` <Term>要素</Term>の直属の子<Term>要素</Term>は、**`head` <Term>要素</Term>**と**`body` <Term>要素</Term>**の二つだけです。このうち、後者 (`body` <Term>要素</Term>) が実際にブラウザの表示領域上に表示されることになります。
116116

117117
![HTMLの構造](./html-structure.drawio.svg)
118118

119119
:::info
120120

121-
ブラウザの画面内に表示される情報を表すのは `body` <Term type="element">要素</Term>中だけなので、<Term type="html">HTML</Term> ファイルの編集は通常 `body` <Term type="element">要素</Term>内部が中心となります。このドキュメントでも、これ以降掲載する <Term type="html">HTML</Term> のサンプルコードは `body` <Term type="element">要素</Term>内部のみを記述することとします。
121+
ブラウザの画面内に表示される情報を表すのは `body` <Term>要素</Term>中だけなので、<Term>HTML</Term> ファイルの編集は通常 `body` <Term>要素</Term>内部が中心となります。このドキュメントでも、これ以降掲載する <Term>HTML</Term> のサンプルコードは `body` <Term>要素</Term>内部のみを記述することとします。
122122

123123
:::
124124

‎docs/1-trial-session/03-javascript/index.mdx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,16 @@ title: JavaScript ことはじめ
44

55
import helloWorldByJavascriptVideo from "./hello-world-by-javascript.mp4";
66

7-
## <Term type="javascript">JavaScript</Term>
7+
## <Term>JavaScript</Term>
88

99
{/* prettier-ignore */}
10-
<Term type="html">HTML</Term> がウェブサイトの構造を表す言語だとすれば、<Term type="javascript">**JavaScript**</Term> はウェブサイトに振る舞いを与える言語といえます。ブラウザさえあれば環境に関係なく同じように実行可能な、強力なプログラミング言語です。
10+
<Term>HTML</Term> がウェブサイトの構造を表す言語だとすれば、<Term>**JavaScript**</Term> はウェブサイトに振る舞いを与える言語といえます。ブラウザさえあれば環境に関係なく同じように実行可能な、強力なプログラミング言語です。
1111

1212
![Web開発で用いられる言語](../02-html/web-development-languages.drawio.svg)
1313

14-
## <Term type="javascript">JavaScript</Term> で Hello World!
14+
## <Term>JavaScript</Term> で Hello World!
1515

16-
プログラミングの世界では、まず画面に `Hello World!` と表示させることが慣例になっています。<Term type="javascript">JavaScript</Term> を用いて画面に `Hello World!` を表示してみましょう。
16+
プログラミングの世界では、まず画面に `Hello World!` と表示させることが慣例になっています。<Term>JavaScript</Term> を用いて画面に `Hello World!` を表示してみましょう。
1717

1818
まずは、`index.html` を次のように書き換えます。
1919

@@ -40,27 +40,27 @@ document.write("Hello World!");
4040

4141
<video src={helloWorldByJavascriptVideo} controls />
4242

43-
## <Term type="javascript">JavaScript</Term> が動く仕組み
43+
## <Term>JavaScript</Term> が動く仕組み
4444

45-
<Term type="html">HTML</Term> ファイルの中に、以下のような記述があります。
45+
<Term>HTML</Term> ファイルの中に、以下のような記述があります。
4646

4747
```html title="index.html"
4848
<script src="./script.js"></script>
4949
```
5050

51-
まず、この記述によって、 `script.js` ファイルがブラウザによって読み込まれます。この `script.js` に記述されているのが <Term type="javascript">JavaScript</Term> です。
51+
まず、この記述によって、 `script.js` ファイルがブラウザによって読み込まれます。この `script.js` に記述されているのが <Term>JavaScript</Term> です。
5252

5353
:::info
5454

55-
この講座の中では、`script` <Term type="element">要素</Term>を常に **`body` <Term type="element">要素</Term>の末尾**に記述するようにします。これは、<Term type="javascript">JavaScript</Term> が読み込まれるタイミングで他のすべての <Term type="element">HTML 要素</Term>がすでに表示されていることを保証するためです。
55+
この講座の中では、`script` <Term>要素</Term>を常に **`body` <Term>要素</Term>の末尾**に記述するようにします。これは、<Term>JavaScript</Term> が読み込まれるタイミングで他のすべての <Term>HTML 要素</Term>がすでに表示されていることを保証するためです。
5656

5757
:::
5858

59-
## <Term type="javascript">JavaScript</Term> の基本文法
59+
## <Term>JavaScript</Term> の基本文法
6060

6161
{/* prettier-ignore */}
62-
<Term type="javascript">JavaScript</Term> のプログラムで、セミコロンで区切られた部分を<Term type="javascriptStatement">文</Term>と呼びます。
63-
<Term type="javascript">JavaScript</Term> の実行環境は、プログラム中に含まれる<Term type="javascriptStatement">文</Term>を上から下に向けて順番に実行していきます。
62+
<Term>JavaScript</Term> のプログラムで、セミコロンで区切られた部分を<Term>文</Term>と呼びます。
63+
<Term>JavaScript</Term> の実行環境は、プログラム中に含まれる<Term>文</Term>を上から下に向けて順番に実行していきます。
6464
`document.write` はブラウザの画面に出力するための命令です。
6565

6666
```javascript title="script.js"

0 commit comments

Comments
 (0)