JavaScript 便利メソッド集
ちょっとしたコードで 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
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
$ - document.querySelector のショートハンド
jQuery 使うまでもないけど DOM 取得はサクッとやりたい
ってときに使えます!!
Define
var $ = function(q) {
return document.querySelector(q);
};
Example
var h1 = $('h1');
h1.innerHTML = 'Hello, world!';
Runstant
toArray() - 全てを Array(配列) に変換
arguments や HTMLCollection といった Array-Like オブジェクトでも
forEach や some といったメソッドを使いたい場面って結構あると思います.
そういった時は, とりあえずこのメソッドを定義しておくと便利です.
arguments や HTMLCollection を配列に変換するメソッドです.
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
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
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
phina.js を宣伝させてください
最近 phina.js というゲームライブラリを作っています. 実は, ここで紹介したメソッドは全て phina.js から抜粋したものだったりします.
近々リリースするのでよかったら, star or watch していただけると幸いです.
また, 12月から Advent Calendar やるのでぜひこちらへのご参加もお待ちしております♪
『phina.js Advent Calendar 2015 - Qiita』