LogoMark.png

JavaScript/Syntax の変更点


#author("2020-01-11T19:06:56+09:00;2019-11-19T16:09:35+09:00","default:inoue.ko","inoue.ko")
#author("2020-06-30T11:21:08+09:00","default:inoue.ko","inoue.ko")
*JavaScriptの文法
[[JavaScript]]|[[JavaScript/BOM]]|[[JavaScript/DOM]]|[[JavaScript/Sample]]
~

このページでは、JavaScriptプログラミングのための基本的な概念と、記述形式について概説しています。JavaScriptは全体にルールがゆるいのと、現場(ブラウザの実装)が日進月歩の状況なので、情報源によって記述スタイルや用語の使い方が様々です。ここに記載している内容も公式の用語解説というより、説明のしやすさを優先していますので、より確実・詳細に学びたい場合は、[[標準的なマニュアルサイト>https://developer.mozilla.org/ja/docs/Web/JavaScript]]をご覧下さい。

-[[JavaScript by Mozilla Developer Network>https://developer.mozilla.org/ja/docs/Web/JavaScript]]
--[[JavaScriptガイド>https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide]]
--[[JavaScript再入門>https://developer.mozilla.org/ja/docs/Web/JavaScript/A_re-introduction_to_JavaScript]]
-[[DOMリファレンス  by Mozilla Developer Network>https://developer.mozilla.org/ja/docs/DOM/DOM_Reference?redirectlocale=ja&redirectslug=Gecko_DOM_Reference]]
-[[Google JavaScript Style Guide>https://google.github.io/styleguide/javascriptguide.xml]] [[日本語版>http://www38.atwiki.jp/aias-jsstyleguide2/pages/1.html]]
-[[jQuery JavaScript Style Guide>https://contribute.jquery.org/style-guide/js/]]
~


#hr

#contents2_1
~

**データ型
***基本的な分類
JavaScriptでは、以下のようなデータ型があります。
-真偽値:true または false
-null (ヌル、ナル):何もない、何も示さないもの
-undefined:未定義のもの
-数値 (整数、浮動小数点数):18、3.141592 など
-文字列:"Hello World!" など
//-シンボル
-配列:[ sun , mon , tue , ...] など
-オブジェクト:{ width : 640, height : 480, ... }; など 
-関数:function func( ... ){ ...... } のかたちをしたもの
~

***プリミティブ型とオブジェクト型
データ型は大きく2つに分類することができます。
-プリミティブ型
値を代入したときに ''値渡し''(call by value)になるデータ型をプリミティブ型といいます。以下のデータ型があります。
 数値、論理、文字列、null、undefined、シンボル
例えば、以下のようにふつうに値が渡されます。
 var s = 'Java';   //  Java
 var t = s;         //   Java
 t += 'Script';
 console.log(s);    //   Java
 console.log(t);    //   JavaScript

-オブジェクト型
値を代入したときに ''参照渡し''(call by reference)になるデータ型をオブジェクト型といいます。以下のデータ型があります。
 配列、オブジェクト、関数
例えば、以下の例では、dst に src のアドレスが渡されるので、dsc を使ってsrc にあるデータにアクセスできます。
 var src = [1, 2, 3];
 var dst = src;
 src[1] = 5;
 console.log(src[1]);    // 5
 console.log(dst[1]);    // 5
~
~

**リテラル
JavaScript では値の表現にリテラル(数値や文字列を直接に記述した定数)を使います。これらは固定値であり変数ではありません。スクリプト中に直接記述します。真偽値を表すtrueやfalseもリテラルです。
-整数リテラル 1234 +1234 -1234 0 など
-浮動小数点数リテラル 1.234 +1.234 -1.234 など
-論理値リテラル true(真), false(偽)
-文字列リテラル 文字列を、[ ' ] か、[ " ] で括ったもの
-配列リテラル [値1, 値2, 値3, ...]
-オブジェクトリテラル {プロパティ:値, プロパティ:値, ... }; 
-関数リテラル function( ... ){ ...... } 無名関数ともいいます(後述)
~
~

**変数
変数とは「データを入れるための容器」と考えてください。var x=10; と書くと、xという名前の箱が用意されて、そこに10という値が入ります。var とは variable(変数)の略です。C言語などの型に厳密な言語に慣れた方には違和感があると思いますが、JavaScriptの変数には「型」の区別はありません。

-変数の宣言
 var n;
これは‘n’という名前の変数の利用を宣言した文です。
変数名は英字または _(アンダースコア)ではじまる半角英数字で、
予約語と衝突がなければ自由につけることができます。

-数値の定義例  var n=10.5;
-文字列の定義例 var n="This is a pen.";
-ドキュメントオブジェクトの取得 var n = document.getElementBy..

-確認事項
//--変数の宣言に、数値と文字列のタイプの区別はありません。
--JavaScriptでは大文字と小文字は別物と解釈されます。
--予約語とは、JavaScriptの文法にある単語のことで、以下のとおり。
break, case, catch, continue, debugger, default, delete, do, else, false, finally, for, function, if, in, instanceof, new, null, return, switch, this, throw, true, try, typeof, var, void, while, with 以上
--また、以下はグローバル変数とグローバル関数なので、注意が必要
arguments, Array, Boolean ,Date	, decodeURI, decodeURIComponent, encodeURI, Error, escape, eval, EvalError	Infinity, isFinite, isNaN, Math, NaN, Function, Object, parseFloat, parseInt, RangeError, ReferenceError, Number, String, SyntaxError, TypeError, undefined, unescape, RegExpURIError
--さらに、以下は将来予約語になるかも・・なので注意が必要
abstract, as, boolean, byte, char, class, const, double, enum, export, extends, final, float, goto, implements, import, int, interface, is, long, namespace, native, package, private, protected, public, short, static, super, synchronized, throws, transient, use, volatile
~

***var / let / const
JavaScript では従来、変数は常に var キーワードで宣言されてきましたが、ES6において、変数を宣言する手段として、let キーワードと const キーワードの2つが新たに導入されました。

-var:スコープが関数(  関数の内部全体で参照可能 )・再宣言可
-let:スコープがブロック( 宣言された { } 内でのみ参照可能 )・再宣言不可
-const:再代入が必要ない変数(コンスタント)

let の方がより var  よりもバグが発生する可能性が少ないことから、近年は var に変わって let を使うケースが多く見られるようになりました。

~
~

**配列
同じ種類のデータを複数セットで扱う場合には、配列を用います。
以下のように、配列オブジェクト(後述の組み込みオブジェクト)として、あるいは配列リテラルとして宣言する方法があります。

-配列オブジェクトを作成
 d = new Array(7);   // 配列オブジェクトを new

-配列リテラルを使用
 var d = ["Sun", "Mon", ・・・"Sat"];   // 初期データを格納
 var x = [];   // 空の配列を作成

-要素を格納する場合は、以下のように書きます。
 d[0] = "Sun";
 d[1] = "Mon";
   :
 d[6] = "Sat";
この例では、d[0] ~ d[6]までの7個の値を扱うことができます。
このとき、0や6といった[]内の数字を「添字」といいます。
d[i] などの表記で、添字を変数化することで連続的な処理が可能になります。
-配列は 'length' というプロパティを持っています。これは常に配列のサイズ、すなわち一番大きな添字より 1 大きい値となります。
 d.length;  // 7
//尚、JavaScriptには、 「static 変数」の考え方はありません(C言語等の経験のある方には不便に感じるかもしれません)。値を静的に保持させるには、基本的にはグローバル変数を使う・・・ということになります。
~
~

**オブジェクト
オブジェクトは値を収める名前付きコンテナです。オブジェクトを利用すると、複数の関連する値をまとめて管理することができます。配列にも似ていますが、配列が値を「添字」で管理しているのに対し、オブジェクトは値を''「プロパティ」''で管理します。また、オブジェクトは関数を持つことができます。これを''「メソッド」''といいます。

-オブジェクトの作成
 var person = new Object();
 
-プロパティ、メソッドを登録するには・・
 person.name = "鈴木";
 person.age = 36;
 person.greet = function() {
    alert("Hello World! from " + this.name );
 }

-プロパティを利用するには、以下のように [ . ](ドット演算子)を用います。
 alert( person.name );
// alert( person["name"] );

-メソッドを利用するには、同様に [ . ] を用います。 
 person.greet();   // Hello World! from 鈴木

-以下のように「オブジェクト初期化子」を使用してオブジェクトを作成する(オブジェクトをリテラル表記法で作る)こともできます。
 var person = {
     'name' : '鈴木',
     'age' : 36,
     greet : function(){
          alert("Hello World! from " + this.name );
     } 
 };

-さらに、以下のような書き方も可能です。
 var figure = {};
 figure.width = 100;
 figure.height = 80;

~
&aname(function);
~


**関数

***はじめに
関数とは処理機能の集合体で、それを呼びだすことで、一連の処理を一括して実行することができます。

中学・高校の数学で登場する「関数」を思い出して下さい。関数とは、
「(入力データを受け入れて)・何らかの処理を施して・(結果を返す)」
というはたらきをする存在であるといえます。
 y = f(x)   ( 例えば  y = 2x + 1 ) 
は、入力データ x を受け入れて、これに処理 f( ) つまり「2倍して1加える」を施して、その結果を y として返す・・・という意味です。

-この関数の定義をJavaScriptで書くと
 function f( x ){
     var y = 2*x + 1;
     return y;
 }
となります。

-この関数を使うには、プログラム中で、
 y = f(5);
などと書きます。
入力データの値を2倍して1加えた値、すなわち11が y にセットされます。

システム全体が親会社だとすると、個々の関数は、
親会社からデータを受け取って、それを処理・加工して、親会社へ戻す
子会社の役割を担うもの、と例えることができます。
~

***一般的な関数 function func( ... ) { ...... }
-関数は、通常以下のように記述して定義します。
 function 関数名([引数1 [, 引数2 [, ……]]) {
   [関数内で実行される任意の命令……]
 }
例
 function add(x, y) {
     var z = x + y;
     return z;
 }

-関数の利用
データを引数として渡して、結果をもらう・・・というのが普通です。
 var  ans = add(3,2);
以下のように記述すると、計算結果の5がアラートボックスに表示されます
 alert( add(3, 2) );

-関数の様々な呼び出し方
--ボタンから呼び出し
 <input type="button" value="テスト" onclick="my_function()" />
--リンクから呼び出し
 <a href="javascript:my_function();">
--一般的なプログラムシーケンス内での呼び出し
 alert( my_function(data) );
 var ans = my_function(data);


-関数の具体例1:2つのデータ入力に対する処理結果の回答
HTML側に以下の入出力エリアを作成
 INPUT1: <input type="text" id="INPUT1"><br>
 INPUT2: <input type="text" id="INPUT2"><br>
 RETURN: <input type="text" id="RETURN">
 <button onClick="calc()">GO</button><br>
JavaScriptにインターフェイスを作成
 function calc() {
   var a = document.getElementById("INPUT1");
   var b = document.getElementById("INPUT2");
   var c = document.getElementById("RETURN");
   // 演算関数の呼び出し
   c.value = myFunction(Number(a.value), Number(b.value));
 }
JavaScriptに演算関数を作成
 function myFunction(x,y){
  var z = x + y;    // ここを様々に変更してお試し下さい。
  return z;
 }
参考:Number() は、文字列を数値に変換する関数です。


-関数の具体例2:ランダムな色を発生させる
 function RandomColor(){
      var col = Math.floor( Math.random() * 0xFFFFFF ).toString(16);
      for( var i = col.length; i<6; i++ ) { col = "0" + col; }
      return "#" + col;
 }
RGB各8ビット、ランダムに値を選んで、16進数にして返す。
&small(値が6桁になる必要があるので、不足した場合に先頭に ''0'' を追加しています。);
色を与える記述において、以下のように書いて利用します。
 dc.fillStyle = RandomColor();

~

***無名関数 var 変数 = function( ... ){ ...... }
関数名を定義せず、関数の定義と同時に変数に引き渡すと、変数が関数と同様の振る舞いをします(変数が関数になります)。
 var sample = function(){
     alert("abcde");
 }
呼び出し方は以下のとおり
 sample(); // abcde
無名関数は「関数式(関数リテラル)」ということがあります。
リテラルとはもともと「プログラムのソースコードにおいて使用される、数値や文字列を直接に記述した定数のこと」で、関数リテラルはそれらと同様に、「変数に代入する」ことができます(上の例では変数sampleに代入)。
~

***即時関数 ( function( ) { ...... } )( )
関数定義と関数呼び出しをまとめて行うことができる書き方です。
 ( function() {
     alert("abcde");
 })();

と書いた場合、

 function sample() {
     alert("abcde");
 }
 sample(); // abcde
と同じこと、つまり、関数を定義して、その場で即実行・・となります。
ちなみに、JavaScriptでは、関数の後に書かれる () は、関数を実行するトリガーとして機能する・・と考えることができます。
ソースコード全体を即時関数をラッピングすると外部環境の汚染を防ぐことができるので、その意味では重要な存在です。詳しくはグローバルとローカルの項で述べます。
~

***関数名の扱いについて
JavaScriptでは、関数はオブジェクトなので、例えば以下のような定義では、
 function add(x, y) {
     var z = x + y;
     return z;
 }
「変数 add に『2つの引数の値を加えてリターンする関数オブジェクト』が格納された」 という状態になります。ちなみに、
 alert(add);
とすると、アラートボックスには、関数のソースがそのまま表示されます。
したがって、たとえば、プログラムの中途で
 add = 0;
などと記述すると、addは単なる数値が格納された変数になり変わります。
無用な混乱を避けるため、変数と関数はしっかり区別する必要があります。
~

***グローバルとローカル
一般に変数というものは、関数の内部でのみ有効です。つまり、ある関数の中で使われている変数「x」の状態は、他の関数の中で使われている変数「x」とは無関係。たとえ同じ名前の「x」でも無関係です。でないと、関数を作るときに、まわりにある関数を全部チェックして、変数名に重複がないようにしなければならなくなってしまうからです。
 しかし、いくつかの関数で共通の変数の値を参照したい場合もあります。例えば、ゲームのプログラムで、「キャラクターを動かす関数」と、「キャラクター同士のアタリ判定を行う関数」は、「キャラクターの現在座標」という共通の変数を参照する必要があります。そこで、プログラミング言語全般に言えることですが、あちこちから共通に操作できる変数というものも存在できるように設計されています。
 一般に、関数の内部でのみ有効な変数を''ローカル変数(内部変数)''、関数の外にあってあちこちから操作できる変数を''グローバル変数(外部変数)''と呼んで、これらを区別します。JavaScriptでは、宣言の仕方によって以下のように区別されます。
-関数の外で宣言された変数 > グローバル変数
-関数の中で varステートメントを使って宣言した変数 > ローカル変数
-関数の中で varステートメントを使わず宣言した変数 > グローバル変数;
&color(red){↑ 注意)3つめは外部環境を汚染するので止めましょう。};

さて、ここでプログラミングの原則です。
 グローバル変数は外部環境を汚染するので極力使わない・・
というのは・・グローバル変数というものは、各種ライブラリーや他のスクリプトと併用する場合、潜在的なバグの原因になるからです。他人が作ったソースコード中に同じ変数名や関数名があれば、当然衝突が起こって予期せぬエラーが生じます。よって、できる限りグローバル変数には依存せずにシステム全体を作るのが理想です。

関数というものも、本来独立性の高い部品として作られるもので、「引数を受け取って>処理して>返す」だけの存在として組み立てるのが理想です。引数として渡せるものであれは、引数として関数内に取り込むのが原則です。

''即時関数''
ただ、実際のシステム開発において外部変数を使わないというのも難しい話です。ここで、''即時関数''が役に立ちます。外部変数の定義も含むソースコード全体をこの即時関数でラッピングすると、すべてがローカルに封じ込められるので、グローバル変数の衝突(外部環境の汚染)を防ぐのに便利です。
 (function(){
   //・・・スクリプト全体をここに・・・
 }).call(this); ← スクリプトを実行

ちなみにクライアントサイドJavaScriptでは、Windowオブジェクトは、画面上に表示されているすべてのオブジェクトの親となるオブジェクトであり、JavaScriptのオブジェクト階層の最上位に位置します。すなわち、Windowオブジェクトがグローバル オブジェクトで、すべてのグローバル変数は、Windowオブジェクトのプロパティとなっているのです((<script>と</script>の間ではwindow.は省略できます。例えば、window.alert()はalert()と記述できます))。
例えば、グローバル変数として var sampleMessage="abc";  と記述すると、
 alert( sampleMessage ); // abc
 alert( window.sampleMessage );   // abc
ともに同じ "abc"が出力されます。
//~
//-文字列操作や数値計算に関わる定義済みの関数などについては
//Web上に多くの資料があります。
//-[[Google: JavaScript 関数 リファレンス]]
//-[[Google: JavaScript 逆引き リファレンス]]
~
~

**組み込みオブジェクト
JavaScriptには、以下のようなオブジェクトが用意されていて、様々なプロパティ、メソッドを利用することができます。
-Object: 汎用のオブジェクト。以下のように使えます。
 var obj = new Object(); // Objectのインタンス obj を作成
 obj.name = '鈴木'; // 未定義のプロパティーを追加定義
-Array: 配列オブジェクト
JavaScript における配列は、配列オブジェクトといえます。
 var a = new Array(100, 200, 300);
 alert(a.length); //  3: 配列要素の個数
-Function: 関数
JavaScript における関数の全ては、実際には Function オブジェクトです。
 var obj = new Function(  ...引数 , 関数本体 );
 var obj = function( ... ){ .... }; とする場合と同じです。
-String: 文字列オブジェクト
 var s = new String("abcdefg");
 alert(s.length); //  7: 文字列の長さ
-Math: > 数値計算用組み込み関数 newする必要はありません。
 alert(Math.PI); // 3.14.... 円周率
 alert(Math.sqrt(2)); // 1.4142... 平方根
 alert(Math.random()); // ....  乱数
-Date: 日付オブジェクト
 var t = new Date();
 alert(t.getTime());
UTC の1970年1月1日 00:00:00 から経過した時間をミリ秒で返します。
~
~


**コメント
コード中にコメントを書く際は、以下のように1行コメントと複数行コメントの2つの書き方があります。尚、ネスト(入れ子状の記述)はできません。

 // 一行のコメント
  
 /* 
          複数行からなるコメント
  */
~
~

**代入文
一般に = を用いて記述した式は「右辺の計算結果を左辺に代入せよ」という意味になります。
-xという変数に100という数値を代入するには・・
 x = 100;
-現在の x に、別の値を足した(掛けた)結果を、再び x に代入するには・・
 x = x+10; ( x = x*10; )
以下のような書き方でも同じ結果になります。
 x += 10; ( x *= 10; ) 
-ひとつ増やす(減らす)には・・ ※ x = x+1( x = x-1 ) と同じです。
 x++; ( x--; )
&aname(sum);
~

***補足:数値と文字列の扱いについて
数値と文字列の区別がゆるいJavascriptでは、「+」演算子を用いた合算、あるいは文字列連結について留意が必要です。以下、事例を紹介します。

-「+」:数値の和
var x;  x = 100 + 50;  →  x : 150(数値)

-「+」:文字列の連結
var str;  str = "春夏" + "秋冬";  →  str : "春夏秋冬"

-「+」:数値と文字列の連結 → 文字列
左辺または右辺が文字列の場合、他方を文字列として連結します。 
式の中に複数の「+」が含まれる場合は、左から順に連結が行われます。 
--var str;  str = "20" + 12;  →  str : "2012"
--var str;  str = 100 + 50 + "px";  →  str : "150px" 
--var str;  str = "$" + 100 + 50;  →  str : "$10050"
--var str;  str = "$" + (100 + 50);  →  str : "$150"
~

-文字列を数値に変換する方法
--Number('123'); // 123
--Number('123a');  // NaN
--parseInt('123', 10);  // 123(10進数の整数)
--parseInt('ff', 16);   // 255(16進数の整数)
--parseInt('2.8', 10);  // 2(小数点以下を切り捨てる)
--parseInt('123a', 10); // 123(数字以外は無視)
--parseFloat('2.8');    // 2.8(実数)
--parseFloat('123a');   // 123(数字以外は無視)

-数値を文字列に変換する方法
--String(num); // "123"
--num.toString(10);  // "123"
--num.toFixed()  // "123"
--num + ''; // "123" 空文字を連結することで文字扱いに(高速)
~
~

**制御文

***if
-条件によって分岐します。
 if( 条件 ) {
    処理;
 } else if( 条件 ) {
    処理;
 } else {
    処理;
 }

-関係演算子
 == (equality)
 > (greater than)
 >= (greater than or equal to)
 != (inequality)
 < (less than)
 <= (less than or equal to)

-論理演算子
 && (logical AND)
 ! (logical NOT)
 || (logical OR)

~

***for

-条件が満たされている間、初期値から値を更新しながら処理を繰り返します。
 for ( 初期値; ループ条件; 更新 ) {
    // 処理;
 }

-記述例
 for ( var i = 0; i < 80; i = i+5 ) {
    // 処理;
 }

-break文、continue文 などのジャンプを使うと、現在の処理を中断し、別の指定処理に移動することができます。
--break文:ループを抜けます。以下の事例では、i が 5 になった時点で、ループ処理を中断して、ループの外に出ます。
 for (var i = 0; i < 10; i++) {
   if (i == 5)  break;
 }
--continue文:実行中の処理を中断し、次の繰り返し処理に進みます。以下の例では、i が 5 のときは処理を中断し、次のステップ(i=6)に進みます。
 for (var i = 0; i < 10; i++) {
   if (i == 5)  continue;
 }


~

***while

-条件が満たされている間、処理を繰り返します。
 while ( 条件 ) {
   処理;
 }

-例
 var i=0;
 while( i<80 ) {
   処理;
   i = i + 5;
 } 

-break文、continue文 などのジャンプを使うと、現在の処理を中断し、別の指定処理に移動することができます。
~
~


**JavaScript 各種ライブラリ

ライブラリーとは、汎用性の高い複数のプログラムを、再利用可能な形でまとめたものです。それ単体では動作しませんが、他のプログラムから呼び出されることで機能します。JavaScriptのライブラリーは、jQueryをはじめ、近年ますます充実していますが、いずれもそのまま読めるテキストファイルで、大半は無料で入手可能です。

-[[JavaScript/Links]]
-[[JavaScriptライブラリ(Wikipedia)>http://ja.wikipedia.org/wiki/JavaScript#JavaScript.E3.83.A9.E3.82.A4.E3.83.96.E3.83.A9.E3.83.AA]]
-[[Google: JavaScript ライブラリ]]

~

**補足

***変数・関数の命名規則
ここでは、変数名や関数名のつけかたについて一般的なルールを紹介します。絶対こうせよというものではありませんが、将来のことを考えてなるべく慣例に従うことをお勧めします。
 
-キャメルケース
2つの単語の合成で命名する場合、最初を小文字ではじめ、二番目の単語の最初のアルファベットを大文字で記述する方法です。真ん中がラクダのコブのようにふくらむのでキャメルケースと呼ばれます。
 変数名 basicColor  
 関数名 changeColor  関数名の場合は 動詞+目的語の順

-コンストラクタ 関数
new で呼び出されてインスタンスを生成して使用するものを区別するために、コンストラクタ関数の場合は先頭を大文字にします。
 var firstScreen = new MakeScreen();

-定数
定数は大文字で記述し、合成単語の場合は _ (アンダースコア) でつなぎます。
 var PASS_WORD = "5fG43Kgn";

-その他
関数名、変数名には英数字、_ (アンダースコア)、$ マークなども使用可能ですが、 $ マークは jQuery で使用されているので、使わないほうが良いです。

-参考
--キャメルケースとスネークケースはダブルクリックで全体が選択できます
--ハイフンはダブルクリックでは選択できないので、コピペの際はドラッグする必要があります。
~
~
~