WEB+DB PRESS Vol.53 に記事を書きました

WEB+DB PRESS Vol. 53 にて、「JavaScript/Flash/HTML 5 でスパゲッティコードにならないためのモダン設計入門」というタイトルで記事を書きました。tenjin.webプロデュースという形です。


以下、あとがきです。

この記事の対象は、Web周辺(イントラの業務システム含む)のプログラマのうち、良くできる人と勉強始めたばかりの人を除いた、真ん中あたりの人です。なので、はてななどでblogを書いているような人にとっては物足りない内容かもしれません。

「モダン設計」についてすこし説明が必要かもしれません。これまで仕事やtenjin.webでクライアント側の実装状況を見てきた実感としては、イベントハンドラに設計無しでがりがり書くような状況が多く、HOWTO本をコピペして書くようなケースが圧倒的多数でした。そこで、そういう「脇役JavaScript」の延長でアプリケーションを構築してしまう方法に対して、JavaScriptの機能をフルに使って設計して実装する方法を「モダン設計」と呼ぼうというのがタイトルの由来です。モダーンクライアントサイドアプリケーション設計だと長いので。

今回取り上げた題材についてですが、いろいろ考えてMVCと状態管理にしました。どちらも大局的な設計方法です。サーバー側のMVCの情報はかなり多いのですが、ブラウザ側でのMVCや状態管理について入門的に触れた情報はほとんどありません。一方で、JavaScriptでのOOP技術やライブラリなどのミクロレベルの実装・設計、非同期の扱いについてはそれらに比べて数多くの情報がありますので、これらは含めないことにしました。さらにオブジェクト指向設計についても良書がいっぱいありますので、今回の記事には含めていません。そういう情報が必要になるところまで来てもらうことが今回の特集の役目かなと思っています。他にもいろいろ加えたい内容はあったんですが、書くパワーと割ける時間、ページの制限もあるところが難しいところでした。

という感じで読んだり、近所に紹介してもらえるとうれしいです。

tenjin.webで一度やった内容とはいえ、最新技術の紹介ではなくて考え方を伝えようとした内容だったので、下調べや全体の構成がすごく難しかったです。もちろんこういった雑誌に記事を書くのは初めてですし、どんな内容でも大変だとは思いますので気のせいかもしれません。

仕事が詰まっているうえに、仕事以外は全部こっちに時間を割いたので、各方面にご迷惑をおかけしたと思います。ごめんなさい。ごめんなさい。また、編集の稲尾さんには大変お世話になりました。プロの編集の威力に感動しました。一緒に書いたあがたさんにも大変助けてもらいました。一緒に仕事が出来て良かったです。ありがとうざいました。

なお、最近発生していたMVC祭りと今回の記事とは、自分の知る限り全く怪しい繋がりはないようです。でも、内容も含めて大変タイムリーな盛り上がりだと思いました。

5章サンプルコード(2009/12/25 追記)

4章まで読んだ後、5章を読んであれって思われた皆さん、ごめんなさい。記事の5章は設計だけで終わっているのですが、実際には完成一歩手前のほとんど動くコード(クライアントとサーバー)があります。以下のサポートページからダウンロードできます。

サーバー側のコードはJavaTomcat+Cubby)、クライアント側はJavaScriptで作ってあります。完全に完成させると細かいコードがふくれあがってしまい、かえって大局的な設計が見えにくくなるため、意図的に完成させてなかったり、抽象化を止めてベタな実装にしているところがあります。もちろん時間や工数的な問題もあったのですが、これ以上細かいところを完成させることはサンプルコードとして意味がないと判断して止めてます。もし興味がある人は、この先を実装してみたり、サーバーの実装をJava以外に取り替えてみたり、改良を重ねて実際に使えるアプリケーションにするのも面白いと思います。

紙面にサンプルコードがあることをお知らせする文章を書いていたつもりなのですが、漏れていました。ごめんなさい。ごめんなさい。