LogoMark.png

JavaScript/Syntax

JavaScriptの文法

JavaScriptJavaScript/BOMJavaScript/DOMJavaScript/Sample

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



データ型

基本的な分類

JavaScriptでは、以下のようなデータ型があります。

プリミティブ型とオブジェクト型

データ型は大きく2つに分類することができます。

リテラル

JavaScript では値の表現にリテラル(数値や文字列を直接に記述した定数)を使います。これらは固定値であり変数ではありません。スクリプト中に直接記述します。真偽値を表すtrueやfalseもリテラルです。

変数

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

var / let / const

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

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




配列

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

オブジェクト

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





関数

はじめに

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

中学・高校の数学で登場する「関数」を思い出して下さい。関数とは、
「(入力データを受け入れて)・何らかの処理を施して・(結果を返す)」
というはたらきをする存在であるといえます。

y = f(x)   ( 例えば  y = 2x + 1 ) 

は、入力データ x を受け入れて、これに処理 f( ) つまり「2倍して1加える」を施して、その結果を y として返す・・・という意味です。

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

一般的な関数 function func( ... ) { ...... }


無名関数 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では、宣言の仕方によって以下のように区別されます。

さて、ここでプログラミングの原則です。

グローバル変数は外部環境を汚染するので極力使わない・・

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

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

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

(function(){
  //・・・スクリプト全体をここに・・・
}).call(this); ← スクリプトを実行

ちなみにクライアントサイドJavaScriptでは、Windowオブジェクトは、画面上に表示されているすべてのオブジェクトの親となるオブジェクトであり、JavaScriptのオブジェクト階層の最上位に位置します。すなわち、Windowオブジェクトがグローバル オブジェクトで、すべてのグローバル変数は、Windowオブジェクトのプロパティとなっているのです*1
例えば、グローバル変数として var sampleMessage="abc"; と記述すると、

alert( sampleMessage ); // abc
alert( window.sampleMessage );   // abc

ともに同じ "abc"が出力されます。



組み込みオブジェクト

JavaScriptには、以下のようなオブジェクトが用意されていて、様々なプロパティ、メソッドを利用することができます。

コメント

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

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




代入文

一般に = を用いて記述した式は「右辺の計算結果を左辺に代入せよ」という意味になります。

補足:数値と文字列の扱いについて

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

制御文

if


for


while

JavaScript 各種ライブラリ

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


補足

変数・関数の命名規則

ここでは、変数名や関数名のつけかたについて一般的なルールを紹介します。絶対こうせよというものではありませんが、将来のことを考えてなるべく慣例に従うことをお勧めします。

PAGES

GUIDE

DATA


*1 <script>と</script>の間ではwindow.は省略できます。例えば、window.alert()はalert()と記述できます
Last-modified: 2020-06-30 (火) 11:21:08