Skip to content

Commit fde8307

Browse files
chelprocchelproc
committed
例を追加
1 parent 80e49d3 commit fde8307

File tree

17 files changed

+180
-53
lines changed

17 files changed

+180
-53
lines changed

‎docs/1-trial-session/03-javascript/index.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,3 +72,7 @@ document.write("Hello World3");
7272
// この部分はコメントです
7373
document.write("Hello World"); // この部分もコメントです
7474
```
75+
76+
:::tip
77+
改行が表示されず困っていますか？`document.write`はHTMLタグを出力できます。`<br>`を用いたり、`p`タグで囲んでみたりしてみましょう。
78+
:::

‎docs/1-trial-session/05-variables/samples/compound-assignment/script.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
document.write("Hello World!");
1+
let price = 100;
2+
price = price / 2;
3+
document.write(price);

‎docs/1-trial-session/06-boolean/index.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ title: 論理値と論理演算子
33
---
44

55
import Term from "@site/src/components/Term";
6+
import OpenInCodeSandbox from "@site/src/components/OpenInCodeSandbox";
67

78
## <Term type="javascriptBoolean">論理値</Term>
89

@@ -57,3 +58,20 @@ let canRideRollerCoasters = age >= 10 && height >= 140; // true
5758
| `>=` | 以上 | 左辺が右辺より以上ならば `true` |
5859

5960
`&&` や `||` よりも比較<Term type="javascriptOperator">演算子</Term>の方が<Term type="javascriptOperatorPriority">優先順位</Term>が高いため、最後の例のように複数の条件を「かつ」「または」などで組み合わせることは容易です。
61+
62+
## 課題
63+
64+
次のコードは何を表示するでしょうか。そしてそれはなぜでしょうか。
65+
66+
```javascript
67+
let takaoHeight = 599;
68+
let everestHeight = 8849;
69+
let fujiHeight = 3776;
70+
document.write(takaoHeight < everestHeight < fujiHeight);
71+
document.write(takaoHeight = everestHeight);
72+
```
73+
74+
<OpenInCodeSandbox path="/docs/1-trial-session/06-boolean/samples/weird-comparison" />
75+
76+
- JavaScript は、数値以外の<Term type="javascriptValue">値</Term>に比較<Term type="javascriptOperator">演算子</Term>を適用した際、まずそれらを文字列に変換したうえで、辞書順に比較しようと試みます。
77+
- `=` は代入演算子です。代入<Term type="javascriptOperator">演算子</Term>の<Term type="javascriptExpression">式</Term>が<Term type="javascriptEvaluation">評価</Term>されると、右辺の<Term type="javascriptValue">値</Term>になります。

‎docs/1-trial-session/06-boolean/samples/weird-comparison/index.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE html>
2+
<html lang="ja">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Title</title>
6+
</head>
7+
<body>
8+
<script src="./script.js"></script>
9+
</body>
10+
</html>

‎docs/1-trial-session/06-boolean/samples/weird-comparison/script.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
let price = 100;
2+
price = price / 2;
3+
document.write(price);

‎docs/1-trial-session/08-functions/arguments.png‎

75.5 KB
Loading

‎docs/1-trial-session/08-functions/index.md‎

Lines changed: 30 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,9 @@ greet();
3030
<p><Term type="javascriptFunction">関数</Term>の振る舞いを呼び出し時に変更するため、<Term type="javascriptFunction">関数</Term>に<Term strong type="javascriptParameter">引数</Term>を与えることができます。<Term type="javascriptParameter">引数</Term>には任意の<Term type="javascriptValue">値</Term>が指定できます。</p>
3131

3232
```javascript
33-
function greet(greetingType, myName) {
33+
function greet() {
34+
let greetingType = "morning";
35+
let myName = "佐藤";
3436
document.write("Good " + greetingType + ", " + myName + "!");
3537
}
3638

@@ -41,6 +43,8 @@ greet("morning", "佐藤");
4143

4244
呼び出し側では、括弧の中に<Term type="javascriptFunction">関数</Term>に<Term type="javascriptPass">渡す</Term><Term type="javascriptParameter">引数</Term>を指定します。このプログラムを実行すると、ブラウザに `Good morning, 佐藤!` が表示されるでしょう。
4345

46+
![引数](arguments.png)
47+
4448
## <Term type="javascriptReturnValue">戻り値</Term>
4549

4650
<p><Term type="javascriptFunction">関数</Term>呼び出しは<Term type="javascriptExpression">式</Term>の一種です。<Term type="javascriptFunction">関数</Term>定義内で <strong>return 文</strong>を用いると、<Term type="javascriptFunction">関数</Term>の実行が停止され、<Term type="javascriptFunction">関数</Term>呼び出し<Term type="javascriptExpression">式</Term>の<Term type="javascriptEvaluation">評価</Term>結果が確定します。この値を<Term strong type="javascriptReturnValue">戻り値</Term>と呼びます。ある<Term type="javascriptValue">値</Term>を<Term type="javascriptReturnValue">戻り値</Term>として設定して関数の実行を終了することを、<Term type="javascriptFunction">関数</Term>がその<Term type="javascriptValue">値</Term>を<Term strong type="javascriptReturn">返す</Term>と表現します。</p>
@@ -55,9 +59,11 @@ document.write(add(3, 4));
5559

5660
上の例の 4 行目で、<Term type="javascriptExpression">式</Term> `add(3, 4)` が<Term type="javascriptEvaluation">評価</Term>されると、 `a = 3, b = 4` として `add` <Term type="javascriptFunction">関数</Term>が実行されます。`add`<Term type="javascript">関数</Term>の中で<Term type="javascriptStatement">文</Term> `return a + b;` が実行されると、<Term type="javascriptExpression">式</Term> `a + b` が<Term type="javascriptEvaluation">評価</Term>され、`7` になります。これにより、 `add` <Term type="javascriptFunction">関数</Term>は `7` を<Term type="javascriptReturn">返し</Term>、<Term type="javascriptExpression">式</Term> `add(3, 4)` の<Term type="javascriptEvaluation">評価</Term>結果は `7` となります。
5761

58-
## <Term type="javascriptVariable">変数</Term>のスコープ
62+
## <Term type="javascriptVariable">変数</Term>の<Term type="javascriptScope">スコープ</Term>
63+
64+
<p><Term type="javascriptFunction">関数</Term>内で<Term type="javascriptDeclaration">宣言</Term>された<Term type="javascriptVariable">変数</Term>は、<Term type="javascriptFunction">関数</Term>内でのみ有効です。<Term type="javascriptVariable">変数</Term>が有効な範囲のことを、その<Term type="javascriptVariable">変数</Term>の<Term type="javascriptScope" strong>スコープ</Term>と呼んでいます。</p>
5965

60-
<p><Term type="javascriptFunction">関数</Term>内で<Term type="javascriptDeclaration">宣言</Term>された<Term type="javascriptVariable">変数</Term>は、<Term type="javascriptFunction">関数</Term>内でのみ有効です。しかしながら、<Term type="javascriptFunction">関数</Term>外で<Term type="javascriptDeclaration">宣言</Term>された<Term type="javascriptVariable">変数</Term>は<Term type="javascriptFunction">関数</Term>内でも利用できます。</p>
66+
<p><Term type="javascriptFunction">関数</Term>外で<Term type="javascriptDeclaration">宣言</Term>された<Term type="javascriptVariable">変数</Term>は<Term type="javascriptFunction">関数</Term>内でも利用できます。</p>
6167

6268
```javascript
6369
let guestCount = 0;
@@ -73,6 +79,27 @@ greet();
7379

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

82+
:::caution <Term type="javascriptVariable">変数</Term>の<Term type="javascriptScope" strong>スコープ</Term>
83+
84+
<p><Term type="javascriptScope">スコープ</Term>が終わった<Term type="javascriptVariable">変数</Term>は、その時点で破棄されます。</p>
85+
86+
```javascript
87+
let outer = 0;
88+
89+
function increment() {
90+
let inner = 0;
91+
outer = outer + 1;
92+
inner = inner + 1;
93+
document.write(outer); // 1ずつ増える
94+
document.write(inner); // 常に1
95+
}
96+
97+
increment();
98+
increment();
99+
```
100+
101+
:::
102+
76103
## 演習
77104

78105
携帯電話料金を計算する<Term type="javascriptFunction">関数</Term>を作ってみましょう。

‎docs/1-trial-session/09-css/index.md‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ title: ウェブサイトの見た目を整える
33
---
44

55
import Term from "@site/src/components/Term";
6+
import OpenInCodeSandbox from "@site/src/components/OpenInCodeSandbox";
67

78
多くの<Term type="element">HTML 要素</Term>は、<Term strong type="styleAttribute" strong>style 属性</Term>を用いることで、その見た目を細かくカスタマイズすることができます。
89

@@ -14,6 +15,8 @@ import Term from "@site/src/components/Term";
1415
<p style="color: red;">Hello CSS!</p>
1516
```
1617

18+
<OpenInCodeSandbox path="/docs/1-trial-session/09-css/samples/first-css" />
19+
1720
次のように、<Term type="styleAttribute">style 属性</Term>を指定した<Term type="element">要素</Term>内のテキストが赤色で表示されます。
1821

1922
![CSSを書き始める](./write-css.png)
@@ -38,7 +41,21 @@ color: red;
3841

3942
CSS の<Term type="cssProperty">プロパティ</Term>には `color` (文字色) や `font-size` (文字サイズ) だけでなく、`background-color` (背景色)、`text-decoration` (文字装飾)等、数えきれないほどの種類が定義されています。
4043

41-
[MDN](https://developer.mozilla.org/ja/)は、信頼できるオンラインの情報源です。[MDN の CSS リファレンス](https://developer.mozilla.org/ja/docs/Web/CSS/Reference)には、たくさんの<Term type="cssProperty">プロパティ</Term>が掲載されています。ざっくりと眺めて、その可能性を感じてみてください。
44+
:::tip どうやって調べたらいいの？
45+
プログラミングを始めたての間は、分からないことがあったときにどのように調べたら良いのか戸惑うことが多いと思います。そんなときは、次のような手順で調べてみましょう。例として、「文字を赤くする方法」を調べてみます。
46+
47+
#### 1. タスクを細かく分割する
48+
49+
現在持ち合わせている知識をもとに、やりたいことを可能な限り細かく分割します。「文字を赤くする」であれば、見た目に関することなので CSS を使えばいいのだろうと想像がつきます。加えて、色の指定方法について調べてみるとよいでしょう。
50+
51+
#### 2. Google で検索してみる
52+
53+
「CSS 文字色」「CSS 色指定」などと調べてみましょう。課題が十分に細かく分割できていれば、これで直接的な回答が得られるはずです。うまく答えが見つからない場合は、慣れている人に聞いてみてください。Slack の `#質問ルーム` チャンネルの出番です。
54+
55+
#### 3. 周辺知識を信頼できる情報源で調べる
56+
57+
見つかったウェブサイトに掲載されているコードをもとに、信頼できる情報源を読みなおします。HTML、CSS、JavaScriptの場合は、[MDN](https://developer.mozilla.org/ja/)が便利でしょう。例えば「CSS 文字色」と調べて紹介されるのは `color` <Term type="cssProperty">プロパティ</Term>なので、MDNでこの<Term type="cssProperty">プロパティ</Term>について調べておきましょう。
58+
:::
4259

4360
## 課題 (時間が余った場合)
4461

‎docs/1-trial-session/09-css/samples/first-css/index.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE html>
2+
<html lang="ja">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Title</title>
6+
</head>
7+
<body>
8+
<p style="color: red;">Hello CSS!</p>
9+
</body>
10+
</html>

‎docs/1-trial-session/10-object/index.md‎

Lines changed: 40 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -10,50 +10,58 @@ JavaScript で扱うことのできる<Term type="javascriptValue">値</Term>の
1010

1111
オブジェクトを用いると、これまで扱ってきたような単純な<Term type="javascriptValue">値</Term>を複数まとめて一つの<Term type="javascriptValue">値</Term>として扱うことができます。
1212

13-
![値の種類・論理値付き](./value-types-with-object.drawio.svg)
13+
今まで扱ってきたような「それ以上分解できない」<Term type="javascriptValue">値</Term>のことを<Term strong type="javascriptPrimitive">プリミティブ</Term>といい、<Term type="javascriptPrimitive">プリミティブ</Term>でない値はすべて<Term type="javascriptObject">オブジェクト</Term>です。
1414

15-
## 論理<Term type="javascriptOperator">演算子</Term>
15+
![値の種類・オブジェクト付き](./value-types-with-object.drawio.svg)
1616

17-
<p><Term type="javascriptBoolean">論理値</Term>に対して適用できる<Term type="javascriptOperator">演算子</Term>が存在します。</p>
17+
:::tip ほかの言語の経験者へ
18+
JavaScript のオブジェクトは、ほかの言語でいう**辞書**や**連想配列**、**Map**に近いものです。ただ、こういったものと比べ、JavaScript のオブジェクトは使用頻度が非常に高いです。
19+
:::
20+
21+
## オブジェクトの作成
22+
23+
オブジェクトは、複数の<Term strong type="javascriptProperty" strong>プロパティ</Term>と呼ばれる<Term type="javascriptValue">値</Term>を持ちます。<Term type="javascriptProperty">プロパティ</Term>にはそれぞれ名前がついています。<Term type="javascriptProperty">プロパティ</Term>の名前には文字列しか指定できませんが、<Term type="javascriptProperty">プロパティ</Term>の<Term type="javascriptValue">値</Term>としては <Term type="javascript">JavaScript</Term> で使用できるすべての<Term type="javascriptValue">値</Term>が使用可能です。
1824

1925
```javascript
20-
let isMonsterBig = true;
21-
let isMonsterSmall = !true; // false
22-
let isHunterStrong = false;
23-
let shouldEscape = !isHunterStrong && isMonsterBig; // true
24-
let shouldFight = isHunterStrong || isMonsterSmall; // false
26+
let person = { name: "田中", age: 18 };
2527
```
2628

27-
詳細は以下の通りです。 `!` のみが作用する対象を 1 つしかとらないことに注意してください。
29+
![プロパティ](properties.png)
30+
31+
<p><Term type="javascriptObject">オブジェクト</Term>の中に<Term type="javascriptObject">オブジェクト</Term>を入れることもできます。</p>
32+
33+
```javascript
34+
let person = {
35+
name: "田中",
36+
scores: { math: 80, science: 90 },
37+
};
38+
```
2839

29-
| 演算子 | 意味 | 詳細 |
30-
| ------------------------- | ---------- | -------------------------------------------------------------------- |
31-
| `!` | ～ではない | `true` ならば `false`、`false` ならば `true` |
32-
| `&&` | かつ | 両方 `true` ならば `true`、どちらか 1 つでも `false` ならば `false` |
33-
| <code>&#124;&#124;</code> | または | 両方 `false` ならば `false` 、どちらか 1 つでも `true` ならば `true` |
40+
:::note
41+
<p><Term type="javascriptObject">オブジェクト</Term>の<Term type="javascriptProperty">プロパティ</Term>は、<Term type="css">CSS</Term> における<Term type="cssProperty">プロパティ</Term>と似ているものの、全く異なるものです。文脈により何を意味しているのかが変わるので注意してください。</p>
42+
:::
3443

35-
## 比較<Term type="javascriptOperator">演算子</Term>
44+
## <Term type="javascriptObject">オブジェクト</Term>の<Term type="javascriptProperty">プロパティ</Term>を取得・変更する
3645

37-
比較<Term type="javascriptOperator">演算子</Term>は、複数の<Term type="javascriptValue">値</Term>を比較して、単一の<Term type="javascriptBoolean">論理値</Term>を得ます。
46+
ドット記号を用いることで、<Term type="javascriptObject">オブジェクト</Term>の<Term type="javascriptProperty">プロパティ</Term>を取得・変更できます。通常の<Term type="javascriptVariable">変数</Term>のように扱えます。
3847

3948
```javascript
40-
let age = 15;
41-
let height = 155;
42-
let isFourteen = age === 14; // false
43-
let isNotFourteen = age !== 14; // true
44-
let isChild = age < 20; // true
45-
let canRideRollerCoasters = age >= 10 && height >= 140; // true
49+
person.age = person.age + 1;
50+
document.write(person.age);
4651
```
4752

48-
各<Term type="javascriptOperator">演算子</Term>の詳細は、次の通りです。
53+
## 課題
54+
55+
<p><Term type="javascriptObject">オブジェクト</Term>も<Term type="javascriptValue">値</Term>の一種なので、<Term type="javascriptFunction">関数</Term>の<Term type="javascriptParameter">引数</Term>や<Term type="javascriptReturnValue">戻り値</Term>として使用できます。</p>
4956

50-
| 演算子 | 意味 | 詳細 |
51-
| ------ | ---------- | ------------------------------- |
52-
| `===` | 等しい | |
53-
| `!==` | 等しくない | |
54-
| `<` | 小なり | 左辺が右辺より小さければ `true` |
55-
| `<=` | 以下 | 左辺が右辺より以下ならば `true` |
56-
| `>` | 大なり | 左辺が右辺より大きければ `true` |
57-
| `>=` | 以上 | 左辺が右辺より以上ならば `true` |
57+
`age` <Term type="javascriptProperty">プロパティ</Term> 1 を加えた<Term type="javascriptObject">オブジェクト</Term>を返す関数 `incrementAge` を定義してみましょう。
5858

59-
`&&` や `||` よりも比較<Term type="javascriptOperator">演算子</Term>の方が<Term type="javascriptOperatorPriority">優先順位</Term>が高いため、最後の例のように複数の条件を「かつ」「または」などで組み合わせることは容易です。
59+
```javascript
60+
function incrementAge(person) {
61+
// ここに書く
62+
};
63+
64+
let tanaka = { name: "田中", age: 18 };
65+
let nextYearTanaka = incrementAge(tanaka);
66+
document.write(nextYearTanaka.age); // 19 と表示されてほしい
67+
```

0 commit comments

Comments
 (0)