Skip to content

Commit 91f3adc

Browse files
chvmvdchvmvd
committed
Merge branch 'master' into rewrite-between-html-and-if-statement-final
2 parents 98007d7 + 8e97e3b commit 91f3adc

File tree

285 files changed

+4291
-5397
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

285 files changed

+4291
-5397
lines changed

‎docs/1-trial-session/01-get-started/index.md‎

Lines changed: 37 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,52 @@
22
title: はじめての Web 開発
33
---
44

5-
import installVscodeVideo from "./install-vscode.mp4";
5+
import Tabs from '@theme/Tabs';
6+
import TabItem from '@theme/TabItem';
7+
import installChromeOnMacVideo from "./install-chrome-on-mac.mp4";
8+
import installChromeOnWindowsVideo from "./install-chrome-on-windows.mp4";
9+
import installVscodeOnMacVideo from "./install-vscode-on-mac.mp4";
10+
import installVscodeOnWindowsVideo from "./install-vscode-on-windows.mp4";
611
import createFolderVideo from "./create-folder.mp4";
712
import openFolderVideo from "./open-folder.mp4";
813

14+
## Google Chrome のインストール
15+
16+
**Google Chrome** は、Google 社が開発するウェブブラウザです。現在多くの人に使われています。他のウェブブラウザを使うことも出来ますが、この教材では Google Chrome の使用を前提として話を進めていきます。
17+
18+
Google Chrome は、[公式サイト](https://www.google.com/intl/ja_jp/chrome/)からインストールできます。まだインストールが終わっていない場合はインストールしておきましょう。
19+
20+
<Tabs groupId="os">
21+
<TabItem value="mac" label="macOS">
22+
23+
<video src={installChromeOnMacVideo} controls />
24+
25+
</TabItem>
26+
<TabItem value="win" label="Windows">
27+
28+
<video src={installChromeOnWindowsVideo} controls />
29+
30+
</TabItem>
31+
</Tabs>
32+
933
## Visual Studio Code のインストール
1034

1135
**Visual Studio Code** (以下 VS Code) は、Microsoft 社が開発するテキストエディタです。多くの開発者に使用されています。
1236

1337
Visual Studio Code は、[公式サイト](https://code.visualstudio.com)からインストールできます。まだインストールが終わっていない場合はインストールしておきましょう。
1438

15-
<video src={installVscodeVideo} controls />
39+
<Tabs groupId="os">
40+
<TabItem value="mac" label="macOS">
41+
42+
<video src={installVscodeOnMacVideo} controls />
43+
44+
</TabItem>
45+
<TabItem value="win" label="Windows">
46+
47+
<video src={installVscodeOnWindowsVideo} controls />
48+
49+
</TabItem>
50+
</Tabs>
1651

1752
## プロジェクトを格納するフォルダを作成する
1853

‎docs/1-trial-session/01-get-started/install-chrome-on-mac.mp4‎

6.42 MB
Binary file not shown.

‎docs/1-trial-session/01-get-started/install-chrome-on-windows.mp4‎

5.15 MB
Binary file not shown.

‎docs/1-trial-session/01-get-started/install-vscode-on-mac.mp4‎

6.57 MB
Binary file not shown.

‎docs/1-trial-session/01-get-started/install-vscode-on-windows.mp4‎

6.99 MB
Binary file not shown.

‎docs/1-trial-session/02-html/index.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ Web 開発に必ず用いられる言語があります。<Term type="html" stro
1515

1616
## <Term type="html">HTML</Term> を書き始める
1717

18-
エディタの画面左端には、ファイル一覧が表示されています。新しいファイルを作成して、`index.html` と名付けましょう。ファイルの中身を次のようにした後、保存します。保存にはショートカットキー ( `command / ctrl + S` ) を用いてください。
18+
VS Code の画面左端には、ファイル一覧が表示されています。新しいファイルを作成して、`index.html` と名付けましょう。ファイルの中身を次のようにした後、保存します。保存にはショートカットキー ( `command / Ctrl + S` ) を用いてください。
1919

2020
```html title="index.html"
2121
<!doctype html>
@@ -64,7 +64,7 @@ VS Code 上で作成したファイルは `index.html` でした。しかしな
6464

6565
<!-- prettier-ignore -->
6666
```html title="index.html"
67-
<!DOCTYPE html>
67+
<!doctype html>
6868
<html lang="ja">
6969
<head>
7070
<meta charset="utf-8" />
@@ -76,13 +76,13 @@ VS Code 上で作成したファイルは `index.html` でした。しかしな
7676
</html>
7777
```
7878

79-
繰り返しになりますが、<Term type="html">HTML</Term> を編集したら、`command / ctrl + S` キーを押してファイルを保存します。ファイル名の横に表示されている丸い記号が消えたら保存が完了しています。
79+
繰り返しになりますが、<Term type="html">HTML</Term> を編集したら、`command / Ctrl + S` キーを押してファイルを保存します。ファイル名の横に表示されている丸い記号が消えたら保存が完了しています。
8080

8181
![ファイルを保存する](./save-file.png)
8282

8383
:::tip ショートカットキー
8484

85-
ショートカットキーがうまく押せませんか？ `command / ctrl + S` はよく、「`command (macOS)` または `ctrl (Windows)` キーと `S` キーを同時に押す」と言われますが、実は同時に押すと半分くらいの確率で失敗します。`command / ctrl` キーを押した後、キーから指を離す前に `S` キーを押しましょう。
85+
ショートカットキーがうまく押せませんか？ `command / Ctrl + S` はよく、「`command (macOS)` または `Ctrl (Windows)` キーと `S` キーを同時に押す」と言われますが、実は同時に押すと半分くらいの確率で失敗します。`command / Ctrl` キーを押した後、キーから指を離す前に `S` キーを押しましょう。
8686

8787
ショートカットキーを使いこなせるようになると、パソコンの操作速度が飛躍的に上昇します。慣れている人がパソコンを操作しているのを見たら、ぜひ後ろから覗き込んでみましょう。便利そうなショートカットキーを使っている人がいたら身に着けるようにすると良いです。
8888

‎docs/1-trial-session/05-variables/index.md‎

Lines changed: 12 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,11 @@ let myGreatName = "Becky Jones";
1818
document.write(myGreatName);
1919
```
2020

21-
`let` は、<Term type="javascriptVariable">変数</Term>を<Term type="javascriptDeclaration">宣言</Term>するためのキーワードです。 1 行目では、`myGreatName` という名前の<Term type="javascriptVariable">変数</Term>を<Term type="javascriptDeclaration">宣言</Term>し、そこに`"Becky Jones"` という文字列を保存しています。<Term type="javascriptVariable">変数</Term>に値を保存する操作を<Term strong type="javascriptAssignment">代入</Term>と呼びます。<Term type="javascriptAssignment">代入</Term>をするときには`=` の記号を用います。左側に<Term type="javascriptVariable">変数</Term>、右側に保存する<Term type="javascriptValue">値</Term>を指定することで<Term type="javascriptAssignment">代入</Term>を行います。
21+
`let` は、<Term type="javascriptVariable">変数</Term>を<Term type="javascriptDeclaration">宣言</Term>するためのキーワードです。1 行目では、`myGreatName` という名前の<Term type="javascriptVariable">変数</Term>を<Term type="javascriptDeclaration">宣言</Term>し、そこに文字列 `"Becky Jones"` を<Term strong type="javascriptAssignment">代入</Term>しています。`=` は<Term type="javascriptAssignment">代入</Term>を表し、左側に指定した<Term type="javascriptVariable">変数</Term>に対し、右側に指定された<Term type="javascriptValue">値</Term>を<Term type="javascriptAssignment">代入</Term>します。
2222

2323
2 行目では、<Term type="javascriptVariable">変数</Term> `myGreatName` が<Term type="javascriptEvaluation">評価</Term>され、<Term type="javascriptAssignment">代入</Term>されていた<Term type="javascriptString">文字列</Term><Term type="javascriptValue">値</Term> `"Becky Jones"` が画面に表示されます。
2424

25-
<p><Term type="javascriptVariable">変数</Term>を<Term type="javascriptDeclaration">宣言</Term>するキーワードには、<code>let</code> 以外にも<code>const</code> があります。記法自体は<code>let</code> と同様です。</p>
25+
<p><Term type="javascriptVariable">変数</Term>を<Term type="javascriptDeclaration">宣言</Term>するキーワードには、<code>let</code> 以外にも <code>const</code> があります。記法自体は<code>let</code> と同様ですが、少し違いがあります。違いについては、次の節で説明します。</p>
2626

2727
```javascript title="script.js"
2828
const myGreatName = "Becky Jones";
@@ -41,7 +41,7 @@ document.write(myGreatName);
4141

4242
:::tip
4343

44-
<Term type="javascriptVariable">変数</Term>は適切に命名することが大切です。以下の例を見てみましょう。
44+
<Term type="javascriptVariable">変数</Term>に適切な命名をすることは非常に重要です。以下の例を見てみましょう。
4545

4646
```javascript
4747
const a = 500;
@@ -52,18 +52,18 @@ document.write(c);
5252

5353
```javascript
5454
const itemPrice = 500;
55-
const countItem = 3;
56-
const totalPayment = itemPrice * countItem;
57-
document.write(totalPayment);
55+
const itemCount = 3;
56+
const totalPrice = itemPrice * itemCount;
57+
document.write(totalPrice);
5858
```
5959

60-
一つ目のコードでは、`a` `b` `c` に何が保存されているのかが分かりにくいですね。二つ目のコードでは変数名がその変数の説明も兼ねているので、保存されている値が分かりやすいと思います。プログラムを書いているときには`a` に何が入っていたか覚えていても、後から読み返すときには忘れていることが多いです。コードを読み返すときや他人が読むときに備え、わかりやすい変数の命名を心がけましょう。
60+
前者と後者のコードは、同じ計算を行っています。しかし、前者のコードでは `a` や `b`、`c` という変数名が何を表しているのかがわかりません。一方、後者のコードでは、`itemPrice` や `itemCount`、`totalPrice` という変数名から、どのような計算を行っているのかがすぐに分かります。共同で開発を行うときや、後からコードを読み返すときに、変数名が適切に付けられていると、コードの理解が容易になります。
6161

6262
:::
6363

64-
## <Term type="javascriptVariable">変数</Term>の再代入
64+
## <Term type="javascriptVariable">変数</Term>への再<Term type="javascriptAssignment">代入</Term>
6565

66-
`let` と`const` の大きな違いは、再<Term type="javascriptAssignment">代入</Term>ができるかどうかです。`let` では再<Term type="javascriptAssignment">代入</Term>が可能ですが、`const` ではできません。
66+
`let` と `const` の大きな違いは、再<Term type="javascriptAssignment">代入</Term>が可能かどうかです。`let` で<Term type="javascriptDeclaration">宣言</Term>された<Term type="javascriptVariable">変数</Term>には再<Term type="javascriptAssignment">代入</Term>が可能ですが、`const` で<Term type="javascriptDeclaration">宣言</Term>された<Term type="javascriptVariable">変数</Term>にはできません。次の例を見てみましょう。
6767

6868
```javascript title="script.js"
6969
let mysteriousNumber = 0;
@@ -72,15 +72,11 @@ mysteriousNumber = 2;
7272
document.write(mysteriousNumber); // 2
7373
```
7474

75-
上の例では、<Term type="javascriptVariable">変数</Term>が`let` で<Term type="javascriptDeclaration">宣言</Term>され、<Term type="javascriptVariable">変数</Term>の<Term type="javascriptValue">値</Term>が次々と変化しています。このように、<Term type="javascriptVariable">変数</Term>に新たな<Term type="javascriptValue">値</Term>を<Term type="javascriptAssignment">代入</Term>することを再<Term type="javascriptAssignment">代入</Term>と呼びます。
75+
<p><Term type="javascriptVariable">変数</Term>には、最後に<Term type="javascriptAssignment">代入</Term>された<Term type="javascriptValue">値</Term>のみを保持する性質があります。そのため、<Term type="javascriptVariable">変数</Term> <code>mysteriousNumber</code> は 3 回<Term type="javascriptAssignment">代入</Term>が行われていますが、最後に<Term type="javascriptAssignment">代入</Term>された <code> 2</code> が表示されます。</p>
7676

77-
`const` で<Term type="javascriptDeclaration">宣言</Term>された<Term type="javascriptVariable">変数</Term>は、再<Term type="javascriptAssignment">代入</Term>ができません。すなわち、<Term type="javascriptValue">値</Term>の書き換えができません。上記のコードの`let` を`const` に置き換えると、エラーが発生します。
77+
一方、`const` で<Term type="javascriptDeclaration">宣言</Term>された<Term type="javascriptVariable">変数</Term>には、再<Term type="javascriptAssignment">代入</Term>ができません。そのため、上記のコードの `let` を `const` に置き換えることはできません。
7878

79-
`const` で<Term type="javascriptVariable">変数</Term>を<Term type="javascriptDeclaration">宣言</Term>した場合も、最後に<Term type="javascriptAssignment">代入</Term>された<Term type="javascriptValue">値</Term>が保存されます。`const` は再<Term type="javascriptAssignment">代入</Term>ができないので、実質的には<Term type="javascriptDeclaration">宣言</Term>時の<Term type="javascriptValue">値</Term>が保存されるということになります。
80-
81-
<Term type="javascriptVariable">変数</Term>には最後に<Term type="javascriptAssignment">代入</Term>された<Term type="javascriptValue">値</Term>のみを保存する性質があるので、上のコードの例では<Term type="javascriptVariable">変数</Term> <code>mysteriousNumber</code> に最後に<Term type="javascriptAssignment">代入</Term>された<code>2</code> が表示されます。
82-
83-
`let` を使った<Term type="javascriptVariable">変数</Term>の<Term type="javascriptDeclaration">宣言</Term>について、もう少し見てみましょう。
79+
さらに、再<Term type="javascriptAssignment">代入</Term>について詳しく見てみましょう。それでは、以下の場合はどうでしょうか。
8480

8581
```javascript title="script.js"
8682
let price = 100;
@@ -93,26 +89,3 @@ document.write(price);
9389
<p><Term type="javascriptAssignment">代入</Term><Term type="javascriptOperator">演算子</Term>は、まず右辺の<Term type="javascriptExpression">式</Term>を<Term type="javascriptEvaluation">評価</Term>します。これにより、右辺は <code>100 / 2</code> となります。よって、最終的に<Term type="javascriptVariable">変数</Term> <code>price</code> の<Term type="javascriptValue">値</Term>は <code>50</code> となり、これは <code>price</code> を半分にする操作に対応します。</p>
9490

9591
![変数の再代入](./reassignment-evaluation.png)
96-
97-
## constとletの用途
98-
99-
`const` と`let` は用途によって使い分けがあります。基本的には、意図せず<Term type="javascriptValue">値</Term>を書き換えてしまうことを防ぐために`const` が使われます。
100-
101-
```javascript
102-
const mysteriousNumber = 1;
103-
/* めちゃめちゃ長いコード
104-
--------------
105-
--------------
106-
--------------
107-
--------------
108-
めちゃめちゃ長いコード */
109-
document.write(mysteriousNumber);
110-
```
111-
112-
`mysteriousNumber` は何を表しているのかを読み取る場合を考えましょう。もしこれを`let` で<Term type="javascriptDeclaration">宣言</Term>した場合、`mysteriousNumber` は`/* めちゃめちゃ長いコード */` の中で書き換えられているかもしれません。そのため、変数の<Term type="javascriptValue">値</Term>を読み取るためにはコード全体を読み返す必要があります。しかし、このように`const` を用いることで`mysteriousNumber` の<Term type="javascriptValue">値</Term>は一意に決まります。`const` を使用できる場面では`const` を使用しましょう。
113-
114-
:::info
115-
116-
実際に開発をする場面では、`const` を使う場面がかなり多いです。この教材内でも基本的には`const` が用いられています。
117-
118-
:::

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

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,11 @@ import ViewSource from "@site/src/components/ViewSource";
1818
<p><Term type="javascriptBoolean">論理値</Term>に対して適用できる<Term type="javascriptOperator">演算子</Term>が存在します。</p>
1919

2020
```javascript
21-
let isMonsterBig = true;
22-
let isMonsterSmall = !true; // false
23-
let isHunterStrong = false;
24-
let shouldEscape = !isHunterStrong && isMonsterBig; // true
25-
let shouldFight = isHunterStrong || isMonsterSmall; // false
21+
const isMonsterBig = true;
22+
const isMonsterSmall = !true; // false
23+
const isHunterStrong = false;
24+
const shouldEscape = !isHunterStrong && isMonsterBig; // true
25+
const shouldFight = isHunterStrong || isMonsterSmall; // false
2626
```
2727

2828
詳細は以下の通りです。 `!` のみが作用する対象を 1 つしかとらないことに注意してください。
@@ -38,12 +38,12 @@ let shouldFight = isHunterStrong || isMonsterSmall; // false
3838
比較<Term type="javascriptOperator">演算子</Term>は、複数の<Term type="javascriptValue">値</Term>を比較して、単一の<Term type="javascriptBoolean">論理値</Term>を得ます。
3939

4040
```javascript
41-
let age = 15;
42-
let height = 155;
43-
let isFourteen = age === 14; // false
44-
let isNotFourteen = age !== 14; // true
45-
let isChild = age < 20; // true
46-
let canRideRollerCoasters = age >= 10 && height >= 140; // true
41+
const age = 15;
42+
const height = 155;
43+
const isFourteen = age === 14; // false
44+
const isNotFourteen = age !== 14; // true
45+
const isChild = age < 20; // true
46+
const canRideRollerCoasters = age >= 10 && height >= 140; // true
4747
```
4848

4949
各<Term type="javascriptOperator">演算子</Term>の詳細は、次の通りです。

‎docs/1-trial-session/07-if-statement/_samples/the-right-to-vote/script.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
let age = 20;
1+
const age = 20;
22
if (age < 18) {
33
document.write("選挙権はありません");
44
} else if (age < 25) {

0 commit comments

Comments
 (0)