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

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>

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

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

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

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

  • 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");
        };
    }
}