JavaScriptをしっかり勉強。vol.1

プログラム
date 2014.02.04 tag JavaScript

JavaScriptの勉強をしたことをまとめて書き綴って行きます。今回はリテラル表記やオブジェクトの扱いなど、普段あまり意識していなかった基本中の基本について改めて勉強した内容です。

リテラル記法

その昔、僕は大学の授業でこう教わりました。リテラルを制するものはJavaScriptを制する、と!

リテラル表記とはプログラムを実行する際に意味を持たせる表記方法のことでプログラム言語における作法やおまじないと言えるものです。文字列を定義する場合には「’」または「”」で囲むなどですね。JavaScriptではデータを定義する際にはリテラル表記を使うことが一般的です。

たとえば配列データを定義する場合、下記の2通りの方法があってどちらも正しいですが一般的には表記がシンプルで間違えの少ないリテラル記法が使われます。

JS 配列のリテラル記法

他のリテラル記法

サンプルでは配列のリテラル記法を書いてみましたが、他のリテラル表記についてもサクッと触れてみましょう。普段コーディングをする際に使うことのあるものは下記のものになるかと思います。

JS その他のリテラル記法

オブジェクト

今回のエントリーではJavaScriptのオブジェクトの扱い方について書きます。オブジェクトの仕組みなどについては次回以降のエントリーで書きます。

さてJavaScriptのオブジェクトはキーと値を保持できる入れ物に名前を付けて管理できるものです。僕みたいにPHPなどからプログラムに突っ込んだ人は連想配列と同様に考えるとわかりやすいです。JavaScriptで何をするにしてもオブジェクトは避けられない重要なものなのでしっかりと勉強しておきましょう。

オブジェクトの作成

何はともあれオブジェクトを作成するところから始めます。オブジェクトの作成はさきほどのリテラル記法でコーディングします。

下記のサンプルは「orange」というオブジェクトを定義しています。orangeは値段「price」と原産国「country」の情報を持っています。この情報は「orange」オブジェクトに関連していることがわかります。

JS orangeオブジェクトの作成

オブジェクトのプロパティを参照する

さきほどの「orange」が持っている「price」や「country」のことをプロパティと言います。このプロパティのデータ(120、jpなど)を取り出すためには「.」または「[]」(ブラケット)演算子を使います。

どちらの演算子でもプロパティを指定すればデータにアクセスできます。たとえば「orange.price」「orange.[‘price’]」のような記述をすることでそのプロパティのデータを参照できます。

特筆点としては[]演算子では変数を使用してプロパティに参照できるという特性を持ちます。そのため後述するfor in文では[]演算子を使用してオブジェクトがもつプロパティとそのデータを列挙することができます。

JSorangeオブジェクトのデータ参照

プロパティの追加と削除

オブジェクトへのデータの追加はプロパティに値(データ)を代入すればできます。すでに同じ名前のプロパティがあれば上書き、無ければ新規追加となります。プロパティへ値を代入するには.と[]のどちらの記述でもOKです。

データの削除はdelete演算子を使えますが、Googleのコーディング規約ではnull値を代入するのが良いとのことです。

JSオブジェクトのプロパティを変更

プロパティの列挙

オブジェクトのプロパティをすべて取り出すにはfor in文を使います。for文によるループですが、ループ回数はオブジェクトが保持するプロパティ数だけ実行されます。 また、for in文で取り出すプロパティ名が格納されている変数を[]演算子に渡すことでそのデータを取り出すことができます。

for in文は地道にコードを書いて理解してくのが良さげですね..。

JS orangeオブジェクトの中身を全て表示

なお、上記のコードでは問題が発生することがあるため下記のようにhasOwnPropertyメソッドで判定を入れるのが確実です。for in文では後のエントリーで説明するprototypeにあるプロパティも参照するのでこのオブジェクト自身が持たないプロパティも参照する可能性があります。

JShasOwnPropertyメソッドの判定で自身のプロパティのみ列挙

hasOwnPropertyメソッドは引数の値について対象オブジェクトだけが保持しているプロパティ値かを判定し、bool値を返します。サンプルコードではtrueが帰ってきたときだけ出力するようにしています。

式の評価

JavaScriptは変数の型付けが緩い言語のため、条件式の評価には暗黙の変換が行われることがあります。思わぬバグを生む原因になりやすいのでしっかりと押さえておきたいですね。

同値比較の演算子

同値比較の場合はPHPと同様、「==」演算子以外にも厳密な比較をする「===」演算子が存在します。「==」演算子では自動的に型変換が行われ、下記のような留意点があります。

  • 片方のオペランドが数値であれば、もう片方は数値に変換される
  • 片方のオペランドがブーリアンで値あれば、両方とも数値に変換される
  • nullとundefinedとの比較はtrueになる

オペランドとは「(A == B)」に含まれるAやBのことです。==演算子の曖昧な比較については下記にサンプルコードを書いてみます。

JS「==」演算子による同値比較

サンプルでは書いていませんが、同値比較演算子の否定は「!=」と「!==」があり、後者は厳密な型変換なしの同値比較否定となります。

大小比較

大小比較に関しても型変換が行わるので、その際の留意点をまとめます。

  • 片方のオペランドが数値なら、もう片方は数値に変換される
  • 両方のオペランドが文字列の場合は変換が行われず、文字列値の大小が比較される 両方のオペランドが文字列の場合には注意が必要。

例えばフォームから受け取った値は数字だとしてもプログラムで受け取ったものは文字列値となるため、この条件になる場合があります。また文字列の比較は、文字列の最初の1文字目についてUnicodeの並び順の大小で比較するみたいです。Unicodeの並び順は説明できるほど詳しくないので省略..

JS文字列値の大小比較

この場合はUnicodeの並び順の比較となり、イメージ的に「1 > 9」となるため、falseとなります。

その他

変数の型の調べ方と特殊な値について。

型の調べ方について

変数の型はtypeof演算子を使うことで調べることができます。下記はtypeof演算子で判定できる型で、代表的なものです。

typeof演算子の結果
文字列型 string
数値型 number
ブーリアン型 boolean
オブジェクト型 object
関数型 function

typeof演算子のサンプルコードは次のもの。

JStypeof演算子の使用

結果は文字列として変数の型タイプが得られ、この場合だと「strong」という文字列が得られます。

特殊な値

JavaScriptの空っぽい値について整理です。
他の言語では初期化していない変数のデフォルト値は「null」が多いけど、JavaScriptでは「undefined」となります。

説明
undefined 初期化していない変数の値、存在しないオブジェクトのプロパティ値のデフォルト値。
null null値だがプログラムの処理中に発生することはない。null値の変数、プロパティは明示的にnull値を代入することで発生する。
Nan 型の変換の失敗や、無理な計算をした際に発生する値。NaNとの計算結果は全てNanになる。(Not a Numberの略)

まとめ

JavaScriptの基本的なところを改めて勉強してアウトプットしました。文章がぶれているのは慣れていないためご了承くださいませ。

コーディングのことよりもJavaScript言語の基本的な概念というところについて紹介できました。あとはPHPなどを触ったことがある人にはおなじみの緩い型変換のエトセトラも。次回以降のエントリーではJavaScriptのオブジェクトや関数について深堀していきたいです。