Skip to content

Commit 32b5ccf

Browse files
na-trium-144na-trium-144
committed
Merge branch 'master' into https-ssh-info
2 parents 5c34f1e + 07bda80 commit 32b5ccf

File tree

119 files changed

+5115
-2239
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

119 files changed

+5115
-2239
lines changed

‎.nvmrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
18

docs/1-trial-session/01-get-started/index.md renamed to docs/1-trial-session/01-get-started/index.mdx

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,10 @@ Google Chrome は、[公式サイト](https://www.google.com/intl/ja_jp/chrome/)
1717

1818
<Tabs groupId="os">
1919
<TabItem value="mac" label="macOS">
20-
21-
<video src={installChromeOnMacVideo} controls />
22-
20+
<video src={installChromeOnMacVideo} controls />
2321
</TabItem>
2422
<TabItem value="win" label="Windows">
25-
26-
<video src={installChromeOnWindowsVideo} controls />
27-
23+
<video src={installChromeOnWindowsVideo} controls />
2824
</TabItem>
2925
</Tabs>
3026

@@ -36,14 +32,10 @@ Visual Studio Code は、[公式サイト](https://code.visualstudio.com)から
3632

3733
<Tabs groupId="os">
3834
<TabItem value="mac" label="macOS">
39-
40-
<video src={installVscodeOnMacVideo} controls />
41-
35+
<video src={installVscodeOnMacVideo} controls />
4236
</TabItem>
4337
<TabItem value="win" label="Windows">
44-
45-
<video src={installVscodeOnWindowsVideo} controls />
46-
38+
<video src={installVscodeOnWindowsVideo} controls />
4739
</TabItem>
4840
</Tabs>
4941

docs/1-trial-session/02-html/index.md renamed to docs/1-trial-session/02-html/index.mdx

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ 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" strong>HTML</Term> と CSS、そして JavaScript です。これらは互いに異なる役割をもっています。まずは最も基本となる <Term type="html">HTML</Term> から学んでいきましょう。
10+
Web 開発に必ず用いられる言語があります。<Term type="html">**HTML**</Term> と CSS、そして JavaScript です。これらは互いに異なる役割をもっています。まずは最も基本となる <Term type="html">HTML</Term> から学んでいきましょう。
1111

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

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

3737
<video src={openInBrowserVideo} controls />
3838

39-
:::info 拡張子
39+
:::info[拡張子]
4040

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

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

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

@@ -54,13 +54,15 @@ VS Code 上で作成したファイルは `index.html` でした。しかしな
5454

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

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

59-
<p><Term type="tag">タグ</Term>は、 <code>&lt;tag&gt;内容&lt;/tag&gt;</code> のように、<Term type="tag">タグ</Term>名の先頭にスラッシュを付けるか否かの区別により<Term strong type="startTag">開始タグ</Term>と<Term strong type="endTag">終了タグ</Term>に分かれ、内部にテキストや別のタグを挟み込むことができます。<Term type="startTag">開始タグ</Term>から<Term type="endTag">終了タグ</Term>までのまとまりを<Term strong type="element">要素</Term>といいます。</p>
59+
{/* 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>といいます。
6062

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

63-
<!-- prettier-ignore -->
65+
{/* prettier-ignore */}
6466
```html title="index.html"
6567
<!doctype html>
6668
<html lang="ja">
@@ -78,7 +80,7 @@ VS Code 上で作成したファイルは `index.html` でした。しかしな
7880

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

81-
:::tip ショートカットキー
83+
:::tip[ショートカットキー]
8284

8385
ショートカットキーがうまく押せませんか？ `command / Ctrl + S` はよく、「`command (macOS)` または `Ctrl (Windows)` キーと `S` キーを同時に押す」と言われますが、実は同時に押すと半分くらいの確率で失敗します。`command / Ctrl` キーを押した後、キーから指を離す前に `S` キーを押しましょう。
8486

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

9193
<video src={reloadBrowserVideo} autoPlay muted loop controls />
9294

93-
`<a href="https://www.google.com/">～</a>` は **`a` <Term type="element">要素</Term>** です。<Term type="startTag">開始タグ</Term>の中に `href="https://www.google.com/"` という部分があります。これが<Term strong 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 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>です。
9496

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

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

docs/1-trial-session/03-javascript/index.md renamed to docs/1-trial-session/03-javascript/index.mdx

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

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

77
## <Term type="javascript">JavaScript</Term>
88

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

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

@@ -41,7 +42,7 @@ document.write("Hello World!");
4142

4243
## <Term type="javascript">JavaScript</Term> が動く仕組み
4344

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

4647
```html title="index.html"
4748
<script src="./script.js"></script>
@@ -57,7 +58,10 @@ document.write("Hello World!");
5758

5859
## <Term type="javascript">JavaScript</Term> の基本文法
5960

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

6266
```javascript title="script.js"
6367
document.write("Hello World1");

docs/1-trial-session/04-expressions/index.md renamed to docs/1-trial-session/04-expressions/index.mdx

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,39 +10,47 @@ title: 値と式と演算子
1010
document.write("Hello World");
1111
```
1212

13-
`"Hello World"` のように `"`（ダブルクォーテーション）で囲まれた<Term strong type="javascriptValue">値</Term>を、<Term strong type="javascriptString">文字列</Term>と呼びます。
13+
`"Hello World"` のように `"`（ダブルクォーテーション）で囲まれた<Term type="javascriptValue">**値**</Term>を、<Term type="javascriptString">**文字列**</Term>と呼びます。
1414

15-
<Term type="javascriptString">文字列</Term>は<Term type="javascriptValue">値</Term>の一種です。<Term type="javascriptNumber">数値</Term>は<Term type="javascriptString">文字列</Term>と同じ<Term type="javascriptValue">値</Term>の一種ですが、プログラムの中に直接記述することができます。
15+
{/* prettier-ignore */}
16+
<Term type="javascriptString">文字列</Term>は<Term type="javascriptValue">値</Term>の一種です。
17+
<Term type="javascriptNumber">数値</Term>は<Term type="javascriptString">文字列</Term>と同じ<Term type="javascriptValue">値</Term>の一種ですが、プログラムの中に直接記述することができます。
1618

1719
![値の種類](./value-types.drawio.svg)
1820

1921
```javascript title="script.js"
2022
document.write(3);
2123
```
2224

23-
<p><Term strong type="javascriptOperator">演算子</Term>を用いると、<Term type="javascriptValue">値</Term>を用いて計算をすることができます。例えば <code>+</code>（加算<Term type="javascriptOperator">演算子</Term>）で、足し算の計算を行うことができます。</p>
25+
{/* prettier-ignore */}
26+
<Term type="javascriptOperator">**演算子**</Term>を用いると、<Term type="javascriptValue">値</Term>を用いて計算をすることができます。
27+
例えば `+`（加算<Term type="javascriptOperator">演算子</Term>）で、足し算の計算を行うことができます。
2428

2529
```javascript title="script.js"
2630
document.write(3 + 4);
2731
```
2832

2933
## <Term type="javascriptOperator">演算子</Term>の<Term type="javascriptOperatorPriority">優先順位</Term>
3034

31-
<p><Term type="javascriptOperator">演算子</Term>には、<Term type="javascriptOperatorPriority">優先順位</Term>が設定されています。</p>
35+
{/* prettier-ignore */}
36+
<Term type="javascriptOperator">演算子</Term>には、<Term type="javascriptOperatorPriority">優先順位</Term>が設定されています。
3237

3338
```javascript title="script.js"
3439
document.write(3 + 4 * 5);
3540
```
3641

3742
`*`（乗算<Term type="javascriptOperator">演算子</Term>）は `+` より<Term type="javascriptOperatorPriority">優先順位</Term>が高く設定されているため、上記のコードの実行結果は `23` となります。
3843

39-
このコードにおいて、`3 + 4 * 5` や、`4 * 5`、`4` を<Term strong type="javascriptExpression">式</Term>と呼びます。また、<Term type="javascriptExpression">式</Term>が計算され、その結果としての<Term type="javascriptValue">値</Term>が確定することを式が<Term strong type="javascriptEvaluation">評価</Term>されるといいます。
44+
このコードにおいて、`3 + 4 * 5` や、`4 * 5`、`4` を<Term type="javascriptExpression">**式**</Term>と呼びます。また、<Term type="javascriptExpression">式</Term>が計算され、その結果としての<Term type="javascriptValue">値</Term>が確定することを式が<Term type="javascriptEvaluation">**評価**</Term>されるといいます。
4045

4146
`3 + 4 * 5` の<Term type="javascriptEvaluation">評価</Term>は、先に `4 * 5` が<Term type="javascriptEvaluation">評価</Term>されて `20` になり、次に `3 + 20` が<Term type="javascriptEvaluation">評価</Term>されることにより、`23` という<Term type="javascriptValue">値</Term>となると考えることができます。
4247

4348
## いろいろな<Term type="javascriptOperator">演算子</Term>
4449

45-
<p><Term type="javascriptOperator">演算子</Term>が適用できるのは、何も<Term type="javascriptNumber">数値</Term>だけではありません。<Term type="javascriptString">文字列</Term>に適用できる<Term type="javascriptOperator">演算子</Term>もあります。先ほどの <code>+</code>（加算<Term type="javascriptOperator">演算子</Term>）は、<Term type="javascriptString">文字列</Term>同士で使用された場合は、<Term type="javascriptString">文字列</Term>結合<Term type="javascriptOperator">演算子</Term>となります。</p>
50+
{/* prettier-ignore */}
51+
<Term type="javascriptOperator">演算子</Term>が適用できるのは、何も<Term type="javascriptNumber">数値</Term>だけではありません。
52+
<Term type="javascriptString">文字列</Term>に適用できる<Term type="javascriptOperator">演算子</Term>もあります。
53+
先ほどの `+`（加算<Term type="javascriptOperator">演算子</Term>）は、<Term type="javascriptString">文字列</Term>同士で使用された場合は、<Term type="javascriptString">文字列</Term>結合<Term type="javascriptOperator">演算子</Term>となります。
4654

4755
```javascript title="script.js"
4856
document.write("Hello" + "World");

0 commit comments

Comments
 (0)