Skip to content
Open
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
4 changes: 2 additions & 2 deletions docs/1-trial-session/03-css/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,9 @@ title: CSS
![Hello World!](./red-hello-world.png)

{/* prettier-ignore */}
<Term>`style`属性</Term>には、<Term type="cssProperty">**プロパティ**</Term>と呼ばれるスタイルの種類と、その値を、コロン記号で繋いだ形式で記述します。また、複数のプロパティを指定する場合は、セミコロンで区切ります。
<Term>`style`属性</Term>には、<Term id="css-property">**プロパティ**</Term>と呼ばれるスタイルの種類と、その値を、コロン記号で繋いだ形式で記述します。また、複数のプロパティを指定する場合は、セミコロンで区切ります。

この例では、`color`という<Term type="cssProperty">プロパティ</Term>に`red`という値を設定し、`font-size`という<Term type="cssProperty">プロパティ</Term>に`24px`という値を設定しています。これにより、`Hello World!`という文字列が、赤色で、24ピクセルの大きさで表示されます。
この例では、`color`という<Term id="css-property">プロパティ</Term>に`red`という値を設定し、`font-size`という<Term id="css-property">プロパティ</Term>に`24px`という値を設定しています。これにより、`Hello World!`という文字列が、赤色で、24ピクセルの大きさで表示されます。

:::tip[`div`要素]

Expand Down
6 changes: 3 additions & 3 deletions docs/1-trial-session/05-expressions/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -28,16 +28,16 @@ document.write(3);
document.write(3 + 4);
```

## <Term>演算子</Term>の<Term type="javascriptOperatorPriority">優先順位</Term>
## <Term>演算子</Term>の<Term id="javascript-operator-priority">優先順位</Term>

{/* prettier-ignore */}
<Term>演算子</Term>には、<Term type="javascriptOperatorPriority">優先順位</Term>が設定されています。
<Term>演算子</Term>には、<Term id="javascript-operator-priority">優先順位</Term>が設定されています。

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

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

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

Expand Down
4 changes: 2 additions & 2 deletions docs/1-trial-session/07-boolean/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ const height = 155;
const canRideRollerCoasters = age >= 10 && height >= 120; // true
```

`&&`や`||`よりも比較<Term>演算子</Term>の方が<Term type="javascriptOperatorPriority">優先順位</Term>が高いため、複数の条件を「かつ」「または」などで組み合わせることは容易です。
`&&`や`||`よりも比較<Term>演算子</Term>の方が<Term id="javascript-operator-priority">優先順位</Term>が高いため、複数の条件を「かつ」「または」などで組み合わせることは容易です。

:::info

Expand Down Expand Up @@ -114,7 +114,7 @@ document.write(isTanakaWinner); // true

:::tip

`+`, `-`, `*`, `/`などの算術演算子は、比較演算子よりも<Term type="javascriptOperatorPriority">優先順位</Term>が高いです。
`+`, `-`, `*`, `/`などの算術演算子は、比較演算子よりも<Term id="javascript-operator-priority">優先順位</Term>が高いです。

```javascript
const isBig = 10 + 5 > 10 - 3; // 15 > 7 なので true
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 @@ -69,7 +69,7 @@ greetingType.textContent = "evening";

## <Term>HTML要素</Term>のスタイルを変更する

`document.getElementById`<Term>関数</Term>が返す<Term>オブジェクト</Term>の`style`<Term>プロパティ</Term>は、その要素の <Term>`style`属性</Term>と対応します。 **`style`<Term>プロパティ</Term>に格納されている<Term>値</Term>自体も<Term>オブジェクト</Term>** となっており、その各<Term>プロパティ</Term>がCSSの<Term type="cssProperty">プロパティ</Term>に対応します。
`document.getElementById`<Term>関数</Term>が返す<Term>オブジェクト</Term>の`style`<Term>プロパティ</Term>は、その要素の <Term>`style`属性</Term>と対応します。 **`style`<Term>プロパティ</Term>に格納されている<Term>値</Term>自体も<Term>オブジェクト</Term>** となっており、その各<Term>プロパティ</Term>がCSSの<Term id="css-property">プロパティ</Term>に対応します。

```js title="script.js"
element.style.backgroundColor = "red";
Expand All @@ -80,7 +80,7 @@ element.style.backgroundColor = "red";
![JavaScriptからスタイルを操作する](./change-styles.png)

{/* prettier-ignore */}
<Term>CSS</Term>の<Term type="cssProperty">プロパティ</Term>名である`background-color`は、内部にハイフンが含まれているため、`element.style.background-color`のように指定してしまうと、ハイフンが減算<Term>演算子</Term>として解釈されてしまいます。`style`<Term>プロパティ</Term>では、<Term>CSS</Term>の<Term type="cssProperty">プロパティ</Term>名は<Term>キャメルケース</Term>として指定する必要があることに注意してください。
<Term>CSS</Term>の<Term id="css-property">プロパティ</Term>名である`background-color`は、内部にハイフンが含まれているため、`element.style.background-color`のように指定してしまうと、ハイフンが減算<Term>演算子</Term>として解釈されてしまいます。`style`<Term>プロパティ</Term>では、<Term>CSS</Term>の<Term id="css-property">プロパティ</Term>名は<Term>キャメルケース</Term>として指定する必要があることに注意してください。

### 確認問題

Expand Down
2 changes: 1 addition & 1 deletion docs/3-web-servers/07-fetch-api-post/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ Fetch APIを用いると、サーバーからデータを取得するだけで

[Expressによるサーバー構築](../server/)の節では、<Term>クライアント</Term>から<Term>サーバー</Term>への要求を<Term>リクエスト</Term>と呼び、その応答を<Term>レスポンス</Term>と呼ぶことを学びました。HTTPのリクエストやレスポンスは、主に3つの要素から構成されます。

- **制御情報**: リクエストやレスポンスの基本的な情報を含む部分。リクエストには、<Term type="httpMethod">**メソッド**</Term>と呼ばれるHTTPリクエストの種類を指定するための情報や、リクエストの対象となるパスなどが含まれます。レスポンスには、<Term>**ステータスコード**</Term>と呼ばれる、リクエストの結果を示すコードが含まれます。
- **制御情報**: リクエストやレスポンスの基本的な情報を含む部分。リクエストには、<Term id="http-method">**メソッド**</Term>と呼ばれるHTTPリクエストの種類を指定するための情報や、リクエストの対象となるパスなどが含まれます。レスポンスには、<Term>**ステータスコード**</Term>と呼ばれる、リクエストの結果を示すコードが含まれます。
- **ヘッダー**: リクエストやレスポンスに関する追加情報を含む部分。名前と値のペアで構成され、リクエストやレスポンスの内容をより詳細に説明します。
- **ボディ**: リクエストやレスポンスの実際のデータ。リクエストのボディには、サーバーに送信するデータが含まれ、レスポンスのボディには、サーバーからクライアントに返されるデータが含まれます。

Expand Down
2 changes: 1 addition & 1 deletion docs/4-advanced/01-cookie/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ IDとパスワードによる認証は、Webアプリケーションにおいて

Webアプリケーションのクライアントが、サーバーから発行された証明書を保管しておく手段として、もっともよく用いられるのが**Cookie**です。Cookieは、ブラウザ内に保存される小さなデータで、文字列のキーと値のペアとして保存されます。

Cookieを操作するための最も基本的な方法は、HTTPリクエストやレスポンスの<Term type="httpHeaderBody">ヘッダ</Term>を用いて送受信することです。HTTPレスポンスヘッダに`Set-Cookie`ヘッダを含めることにより、次回以降のリクエストで、クライアントはそのデータを`Cookie`リクエストヘッダに入れて毎回送信します。例えば、
Cookieを操作するための最も基本的な方法は、HTTPリクエストやレスポンスの<Term id="http-header-body">ヘッダ</Term>を用いて送受信することです。HTTPレスポンスヘッダに`Set-Cookie`ヘッダを含めることにより、次回以降のリクエストで、クライアントはそのデータを`Cookie`リクエストヘッダに入れて毎回送信します。例えば、

- `Set-Cookie: name=tanaka`
- `Set-Cookie: age=20`
Expand Down
2 changes: 1 addition & 1 deletion docs/4-advanced/02-bundler/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ dist/assets/index-_AYE_jbl.js 2.58 kB │ gzip: 1.40 kB
✓ built in 130ms
```

これにより、カレントディレクトリに`dist`ディレクトリが作成され、<Term>トランスパイル</Term>と<Term type="moduleBundler">バンドル</Term>の結果が格納されます。
これにより、カレントディレクトリに`dist`ディレクトリが作成され、<Term>トランスパイル</Term>と<Term id="module-bundler">バンドル</Term>の結果が格納されます。

出力されたファイルを元のファイルと比較してみましょう。元の`index.html`や`main.js`が、変換された状態で出力されていることがわかります。ディレクトリごと[Netlify Drop](/docs/trial-session/deploy-application/)などにアップロードすれば使用可能になるでしょう。

Expand Down
Loading