phi

I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python

phiaryjust a creator

JavaScript 便利メソッド集

9 years ago

ちょっとしたコードで JavaScript を豊かにしよう♪

ってこと jQuery は 嫌い 使いたくない.
だけど Pure JavaScript だとちょっと物足りないってときに使える便利なメソッドをまとめてみました.

すべて Runstant によるサンプル付きなので, 実際に開いて動かして試すことができます. 実行したりコードをいじってみたりと遊んでみてください.

他にもこんなメソッドあるよーとかあれば追加するので 気軽に Twitter などでご連絡下さい.

String.prototype.format() - 文字列フォーマット

文字列を拡張して Phyton っぽい format メソッドを定義しています.

'(' + a + ')' って書いていたところを '({0})'.format(a) といった感じで書くことができるようになります.

Define

実装です.

Object.defineProperty(String.prototype, 'format', {  
  value: function(arg) {
    var fn = null;
    if (typeof arg === 'object') {
      fn = function(m, k) { return arg[k]; };
    }
    else {
      var args = arguments;
      fn = function(m, k) { return args[+k]; };
    }
    return this.replace( /\{(\w+)\}/g, fn );
  },
});

Example

使用例です.

オブジェクトを渡した際には key 名で, プリミティブ型を複数渡した際には index で対応する値に置換します.

var hello = 'Hello, {0}!'.format('world');  
console.log(hello); // Hello, world!

var profile = 'name: {name}, age: {age}'.format({  
  name: 'phi',
  age: '27',
});
console.log(profile); // name: phi, age: 27  

Runstant

http://goo.gl/Um3a8Q

randint(min, max) - 範囲指定でランダム整数を生成

範囲を指定してランダムな整数値を生成したいって場面, 結構ありますよね? 今回紹介するのは, そんなときに使える関数です.

min <= x <= max の範囲の整数値を返します.

Define

実装です. +1 するのが肝ですね!

var randint = function(min, max) {  
  return Math.floor(Math.random() * (max - min + 1)) + min;
};

Example

for (var i=0; i<10; ++i) {  
  console.log(randint(0, 10)); // 0 ~ 10 の範囲でランダムに表示
}

Runstant

http://goo.gl/Te2aHo

$ - document.querySelector のショートハンド

jQuery 使うまでもないけど DOM 取得はサクッとやりたい
ってときに使えます!!

Define

var $ = function(q) {  
  return document.querySelector(q);
};

Example

var h1 = $('h1');  
h1.innerHTML = 'Hello, world!';  

Runstant

http://goo.gl/TnIRZI

toArray() - 全てを Array(配列) に変換

arguments や HTMLCollection といった Array-Like オブジェクトでも
forEach や some といったメソッドを使いたい場面って結構あると思います.

そういった時は, とりあえずこのメソッドを定義しておくと便利です. argumentsHTMLCollection を配列に変換するメソッドです.

Define

定義です.

var toArray = function(arr) {  
  return Array.prototype.slice.call(arr);
};

Example

サンプルです.

var hello = function() {  
  toArray(arguments).forEach(function(name) {
    console.log('Hello, ' + name + '!');
  });
};

// 全ての名前が出力される
hello('phi', 'omatoro', 'daishi', 'minimo', 'simiraaaa', 'alkn', 'utyo', 'emadurandal');  

Runstant

http://goo.gl/U05DXK

GET ... 簡易非同期通信

外部ファイルを読み込むメソッドです. jQuery 使うまでもないけど 外部ファイルを取ってきたいってときにぜひ.

いずれは fetch() に置き換わるとは思いますが, まだまだ動くブラウザは少ないのでとりあえず紹介しておきます.

Define

var GET = function(url, fn) {  
  var req = new XMLHttpRequest();

  req.onreadystatechange = function() {
    if (req.readyState === 4) {
      if (req.status === 0 || req.status === 200) {
        fn(req.responseText);
      }
    }
  };

  req.open('GET', url, true);
  req.send('');
};

Example

// cdnjs から material を含むライブラリの一覧を取得
GET('https://api.cdnjs.com/libraries?search=material', function(res) {  
  var data = JSON.parse(res);
  data.results.forEach(function(item) {
    console.log(item.name);
  });
});

Runstant

http://goo.gl/Z5Zxmm

QueryString ... クエリパラメータを取得

URL の ?hoge=100 の部分をサクッとオブジェクトに変換するメソッドです.
parse/stringify どちらも定義してあります.

詳しくはこちら 『JavaScript で, 華麗に URL パラメーターを取得してオブジェクトに変換する方法

Define

var QueryString = {  
  parse: function(text, sep, eq, isDecode) {
    text = text || location.search.substr(1);
    sep = sep || '&';
    eq = eq || '=';
    var decode = (isDecode) ? decodeURIComponent : function(a) { return a; };
    return text.split(sep).reduce(function(obj, v) {
      var pair = v.split(eq);
      obj[pair[0]] = decode(pair[1]);
      return obj;
    }, {});
  },
  stringify: function(value, sep, eq, isEncode) {
    sep = sep || '&';
    eq = eq || '=';
    var encode = (isEncode) ? encodeURIComponent : function(a) { return a; };
    return Object.keys(value).map(function(key) {
      return key + eq + encode(value[key]);
    }).join(sep);
  },
};

Example

var obj = QueryString.parse('hoge=100&foo=bar');  
// parse
console.log(JSON.stringify(obj)); // {"hoge":"100","foo":"bar"}  
// stringify
console.log(QueryString.stringify(obj)); // hoge=100&foo=bar  

Runstant

http://goo.gl/r9fDUK

phina.js を宣伝させてください

最近 phina.js というゲームライブラリを作っています. 実は, ここで紹介したメソッドは全て phina.js から抜粋したものだったりします.

近々リリースするのでよかったら, star or watch していただけると幸いです.

また, 12月から Advent Calendar やるのでぜひこちらへのご参加もお待ちしております♪
phina.js Advent Calendar 2015 - Qiita