Skip to content
Draft
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
6 changes: 6 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -255,8 +255,14 @@ GitHubのalert記法の、`NOTE` `TIP` `WARNING` `CAUTION` が使えます。

と書くと、`term: - 用語` が定義されている別のセクションへのリンクになり、ポップアップでその内容も表示されます。

この記法はその言語のチュートリアルで繰り返し登場するプログラミング用語およびその言語固有のキーワードに使用します。
例えばC++ならC++固有のキーワードとして [[main関数]] [[std::cout]] [[const]] [[auto]]、一般的なプログラミング用語として [[変数]] [[初期化]] [[文字列]] などが用語になります。
言語そのもの: [[C++]]、抽象的な用語(あとの章で定義を参照する必要性が低いもの): [[パフォーマンス]] [[マルチパラダイム]] 、 1セクションにしか登場しない用語、環境構築関係の用語: [[VisualStudio]] [[SDK]] などは[[用語]]記法にする必要はありません。

markdown書式も利用可能です。 `[[ほげ**ふが**]]` は `term: - ほげふが` へのリンクになり、表示は「<ins>ほげ**ふが**</ins>」になります。ただし `**[[ふが]]**` はリンクの色が優先されるのに対し `[[**ふが**]]` は強調の色が優先されます。

表記ゆれがある場合はすべてをtermとして定義する必要があります: [[main関数]] [[main 関数]] [[main() 関数]] など。markdown書式は取り除かれるため [[`main` 関数]] の定義は不要です。

```
[[./1-foo]]
[[./1]]
Expand Down
2 changes: 1 addition & 1 deletion public/docs/javascript/0-intro/2-0-environment.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ JavaScriptはどこで動くのでしょうか? かつてはブラウザの中
* **Webブラウザ (クライアントサイド):**

* DOM (Document Object Model) 操作により、HTML/CSSを動的に書き換えます。
* `window` オブジェクトがグローバルスコープです。
* `window` [[オブジェクト]]がグローバルスコープです。
* セキュリティ上の制約(サンドボックス)があり、ローカルファイルへの直接アクセスなどは制限されています。

* **Node.js (サーバーサイド):**
Expand Down
3 changes: 2 additions & 1 deletion public/docs/javascript/0-intro/4-1-repl.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,4 +22,5 @@ undefined
3
```

※ `undefined` は `console.log` 関数の戻り値が表示されています。
> [!TIP]
> [[`undefined`]] は `console.log` 関数の戻り値が表示されています。
3 changes: 2 additions & 1 deletion public/docs/javascript/0-intro/4-3-browser.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,5 +26,6 @@ question:

ブラウザの開発者ツール(Consoleタブ)にメッセージが表示され、ポップアップウィンドウが出れば成功です。

my.code(); のチュートリアルでは主にJavaScriptの文法や基本的な機能を中心に扱います。
> [!NOTE]
> my.code(); のチュートリアルでは主にJavaScriptの文法や基本的な機能を中心に扱います。
HTMLやCSSとあわせたウェブアプリケーション開発の基礎については [ut.code(); Learn](https://learn.utcode.net) で学ぶことができます。
10 changes: 8 additions & 2 deletions public/docs/javascript/1-basics/1-0-variable.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,11 @@ question:
- varを使うべきではないとありますが、varを使うとどのような悪いことが起こるのですか?
- 巻き上げ(Hoisting)とは、具体的にどのような現象ですか?
- '`console.log("let output:", blockScoped);` がReferenceErrorになるのはなぜですか?'
term:
- let
- const
- var
- 変数
---

## 変数宣言: let, const, var
Expand All @@ -20,8 +25,9 @@ ES6(2015年)で導入された `const` と `let` は、C++やJava、C\#な
* **const**: 再代入不可能な変数を宣言します。定数だけでなく、再代入しない変数はすべてこれで宣言します。
* **let**: 再代入可能な変数を宣言します。ループカウンタや、状態が変わる値に使用します。


なぜ `var` を使うべきではないのでしょうか。それは `var` が**関数スコープ**であり、意図しない変数の共有や「巻き上げ(Hoisting)」によるバグを引き起こしやすいからです。
> [!WARNING]
> もう一つの変数を宣言する古いキーワードとして `var` があります。
> `var` は**関数スコープ**であり、意図しない変数の共有や「巻き上げ(Hoisting)」によるバグを引き起こしやすいため、現在は `const` や `let` を使うことが推奨されています。

以下のコードで、スコープの違いを確認してみましょう。

Expand Down
7 changes: 5 additions & 2 deletions public/docs/javascript/1-basics/2-0-primitive-type.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,14 @@ question:
- プリミティブ型とは、ざっくり言うとどういう値のことですか?
- プリミティブ型がイミュータブル(変更不可)というのは、どういう状態を指しますか?
- SymbolやBigIntは、通常の開発でどのくらいの頻度で使うものですか?
term:
- プリミティブ
- プリミティブ型
---

## データ型: プリミティブ型

JavaScriptは動的型付け言語であり、変数は特定の型に紐付きませんが、値自体は型を持っています。JavaScriptの値は大きく分けて「プリミティブ型」と「オブジェクト(参照)型」に分類されます。
JavaScriptは動的型付け言語であり、[[変数]]は特定の型に紐付きませんが、値自体は型を持っています。JavaScriptの値は大きく分けて「プリミティブ型」と「オブジェクト(参照)型」に分類されます。

プリミティブ型はイミュータブル(変更不可)であり、以下の7種類が存在します。

Expand All @@ -19,7 +22,7 @@ JavaScriptは動的型付け言語であり、変数は特定の型に紐付き
3. **Boolean**: `true` または `false`
4. **undefined**: 「値が未定義である」ことを表す型
5. **null**: 「値が存在しない」ことを意図的に示す型
6. **Symbol**: 一意で不変な識別子(主にオブジェクトのプロパティキー用途)
6. **Symbol**: 一意で不変な識別子(主に[[オブジェクト]]のプロパティキー用途)
7. **BigInt**: `Number`型では表現できない巨大な整数を扱う型(末尾に `n`)

この章では、まず最もよく使う `String` / `Number` / `Boolean` / `undefined` / `null` を順に見ていきます。`Symbol` と `BigInt` は用途が限定的なため、ここでは「プリミティブ型の一種」であることだけ押さえれば十分です。
7 changes: 6 additions & 1 deletion public/docs/javascript/1-basics/2-1-string.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,18 @@ question:
- シングルクォートとダブルクォートで文字列を囲むことの違いは何ですか?
- テンプレートリテラルは、どんな場面で使うと便利ですか?
- テンプレートリテラルの `${}` の中に計算式を書けますか?
term:
- 文字列
- String
- string
- テンプレートリテラル
---

### 文字列(String)

JavaScriptの文字列は、シングルクォート (`'`) またはダブルクォート (`"`) で作成します。

また、バッククォート (`` ` ``) で囲む**テンプレートリテラル**を使うと、変数や式を文字列に埋め込めます。文字列の連結(`+`)より読みやすくなることが多いため、こちらを使うのが一般的です。
また、バッククォート (`` ` ``) で囲む**テンプレートリテラル**を使うと、[[変数]]や式を文字列に埋め込めます。文字列の連結(`+`)より読みやすくなることが多いため、こちらを使うのが一般的です。

```js-repl
> const name = "Ada";
Expand Down
8 changes: 7 additions & 1 deletion public/docs/javascript/1-basics/2-2-number.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,11 @@ question:
- JavaScriptで整数と小数を区別しないのは、どういう意味ですか?
- 除算や剰余など、基本的な計算はどのように書けば良いですか?
- 小数計算で誤差が出ることがあるのはなぜですか?
term:
- 数値
- Number
- number
- NaN
---

### 数値(Number)
Expand Down Expand Up @@ -35,4 +40,5 @@ undefined
0.30000000000000004
```

`0.1 + 0.2` のような小数計算で誤差が出るのは、JavaScriptが数値を内部的に2進数の浮動小数点として扱うためです。
> [!TIP]
> `0.1 + 0.2` のような小数計算で誤差が出るのは、JavaScriptが数値を内部的に2進数の浮動小数点として扱うためです。
6 changes: 6 additions & 0 deletions public/docs/javascript/1-basics/2-3-boolean.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,12 @@ level: 3
question:
- Boolean型はどんな場面で使いますか?
- '`true` / `false` は文字列の `"true"` / `"false"` と何が違いますか?'
term:
- 真偽値
- Boolean
- boolean
- "true"
- "false"
---

### 真偽値(Boolean)
Expand Down
8 changes: 6 additions & 2 deletions public/docs/javascript/1-basics/2-4-undefined-null.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,16 @@ question:
- undefinedとnullは、どう使い分けるのが良いですか?
- 変数を宣言しただけの状態がundefinedになるのはなぜですか?
- '`typeof null` が `''object''` になるのは本当に正しいのですか?'
term:
- "undefined"
- "null"
---

### undefined と null

他言語経験者が最初に混乱しやすいのが、この `undefined` と `null` の違いです。

- **undefined**: JavaScriptエンジンが「値がまだない」ことを示すときに現れます(例: 宣言だけして代入していない変数)。
- **undefined**: JavaScriptエンジンが「値がまだない」ことを示すときに現れます(例: 宣言だけして代入していない[[変数]])。
- **null**: プログラマが「ここには値がない」と明示したいときに代入します。

```js-repl
Expand All @@ -28,4 +31,5 @@ undefined
'object'
```

`typeof null` が `'object'` になるのは、JavaScript初期から残っている歴史的な仕様です。`null` 自体はオブジェクトではなく、プリミティブ型の値です。
> [!INFO]
> `typeof null` が `'object'` になるのは、JavaScript初期から残っている歴史的な仕様です。`null` 自体は[[オブジェクト]]ではなく、[[プリミティブ型]]の値です。
6 changes: 4 additions & 2 deletions public/docs/javascript/1-basics/3-0-object.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,19 @@ question:
- オブジェクト(参照型)とプリミティブ型は、メモリ上で具体的にどのように違うのですか?
- JavaScriptでは関数もオブジェクトとありますが、これはどういうメリットがありますか?
- キーと値のペアの集合、というのは具体的にどんなものですか?
term:
- オブジェクト
---

## データ型: オブジェクト型

プリミティブ以外のすべての値は**オブジェクト(参照型)**です。これらはメモリ上のアドレス(参照)として扱われます。
[[プリミティブ]]以外のすべての値は**オブジェクト(参照型)**です。これらはメモリ上のアドレス(参照)として扱われます。

主なオブジェクト型には以下があります。

* **Object**: キーと値のペアの集合(辞書、ハッシュマップに近い)。詳しくは[[./5]]で解説します。
* **Array**: 順序付きリスト。詳しくは[[./7]]で解説します。
* **Function**: JavaScriptでは関数もオブジェクトであり、変数に代入したり引数として渡すことができます(第一級関数)。
* **Function**: JavaScriptでは関数もオブジェクトであり、[[変数]]に代入したり引数として渡すことができます(第一級関数)。

```js-repl
> // Object: キーと値のペアの集合
Expand Down
2 changes: 1 addition & 1 deletion public/docs/javascript/1-basics/3-1-const-object.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ question:

### const とオブジェクトの変更

重要な点として、`const` で宣言した変数は「再代入」ができませんが、中身がオブジェクトの場合、**プロパティの変更は可能**です。これは `const` が「参照先のメモリアドレス」を固定するものであり、ヒープ領域にあるデータそのものを不変にするわけではないためです。
重要な点として、[[`const`]] で宣言した変数は「再代入」ができませんが、中身が[[オブジェクト]]の場合、**プロパティの変更は可能**です。これは [[`const`]] が「参照先のメモリアドレス」を固定するものであり、ヒープ領域にあるデータそのものを不変にするわけではないためです。

```js:object_mutation.js
const user = {
Expand Down
3 changes: 3 additions & 0 deletions public/docs/javascript/1-basics/4-0-equality.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@ question:
- 「暗黙的な型変換」とは、具体的にJavaScriptが何をしているのですか?
- '`1 == "1"` がtrueになるのは、どのようなプロセスでそうなるのですか?'
- '`null == undefined` がtrueになるのは、特別なルールがあるのですか?'
term:
- 等価演算子
- 厳密等価演算子
---

## 演算子と等価性 (== vs ===)
Expand Down
2 changes: 1 addition & 1 deletion public/docs/javascript/1-basics/5-1-add-operator.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ question:

JavaScriptは文脈に応じて勝手に型を変換しようとします。

`+` 演算子は、数値の加算だけでなく文字列の連結にも使われます。片方が文字列であれば、もう片方も文字列に変換されて連結されます。
`+` 演算子は、[[数値]]の加算だけでなく[[文字列]]の連結にも使われます。片方が[[文字列]]であれば、もう片方も文字列に変換されて連結されます。

```js-repl
> 10 + 20
Expand Down
8 changes: 4 additions & 4 deletions public/docs/javascript/1-basics/6-0-summary.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ question: []

## この章のまとめ

* 変数は `const` をデフォルトとし、再代入が必要な場合のみ `let` を使う。`var` は使用しない。
* プリミティブ型は値渡し、オブジェクト型(配列含む)は参照渡しである。
* `const` で宣言したオブジェクトの中身は変更可能である。
* 比較には必ず `===`(厳密等価演算子)を使用し、`==` による暗黙の型変換を避ける。
* [[変数]]は [[`const`]] をデフォルトとし、再代入が必要な場合のみ [[`let`]] を使う。[[`var`]] は使用しない。
* [[プリミティブ型]]は値渡し、[[オブジェクト]]型(配列含む)は参照渡しである。
* [[`const`]] で宣言した[[オブジェクト]]の中身は変更可能である。
* 比較には必ず `===`([[厳密等価演算子]])を使用し、`==` による暗黙の型変換を避ける。
2 changes: 1 addition & 1 deletion public/docs/javascript/1-basics/6-1-practice1.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ question:

### 練習問題1: テンプレートリテラル

`itemName` という変数に商品名(文字列)、`price` という変数に価格(数値)、`stock` という変数に在庫数(数値)をそれぞれ代入してください。その後、テンプレートリテラルを使って「商品: [商品名], 価格: [価格]円, 在庫: [在庫数]個」という形式の文字列を作り、`console.log()` で出力するコードを書いてみましょう。
`itemName` という[[変数]]に商品名([[文字列]])、`price` という[[変数]]に価格([[数値]])、`stock` という[[変数]]に在庫数([[数値]])をそれぞれ代入してください。その後、[[テンプレートリテラル]]を使って「商品: [商品名], 価格: [価格]円, 在庫: [在庫数]個」という形式の[[文字列]]を作り、`console.log()` で出力するコードを書いてみましょう。

```js:practice2_1.js
```
Expand Down
4 changes: 2 additions & 2 deletions public/docs/javascript/1-basics/6-2-practice2.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ question:

### 練習問題2: constとオブジェクトの変更

`const` を使って、`name`(商品名・文字列)と `price`(価格・数値)を持つ商品オブジェクト `product` を作成してください。
次に、`price` を別の値に変更し、さらに `stock`(在庫数・数値)プロパティを新たに追加してから、`console.log()` でオブジェクトの内容を出力してみましょう。
[[`const`]] を使って、`name`(商品名・[[文字列]])と `price`(価格・[[数値]])を持つ商品[[オブジェクト]] `product` を作成してください。
次に、`price` を別の値に変更し、さらに `stock`(在庫数・[[数値]])プロパティを新たに追加してから、`console.log()` で[[オブジェクト]]の内容を出力してみましょう。

```js:practice2_2.js
```
Expand Down
2 changes: 1 addition & 1 deletion public/docs/javascript/2-control/-intro.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
他の言語での開発経験がある方にとって、JavaScriptの制御構文の多くは馴染み深いものでしょう。しかし、JavaScript特有の「真偽値の評価(Truthy/Falsy)」や「反復処理(Iteration)の種類の多さ」は、バグを生みやすいポイントでもあります。
他の言語での開発経験がある方にとって、JavaScriptの制御構文の多くは馴染み深いものでしょう。しかし、JavaScript特有の「[[真偽値]]の評価([[Truthy]]/[[Falsy]])」や「[[反復処理]](Iteration)の種類の多さ」は、バグを生みやすいポイントでもあります。

この章では、構文そのものだけでなく、JavaScriptならではの挙動やベストプラクティスに焦点を当てて解説します。
27 changes: 17 additions & 10 deletions public/docs/javascript/2-control/1-1-if-truthy.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,28 +8,35 @@ question:
- 文字列の"0"や"false"がTruthyになるのはなぜですか?これも直感と違います。
- BigIntとは何ですか?
- if文の条件式で変数そのものを評価するやり方はどのような時に便利ですか?
term:
- if
- if文
- Truthy
- Falsy
---

## `if`文とTruthy / Falsy

基本的な `if` 文の構造はC言語やJavaと同様です。しかし、条件式における評価はJavaScript特有の**Truthy(真と見なされる値)**と**Falsy(偽と見なされる値)**の概念を理解する必要があります。
基本的な [[`if`]] 文の構造はC言語やJavaと同様です。しかし、条件式における評価はJavaScript特有の**[[Truthy]](真と見なされる値)**と**[[Falsy]](偽と見なされる値)**の概念を理解する必要があります。

厳密な `true` / `false` だけでなく、あらゆる値が条件式の中で真偽判定されます。
厳密な [[`true`]] / [[`false`]] だけでなく、あらゆる値が条件式の中で真偽判定されます。

**Falsyな値(falseとして扱われるもの):**
**Falsyな値([[false]]として扱われるもの):**

* `false`
* [[`false`]]
* `0`, `-0`, `0n` (BigInt)
* `""` (空文字)
* `null`
* `undefined`
* `NaN`
* [[`null`]]
* [[`undefined`]]
* [[`NaN`]]

**Truthyな値(trueとして扱われるもの):**
**Truthyな値([[true]]として扱われるもの):**

* 上記Falsy以外すべて
* **注意:** 空の配列 `[]` や 空のオブジェクト `{}` は **Truthy** です(Pythonなどの経験者は注意が必要です)。
* 文字列の `"0"` や `"false"` もTruthyです。

> [!WARNING]
> * 空の[[配列]] `[]` や 空の[[オブジェクト]] `{}` は **[[Truthy]]** です(Pythonなどの経験者は注意が必要です)。
> * [[文字列]]の `"0"` や `"false"` も[[Truthy]]です。

```js-repl
> if (0) { 'True'; } else { 'False'; }
Expand Down
5 changes: 4 additions & 1 deletion public/docs/javascript/2-control/1-2-switch.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,14 @@ question:
- switch文のcaseの順番は結果に影響しますか?
- break文を書き忘れるとどうなりますか?
- default句は必ず書く必要がありますか?
term:
- switch
- switch文
---

## `switch`文

`switch` 文も標準的ですが、比較が **厳密等価演算子 (`===`)** で行われる点に注意してください。型変換は行われません。
[[`switch`]] 文も標準的ですが、比較が **[[厳密等価演算子]] (`===`)** で行われる点に注意してください。型変換は行われません。

```js:switch_example.js
const status = "200"; // 文字列
Expand Down
5 changes: 4 additions & 1 deletion public/docs/javascript/2-control/2-0-loop.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,11 @@ id: javascript-control-loop
title: 繰り返し (for, while)
level: 2
question: []
term:
- ループ
- 繰り返し
---

## 繰り返し (for, while)

`while`, `do...while`, および古典的な `for` ループは、C/Java/C++等の構文とほぼ同じです。
[[`while`]], [[`do...while`]], および古典的な [[`for`]] ループは、C/Java/C++等の構文とほぼ同じです。
4 changes: 4 additions & 0 deletions public/docs/javascript/2-control/2-1-for.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@ title: 古典的な for ループ
level: 3
question:
- forループの3つの式はそれぞれどのような役割ですか?
term:
- for
- for文
- forループ
---

### 古典的な for ループ
Expand Down
Loading
Loading