Skip to content
Merged
Show file tree
Hide file tree
Changes from 2 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 name="プロパティ (CSS)">**プロパティ**</Term>と呼ばれるスタイルの種類と、その値を、コロン記号で繋いだ形式で記述します。また、複数のプロパティを指定する場合は、セミコロンで区切ります。

この例では、`color`という<Term type="cssProperty">プロパティ</Term>に`red`という値を設定し、`font-size`という<Term type="cssProperty">プロパティ</Term>に`24px`という値を設定しています。これにより、`Hello World!`という文字列が、赤色で、24ピクセルの大きさで表示されます。
この例では、`color`という<Term name="プロパティ (CSS)">プロパティ</Term>に`red`という値を設定し、`font-size`という<Term name="プロパティ (CSS)">プロパティ</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 name="演算子の優先順位 (JavaScript)">優先順位</Term>

{/* prettier-ignore */}
<Term>演算子</Term>には、<Term type="javascriptOperatorPriority">優先順位</Term>が設定されています。
<Term>演算子</Term>には、<Term name="演算子の優先順位 (JavaScript)">優先順位</Term>が設定されています。

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

`*`(乗算<Term>演算子</Term>)は`+`より<Term type="javascriptOperatorPriority">優先順位</Term>が高く設定されているため、上記のコードの実行結果は`23`となります。
`*`(乗算<Term>演算子</Term>)は`+`より<Term name="演算子の優先順位 (JavaScript)">優先順位</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 name="演算子の優先順位 (JavaScript)">優先順位</Term>が高いため、複数の条件を「かつ」「または」などで組み合わせることは容易です。

:::info

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

:::tip

`+`, `-`, `*`, `/`などの算術演算子は、比較演算子よりも<Term type="javascriptOperatorPriority">優先順位</Term>が高いです。
`+`, `-`, `*`, `/`などの算術演算子は、比較演算子よりも<Term name="演算子の優先順位 (JavaScript)">優先順位</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 name="プロパティ (CSS)">プロパティ</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 name="プロパティ (CSS)">プロパティ</Term>名である`background-color`は、内部にハイフンが含まれているため、`element.style.background-color`のように指定してしまうと、ハイフンが減算<Term>演算子</Term>として解釈されてしまいます。`style`<Term>プロパティ</Term>では、<Term>CSS</Term>の<Term name="プロパティ (CSS)">プロパティ</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 name="メソッド (HTTP)">**メソッド**</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 name="リクエスト・レスポンスのヘッダ・ボディ (HTTP)">ヘッダ</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 name="モジュールバンドラ">バンドル</Term>の結果が格納されます。

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

Expand Down
Loading
Loading