Skip to content

Commit ef27df0

Browse files
chelprocchelproc
committed
2日目 wip
1 parent 974dbf3 commit ef27df0

File tree

9 files changed

+276
-0
lines changed

9 files changed

+276
-0
lines changed

‎docs/day02/01.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
title: 開発者ツールの利用
3+
---
4+
5+
ブラウザに標準で搭載されている**開発者ツール**を使用すると、表示されているウェブサイトの構造を簡単に分析できます。
6+
7+
![開発者ツールを開く](01/open-developer-tool.png)
8+
9+
Chromeの場合図のように「その他のツール」「デベロッパー ツール」の順で選択するか、`Ctrl (Cmd) + Shift (Option) + I`、`F12`といったショートカットキーを利用します。
10+
11+
![要素の検証](01/inspect-element.png)
12+
13+
また、Webページ上で右クリックすれば、そこにあるHTML要素を直接開発者ツール上で開くこともできます。ChromeだけでなくSafariやFirefoxなどのブラウザにも同じような機能が搭載されています。

‎docs/day02/01/inspect-element.png‎

705 KB
Loading

‎docs/day02/01/open-developer-tool.png‎

401 KB
Loading

‎docs/day02/02.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
---
2+
title: JavaScriptの記述
3+
---
4+
5+
これまでに学習してきたHTMLやCSSは、プログラミング言語というよりは**マークアップ言語**です。これに対し、**JavaScript**はブラウザ上で動作する唯一のプログラミング言語です。張り切って学習していきましょう。
6+
7+
## HTMLファイル中にJavaScriptを記述する
8+
9+
```html
10+
<body>
11+
<script>
12+
document.write('Hello World!');
13+
</script>
14+
</body>
15+
```
16+
17+
JavaScriptを記述するには、`script`タグを使用します。`document.write('Hello World!');`は、ブラウザ上に`Hello World!`と表示させるプログラムです。
18+
19+
## 外部ファイル中のJavaScriptを利用する
20+
21+
CSSと同じように、JavaScriptも外部ファイルに切り出すことができます。JavaScriptを外部ファイルに記述する場合は、`script`タグに`src`属性を指定します。
22+
23+
```html title="index.html"
24+
<script src="script.js"></script>
25+
```
26+
27+
```js title="script.js"
28+
document.write('Hello World!');
29+
```
30+
31+
`script`タグに`src`属性を指定する場合、中身は必要ありませんが、閉じタグを省略することは許されていません。

‎docs/day02/03.md‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
---
2+
title: JavaScriptによるプログラミング
3+
---
4+
5+
:::info
6+
この記事は、プログラミングが未経験の方を対象にしています。経験者の方で、歯応えのある内容をお求めの場合は[JavaScript Primer](https://jsprimer.net)をお勧めします。
7+
:::
8+
9+
## プログラムの実行順序と文
10+
11+
JavaScriptにおいて、セミコロン（`;`）で終わるまとまりを**文**と呼びます。JavaScriptは、ファイルの先頭から終わりに向けて、順番に文が実行されます。
12+
13+
```js
14+
document.write('Hello'); document.write('My');
15+
document.write('Special'); document.write('World');
16+
```
17+
18+
```
19+
HelloMySpecialWorld
20+
```
21+
22+
:::info
23+
JavaScriptには行という概念が存在しません。改行は区切り文字にはなりますが、スペースと意味上の違いはありません。
24+
:::
25+
26+
:::info
27+
JavaScriptでは、文脈を判断してセミコロンを自動的に挿入する機能（AST）がありますが、混乱を避けるためこの教材では常にセミコロンを記述するものとします。
28+
:::
29+
30+
サンプルコードの一部を変更して、表示がどのように変わるのか確認してみましょう。
31+
32+
## コメント
33+
34+
`/**`と`*/`に囲まれた部分と、`//`から行末までの範囲は**コメント**と呼ばれ、メモなどを書くために用いられます。プログラムとして解釈されることはありません。
35+
36+
```js
37+
document.write('Hello World'); // ここはコメントです。
38+
/** 複数行の
39+
コメントも
40+
書けます */
41+
```

‎docs/day02/04.md‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
---
2+
title: 値と式と演算子
3+
---
4+
5+
次のコードを実行すると、`Hello World`が画面に表示されました。
6+
7+
```js
8+
document.write('Hello World');
9+
```
10+
11+
`'Hello World'`のように`'`（シングルクォーテーション）で囲まれた値を、**文字列**と呼びます。これに対し、**数値**は文字列と同じ、値の一種ですが、プログラムの中に直接記述することができます。
12+
13+
```js
14+
document.write(3);
15+
```
16+
17+
**演算子**を用いると、値を用いて計算をすることができます。例えば`+`（加算演算子）で、足し算の計算を行うことができます。
18+
19+
```js
20+
document.write(3 + 4);
21+
```
22+
23+
演算子には優先順位が設定されています。
24+
25+
```js
26+
document.write(3 + 4 * 5);
27+
```
28+
29+
`*`（乗算演算子）は`+`より優先順位が高く設定されているため、上記のコードの実行結果は`23`となります。
30+
31+
このコードにおいて、`3 + 4 * 5`や、`4 * 5`、`4`を**式**と呼び、式が計算され、その値が確定することを式が**評価**されるといいます。`3 + 4 * 5`は、先に`4 * 5`が評価されて`20`になり、次に`3 + 20`が評価されることにより、`23`という値となると考えることができます。
32+
33+
演算子が適用できるのは、何も数値だけではありません。文字列に適用できる演算子もあります。先ほどの`+`（加算演算子）は、文字列同士で使用された場合は、文字列結合演算子となります。
34+
35+
```js
36+
document.write('Hello' + 'World');
37+
```
38+
39+
画面には`HelloWorld`と表示されるはずです。それでは、以下の２つのプログラムの実行結果はどうなるでしょうか。
40+
41+
```js
42+
document.write(3 + 4 + 'Hello');
43+
```
44+
45+
```js
46+
document.write('Hello' + 1 + 2);
47+
```
48+
49+
この場合、演算子の**結合規則**を考えます。`+`の結合規則は左から右なので、`3 + 4 + 'Hello'`は`(3 + 4) + 'Hello'`、`'Hello' + 1 + 2`は`('Hello' + 1) + 2`と解釈されることになります。
50+
51+
`+`は、両辺が数値の場合のみ加算演算子として振る舞い、片方が数値で片方が文字列の場合は数値を文字列に変換してから文字列結合演算子として機能します。このため、最終的な式全体の評価結果は前者が`7Hello`、後者が`Hello12`となるのです。

‎docs/day02/05.md‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
---
2+
title: 変数と定数
3+
---
4+
5+
**変数**を用いると、式の値を一時的に保存し、再利用することができます。数学における変数は通常数値ですが、プログラムにおける変数は、文字列等、全ての種類の「値」を格納することができます。
6+
7+
## 変数の宣言と使用
8+
9+
変数を使用するには、まず変数を**宣言**する必要があります。
10+
11+
```js
12+
let myGreatName;
13+
myGreatName = 'Becky Jones';
14+
document.write(myGreatName);
15+
```
16+
17+
1行目の`let myGreatName;`で、`myGreatName`という名前の変数を宣言しています。`let`は、変数宣言のためのキーワードです。
18+
19+
続いて2行目では、変数`myGreatName`に文字列`'Becky Jones'`を**代入**しています。`=`は**代入演算子**で、左側に指定した変数に対し、右側に指定された値を代入します。
20+
21+
3行目では、変数`myGreatName`が評価され、代入されていた文字列値`'Becky Jones'`が画面に表示されます。
22+
23+
:::tip
24+
変数名の長さに特に制限はありません。どれだけ長くなったとしても、その変数が持っている値を正確に表す命名を心がけましょう。JavaScriptの変数は通常、名前に含まれる2つ目以降の単語の先頭文字を大文字にすることで、単語の区切りを表します。
25+
26+
上の例では、`my great name`という意味を表現して、`myGreatName`のように記述しています。
27+
28+
このような**命名規則**を、**キャメルケース**と呼びます。
29+
:::
30+
31+
```js
32+
let myBirthday = '2000/01/01', yourAge = 20;
33+
```
34+
35+
`let`キーワードを用いた変数宣言では、宣言と同時に値を代入（**初期化**）したり、コンマで区切って複数の変数を同時に宣言したりすることができます。
36+
37+
上記の例では、変数`myBirthday`と`yourAge`に、それぞれ文字列`'2000/01/01'`と、数値`20`を代入しています。
38+
39+
## 変数の性質
40+
41+
変数は、最後に代入された値のみを保持する性質があります。
42+
43+
```js
44+
let mysteriousNumber = 0;
45+
mysteriousNumber = 1; mysteriousNumber = 2;
46+
document.write(mysteriousNumber);
47+
```
48+
49+
変数`mysteriousNumber`は3回代入されていますが、最後に代入された`2`が表示されます。
50+
51+
以下の場合はどうでしょうか。
52+
53+
```js
54+
let price = 100;
55+
price = price / 2;
56+
document.write(price);
57+
```
58+
59+
`price = price / 2`はどう解釈されるべきなのでしょうか。演算子の優先順位を考えれば良いですね。
60+
61+
`=`（代入演算子）は非常に優先順位の低い演算子です。このため、`/`（除算演算子）の部分が先に評価されます。`price = price / 2`、`price = 100 / 2`、`price = 50`のような順番で計算が進められ、最終的に`price`は`50`となります。
62+
63+
## 定数
64+
65+
`const`キーワードを用いると、**定数**を宣言することができます。定数は宣言時のみ値を決定することができ、再代入が許されません。
66+
67+
```js
68+
const taxRatio = 1.1;
69+
// ↓許されない
70+
// taxRatio = 1.2;
71+
```
72+
73+
:::tip
74+
JavaScriptでは、`const`を用いた定数宣言が`let`よりも圧倒的に多いです。これは、`const`を用いて宣言された定数は宣言文のみからその値を知ることができるのに対し、`let`を用いて宣言された変数はその代入の過程を都度追っていかなければならないためです。
75+
:::

‎docs/day02/06.md‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
---
2+
title: 論理値と論理演算子
3+
---
4+
5+
JavaScriptで利用できる「値」として、文字列と数値を扱いました。JavaScriptでは他に、**論理値**と呼ばれる、「正しいか、正しくないか」を表すための値の種類が存在します。
6+
7+
論理値は、`true`（真）または`false`（偽）の２つだけです。通常の値ですので、変数に代入したり、計算することも可能です。
8+
9+
## 論理演算子
10+
11+
```js
12+
const isMonsterBig = true;
13+
const isMonsterSmall = !true; // false
14+
const isHunterStrong = false;
15+
const shouldEscape = !isHunterStrong && isMonsterBig; // true
16+
const shouldFight = isHunterStrong || isMonsterSmall; // false
17+
```
18+
19+
論理値に対してよく使用される演算子に、`!`、`&&`、`||`があります。
20+
21+
`!`は**単項演算子**の一種で、作用する値の`true`と`false`を反転させます。`&&`は両辺が共に`true`のとき`true`、`||`は両辺のいずれかが`true`のとき`true`になります。
22+
23+
:::tip
24+
論理値が代入されている変数は、通常`is`や`can`、`should`などの単語を先頭に置き、Yes / No疑問文と同様の語順をとる場合が多いです。現在形の動詞を用いる場合は、三人称単数とします（`userExists`等）。
25+
:::
26+
27+
## 比較演算子
28+
29+
比較演算子を用いると、複数の値を比較して、その結果の論理値を得ることができます。
30+
31+
```js
32+
const age = 15;
33+
const height = 155;
34+
const isFourteen = age === 14; // false
35+
const isNotFourteen = age !== 14; // true
36+
const isChild = age < 20; // true
37+
const canRideRollerCoasters = age >= 10 && height >= 140; // true
38+
```
39+
40+
`===`は両辺が等しいとき、`!==`は両辺が等しくないときに`true`となります。`<`や`>=`などは見ての通りです。なお、`&&`や`||`よりも比較演算子の方が優先度が高いため、複数の条件を「かつ」「または」などで組み合わせることは容易です。
41+
42+
:::danger
43+
`=`は比較演算子ではありません。常に代入演算子です。
44+
```
45+
let age = 15;
46+
let isTwenty = age = 20;
47+
```
48+
上記のプログラムの2行目において、まずは`age = 20`の部分が評価され、`age`に`20`が代入されます。実は、代入演算子の式の値は右辺そのままの値です。そのため、このプログラムは最終的に`let isTwenty = 20`となり、定数`isTwenty`には論理値ではなくただの数値である`20`が代入されてしまいます。
49+
:::

‎docs/day02/07.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
title: 制御構造
3+
---
4+
5+
## if文
6+
7+
条件式が`true`のとき続く処理を実行します。
8+
9+
```js
10+
const age = 18;
11+
if (age >= 20) {
12+
document.write('大人です。');
13+
} else {
14+
document.write('子供です。');
15+
}
16+
```

0 commit comments

Comments
 (0)