JavaScriptのfalsyとtruthyの和訳

今lodashのAPIを訳しているのですが、falsyとtruthyという言葉と遭遇しました。falsyのすぐ後にfalsy valuesはこれだよって説明があったのですんなり理解はできましたが、いざ和訳するとしてどういう言葉をあてればいいのか悩みます。

肝心のfalsy valuesは以下です。

• false
• null
• 0
• ''
• undefined
• NaN

要するに、真偽値評価時にfalseと判定される値のことを、falsy valuesというみたい。「真偽値評価時にfalseとなる値」と長ったらしく書くのも気持ち悪いですし、「falseと評価される値」ですかね？truthyは逆に「trueと評価される値」です。

他にも葛藤している方は多くいらっしゃるみたいでした。

• truthy, falsy の訳について考えてみた。

ちなみにMDNのGlossaryに単語として登録されていました。

• Truthy
• Falsy

結局ほかのどの言語にも訳されてませんね……涙

$scope.$watchの挙動

$scopeにバリバリ値を設定している場合は、下記で$watchができます。ただし、$scopeの利用はグローバルスペースの汚染につながる為、現在はバッドプラクティスとされる例が多いようです。

$scope.val = 'some value';
$scope.$watch('val', function() {
  // scopeのvalが更新された時の処理
});

そこで、$scopeに値を設定せずcontrollerAsを使い、値を扱うのですが、その際は、$watchの書き方は下記になります。第一引数にwatchする変数をreturn文により返してやる必要がでるのです。

$scope.$watch(function() {
  return this.model.val;
}, function() {
  // modelのvalが変わった時
});

違いはそんくらいですが、知らずにはまってました。公式のドキュメントにはちゃんと乗っていたのにちゃんと見ていなかった……

ES5 JavaScriptのプロトタイプチェーン（継承）

オブジェクトの継承　～プロトタイプチェーン～

継承：もとのオブジェクトの機能を引き継いで新たなクラスを定義する。

JavaScriptではプロトタイプチェーンで実現する！

var Singer = function() {};

Singer.prototype = {
  walk : function() {
    console.log('DUDA DUDA DUDA...');
  }
};

var Michael = function() {};
Michael.prototype = new Singer(); // これがプロトタイプチェーン

Michael.prototype.pow = function() {
  console.log('POW!');
};

var mj = new Michael();
mj.walk(); // DUDA DUDA DUDA...
mj.pow();  // POW!

ES6が一般的になればclass構文が使えるようになり、上記のような記述はかなり楽になるかと思われます。ですがES6のclass構文はあくまでもSyntax Sugarなので、内部的には上記の動きは変わらないみたいです。ということで、上記のコードについて理解しておくことは意味がある！はず！

先日作ったES6+jQueryで作ったTodoアプリをAngularJSで動くように作り変えているのですが……これが難しい！

AngularJSは学習コストが高いというふうに事前に聞いては居ましたが、なかなか勝手がわからないのと、MVCモデル自体に対しての理解がまだ浅いのがツラミに拍車をかけている感じです。今はこんな感想ばっかしかブログに書けていませんが、余裕が出てきたらちゃんと意味のあるものを載せていきたいです……。

jQuery

今日はほぼ初めて真剣にjQueryと向き合いました。jQueryはJavaScriptの数あるライブラリの中でもデファクト・スタンダードで、いまさらここで説明する必要もないかとは思います。生身のJavaScriptでのDOM操作は正直煩雑ですがそこらへんをneatにwrappingしてくれます。

今日は先輩エンジニアが横についてペアプログラミングでES6 + jQueryでTodoリストを作成しました。

1. Gitのリポジトリ作成
2. Gulpの設定
3. bowerコンポーネントのインストール
4. Todoリストの作成

イベントのバブリングだとか、jQueryの使い方とかをみっちり教えていただけました。先月と比べて良くしてもらいすぎてて怖いくらいです。これなら自分にもわかるな。

JavaScript本格入門を読み始めました

先日のQiitaの記事でおすすめされていた、この本。
早速買って読んでみました。

JavaScript本格入門　?モダンスタイルによる基礎からAjax・ｊQueryまで

10章あるうちまだ3章しか読めていませんが、JavaScriptの特徴がうまく説明してあって解りやすいです。

データ型とObject, Function周りについて自分自身の中でやっとうまく消化出来ました。構文もしっかり載ってるし、JavaScriptがわけわからずだった自分にとって非常に有用な本です。ひと通り読み終わるかキリの良い所で内容をまとめようかな！読んだで終わりにしたら今までと変わらないからね！

JavaScript 基本型と参照型

基本型と参照型

JavaScriptでは基本型(string, num, boolean, null, undefined)と、参照型(object)があります。2つの間では代入の挙動が以下のとおり大きく変わります。

// 基本型の代入
var x = 1;
var y = x;
x = 2;
console.log(x); // 2
console.log(y); // 1

// 参照型の代入
var arry1 = [0, 1, 2];
var arry2 = arry1;
arry1[0] = 3;
console.log(arry1); // 3, 1, 2
console.log(arry2); // 3, 1, 2

基本型はJavaやってた自分からすればすんなり理解できます。 var y = xで1がyに代入され、その後に2がxに代入される流れ。

でも参照型はJavaやってたら頭に？が浮かぶと思います。 参照型は、代入時、あくまでも参照先のアドレスが代入されるだけで、 実際の値が代入されるわけではないのです。 上のコードの場合は、arry1もarry2も、同じ[0, 1, 2]という オブジェクトを参照していて、そこの値を変えた、という流れです。

国内のIndexedDB

HTML5の一部として登場したIndexedDBですが、国内ではほぼ使われていないように見られます。 まずMozillaのIndexedDBのページですが、下記構成になっています。

https://developer.mozilla.org/ja/docs/IndexedDB

IndexedDB
└┬─IndexedDB の基本コンセプト
　└─IndexedDB の使い方

この親ページは現時点での最終更新日が2014/12/29で、子ページについては未翻訳の状態です。 英語の親ページは2015/07/14に更新されています。数は少ないですが子ページも他言語に訳されていますね。

最近お世話になっている色々なサイトでIndexedDBについて調べてみました。 以下が検索結果の件数です。（カッコ内はIndexedDBのタグ付き記事の件数）

Qiita	Teratail	Stackoverflow(jp)
28件(3件)	7件(タグなし)	0件(タグなし)

想像以上に少ないですね。調べても情報がろくにでないわけだ！ 使っているけどネット上に公開していない人も多いとは思いますが、 HTML5の新APIにしては注目度が低く感じます……

Stackoverflowの本家ではどうなのか気になったので見てきました。

Stackoverflow
3382件(938件)

決して多い数字ではありませんが、日本の100倍くらい情報が転がってそうです。 今IndexedDBを極めれば日本では有数のIndexedDB Masterになれるかもしれませんね！