読者です 読者をやめる 読者になる 読者になる

ジンジャー研究室

長めのつぶやき。難しいことは書きません。

JavaScriptでバグが消えるまで

動的型付け言語は実行時にエラーが出るから嫌だよね、と良く言うけれども、実際にどんなエラーがどのくらい出ているのかを遊びがてら試してみた。

作ったものと条件(ざっくり)

  • HTML中でSVGを一定時間アニメーションさせる
  • ライブラリとしてRaphael.jsとBackbone.jsを使う
  • HTML+JSで130行程度
  • エディタ機能はシンタックスハイライトのみ

これを一度も実行せずに最後まで書き切った後、そこそこ想定したとおりに動くようになるまでに、修正を何回入れれば良いかを試してみた。

結果(エラーの起きた順)

Uncaught SyntaxError: Unexpected token ) 

どこかからコピったら、関数の終わりに閉じ括弧が付いていた。

Uncaught SyntaxError: Unexpected token ; 

どこかからコピったら、オブジェクトのプロパティ(関数)の終わりにセミコロンが付いていた。

Uncaught TypeError: object is not a function 

newを余分に付けた結果、コンストラクタだと思っていたものがインスタンスだった。

Uncaught TypeError: Cannot read property 'width' of undefined

initializeの時点ではインスタンスにoptionsが設定されていないというBackbone.jsの仕様理解不足。

Uncaught TypeError: Cannot read property 'sequencer' of undefined

コンストラクタに変数を渡すのを忘れていた。

Uncaught TypeError: Cannot call method 'add' of undefined

Backbone.Modelのプロパティを取得するのにgetを呼ぶ必要があるのを忘れていた。

Uncaught TypeError: Cannot read property 'width' of undefined

initializeの時点ではインスタンスにoptionsが設定されていないというBackbone.jsの仕様理解不足。

Uncaught TypeError: Cannot read property 'time' of undefined

Backbone.Modelのプロパティを取得するのにgetを呼ぶ必要があるのを忘れていた。

Uncaught TypeError: Cannot set property 'undefined' of undefined

Backbone.jsの仕様理解不足。クライアントサイドで自動付与されるIDはidではなくcid。

Uncaught TypeError: Cannot set property 'c6' of undefined

インスタンスのプロパティ(ハッシュ)の初期化忘れ。

(何も表示されず)

Backbone.Modelのプロパティを取得するのにgetを呼ぶ必要があるのを忘れていた。

(何も表示されず)

Modelのコンストラクタに渡す変数の型が間違っていた。

(図形が大きすぎる)

数値が間違っていた。

(図形が2つある)

メソッドを誤って別の場所で2度呼んでいた。

(図形の表示位置がおかしい)

すぐに解決できなかったのでここで終了。

統計

おおよそ次のような結果になった。

エラー回数(全15回)
  • シンタックスエラー: 2回
  • 型エラー: 8回
  • ぬるぽ相当: 2回
  • ロジックのミス: 3回
時間配分
  • 書いていた時間: 約2時間30分
  • 直していた時間: 約30分

直していた時間のうち半分が型エラーだとすると、新規開発で既に10%くらい型エラーでロスしている計算になる。
そしてもちろん、これが大規模&チーム開発になると物凄い勢いでロスが生じるのであろうと想像する。

まとめ

所詮遊びなので、条件が適当だとか分かりきったことを言っていじめないで欲しい。