Skip to content

Instantly share code, notes, and snippets.

@haribote
Last active October 3, 2016 06:13
Show Gist options
  • Star 16 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save haribote/10363298 to your computer and use it in GitHub Desktop.
Save haribote/10363298 to your computer and use it in GitHub Desktop.
"Basic of JavaScript"は、株式会社まぼろし( http://maboroshi.biz/ )の新人・若手向けJavaScript入門資料です。
# 目次
+ JavaScript オブジェクトと値の型

JavaScript オブジェクトと値の型

全ての値がオブジェクト

プログラムとは、値の振る舞いや取り回しをコンピューターに命令するために記述したものである。
JavaScriptでは、予め組み込まれているものも含め全ての値がオブジェクトであるかオブジェクトのように振る舞う。

オブジェクトは集合

オブジェクトとは、名前(キー)と値(バリュー)をペアとしたプロパティの集合で、中でも値に関数が与えられているものをメソッドと呼ぶ。

// オブジェクトは「名前:値」の集合
var object = {
  propertyName: 'Value',
  methodName: function () {
    return 'Do something.'
  }
}

全ての値がオブジェクトであるということは、そのオブジェクトに属しているプロパティやメソッドを利用できる、ということである。
プロパティはオブジェクトに . (ドット)を繋げることで呼び出し可能で、メソッドはそれに () (括弧)を加えることで実行することができる。

// オブジェクトに属しているプロパティを呼び出す
object.propertyName; // => 'Value'
// オブジェクトに属しているメソッドを実行する
object.methodName(); // => 'Do something.'

組み込みオブジェクトと型

JavaScriptには予め組み込まれているオブジェクトがいくつかあり、扱いたい値の「型」によってそれらを使い分ける。
すなわち、値の型によって使用できるプロパティやメソッドがそれぞれにある。

  • Numberオブジェクト:「数値」を扱うオブジェクト
  • Stringオブジェクト:「文字列」を扱うオブジェクト
  • Booleanオブジェクト:「真偽値」を扱うオブジェクト
  • Arrayオブジェクト:「配列」を扱うオブジェクト
  • Objectオブジェクト:「Object」を扱うオブジェクト
  • Functionオブジェクト:「関数」を扱うオブジェクト
  • Dateオブジェクト:「日付」を扱うオブジェクト
  • RegExpオブジェクト:「正規表現」を扱うオブジェクト
  • Errorオブジェクト:「エラー」を扱うオブジェクト

「型」とは

「型」とはその値がどのような種類のものかを示す分類である。

コンストラクターとインスタンス

コンストラクターとはオブジェクトのひな形のことで、インスタンスとはそのひな形から生成した値自体のことである。

new 演算子

新しく値を定義する際は「型」に応じたオブジェクトのコンストラクターからインスタンスを生成する。
インスタンスを生成するには new 演算子 を用いてコンストラクターを呼び出す。

// 「数値」オブジェクトのインスタンスを生成
var num = new Number(123); // => 123

リテラル

値を定義するたびにコンストラクターを用いるのは冗長であるため、それぞれのオブジェクトには定義のショートカットとも呼べるリテラル記法が用意されている。

// 「数値」リテラルを生成
var num = 123;

プリミティブ値

プリミティブ値とはJavaScriptにおいては、オブジェクトでない純粋なデータのことである。
値をリテラルで用いようとした場合に、数値・文字列・真偽値はプリミティブ値として定義される。
プリミティブ値はオブジェクトではないためプロパティやメソッドを持っていないが、呼び出された際は自動的にラッパーオブジェクトが生成されるため、コンストラクターを通じて生成したインスタンスと同じように利用することができる。

// 「数値」リテラルはプリミティブ値
var num = 123;
num.toString(); // => '123'

undefinednull

undefinednull は特別な意味合いが与えられたプリミティブ値である。

undefined

値が「定義されていない」ことを示す値である。

// foo に「未定義(≒存在しない)」であること示す
var foo = undefined;

null

値が「空」であることを示す値である。

// foo に「空(存在はする)」であることを示す
var foo = null;

MathオブジェクトとJSONオブジェクト

JavaScriptに予め組み込まれているオブジェクトのうち、MathオブジェクトとJSONオブジェクトは値に型を提供するコンストラクターとしての機能を持っていない。
これらのオブジェクトは謂わば便利ライブラリーで、それぞれにユーティリティとして様々な機能を提供する。

Mathオブジェクト

数学処理に必要な定数プロパティや演算メソッドを提供するオブジェクト。

// 円周率を示す定数
Math.PI; // => 3.141592653589793
// 絶対値を返すメソッド
Math.abs(-123); // => 123

JSONオブジェクト

JSONテキストを扱うためのメソッドを提供するオブジェクト。

// JSONテキストからObjectオブジェクトを生成する
JSON.parse('{"foo":"bar"}'); // => Object {foo: "bar"}
// ObjectオブジェクトをJSONテキストに整形する
JSON.stringify({foo: "bar"}); // => '{"foo":"bar"}'

jQueryの $(selector) の意味

普段何気なく使用しているjQueryの $(selector) は、セレクターにマッチするHTML要素から「jQueryオブジェクト」を生成するための記述である。

// jQueryオブジェクトを生成する
var jQueryObject = $('.foo');
// jQueryオブジェクトであるからjQueryのメソッドを利用することができる
jQueryObject.text('bar');

まとめ

  • 全ての値はオブジェクトである
  • オブジェクトは名前と値をペアとしたプロパティの集合である
  • 扱いたい値の型に応じて組み込みオブジェクトを使い分ける
  • 組み込みオブジェクトにはそれぞれにプロパティやメソッドが用意されている
  • ひな形であるコンストラクターを使って実体であるインスタンスを生成する
  • リテラルを用いればコンストラクターをショートカットして値を定義できる
  • 数値・文字列・真偽値・undefined・null はプリミティブ値である
  • MathオブジェクトとJSONオブジェクトは予め組み込まれているユーティリティライブラリーである
  • HTML要素に対して作用するjQueryの機能はjQueryオブジェクトであるからこそ利用ができる

JavaScriptに予め組み込まれたオブジェクトが、それぞれにどのような型の値を扱い、どのようなプロパティとメソッドを持っているかを学ぶには「開眼! JavaScript」が推奨できる書籍である。
開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment