LogoMark.png

JavaScript/Syntax のバックアップの現在との差分(No.0)


#author("2021-06-14T18:35:54+09:00","default:inoue.ko","inoue.ko")
*JavaScriptの文法
https://www.w3schools.com/js/default.asp
~


このページでは、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/]]

~


***CONTENTS
#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( ... ){ ...... } 無名関数ともいいます(後述)
~

***エスケープシーケンスについて
文字列は、[ ' ] か、[ " ] で括れば良いことになっていますが、例えば、以下のように文字列の中に[ ' ] が含まれた場合は、うまく処理できません。
 'I'm sorry' 
で、この場合は、"I'm sorry." と[ " ] で括れば解決しますが、さらに[ " ] も含む文字列になると処理できなくなります。

そこで一般にプログラミング言語では、[ ' ] や [ " ] などの特殊な文字を単なる文字として処理させるための ''エスケープ・シーケンス ''と呼ばれる手法が用意されています。具体的には ''「 \(バックスラッシュ)+ 特殊文字 」''という形式の 記述になります。上記の例を解決する書き方が以下です。
  'I\'m sorry' 
こう書くと、[ I ] の次にくる [ \' ] は、単なるアポストロフィとして処理されるので「I'm sorry」全体でひとつの文字列扱いにすることができます。

ちなみにMacの場合、''[ \ ]'' は、英数入力の ''Option + [¥]'' で表示できます。

参考:https://en.wikipedia.org/wiki/Escape_character

~
~

**変数
変数とは「データを入れるための容器」と考えてください。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 を使うケースが多く見られるようになりました。
~

***グローバル変数とローカル変数
一般に変数というものは、関数の内部でのみ有効です。つまり、ある関数の中で使われている変数「x」の状態は、他の関数の中で使われている変数「x」とは無関係。たとえ同じ名前の「x」でも無関係です。でないと、関数を作るときに、まわりにある関数を全部チェックして、変数名に重複がないようにしなければならなくなってしまうからです。

しかし、いくつかの関数で共通の変数の値を参照したい場合もあります。例えば、ゲームのプログラムで、「キャラクターを動かす関数」と、「キャラクター同士のアタリ判定を行う関数」は、「キャラクターの現在座標」という共通の変数を参照する必要があります。そこで、プログラミング言語全般に言えることですが、あちこちから共通に操作できる変数というものも存在できるように設計されています。

一般に、関数の内部でのみ有効な変数を''ローカル変数(内部変数)''、関数の外にあってあちこちから操作できる変数を''グローバル変数(外部変数)''と呼んで、これらを区別します。JavaScriptでは、宣言の仕方によって以下のように区別されます。
-関数の外で宣言された変数 > グローバル変数
-関数の中で varステートメントを使って宣言した変数 > ローカル変数
-関数の中で varステートメントを使わず宣言した変数 > グローバル変数;
&color(red){↑ 注意)3つめは外部環境を汚染するので止めましょう。};

ちなみにクライアントサイドJavaScriptでは、Windowオブジェクトは、画面上に表示されているすべてのオブジェクトの親となるオブジェクトであり、JavaScriptのオブジェクト階層の最上位に位置します。すなわち、Windowオブジェクトがグローバル オブジェクトで、すべてのグローバル変数は、Windowオブジェクトのプロパティとなっているのです((<script>と</script>の間ではwindow.は省略できます。例えば、window.alert()はalert()と記述できます))。
例えば、グローバル変数として var sampleMessage="abc";  と記述すると、
 alert( sampleMessage ); // abc
 alert( window.sampleMessage );   // abc
ともに同じ "abc"が出力されます。
~

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

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

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

**オブジェクト
オブジェクトは値と関数を収める名前付きコンテナです。オブジェクトは値を''プロパティ''として、関数を''メソッド''として一括管理します。

-オブジェクトの作成
 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;
~
~

**配列
同じ種類のデータを複数セットで扱う場合には、配列を用います。配列オブジェクト、あるいは配列リテラルとして宣言する方法がありますが、JavaScript の技術仕様上、配列はオブジェクトの特殊型として位置付けられます。

-配列オブジェクトを作成
 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] などの表記で、添字を変数化することで連続的な処理が可能になります。

-配列は(オブジェクトの一種なので)配列のサイズ(添字の最大値より 1 大きい値)を ''length'' というプロパティに保持しています。
 d.length;  // 7
//尚、JavaScriptには、 「static 変数」の考え方はありません(C言語等の経験のある方には不便に感じるかもしれません)。値を静的に保持させるには、基本的にはグローバル変数を使う・・・ということになります。
~
~

**関数
記事を独立させました。> [[JavaScript/Function]]
~
~

**組み込みオブジェクトについて
[[標準組込みオブジェクト|MDN WebDocs>https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects]]

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つの書き方があります。

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

複数行コメントに使う、/* */ は、ネスト(入れ子状の記述)することができません。また、[ */ ] は[[正規表現>RegularExpression]]において発生することもあるので「''コメントは基本的に // を使って処理する''」と考えるのがよいでしょう。

~
~

**代入文
一般に = を用いて記述した式は「右辺の計算結果を左辺に代入せよ」という意味になります。
-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/Asynchronous]]
~
~

**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 ライブラリ]]
~
~

**補足

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

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

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

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

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