.. _xx_2_jsbasic:

2. Javascript の基本
====================

2.0 目的
--------

ここでは、サンプルプログラムは :ref:`sample_code` に従って、
準備してあるものとする。

:ref:`vscode` で説明したデバッグを操作を行いながら、
JavaScript の基本を学ぶ。

VS Code で以下フォルダを開いておく。

::

  PC > デスクトップ > program > chap02

以後各章では、
特に説明しないが、
そこに示されたサンプルプログラムを表示/エクスプローラで開き、
また表示/デバッグでそのプログラムを選んでおくものとする。


2.1 Hello world!
----------------

.. literalinclude:: ../program/chap02/program02_01.js
  :caption: program02_01.js
  :language: javascript
  :linenos:


実行すると、デバッグコンソールには下記のように出力される。

.. code-block:: javascript
  :caption: デバッグコンソール 
  :linenos:

   Hello World!

では、program02-01.js を見ていこう。

行1はコメントである。
コメントはプログラムを読む人のための、ただの説明文であり、
コンピュータは何もせず読み飛ばす。
JavaScriptでは // (スラッシュ2つ)の後の文字はコメントとみなされる。

行2は "Hello Wrold!" という文字列を出力する。
console.log はデバッグコンソールに出力する関数であり、
このようにして、デバッグコンソールに Hello World! と出力される。

2.2 文字列とコメントの改行
--------------------------

.. literalinclude:: ../program/chap02/program02_02.js
  :caption: program02_02.js
  :language: javascript
  :linenos:

実行すると、デバッグコンソールに下記のように出力する。

.. code-block:: javascript
  :caption: デバッグコンソール
  :linenos:

  Line 1
  Line 2
  This is a pen.
  One Line.

では、program02-02.js を見ていこう。

行2では文字列中、Line 1とLine 2の間に \\n がある。

.. literalinclude:: ../program/chap02/program02_02.js
  :caption: program02_02.js
  :language: javascript
  :lines: 2-2
  :lineno-start: 2


この \\n は文字列中の改行を表す。
文字列中に改行が含まれることにより、
デバッグコンソールに出力する時にLine 1とLine 2の間で改行される。

またこの \\ はバックスラッシュ( :ref:`sx_backslash` )と呼ぶ。

日本語キーボードでは￥(円マーク)キーを押しても、\(バックスラッシュ)が入力される。


たとえば、

::

  Desktop￥program

というパスは

::

  Desktop\program

と入力することになる。

行3～行4では、 console.log の途中で改行しているが、出力では改行されない。

プログラム中空白が置けるところでは、改行してもよいが、それは無視される。
プログラムコードが改行しているだけで、出力に改行が含まれないから、
デバッグコンソールの出力では改行されない。

.. literalinclude:: ../program/chap02/program02_02.js
  :caption: program02_02.js
  :language: javascript
  :lines: 3-4
  :lineno-start: 3


行5～行8では、\/\* と \*\/ で囲まれたコメントがある。
この間コメント中に改行があってもコメントが続いているとみなされる。
これに対し \/\/ で始まるコメントでは、その行の終わりがコメントの終わりになる。

.. literalinclude:: ../program/chap02/program02_02.js
  :caption: program02_02.js
  :language: javascript
  :lines: 5-8
  :lineno-start: 5

したがって、プログラムは途中改行されているが、出力は以下のように1行になる。

.. code-block:: javascript
  :caption: デバッグコンソール 
  :linenos:

  One Line.


2.3 変数と代入
--------------

2.3.1 変数
^^^^^^^^^^

.. literalinclude:: ../program/chap02/program02_03.js
  :caption: program02_03.js
  :language: javascript
  :linenos:

program02_03.js を見てみよう。

行3に
:ref:`ブレークポイント<break_point>` を設定し、
x,y,zを :ref:`ウオッチ式<watch_expression>` に設定し、
ブレークポイントまで実行してみよう。

 

行3で停止したら、
:ref:`シングルステップ<single_step>` 
で1行ずつ実行しながら、
:ref:`ウオッチ式<watch_expression>` 式をみてみよう。

行2は変数宣言である。

行2が実行された後のウオッチ式の値は undefined で、
変数の値が未定であることを示す。

実行開始前のウオッチ式は「無効」であり、
実行開始後、まだvarで変数宣言していない変数のウオッチ式は、
not available となる。

.. literalinclude:: ../program/chap02/program02_03.js
  :caption: program02_03.js
  :language: javascript
  :lines: 2
  :lineno-start: 2

2.3.2 代入
^^^^^^^^^^

行3は代入文で、代入は = で表す。

.. literalinclude:: ../program/chap02/program02_03.js
  :caption: program02_03.js
  :language: javascript
  :lines: 3
  :lineno-start: 3

プログラミングが初めての人は、ここで注意しよう。

この = は等しい、という意味ではない。
実際、代入前に左辺と右辺が等しい必要はない。数学における代入とも少し違う。
右辺の式を計算し、その結果で左辺の変数の値を書き換える。
英語では assign、日本語では代入、割当て、などと書くことが多いが、「上書きする」という説明が最も正確だろう。
つまり変数に格納されている値は、代入のたびに、新しい値で上書きされる。

行5の + で加算が行われ、z の値は 123 となる。

.. literalinclude:: ../program/chap02/program02_03.js
  :caption: program02_02.js
  :language: javascript
  :lines: 5-7
  :lineno-start: 5

.. code-block:: javascript
  :caption: デバッグコンソール 
  :linenos:

  x= 100 y= 23 z=123


2.3.3 変数名
^^^^^^^^^^^^

変数名は英文字で始まり英文字と数字からなる。
英文字の部分に $(ドルマーク)、_(下線)も使うことができる。


正しい変数名の例。::

  var x;                   // 1文字でもかまわない
  var long_name;           // 長い名前でも下線 _ を使ってもよい
  var veeeeeeeery_loooooooooong_naaaaaame; // かなり長い名前でもよい
  var $123;                // $も使用できる。2文字目以後は数字でもよい
  var o______o;            // 見かけは変でも、立派な変数名

誤った変数名の例。::

  var hen su;    // 変数名に空白は使えない
  var 123da;     // 最初の文字は英字でなければならない
  var b&w;       // 変数名に&は使えない
  var ｘ,ｙ,ｚ;  // 全角文字は使えない
  var ￥100;      // ￥(円マーク)は使えない。

正確には￥マークでなく\\(バックスラッシュ)なら使える場合もあるが
複雑なルールがあるので、当面は円マーク、バックスラッシュは
通常は変数名に使えない、と覚えておこう。

2.4 文字列とデータ型
--------------------

2.4.1 文字列
^^^^^^^^^^^^

そのまま :ref:`シングルステップ<single_step>` を行15まで実行すると、
:ref:`ウオッチ式<watch_expression>` が以下のようになる。

::

   x : "abc"
   y : "de"
   z : "abcde"

このような値を「文字列」という。

他のプログラミング言語では、
このように異なるタイプの値を代入するには、
文字列型と宣言した別の変数が必要になるが、
JavaScriptでは変数にどんな型の値も変数に代入できる。

また、変数宣言と同時に初期値を与えることもできる。

行2～行5を以下のように修正して実行してみよう。

.. literalinclude:: ../program/chap02/program02_03b.js
  :caption: program02_03.js
  :language: javascript
  :lines: 2-5
  :lineno-start: 2

2.4.2 データ型
^^^^^^^^^^^^^^

行13～行17はどう処理されるのだろうか。

.. literalinclude:: ../program/chap02/program02_03.js
  :caption: program02_03.js
  :language: javascript
  :lines: 13-17
  :lineno-start: 13

この行15は行5と同じであるが、結果は 10023 になる。

.. code-block:: javascript
  :caption: デバッグコンソール 
  :linenos:

  x= 100 y= 23 z=10023

このようになるのは、行13-行14で文字列が代入されているからである。

JavaScript では、
変数の値が数値であるか文字列であるかによって、
同じ 「+」という演算の意味が変化する。

また、他の多くのプログラミング言語のように、
変数宣言の最にデータ型を指定する必要はない。
同じ変数に、異なるデータ型の値を代入することができる。

2.5 代入の練習
--------------

この項目はプログラミングの初心者向けのアドバイスである。

プログラミングに習熟するには、
代入に慣れるよう少し務めることをお勧めする。

以下のプログラムを見てみよう。

.. literalinclude:: ../program/chap02/program02_05.js
  :caption: program02_05.js
  :language: javascript
  :linenos:

example1 と example2 を実行する前に x と y の値を推測してみよう。
実際に実行した結果とあっているだろうか。
どの程度敏速に推測できただろうか?

プログラムには代入が非常に多い。
多くの代入の結果をすばやく読みとることは難しい。
慣れてくれば、このようなプログラムを見てどのように変数の値が変わるかを一瞬に見てとれるようになる。
しかしそれは訓練によって上達するもので、
だれにとっても最初は難しい。

変数と代入をすばやく読み取れるようになると、
プログラムをすばやく理解できるようになる。
地図を読めれば旅行が楽しくなるのと同じ。
あるいは楽譜が読めれば音楽演奏が楽しくなるのと同じだ。

そこで、最初のうちは、疑問におもったらこまめに
:ref:`ウオッチ式<watch_expression>` と :ref:`シングルステップ<single_step>` で動作を確認することをお勧めする。

たとえば、行11～行16をみてみよう。

.. literalinclude:: ../program/chap02/program02_05.js
  :caption: program02_05.js
  :language: javascript
  :lines: 11-16
  :lineno-start: 11

であるが、行13では、

::

   x= 1234  y= 9876

となっているはずだが、行16では、

::

  x= 9876  y= 1234

と表示され、x と y の数値が交換されていることがわかる。

なぜ行13＋行15で x と y が交換されるか、式だけを見てもわかりにくい。
そのような場合は :ref:`シングルステップ<single_step>` 実行して、
各ステップ毎に値の変換を確認するとよい。

ステップ実行すると、

+----+----------+----------+
| 行 |    x     |    y     |
+----+----------+----------+
| 13 |   1234   |   9876   |
+----+----------+----------+
| 14 |  -8642   |   9876   |
+----+----------+----------+
| 15 |  -8642   |   1234   |
+----+----------+----------+
| 16 |   9876   |   1234   |
+----+----------+----------+

と変化していくことがわかる。

行15で y が 1234 となっている。これはもともとの x の値だ。
そこで、行13と行14の計算を考えると、

.. literalinclude:: ../program/chap02/program02_05.js
  :caption: program02_05.js
  :language: javascript
  :lines: 13-14
  :lineno-start: 13
  
であり、結果として y の値は、

::

  9876 + (1234 - 9876)

という計算だから、なるほど当然元の x の値になる、
と理解することができる。

一方 x にはまだ (1234 - 9876) の結果が入っているから、

::

  y - x 

を求めれば 9876 を得ることができることがわかる。

このように、最初のうちは手間を惜しまず、値の変化を確認するとよい。

また、step 実行しながら、行13の x,y の値を x0, y0 とあらわして、
:ref:`ウオッチ式<watch_expression>` の結果を確認しながら、
以下のような表を作ってみるのもプログラムの理解に役立つ。

+----+----------+----------+
| 行 |    x     |    y     |
+----+----------+----------+
| 13 |   x0     |   y0     |
+----+----------+----------+
| 14 |  x0-y0   |   y0     |
+----+----------+----------+
| 15 |  x0-y0   |   x0     |
+----+----------+----------+
| 16 |   y0     |   x0     |
+----+----------+----------+

代入の動作は決して難しくはないが、
プログラミングにおいては多くの変数や代入を組み合わせる。
単に代入の意味を知っているというだけでは、
それらの相互関係をすばやく読み取れることがむずかしい。
多くの代入が組み合わさっていても素早く流れを読み取れることが、
プログラミングでは役立つ。

務めて訓練するとよいだろう。

2.6 ifとfor
-----------

.. literalinclude:: ../program/chap02/program02_06.js
  :caption: program02_06.js
  :language: javascript
  :linenos:

for は繰り返しを示す。

.. literalinclude:: ../program/chap02/program02_06.js
  :caption: program02_06.js
  :language: javascript
  :linenos:
  :lines: 3
  :lineno-start: 3

この行に :ref:`ブレークポイント<break_point>` を設定して、
以後 :ref:`シングルステップ<single_step>` で実行してみよう。

まず n=0 の状態で行4を実行し、
次に n++ によって n を 1 増やして n=1 の状態で行4を実行し、
以後 n を 1 ずつ増やし、 n が 3 になると行4を実行せず、行8に移る。


::

  if(条件) {
    ~~~Line 1~~~;
    ...
    ~~~Line N~~~;
  }


では、条件が成立したときに Line 1～Line N (なにかしらの命令)を実行する。


.. literalinclude:: ../program/chap02/program02_06.js
  :caption: program02_06.js
  :language: javascript
  :lineno-start: 9
  :lines: 9-11

9行～11行では、n*n が n*2 に等しい場合に n を表示する。



.. literalinclude:: ../program/chap02/program02_06.js
  :caption: program02_06.js
  :language: javascript
  :lineno-start: 12
  :lines: 12-14

12行～14行では、n*n より n*2 が大きい場合に n を表示する。

.. literalinclude:: ../program/chap02/program02_06.js
  :caption: program02_06.js
  :language: javascript
  :lineno-start: 16
  :lines: 16-26

16行～26行では 0～50 の整数のうち、2,3,5 の倍数でないものだけを表示する。

問題: このプログラムは素数を表示するプログラムだろうか?

2.7 練習問題
------------

(1) デバッグコンソールに Good morning と表示するプログラムを書け。
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

(2) デバッグコンソールに、以下4行を表示する1行のコードを書け。
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

::

  one
  two
  three
  dah!

  注意: プログラムを1行とするために、どうすればよいか?

(3) 以下の変数名が正しいか否かを判断せよ。
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

::

  var abc123;
  var alpha-1;
  var TEST;
  var Too many;
  var 0tto;
  var aBcDe;
  var What's_up;
  var a_b_c_d_e_f_g;
  var O1234567;

(4) 以下のプログラムで何が表示されるか?
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

::

  var x="12";
  var y="000";
  var z="89";
  console.log(x+y+z);

(5) 50～100の間の素数をすべて表示するプログラムを書け。
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  
2.8 まとめ
----------

(1) JavaScript では console.log でコンソールに出力することができる
(2) 文字列と数値を扱うことができる
(3) 変数にデータ型を定義する必要がない
(4) プラス記号は、文字列では結合、数値では加算の意味になる
(5) デバッグ機能を積極的に使うと、プログラムの理解が早まる
(6) if は条件を、for は繰り返しを表す