過去記事

たまにJavaScriptでタグ実装する人のためのJavaScriptメモ

Javascript固有の技術的事情。
Javascriptからちょっと離れていたり他の言語使っていたりすると忘れてしまうポイントをまとめておく。
まあ自分のための備忘録でもある。

変数の型

  • プリミティブ型
    • 数値型
    • 文字列型
    • 論理型
    • null型
    • undefined型
  • オブジェクト型
    • 配列
    • 連想配列
    • 日付
    • :

値渡しと参照渡し

プリミティブ型は値渡し、オブジェクト型は参照渡し

ライブラリ

var myLib = {};
myLib.methodA = function () {
  // 処理
  :
  return result;
};
myLib.methodB = function () {
  // 処理
  :
  return result;
};

クラス

// http://www.yunabe.jp/docs/javascript_class_in_google.html
// クラスとコンストラクタは関数を使って定義します
Person = function(name, age) {
  // this はインスタンスを表します。
  this.name = name;
  this.age = age;
};

// メソッドはコンストラクタの prototype プロパティに定義します
Person.prototype.getName = function() {
  // メンバ変数の定義・参照は this.<メンバ変数> を使います。
  // C++, Java と違い this は省略できません。
  return this.name;
};

Person.prototype.sayHello = function() {
  // メソッド内から他のメソッドを呼ぶ場合も this.<メソッド> を使います。
  // C++, Java と違い this は省略できません。
  console.log('Hello I\'m ' + this.getName());
};

falseの扱い

以下の場合にfalse判定される

if (false) {
  // do something: 実行されない
}

if (null) {
  // do something: 実行されない
}

if (undefined) {
  // do something: 実行されない
}

if ('') {
  // do something: 実行されない
}

if (0) {
  // do something: 実行されない
}

if (NaN) {
  // do something: 実行されない
}

false判定のうまい使い道

if (myObject)  //オブジェクトのインスタンスの有無
if (document.addEventListener) //メソッドの有無
if (items.length) //要素の有無

function(x){
  x = x || 'Hello'; // 変数の初期値設定
    :
}

var myApp = myApp||{}; // 安全な名前空間の登録

falseや0という値に意味がある場合はうまく動作しなくなるので、そこは気をつけて。
変数の厳密な初期値判定

function(x){
  if (typeof(x) === undefined) {
    x = 'Hello';
  }
    :
}

文字列処理

文字列の一部取得

str.substr(start[, length]) // もう使わない
str.substring(start[, end])

インデックスは文頭が0、文末がstr.length - 1

正規表現

  • マッチするかどうか → regexp.test('str') → true / false
  • 正規表現置換 → str.replace(pattern, replacement)
  • マッチした部分を返す → str.match(pattern)（ただし/gで） → マッチした部分の配列

都度実行すると地味に遅くなるので繰り返し処理では避けたほうがいい処理

  • Array.prototype.length
  • document.getElementById('hoge')

→一旦別の変数に格納して

一見jQueryでやりたくなることでもネイティブのJavascriptでできる

非同期処理対策

Javascriptで最もハマるポイントである非同期処理

日付処理あれこれ

JavaScriptで日時を使ってランダムな文字列を作るワンライナー

セッションIDやユーザIDを生成する際などに使う。

  • 日時（マイクロ秒）→ユニーク
  • ランダムな数字列

の結合。前者と後者の結合はドット（.）を使う

[new Date().getTime().toString(), Math.floor(1E12*Math.random())].join('.')

DOM指定

  • IDのみで指定できる場合→document.getElementById()
  • XPathで指定→document.evaluate()
  • CSSPathで指定→document.querySelector()
  • 単純なものはXPathよりCSSPathのほうが速い

HTMLの一部書き換え（追記）

  • node.appendChild(newElement)
  • node.insertBefore(newElement,referenceElement)
  • element.innerHTML = '<div>something</div>'

過去記事 の記事一覧