Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions docs/1-trial-session/02-html/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import openInBrowserVideo from "./open-in-browser.mp4";
import showFileExtensionsVideo from "./show-file-extensions.mp4";
import reloadBrowserVideo from "./reload-browser.mp4";

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

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

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

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

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

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

Expand All @@ -56,8 +56,8 @@ VS Code 上で作成したファイルは `index.html` でした。しかしな

<p>
<Term type="html">HTML</Term> ファイルは、文書に意味を持たせるために、
<Term strong type="tag">
タグ
<Term type="tag">
<strong>タグ</strong>
</Term>
と呼ばれる構造を持つことができます。<Term type="tag">タグ</Term>は、
<code>&lt;tag&gt;</code> のような、<code>&lt;</code>と<code>&gt;</code>
Expand All @@ -68,17 +68,17 @@ VS Code 上で作成したファイルは `index.html` でした。しかしな
<Term type="tag">タグ</Term>は、 <code>&lt;tag&gt;内容&lt;/tag&gt;</code>{" "}
のように、<Term type="tag">タグ</Term>
名の先頭にスラッシュを付けるか否かの区別により
<Term strong type="startTag">
開始タグ
<Term type="startTag">
<strong>開始タグ</strong>
</Term>
と<Term strong type="endTag">
終了タグ
と<Term type="endTag">
<strong>終了タグ</strong>
</Term>
に分かれ、内部にテキストや別のタグを挟み込むことができます。
<Term type="startTag">開始タグ</Term>から<Term type="endTag">終了タグ</Term>
までのまとまりを
<Term strong type="element">
要素
<Term type="element">
<strong>要素</strong>
</Term>
といいます。
</p>
Expand Down Expand Up @@ -115,9 +115,9 @@ VS Code 上で作成したファイルは `index.html` でした。しかしな

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

`<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>です。
`<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>です。

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

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

Expand Down
4 changes: 2 additions & 2 deletions docs/1-trial-session/03-javascript/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ import helloWorldByJavascriptVideo from "./hello-world-by-javascript.mp4";

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

Expand Down
8 changes: 4 additions & 4 deletions docs/1-trial-session/04-expressions/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ title: 値と式と演算子
document.write("Hello World");
```

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

<Term type="javascriptString">文字列</Term>は
<Term type="javascriptValue">値</Term>の一種です。
Expand All @@ -27,8 +27,8 @@ document.write(3);
```

<p>
<Term strong type="javascriptOperator">
演算子
<Term type="javascriptOperator">
<strong>演算子</strong>
</Term>
を用いると、<Term type="javascriptValue">値</Term>
を用いて計算をすることができます。例えば <code>+</code>(加算
Expand All @@ -53,7 +53,7 @@ document.write(3 + 4 * 5);

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

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

`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>となると考えることができます。

Expand Down
11 changes: 4 additions & 7 deletions docs/1-trial-session/05-variables/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,8 @@ title: 変数

<p>
<Term type="javascriptVariable">変数</Term>を使用するには、まず
<Term type="javascriptVariable">変数</Term>を<Term
strong
type="javascriptDeclaration"
>
宣言
<Term type="javascriptVariable">変数</Term>を<Term type="javascriptDeclaration">
<strong>宣言</strong>
</Term>
する必要があります。
</p>
Expand All @@ -31,7 +28,7 @@ let myGreatName = "Becky Jones";
document.write(myGreatName);
```

`let` は、<Term type="javascriptVariable">変数</Term>を<Term type="javascriptDeclaration">宣言</Term>するためのキーワードです。1 行目では、`myGreatName` という名前の<Term type="javascriptVariable">変数</Term>を<Term type="javascriptDeclaration">宣言</Term>し、そこに文字列 `"Becky Jones"` を<Term strong type="javascriptAssignment">代入</Term>しています。`=` は<Term type="javascriptAssignment">代入</Term>を表し、左側に指定した<Term type="javascriptVariable">変数</Term>に対し、右側に指定された<Term type="javascriptValue">値</Term>を<Term type="javascriptAssignment">代入</Term>します。
`let` は、<Term type="javascriptVariable">変数</Term>を<Term type="javascriptDeclaration">宣言</Term>するためのキーワードです。1 行目では、`myGreatName` という名前の<Term type="javascriptVariable">変数</Term>を<Term type="javascriptDeclaration">宣言</Term>し、そこに文字列 `"Becky Jones"` を<Term type="javascriptAssignment">**代入**</Term>しています。`=` は<Term type="javascriptAssignment">代入</Term>を表し、左側に指定した<Term type="javascriptVariable">変数</Term>に対し、右側に指定された<Term type="javascriptValue">値</Term>を<Term type="javascriptAssignment">代入</Term>します。

2 行目では、<Term type="javascriptVariable">変数</Term> `myGreatName` が<Term type="javascriptEvaluation">評価</Term>され、<Term type="javascriptAssignment">代入</Term>されていた<Term type="javascriptString">文字列</Term><Term type="javascriptValue">値</Term> `"Becky Jones"` が画面に表示されます。

Expand All @@ -50,7 +47,7 @@ document.write(myGreatName);

ここまでの例では、`my great name` というフレーズを、`myGreatName` のように記述しています。

このように、複数の単語にわたるフレーズを、2 語目以降の先頭の文字を大文字にして結合する命名規則を、<Term strong type="camelCase">キャメルケース</Term>と呼びます。
このように、複数の単語にわたるフレーズを、2 語目以降の先頭の文字を大文字にして結合する命名規則を、<Term type="camelCase">**キャメルケース**</Term>と呼びます。

:::info

Expand Down
4 changes: 2 additions & 2 deletions docs/1-trial-session/06-boolean/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ title: 論理値と論理演算子
<Term type="javascriptString">文字列</Term>と
<Term type="javascriptNumber">数値</Term>を扱いました。JavaScript
ではこの他に、
<Term strong type="javascriptBoolean">
論理値
<Term type="javascriptBoolean">
<strong>論理値</strong>
</Term> と呼ばれる、「正しいか、正しくないか」を表すための
<Term type="javascriptValue">値</Term>が存在します。
</p>
Expand Down
2 changes: 1 addition & 1 deletion docs/1-trial-session/07-if-statement/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: 条件分岐

## if 文

**if 文**は、<Term type="javascript">JavaScript</Term> の<Term strong type="javascriptControlFlow">制御構造</Term>で、特定の条件下のみで実行されるプログラムを記述することができます。
**if 文**は、<Term type="javascript">JavaScript</Term> の<Term type="javascriptControlFlow">**制御構造**</Term>で、特定の条件下のみで実行されるプログラムを記述することができます。

## 基本構造

Expand Down
25 changes: 11 additions & 14 deletions docs/1-trial-session/09-functions/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import returnValueVideo from "./return-value.mp4";

## 処理の共通化

数学における関数は、数と数の関係のようなものですが、<Term type="javascript">JavaScript</Term> をはじめとしたプログラミング言語の文脈における<Term strong type="javascriptFunction">関数</Term>は、基本的には<Term type="javascriptStatement">文</Term>のまとまりに名前を付けたものです。
数学における関数は、数と数の関係のようなものですが、<Term type="javascript">JavaScript</Term> をはじめとしたプログラミング言語の文脈における<Term type="javascriptFunction">**関数**</Term>は、基本的には<Term type="javascriptStatement">文</Term>のまとまりに名前を付けたものです。

```javascript
// 関数を定義しておけば
Expand All @@ -30,14 +30,14 @@ greet();

このプログラムでは、 `greet` <Term type="javascriptFunction">関数</Term>が 2 回呼び出されているので、ブラウザに `Hello World!` が 2 つ表示されます。

## <Term strong type="javascriptParameter">引数</Term>
## <Term type="javascriptParameter">**引数**</Term>

<p>
<Term type="javascriptFunction">関数</Term>
の振る舞いを呼び出し時に変更するため、
<Term type="javascriptFunction">関数</Term>に
<Term strong type="javascriptParameter">
引数
<Term type="javascriptParameter">
<strong>引数</strong>
</Term>
を与えることができます。<Term type="javascriptParameter">引数</Term>には任意の
<Term type="javascriptValue">値</Term>が指定できます。
Expand Down Expand Up @@ -79,17 +79,17 @@ greet("morning", "佐藤");
<Term type="javascriptExpression">式</Term>の<Term type="javascriptEvaluation">
評価
</Term>結果が確定します。この値を
<Term strong type="javascriptReturnValue">
戻り値
<Term type="javascriptReturnValue">
<strong>戻り値</strong>
</Term>
と呼びます。ある<Term type="javascriptValue">値</Term>を<Term type="javascriptReturnValue">
戻り値
</Term>として設定して
<Term type="javascriptFunction">関数</Term>の実行を終了することを、
<Term type="javascriptFunction">関数</Term>がその
<Term type="javascriptValue">値</Term>を
<Term strong type="javascriptReturn">
返す
<Term type="javascriptReturn">
<strong>返す</strong>
</Term>
と表現します。
</p>
Expand Down Expand Up @@ -154,11 +154,8 @@ document.write(multiply(3, 4));
<Term type="javascriptVariable">変数</Term>は、
<Term type="javascriptFunction">関数</Term>内でのみ有効です。
<Term type="javascriptVariable">変数</Term>が有効な範囲のことを、その
<Term type="javascriptVariable">変数</Term>の<Term
type="javascriptScope"
strong
>
スコープ
<Term type="javascriptVariable">変数</Term>の<Term type="javascriptScope">
<strong>スコープ</strong>
</Term>
と呼んでいます。
</p>
Expand All @@ -184,7 +181,7 @@ greet();

この例における、`greet` <Term type="javascriptFunction">関数</Term>は、呼び出されるたびに `guestCount` に 1 を加えています。

:::caution <Term type="javascriptVariable">変数</Term>の<Term type="javascriptScope" strong>スコープ</Term>
:::caution <Term type="javascriptVariable">変数</Term>の<Term type="javascriptScope">**スコープ**</Term>

<p>
<Term type="javascriptScope">スコープ</Term>が終わった
Expand Down
8 changes: 4 additions & 4 deletions docs/1-trial-session/11-object/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: オブジェクト

## <Term type="javascriptObject">オブジェクト</Term>

JavaScript で扱うことのできる<Term type="javascriptValue">値</Term>の種類として、これまで<Term type="javascriptNumber">数値</Term>、<Term type="javascriptString">文字列</Term>、<Term type="javascriptBoolean">論理値</Term>を扱ってきました。<Term strong type="javascriptObject">オブジェクト</Term>もまた、<Term type="javascript">JavaScript</Term> の<Term type="javascriptValue">値</Term>ですが、今まで扱ってきた<Term type="javascriptValue">値</Term>とは少し性質が異なります。
JavaScript で扱うことのできる<Term type="javascriptValue">値</Term>の種類として、これまで<Term type="javascriptNumber">数値</Term>、<Term type="javascriptString">文字列</Term>、<Term type="javascriptBoolean">論理値</Term>を扱ってきました。<Term type="javascriptObject">**オブジェクト**</Term>もまた、<Term type="javascript">JavaScript</Term> の<Term type="javascriptValue">値</Term>ですが、今まで扱ってきた<Term type="javascriptValue">値</Term>とは少し性質が異なります。

<p>
<Term type="javascriptObject">オブジェクト</Term>
Expand All @@ -17,8 +17,8 @@ JavaScript で扱うことのできる<Term type="javascriptValue">値</Term>の

<p>
<Term type="javascriptObject">オブジェクト</Term>は、複数の
<Term strong type="javascriptProperty" strong>
プロパティ
<Term type="javascriptProperty">
<strong>プロパティ</strong>
</Term>
と呼ばれる<Term type="javascriptValue">値</Term>を持ちます。
<Term type="javascriptProperty">プロパティ</Term>
Expand Down Expand Up @@ -76,7 +76,7 @@ document.write(person.favoriteFood); // 餃子

:::note <Term type="javascriptObject">オブジェクト</Term>とプリミティブ

この章よりも前に扱ってきたような「それ以上分解できない」<Term type="javascriptValue">値</Term>のことを<Term strong type="javascriptPrimitive">プリミティブ</Term>といい、<Term type="javascriptPrimitive">プリミティブ</Term>でない値はすべて<Term type="javascriptObject">オブジェクト</Term>です。
この章よりも前に扱ってきたような「それ以上分解できない」<Term type="javascriptValue">値</Term>のことを<Term type="javascriptPrimitive">**プリミティブ**</Term>といい、<Term type="javascriptPrimitive">プリミティブ</Term>でない値はすべて<Term type="javascriptObject">オブジェクト</Term>です。

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

Expand Down
2 changes: 1 addition & 1 deletion docs/1-trial-session/12-css/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ CSS を記述する際には、まずスタイルを適用する対象となる
}
```

CSS の `{` から `}` で囲まれたブロックの中に、<Term strong type="cssProperty">プロパティ</Term>と呼ばれるスタイルの種類と、「プロパティ値」と呼ばれるプロパティに指定できる外観を、コロン記号で区切って記述します。
CSS の `{` から `}` で囲まれたブロックの中に、<Term type="cssProperty">**プロパティ**</Term>と呼ばれるスタイルの種類と、「プロパティ値」と呼ばれるプロパティに指定できる外観を、コロン記号で区切って記述します。

上の例では、`color` という<Term type="cssProperty">プロパティ</Term>に、`red` というプロパティ値を設定することで、文字色を赤色に設定するよう指示しています。

Expand Down
4 changes: 2 additions & 2 deletions docs/1-trial-session/13-dom/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ title: DOM
## <Term type="html">HTML</Term> 要素を <Term type="javascript">JavaScript</Term> で取得する

<p>
<Term strong type="dom">
DOM
<Term type="dom">
<strong>DOM</strong>
</Term>
(Document Object Model)は、<Term type="html">HTML</Term> 構造を <Term type="javascript">
JavaScript
Expand Down
Loading