Flexアプリを複数人開発するときのガイドライン(マイルール)

flexアプリケーションを複数の開発者で開発したことがあったときに過去を反省して過去を反省した自分がよく使っていた開発方針のメモです。

よくあるコード

よくサンプルとかで見かけるソースコードです。html + JavaScriptもこんなイメージで書かれていることが多いので主流なんでしょうか。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  <mx:Script>
    <![CDATA[
            import flash.events.MouseEvent;
            import mx.controls.Alert;
            public function clickFoo ( event:MouseEvent ):void{
                Alert.show("foo");
            };
            public function clickBar ( event:MouseEvent ):void{
                Alert.show("bar");
            };
    ]]>
  </mx:Script>
  <mx:Buttun click="clickFoo(event)" />
  <mx:Buttun click="clickBar(event)" />
</mx:Application>

この形式で開発をすすめていくと…

• 色々なコンポーネントが増えてくるにつれて平気でソースコード1000行↑になる。
• コンポーネントFoo／コンポーネントBar／コンポーネントHoge...と増えていくに連れてイベントハンドラで使いたい名前が重複してくるので、衝突を防ぐ為に命名規則つけたりする。(後から)
• clickFooはベテラン実装者Aさん。clickBarの実装は初心者Bさん。clickFooを真似(コピペ）して書いて　clickFooでバグ発見という場合でもclickBarのバグを直しづらい。
• ボタンBarが不要になってもだけが削除されてclickBarが残る。
• コメントアウトされたよく分からないコードが増えてくる。
• 1ファイルが巨大になるとその分責任が重くなる。

ということが開発の後、後になってから増えてきたりする。

集団開発するときの原理・原則

集団開発するときに↑みたいなスタイルで開発してバグ修正がしづらかったり、どこを修正していいか分からなかったりして苦慮したことを反省して次のルールで開発するようになった。

• mx:Buttunのようなmx.controlsに所属するようなコンポーネントは必ず拡張して使う。mx.containerのようにPanelとかも中でゴニョゴニョする予定なら拡張する。
• 1ファイル＝1クラス。1開発者の割り当て。→責任の分散。
• ファイルの中身はブラックボックス。例えその中身のソースコードや冗長な処理があっても無視。(いいのか悪いのかは置いておいて。)
• そのクラスが不要になったら、中身をみずに削除。そのコンポーネントが依存関係にあったらコンパイラが教えてくれる。

というわけでこんな感じ

というわけでこういう感じで開発するようになりました。このスタイルに変更してから過去の遺産にお伺いたてることもなくなったので本来の創るという作業に集中できるようになりました。

main.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="app.*">
  <local:FooButtun />
  <local:BarButtun />
</mx:Application>

app/FooButtun.as

package app { 
    import flash.events.MouseEvent;
    import mx.controls.Alert;

    public class FooButton extends Button {
        public function FooButtun() {
            addEventListener(MouseEvent.CLICK,  click);
        }
        private function click ( event:MouseEvent ):void{
                Alert.show("foo");
        };
    }
}

app/BarButtun.as

package app { 
    import flash.events.MouseEvent;
    import mx.controls.Alert;

    public class BarButton extends Button {
        public function BarButtun() {
            addEventListener(MouseEvent.CLICK,  click);
        }
        private function click ( event:MouseEvent ):void{
                Alert.show("bar");
        };
    }
}