404 motivation not found | t_ishidaのブログ

2月/08

18

xyzzy.cgiと、石田式Webアプリ開発手順

xyzzy.cgiと前置き

以前、僕がPerlのWebアプリ用のフレームワークを作成した事が有ると言う話をした。

結局、ライブラリ群を固めただけで、フレームワークの状態までは持って言ってない。*1

そのフレームワークはxyzzy.cgiと言う。

どう言うものかというと、テストに着目したフレームワークだった。

xyzzyと言うテキストエディタの拡張Lispにperldbと言う、Perlのデバッガを実行している行を追いながら起動できると言うものだ。で、それを使いながら開発する事が面倒くさくないようにと言うのが狙いの一つであった。Perlのデバッガなので、コマンドラインから実行するのが基本となる。

xyzzy.cgi概要
  • WebからアクセスするされるCGIの部分をxyzzy.cgiと言う単一のCGIが受け持つ。
  • ?page=aaaの引数により”テンプレートのファイル”と”データ構造を作成するための関数”を結びつける。
  • データ構造を作成するための関数は「セッション変数」と「GET|POSTパラメータ」を、引数として受け取る。

と言うのが基本だ。

他に、

  • データ構造を返す関数の戻り値を、XML化、JSON化、RSS化、バイナリストリームなど、求められる形式で返すことが出来る
  • 引数としてURLを受け取り、XMLのパース結果、HTMLのスクレイピング結果を*2関数の引数に渡す事が出来る。
  • 石田好みの、自己満足的ライブラリ群

等のおまけも有ったが、まあ、これはおまけ。

つまり、何が重要かと言うとWebのテストと言うのは「画面を目視する」と事態に陥り、見落とし、サボりにより、無駄に品質が低くなってしまう可能性が高いと言うこと。

まあ、言われた事を忠実にやりとげる典型的日本人が多いプロジェクトなら良いが、「だるい」、「3回以上の同じ手順を手動でループは耐えられん」とか平気で抜かす社会不適応者も集まるのがプロジェクト。

そんな場において重要なのは、

いかに「(関数ベース|クラスベース)まで落とし込み、細かく、戻り値と期待値を比較させられるか?」と言う事になる。

関数ベースやクラスベースならば、期待値を作りやすく、戻り値の比較が、画面目視よりも容易なのだ。xyzzy.cgiは、そこに着目して、テンプレートのパース直前の、テンプレートに渡すためのデータ構造まで、自動テスト化することが出来ると言う事を目標にして開発していた。さらには、またテストを自動化できると言う事は当然、コマンドラインから実行する事が出来る。そこで、テストまでいく手前のデバッグ段階で、xyzzyを使用することでコードデバッグが可能になる。と言うのがテーマであった。

さすがにテンプレートそのもののテストは、JavaScriptのテストやデザインのテストも含まれるので、あるべき位置にあるべき値が入っていると言うのは一緒にチェックできるだろうし、ここは目視チェックさせれば良いだろうと考えた。*3

前置きまとめ

余談が過ぎたが、つまり、僕がWeb開発で重要だと考えている事柄は、

  • 見た目とロジックは出来る限り分けるべき
  • 出来る限りコマンドラインから実行できるようにすべき
  • コマンドラインから実行できるものについては、自動テスト化すべき

と言う事である。

これを忠実に守ってかつ、良識のある人が作れば、MVCモデルになるはずである。

  • M:データ(ファクトリにしろ、素直なオブジェクト指向にしろ)
  • V:テンプレート
  • C:パラメータ解析、データ生成への値の受け渡し等、画面遷移、テンプレートへのデータの受け渡し等

昔から、こうやって作ると整理されるだろ?、変更しやすいだろ?、疎結合だろ?とか言われていて単にMVCで作って満足している人も居るが、石田式で重要なのは、ソースが綺麗だとか、再利用性だとかは知った事ではなく、テストがしやすく「変更されても、品質の保証がし易いように自動テスト化が行いやすい」からMVCを重要だと叫んでいる事にある。で、xyzzy.cgiは、賢明な人は気づいて居ると思うが、コントローラの部分が重要だ。そう、ビューは見た目の問題なので仕方なくとも、単なるコントローラのテストの自動化が出来ないのは気に入らない。そこで、コントローラの部分は苦労して、汎用性のある据え置きタイプを作って、テスト不要な状態に持っていきたかった。ってのが、xyzzy.cgiの真相である。

PHPにおける開発手順

もう、前置きだけでやる気が尽きたし、はてなを読んでるようなレベルの人は、ここまで読んだら言わずもがなでしょう。

手順だけおいときます。

脊髄反射で作るWebアプリ
  • htmlを書き始めて画面のイメージを作ります。
  • 可変になる部分を、PHPをそのまんま使うんでもSmartyにするんでも、埋め込み形の値にします。
  • 埋め込んだ値を満足させられるデータ構造を作ります(このテンプレートの引数になり、また、正常ケースとなります。)
    • array( array(id => 1,name=>’name1′), array(id => 2,name=>’name2′), array(id => 3,name=>’name3′) )のような形
  • コントローラ用のPHPを用意します。
  • コントローラ用のPHPに先ほど作ったデータ構造を貼り付けておきます。
    • データ構造がテンプレートにちゃんと値を貼りこめる事を確認しておきましょう。
    • 貼りこんだデータ構造に値の編集が必要な場合には、ここで書き加えても良いでしょう。
    • 用心深い人は、貼りこむ値をやたらめったらに長い文字列にしたり、変な値を加えるようにしても良いでしょう。
  • どう言う入力があった場合、どう言う風に値が変化するかを考えて、関数の呼び出しと、引数にブレイクダウンしていきます。
    • さらに、ここでテンプレートに値が書き込めるテストをしたデータ構造を残しておき、デバッグモードの時にはテンプレートに渡すデータ構造を、そいつで上書きできるようにしておくのがベターです。
  • ブレイクダウンした関数群に対して、自動テストを書いていていきます。
  • ちゃんと全部が動くようになる事を確認したら、まとめて一発流してみましょう。
  • 一発流したら、となりの席の人に「この画面でバグを10個発見したら、昼飯奢るよ」って言いましょう。
    • そう手動でやらなきゃならん事は、プログラムを書いた本人以外にお願いするのが良いです。

と言う感じでよろしく。

データオリエンテッド

えっと、脊髄反射でやった事の反対側からやって下さい。

以上。

*1:正確にはフレームワークの形までにはしたが、使っていな

*2:スクレイピング用のロジックをプラグインで追加する必要あり。また、これは未実装だった

*3:正確にはxyzzy.cgiからテンプレートでパースしたものは、inputタグ、selectタグ、textarea,tableタグを全て洗い出してid,name,値のセットを、onload時に、全て画面下部にダンプすると言う機能をつけてみたが、途中であんまり意味が無いことに気づいて、とりやめた。

Share and Enjoy:
  • Digg
  • del.icio.us
  • Google Bookmarks
  • Tumblr
  • email
  • Facebook
  • FriendFeed

RSS Feed

コメントはまだありません。

Leave a comment!

<< PHPのフレームワーク下調べ(1)のメモ

初出社日 >>

Find it!

Theme Design by devolux.org

Tag Cloud