_onichannn

【Underscore.js】オブジェクトにイテレーターを適用した新しい配列を生成する。

めも。

var obj = {
	hoge: 'foo',
	fuga: 'bar',
	piyo: 'baz'
}

var r = _.map(obj, function(v, k, l){
	return k+v;
})

console.log(r);

// ["hogefoo", "fugabar", "piyobaz"]

例のごとく、第1引数はバリュー、第2引数はキー、第3引数は自分自身のオブジェクトを指す。

 

【Underscore.js】_.each()メソッド使い方メモ。

今日からunderscoreデビュー。

ということで軽く使うまでの手順と合わせて便利メソッドを一つめも。

まずはunderscore.jsを読み込み

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>

あとはjQueryと同じ感じで使うだけ。

試しにかの有名な_.each()メソッドを使ってみる。

var obj = {
	hoge: 'foo',
	fuga: 'bar',
	piyo: 'baz'
}

_.each(obj, function(v){
	console.log(v);
})

// foo
// bar
// baz 


_.each(obj, function(v, k){
	console.log(k);
})

// hoge
// fuga
// piyo 


_.each(obj, function(v, k, l){
	console.log(l);
})

// Object {hoge: "foo", fuga: "bar", piyo: "baz"}
// Object {hoge: "foo", fuga: "bar", piyo: "baz"}
// Object {hoge: "foo", fuga: "bar", piyo: "baz"}

第1引数にはバリューが渡され、第2引数にはキーが渡される。第三引数は自分自身のオブジェクトが渡される。

バリューを取り出したい場合、jQueryのeachメソッドのようにキーまで受け取ってやらなくて良いのでスマートに記述可能。

 

【CDN】色々なJSやCSSをホスティングしてくれてるウェブサービス。

を見つけてしまった。↓

http://cdnjs.com/

underscoreやbackbornをホスティングしたいなぁとか思ってたら見つけてしまったのでめも。

 

【読了】パーフェクトJavaScript。

とてもボリューミーすぎて、まとめてアウトプットすることはちょっと難しい。
読み進めながら適宜自分用にエントリーを作成してきたけど、JSを書く際には手放せない1冊になりそう。

基本的な言語仕様、イディオムからかなりマニアックな根底の動作解説まで幅広く触れられていてかなり面白い内容だった。

もちろん知識としてとてもためになる内容で読んでいてとても楽しかったが、個人的に一番おもしろかったのは書籍末尾の「おわりに」かもしれない。
Javascriptを取り巻く環境の変化がいかに激しいか、なぜこんなにも光を浴びるようになったのか、そしてこれからのJavascriptに関しての見解は、今後のJSに対する学習モチベーションを大いに高めてくれた。

非常におすすめできる1冊である。

 

【enchant.js】HTML側のひな形メモ。

ある程度テンプレなのでメモ。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>TITLE</title>
<!-- スマホで閲覧した時用のズーム禁止設定 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- enchant.js本体を読み込む -->
<script type="text/javascript" src="./js/lib/enchant.js"></script>
<!-- 適宜ライブラリを読み込む(※読み込む順番も重要っぽい) -->
<script type="text/javascript" src="./js/lib/ui.enchant.js"></script>
<script type="text/javascript" src="./js/lib/nineleap.enchant.js"></script>
<script type="text/javascript" src="./js/lib/memory.enchant.js"></script>
<!-- メイン処理を記述したファイルを最後に読み込む -->
<script type="text/javascript" src="./js/main.js"></script>
<style>
body {
padding: 0;
margin: 0;
background: #000;
}
</style>
</head>
<body>
</body>
</html>

 

【Javascript】ページをサーバーリロードする。

めも。

// キャッシュを破棄しサーバーからリロードする
location.reload(true);

// キャッシュからリロードする
location.reload(fasle);

 

【Eclipse】フォント変更方法。

めも

「windows」→「preferences」→「General」→「Appearance」→「Colors and Fonts」

ここで該当する箇所の設定を選択し、右側の「Edit…」をおせばOK。

ちなみにEclipseのデフォルトフォントは「Consolas」、10pt。

 

【HTML】metaタグのviewportに関するメモ。

ハマったのでメモ。超絶自分用。

・指定したwidthを元にドキュメントの幅が決定される
・initial-scaleの倍率を適用し、デバイス毎の表示領域にドキュメントの幅が最適化される
・initial-scaleの倍率で「ズームした状態」のページが表示される
・width=device-widthにするとデバイスごとの幅になる
・minimum-scale、maximum-scaleはuser-scalableがyesの歳に設定すれば良い

とにかくバグ?というか納得行かない挙動が多いので都度要最適化。