Maintainable Javascriptを読んだ

January 07, 2013 ( javascript )

Maintainable Javascript

Nicholas C. Zakas

Oreilly & Associates Inc

発売日：2012-05-31

ブクログでレビューを見る»

javascriptは以前からいろいろ実装していたものの、なんとは無しに実装していたが運用しやすいコードってどんなもんだろうな。どういう気概でやってるのだろうと思ってこの本を読んでみました。

だいたい大きく纏めると

Style Guidlines
Programming Practice
Automation

で構成されています。今回はその「Style Guildlines」についてぼやいていこうと思います。だいたい言っていることは他の言語でも通ずるところがあったのでしっくり腹に落とし込めた気がします。あと、「Style Guidlines」に関してはおすすめだけじゃなくてなんでこういう書き方いいのかを説明されているので納得いくものがありました。「Programming Practice 」は結構知らないことが多々あったのでちょっと実用性があるかは疑問なものもあったけど勉強になったと思います。

Basic formatting

コードのインデントや変数名・関数名の決め方がこんな書き方がいいよという紹介から始まり、変数の型について説明されていた。

特にnullとundefinedで細かく説明されていたのでメモ。

null

変数宣言の際には初期化しようね

var hoge = null;

期待されていないオブジェクトだったりしたときはnullを返す

function getPerson(){
  if (condition) {
    return new Person();
  }
  else {
    return null;
  }
}

var person = getPerson();
if (person !== null) {
  doSomething();
}

引数に設定（供給）されたかどうかをnullでチェックしないで！この関数に技術的に間違っているわけじゃないけどそういう想定で
やるとあとで大変なことになるからやらんほうがいいのかな。
（すこしわかってない）

function hoge(arg1, arg2) {
  if (arg2 != null) {
    doSomething();
  }
}

undefined

基本的にこれは混乱を招くものなので使わないようにしよう！と筆者は書いていた

var person;
typeof(person); // "undefined"
typeof(hoge);   // "undefined"

変数宣言したけど初期化してないからundefined、宣言してなくてもundefined。仮にエラーが発生しても宣言されていな変数と統一するべきだろう。あとはこんな混乱が起きないように初期化しようって話

var person = null;
if (person === null) {
  do();     
}

Comments

コメントの書き方のおすすめなんかが説明されています。

Statements and Expressions

条件文を書くときの作法なんか書かれていて、基本的な者から筆者のおすすめやら各コーディング規約に準ずるとこんな書き方できるよっての書かれていてそれを採用してるときりがないので自分もしっくり書き方を紹介

// if,forの次は必ずspace
// ()内部は空白を入れない
if (condition) {  
  do();
} else {
  doElse();
}

for (var i = 0;i < 10; i++) {
  do();
}

switch (condition) {
  'hoge':
    // do something
    break;
  'moge':
    // do something
    break;
  default:
    // none
}

個人的には「if」は以下のように書きたい

if (condition) {
  do();
}
// ここにコメント入れられたりできて見やすい
else {
  doElse();
}

The loop

言わずと知れた構文だが、continueは利用しないほうが分かりやすくてバグの原因とならない

var values = [1,2,3,4,5], i;

for (i=0; values.length < 5; i++) {
  if (i != 2) {
    process(values[i]);
  }
}

The for-in loop

for-in は基本的にはオブジェクトのプロパティを走査するときに利用される。利用するときはhasOwnPropertyを利用することを筆者はおすすめしている

var prop;
for (prop in object) {
  if (object.hasOwnProperty(prop)) {
    console.log(prop);
    console.log(object[prop]);
  }
}

単純な配列の走査はしないようにすすめている。これは数値的インデックスされたプロパティとして走査されてしまい、本来値としてのデータとして扱われないのだ！なので先天的なエラーをお越しかねない。

Valiables, Functions, and Operators

まぁ、あたりまえのことなのですが最初に変数宣言はちゃんとしようぜ。から、無名関数を宣言するときは最後の行でオブジェクトか無名かわからなくなるから無名関数の場合は()でくくってね！

// Bad
var hoge = function() {
  alert('hohoho-');
}();

var hoge = (function() {
  alert('hohoho-');
}());

Primitive Wrapper Type

結論から言うと型としての扱い方がわからなくなるので利用しないことを進めている。


var name = 'hoge';
// このとき、処理の裏側では一時的にインスタンスが生成されている
// のでこの書き方をしてもエラーにはならないらしい
name.toUpperCase();
console.log(name.toUpperCase());


// ので以下のものはBad
var name = new String('hoge');
var num = new Number(20);
var bool = new Boolean(true);

次回は、「Programming Practice」をメモってみる。