javascript備忘録(1) 〜基礎をおざなりにしてきた人々へ〜

javascript 基礎①

なんとなくjQueryはその他ライブラリを使用して、それなりに仕上げられるけども、
基本的なことをおざなりにしてきたすべてのweb制作者へ・・・（主に自分へ）

序章

javascriptとは

• javascriptは（クライアントサイド）ブラウザ内で使えるプログラミング言語
• プラグインなどを入れずに使えるクライアントサイドの言語はjavascriptのみ
• 各ブラウザの挙動を把握してjavascriptを書ける人は多くないため、極めている人への需要は常にある

デバッグ

alertデバッグ

• 古くから伝わるデバッグ方法
• ダイアログに値を表示させてデバッグする
• ダイアログが出ている間はプログラムが進まなくなるので、1つずつ確認しながらデバッグしたいときに便利

console.logデバッグ

• ブラウザ組み込みのデバッグコンソールに値を表示させてデバッグする
• alertデバッグと違い、プログラムの実行を止めることがないためループ中でも気軽に使用できる

基本

リテラル

• リテラルとは、「そのまま書ける値」のこと

リテラルの種類

• 数値リテラル
• 文字列リテラル
• 正規表現リテラル
• 真偽値リテラル
• nullリテラル

変数

• 初期値はundefined
• javascriptの場合は変数になんでも入れて良い
• javascriptの変数には型は存在しない
• そのため、同じ名前の変数に数値や文字列を代入し直すことができる

var hello = 'Hello World!';
console.log(hello);

// 変数 hello に 'Hello World!'という文字列を入れている。
// Hello World!が出力される。

オブジェクト

• 連想配列のこと

var obj = {
  x: 1,
  y: 2,
  z: 3
};

匿名オブジェクト

var obj = new Objec();
obj.name = 'hoge';
obj.number = 12;
//↓も同じ
var obj = {
  name: 'hoge',
  number: 12
};

グローバルオブジェクト

• グローバル変数や、グローバル関数を管理するために自動で生成される
• はじめから提供されているグローバル変数
• Nan, undefined, Stringなど

グローバル変数, グローバル関数

• 関数に属さないトップレベルの関数や変数
• var宣言しないものはすべてグローバル変数になる

ローカル変数

• 関数全体に適用される

var scope = 'scope';

function getVal () {
  console.log(scope);
  scope = 'local scope';
}
getVal(); // =>scope
//'scope'が出力されるが、変数scopeには'local scope'が入っている

getVal(); // local scope

データ型

• 数値: number
• 文字列: string
• 真偽値: boolean
• 配列, オブジェクト: object

データ型の判別

var num = 1;
console.log(num);
// 変数 num　は数値なので、numberが出力される

var hello = 'Hello World!';
console.log(hello); // => Hello World!
// 変数 hello は文字列なので、stringが出力される

関数

• 関数はすべてFunction オブジェクト

//関数リテラル
var foobar = function (n) {
  console.log(n * n);
};
foobar(40); // => 1600

//静的関数
function foobar (n) {
  console.log(n * n);
}
foobar(40); // => 1600

//匿名関数
(function (n) {
  console.log(n * n);
})(40); // => 1600

関数リテラル

• 代入されたタイミングで関数が評価されるため、代入前に実行された場合はundefinedエラーとなる

console.log(call()); // => この時点ではcall()は定義されていないためエラーとなる
var call = function () {
  return '関数リテラル。この場合はエラーとなる';
};

静的関数

• エラーにならない
• 先に解析 / コンパイルされているので、undefinedエラーにならずに実行される

console.log(call()); // => '静的関数。エラーにならない。'
function call () {
  return '静的関数。エラーにならない。';
}

Function 組み込み関数

• 仮引数と関数の中身が文字列で定義できる
• 実行時に文字列を作り出すため、実行速度が遅い

// var func = new Function (引数, 引数, 処理);
var triangle = new Function ('base', 'height', 'return base * height / 2');
console.log(triangle(50, 50));
// ↓と同じ
var triangle2 = function (base, height) {
  return base * height / 2;
};
console.log(triangle2(50, 50));

関数を変数に入れる

• javascriptでは関数を変数に入れられる
• その変数を別の関数の引数に出来る => 高階関数

高階関数の使い方

• 大枠のメソッドを作成すれば、関数で色々な動作が可能
• 配列のmapとかreduceはよく使う高階関数を使用するメソッド

//違う関数を10回ずつ実行する高階関数
var tenFunction = function () {
  for (var i = 0; i < y; i++) {
    console.log(f(x));
  }
};
var plus = function (x) {
  return x + x;
};
var multiply = function (x) {
  return x * x;
};
tenFunction (5, 10, plus); // => plus(5)が10回実行される
tenFunction (5, 10, multiply); // => multiply(5)が10回実行される

arguments オブジェクト

• javascriptで関数に引数を渡して実行すると、内部的にargumentsオブジェクトが生成される
• 関数のみで使用可能なオブジェクトである
• 引数の数の違いでエラーにならない

function argumentsTest () {
  console.log(arguments[0]); // => 引数1
  console.log(arguments[1]); // => 引数2
  console.log(arguments[2]); // => 引数3
}
argumentsTest('引数１', '引数２', '引数3');
// 引数1, 2, 3, が出力される

再帰処理

• 再帰処理をするなら、argumentsのcalleeメソッドを使用する
• argumentsオブジェクトが生成されたメソッドを呼び出す
• 関数名が変わった時も再帰で呼び出しているメソッド名を変えなくて済む
• 匿名関数で再帰処理が可能になる

//下記は、引数の階乗を返すコードの例（階乗 = 4*3*2*1みたいな；）
var n = 4;
var t = function (n) {
  if (n === 1) {
    return 1;
  } else {
    return n * arguments.callee(n - 1);
  }
};
console.log(t(n)); // => 24

callオブジェクト

• 関数呼び出しのたびに自動生成されるオブジェクト
• 関数内で定義されたローカル変数を管理するためのオブジェクト
• argumentsもcallオブジェクトのプロパティのひとつ
• グローバルオブジェクトとcallオブジェクトは内部的に結びついている

スコープチェーン

callオブジェクトの中で関数をさらに定義すると、さらにcallオブジェクトが結びつく。これを生成順に結びつけたものをスコープチェーンという。

一番内側の関数で変数を呼び出した場合、一番内側から順々にcallオブジェクトをたどっていき、最後にグローバルオブジェクトを探す。

// サンプル1
function a() {
  function b() {
    var localB;
    function c() {
    }
  }
}

// サンプル2
var z = 'global';
function globFunc () {
  var y = 'outer y';
  var z = 'outer z';
  function inner () {
    var z = 'inner z';
    console.log(z); // => inner z
    console.log(y); // => outer y
  }
  inner();
  console.log(z); // => outer z;
}
globalFunc();
console.log(z); // => global