Ext JSやRapid Driveなど
システム開発の技術情報をご紹介。

お問い合わせ 資料請求 無料見積り

お電話でお気軽にお問い合わせくださいTel 03-6805-2904 営業時間 [平日]AM 9:30 - PM 6:30

モダンJavaScript

モダンJavaScriptについて

論理演算型

if文などの判定でtrue/falseを使うことがあると思いますが、次の一覧は、全てtrueと判定される例です。

  • 1
  • {}
  • ‘ ‘ - space
  • ‘my String’

逆に、次の例は、全てfalseとして判定されます。

  • undefined
  • null
  • 0
  • “”

オブジェクト

JavaScriptのオブジェクトとは次の特徴を持ちます。

  • キーと値のペアの集合です。
  • 無限に深く入れ子にすることができます。
  • 連想配列かハッシュマップを提供します。

オブジェクトの作り方は、次のような方法があります。

Objectコンストラクタ

var newObj = new Object();
newObj.x = 10;
newObj.y = 20;

リテラル構文(JSON)

var newObj = {x: 10, y: 20};

関数

functionもまたデータ型の一つです。

var myFunc = function() {

alert(”hello”)
};

または、

function myFunc() {
alert(”hello”);
}

のように定義します。

上記は同じ機能を定義した関数ですが、定義方法が異なります。functionにもコンストラクタが存在しますが、グローバルスコープに関数を作成することしかできません。 グローバルスコープとは、windowオブジェクトのことを指します。

配列

配列の定義は、次の2つの方法があります。

Arrayコンストラクタ

var myArray = new Array();
myArray[0] = 12;
myArray[1] = 232;

配列リテラル構文

var myArray = [12,232];

配列の特徴は次の通りです。

  • 配列を無限に入れ子にすることができます。
  • 配列の要素が0個である場合があります。
  • 配列は異なるデータ型を格納されることができます。
  • 配列にも多くの役に立つメソッドやプロパティがあります。

また、配列自体に便利なメソッドやプロパティが用意されています。

  • length : 配列の要素数を取得できるプロパティ
  • push : 配列の最後に要素を追加するメソッド
  • pop : 配列の最後の要素を取得、さらにその要素を配列から削除するメソッド
var myArray = [ 12, 232 ];
alert(myArray.length);

オブジェクトリテラル

オブジェクトリテラルは、JSON構文と一致しているのでオブジェクトを作成することに適しています。オブジェクトリテラルを利用するとき、キーと値のペアはコロンによって分離されます。

var newObj = {
x: 10,
y: 20,
myAry: [’one’,'two’,'three’],
myFnc: function() {
return ‘A’;
}
};

オブジェクトプロパティ

参照方法は2つあります。

一つは、. (ドット)を使い、プロパティ名を参照する方法、もう一つは、ブランケットを利用してプロパティ名を指定し参照する方法です。

var obj = {
one:1,
two:2,
three:3
};

alert( obj.one );
alert( obj[‘one’] );

上記のコードは、同じプロパティを参照しています。それぞれ.(ドット)とブランケットを利用した方法です。

nullとundefined

定義、曖昧ですがこれら2つは同じではありません。

  • nullは値を全く示さない特別なキーワードです。
  • undefined宣言だけして値を割り当てたことがないか、参照したプロパティが宣言されていない状態であるものです。

これら、nullとundefinedは、両方ともfalseとして判定されます。

比較演算

変数を比較するために、比較演算子があります。

  • == イコール - 値が同じかどうか
  • != ノットイコール - 値が異なるかどうか
  • > 大なり - 左辺の変数の方が大きいか
  • < 小なり - 左辺の変数の方が小さいか
  • >= 大なりイコール - 左辺の変数の方が大きいか、または同じ
  • <= 小なりイコール - 左辺の変数の方が小さいか、または同じ

また、型を厳密にチェックする演算子として、次のような書き方ができます。

  • === 厳密なイコール型まで値が同じかどうか
  • !== 厳密なノットイコール型まで値が異なるかどうか

PHPなどのスクリプト言語には、結構こういった厳密な判定をするための比較演算子が用意されています。ケースバイケースで、しっかりとして判定を行いましょう。

論理演算

  • && AND
  • || OR
  • ! NOT

論理演算子は、次の2つの使い方があります。

1つは、式の評価に使用します。

if (6 < 7 && 6 > 5) {

// some code.

}

もう一つは、変数に値を設定する場合に使用します。

var myObj;
myObj = existingObj || {};

existingObjがnullまたはundefinedの場合、{}がmyObjに代入されます。これは引数を受け取り初期値を設定するときなど、Ext JSのコード内でも多用されている記述方法です。

インクリメントとデクリメント

インクリメントは、+1するため、デクリメントは-1するために存在します。

var i = 6;

if( i == 6 ) {
alert( ‘6です。’ );
}
alert( i );

上記のコードをみてください。if文の中を処理するのがおわかりでしょうか。では、これにインクリメントを行ってみます。

var i = 6;

if( i++ == 6 ) {
alert( ‘6です。’ );
}
alert( i );

これは、どうでしょう。

実行すると、先ほどと同じくif文は、通過しますが、最後のalertは7になっています。iに+1されたことがわかります。

では、さらに次のコードはどうでしょうか。

var i = 6;

if( ++i == 6 ) {
alert( ‘6です。’ );
}
alert( i );

今度は、if文の中が処理されません。しかし、最後のalertは同じく7になっています。確かに+1されてますが、if文の判定では6としてiは評価されていません。

これは、先にインクリメント、またはデクリメントを記述すると、式の評価の前にインクリメント、デクリメントを行い、その結果が評価されます。つまり、最後の例では、iに+1されてから6と等しいかが判定されているため、if文の中が処理されないわけです。

インクリメント、デクリメントは単純に+1、-1するだけでなく、このように式の評価順に影響しますので、違いをしっかり押さえておきましょう。