WEBVTT

1
00:00:00.000 --> 00:00:01.063
こんにちは。

2
00:00:01.063 --> 00:00:04.959
ジャバスクリプト入門、実践連載の第一回です。

3
00:00:04.959 --> 00:00:08.855
今回のテーマは、実行する方法と基本文法です。

4
00:00:08.855 --> 00:00:17.179
ジャバスクリプトには、ブラウザーで動かす方法と、ノードジェーエスで動かす方法の二つがあります。

5
00:00:17.179 --> 00:00:23.023
同じ言語でも、起動の仕方、結果を見る場所、使える機能が異なります。

6
00:00:23.023 --> 00:00:32.233
この動画では、二つの環境を並べて体験しながら、変数、型、条件分岐、繰り返しといった文法の土台を学びます。

7
00:00:32.233 --> 00:00:38.608
まずは、文法は共通で、周りの機能が違う、という全体像をつかんでください。

8
00:00:38.608 --> 00:00:48.172
どちらか一方だけでも学べますが、両方を比べることで、言語そのものと道具の役割がはっきり分かれて見えてきます。

9
00:00:48.172 --> 00:00:49.669
最初はブラウザーです。

10
00:00:49.669 --> 00:00:55.521
クロームなどのブラウザーには、ジャバスクリプトを実行する仕組みが最初から入っています。

11
00:00:55.521 --> 00:00:59.740
新しいタブを開き、開発者ツールのコンソールを表示してください。

12
00:00:59.740 --> 00:01:06.273
ウィンドウズではコントロールとシフトとジェイ、マックではコマンドとオプションとジェイが近道です。

13
00:01:06.273 --> 00:01:13.350
コンソールに、コンソール・ログと書いた一行を入力してエンターを押すと、メッセージがその場で表示されます。

14
00:01:13.350 --> 00:01:19.066
下にアンディファインドと出ることがありますが、これは戻り値で、エラーではありません。

15
00:01:19.066 --> 00:01:23.694
短いコードをその場で試せる手軽さが、ブラウザーで学ぶ最初の強みです。

16
00:01:23.694 --> 00:01:26.960
失敗してもページを再読み込みすればやり直せます。

17
00:01:26.960 --> 00:01:30.208
繰り返し実行するコードは、ファイルに保存します。

18
00:01:30.208 --> 00:01:39.004
練習用フォルダーに、エイチティーエムエルのファイルと、ベーシックス・ジェーエスというジャバスクリプトファイルを同じ場所に置きます。

19
00:01:39.004 --> 00:01:44.824
エイチティーエムエル側では、スクリプトタグのエスアールシーでそのファイルを指定します。

20
00:01:44.824 --> 00:01:49.425
ディファーを付けると、エイチティーエムエルの読み込みが終わったあとに実行されるため、

21
00:01:49.425 --> 00:01:54.026
要素が見つからないといった事故を防ぎやすくなります。

22
00:01:54.026 --> 00:01:58.763
ファイルを開いて再読み込みし、コンソールにメッセージが出れば成功です。

23
00:01:58.763 --> 00:02:03.229
ファイルに分ける習慣は、この先コードが長くなるほど大切になります。

24
00:02:03.229 --> 00:02:06.612
名前と保存場所をそろえることも忘れないでください。

25
00:02:06.612 --> 00:02:08.708
次はノードジェーエスです。

26
00:02:08.708 --> 00:02:13.302
これは、ブラウザーの外、パソコンやサーバーの上でジャバスクリプトを動かすための実行環境で、

27
00:02:13.302 --> 00:02:17.897
別の言語ではありません。

28
00:02:17.897 --> 00:02:28.053
公式サイトからサポート期間の長いエルティーエス版を入れ、ターミナルでノード・バージョンと打って番号が表示されれば準備完了です。

29
00:02:28.053 --> 00:02:36.113
あとは、ノード、スペース、ファイル名、と実行するだけで、先ほどと同じファイルがターミナルで動きます。

30
00:02:36.113 --> 00:02:41.594
引数なしでノードと打てば、短い式を対話的に試せるレプルにも入れます。

31
00:02:41.594 --> 00:02:49.816
コードを変えたら、保存してからもう一度実行する、この繰り返しがノードジェーエスでの基本動作になります。

32
00:02:49.816 --> 00:02:51.526
ここからは文法です。

33
00:02:51.526 --> 00:02:58.710
変数は、再代入しないものはコンスト、後から変えるものはレットで宣言するのが基本です。

34
00:02:58.710 --> 00:03:06.065
コンストは再代入を禁止しますが、オブジェクトの中身の変更まで止めるものではありません。

35
00:03:06.065 --> 00:03:07.092
次に型です。

36
00:03:07.092 --> 00:03:11.026
引用符で囲んだ文字の百と、数値の百は別物です。

37
00:03:11.026 --> 00:03:19.578
プラスは文字列をつなぐ働きもするため、そのまま足すと百二十ではなく、文字がつながった結果になります。

38
00:03:19.578 --> 00:03:24.880
計算したいときは、ナンバーで数値に変換してから足してください。

39
00:03:24.880 --> 00:03:29.328
比較は、型を自動変換しない厳密な比較を基本にします。

40
00:03:29.328 --> 00:03:38.564
型を意識する習慣は、計算がおかしい、文字がつながってしまった、といった初期のトラブルの多くを防いでくれます。

41
00:03:38.564 --> 00:03:40.932
記事の中心となる例を見ます。

42
00:03:40.932 --> 00:03:47.868
三科目の点数を配列に入れ、合格点を七十点として、一つずつ取り出しながら判定します。

43
00:03:47.868 --> 00:03:53.281
八十点と九十二点が合格、六十五点は復習となり、合格数は二つです。

44
00:03:53.281 --> 00:03:59.201
さらに三つの点数を合計して科目数で割ると、平均点は七十九点になります。

45
00:03:59.201 --> 00:04:07.659
この一つのファイルは、ブラウザーでもノードジェーエスでも、変更なしに同じ順序で同じ結果を表示します。

46
00:04:07.659 --> 00:04:12.396
文法が共通であることを、自分の手で確かめてみてください。

47
00:04:12.396 --> 00:04:17.639
表示用の文字列と、計算に使う数値を分けて考えることも大切です。

48
00:04:17.639 --> 00:04:24.744
合格点を九十点に変えると結果がどう変わるか、予想してから実行する練習もおすすめです。

49
00:04:24.744 --> 00:04:27.249
コードの読み方を確認します。

50
00:04:27.249 --> 00:04:34.227
イフは、条件が正しいときと、そうでないときで、実行する処理を分ける仕組みです。

51
00:04:34.227 --> 00:04:39.237
点数が合格点以上なら合格側、それ以外は復習側が動きます。

52
00:04:39.237 --> 00:04:47.646
ここで注意したいのが、イコール一つは値を入れる代入、イコール三つは比べる比較だという違いです。

53
00:04:47.646 --> 00:04:55.519
条件式の中でうっかり代入してしまう間違いはとても多いので、書いたあとに見直してください。

54
00:04:55.519 --> 00:05:01.065
フォー・オブは、配列の要素を先頭から順に取り出す繰り返しです。

55
00:05:01.065 --> 00:05:07.149
一つ取り出して判定する、という流れを、最後の要素まで自動で続けます。

56
00:05:07.149 --> 00:05:12.159
プラスイコールは、今の値に加えて保存し直す省略記法です。

57
00:05:12.159 --> 00:05:15.916
繰り返しの中で数える場面によく登場します。

58
00:05:15.916 --> 00:05:19.468
初心者がつまずきやすい、空の値と変換です。

59
00:05:19.468 --> 00:05:23.866
ナルは、値がないことを自分で明示するときに使います。

60
00:05:23.866 --> 00:05:29.110
アンディファインドは、まだ値が設定されていないときに現れます。

61
00:05:29.110 --> 00:05:36.046
ナンは、数値として計算できなかった結果で、自分自身とも等しくならない特殊な値です。

62
00:05:36.046 --> 00:05:44.673
また、空の文字列をナンバーに変換するとゼロになってしまうため、未入力をゼロ点と誤解する危険があります。

63
00:05:44.673 --> 00:05:50.339
記事の例では、まず空かどうかを確認し、変換後に範囲内かどうかを確かめ、問題があればエラーを投げて、

64
00:05:50.339 --> 00:05:56.006
トライとキャッチで受け止めています。

65
00:05:56.006 --> 00:05:59.728
入力をそのまま信じず、変換の前後で確かめる。

66
00:05:59.728 --> 00:06:05.648
この考え方は、フォームや外部データなど扱う場面でもそのまま役立ちます。

67
00:06:05.648 --> 00:06:07.930
環境ごとの違いも体験しましょう。

68
00:06:07.930 --> 00:06:12.636
ブラウザー専用の例は、ボタンを押すと画面の文章が変わる仕組みです。

69
00:06:12.636 --> 00:06:17.556
ドキュメントのクエリーセレクターでボタンと文章の要素を選び、アドイベントリスナーで、

70
00:06:17.556 --> 00:06:22.477
クリックされたときに文章を書き換える処理を登録します。

71
00:06:22.477 --> 00:06:25.471
画面を直接扱えるのがブラウザーの強みです。

72
00:06:25.471 --> 00:06:32.032
ただし、このコードをノードジェーエスで実行すると、ドキュメントがないというエラーになります。

73
00:06:32.032 --> 00:06:35.597
文法の問題ではなく、実行環境が違うことが原因です。

74
00:06:35.597 --> 00:06:40.161
詳しいイベントの扱いは、後のドムとイベントの回で改めて学びます。

75
00:06:40.161 --> 00:06:42.300
ここでは体験できれば十分です。

76
00:06:42.300 --> 00:06:45.091
反対に、ノードジェーエス専用の例です。

77
00:06:45.091 --> 00:06:51.850
ターミナルでファイル名の後ろに名前を付けて実行すると、その値をプログラムの中で受け取れます。

78
00:06:51.850 --> 00:06:54.053
これがコマンドライン引数です。

79
00:06:54.053 --> 00:06:57.653
名前を省略した場合は、値が未設定のときに予備の言葉へ置き換える書き方を使い、

80
00:06:57.653 --> 00:07:01.252
ゲストと表示させます。

81
00:07:01.252 --> 00:07:07.716
このプロセスという仕組みはノードジェーエスの機能なので、通常のブラウザーでは使えません。

82
00:07:07.716 --> 00:07:11.463
先ほどのドキュメントと合わせて、共通の文法と、環境固有の機能を分けて覚えることが、

83
00:07:11.463 --> 00:07:15.209
混乱しないコツです。

84
00:07:15.209 --> 00:07:20.057
引数は、プログラムを書き換えずに動きを変えられる便利な仕組みです。

85
00:07:20.057 --> 00:07:22.408
自動処理などでもよく使われます。

86
00:07:22.408 --> 00:07:25.002
最後に、動かないときの確認です。

87
00:07:25.002 --> 00:07:32.136
ノードが見つからないと言われたら、インストールと、ターミナルを開き直したかを確認します。

88
00:07:32.136 --> 00:07:39.595
ファイルが見つからないと言われたら、今いるフォルダーとファイル名、保存済みかどうかを見ます。

89
00:07:39.595 --> 00:07:49.323
結果が出ないときは、コンソール・ログの行き先が、ページ本文ではなくコンソールやターミナルであることを思い出してください。

90
00:07:49.323 --> 00:07:50.296
まとめです。

91
00:07:50.296 --> 00:07:53.052
文法は共通、機能は環境ごとに違う。

92
00:07:53.052 --> 00:07:59.052
この一文を土台に、次回は関数とスコープで、処理を再利用する方法を学びます。

93
00:07:59.052 --> 00:08:01.159
これで第一回を終わります。

94
00:08:01.159 --> 00:08:08.780
エラー文は怖がらず、どの環境で、何が定義されていないのかを一行ずつ読むことが上達への近道です。