六帖webアプリ
kickzone/TrainNavi2 · GitHub
駅、線路の描画のみ完成。現時点では、路線を選択してStartボタンを押すと駅と路線が描画されるだけ。将来の拡張を見越して、スクロール前の絶対位置や倍率なども考慮して設計しながらコードを書くので骨が折れる。でも後で楽になるはず。
ソースを分散したので、開発効率は大幅に上がった。以前のようにメモ帳だけ、しかも単一ファイルで開発していてはデバッグが大変すぎて苦しかった。来週は電車を走らせてみよう。

課題
Javascriptはクラスベースの言語ではない。仕事でC++やC#ばかり使っているので、どうしてもオブジェクトの共通メソッドとしてのクラスメソッドを実装したくなってしまう。しかしながら、クラスメソッドとしてプロトタイプにメソッドを記述すると、thisの嵐になってしまう。

TNStation.prototype = {
makeObject : function(cj, stage, coefXY, latView, lonView){
this.stage = stage;
this.cj = cj;
var sha = new cj.Shape()
this.shape = sha;
var gr = sha.graphics;
//描画
gr.beginStroke(this.line.lineColor).beginFill(this.line.lineColor).drawRect(-5, -5, 10, 10, 1);
//stageに追加
stage.addChild(sha);
//初期位置、係数を保存しておく
this.initLatView = latView;
this.initLonView = lonView;
this.coefXY = coefXY;
},
setScale : function(scale){
this.scale = scale;
this.shape.scaleX = scale;
this.shape.scaleY = scale;
},
moveObject : function(latView, lonView, centerX, centerY){
var x = ((this.longitude - this.initLonView) * this.coefXY + (lonView - this.initLonView) * this.coefXY) * this.scale + centerX;
var y = ((this.initLatView - this.latitude) * this.coefXY + (this.initLatView - latView) * this.coefXY) * this.scale + centerY;
this.shape.x = x;
this.shape.y = y;
}
}

thisばっかりで読みにくいし、thisを付け忘れやすくエラーの原因にもなる。なんとかならないか。

Tweet