今回のお題
今回のお題は画像ファイルの一覧を表示するWebアプリケーションです。仕様は次のとおりです。
仕様
- ユーザは、FTPソフトを使用して画像ファイルをサーバ上の画像ディレクトリに直接アップロードする。画像ディレクトリの場所はWebアプリケーション直下の「webapp/images」(注4)
- Webアプリケーションは、画像ディレクトリにアップロードされているファイルの一覧を表示する(図1①)
- 画像ディレクトリは、「amimal(動物)」「food(食べ物)」「landscape(風景)」の3つのカテゴリに分けられている(図2)
- 画像ディレクトリごとに、ファイルサイズの合計を表示する(図1②)
- 画像ディレクトリごとに、ラベルとしてディレクトリの名称を表示する(図1③)
たいへんシンプルな仕様のWebアプリケーションですね。では、この仕様を満たすアプリケーションをいつもの3人組に書いてもらいましょう。
Step1:ベタなコードで書いてみる
まずはベタに実装してみるのじゃ。
かしこ、かしこまりました、かしこ[5]。けど、このくらいの簡単なアプリならいきなり抽象化して考えてもよくないっすかね?
ばかもの! 筆者が困るじゃろ?「 まずはベタに書く」→「それをリファクタリングしてい く過程を楽しむ」がこの連載のパターンじゃぞ。というわけでベタに書いてみるんじゃ。
画像ディレクトリが3つありますが、ベタに書くとリスト1のような感じになりますね。特に「ベタ」と強調して言わなくても、私はこういうベタなコードしか浮かびませんでした(>_<) メインの処理はstep1メソッドです(①)。3つの画像ディレクトリがあるので、それぞれのディレクトリのファイルの一覧とファイルサイズの合計を計算して、フィールド変数として画面に渡す形にしました。ビューはJSPでリスト2のように作成し、フィールド変数のファイル一覧とファイルサイズの合計を3ディレクトリ分ベタに出力しています。
なんかコードの重複が多い気がするなあ。DRY[6]に反してない?
そうじゃのう。まずここで重複していそうなコードはcontext.getRealPath(" パス").listFiles()
の部分じゃな。このコードは何をやっている部分かな?
対象の画像の一覧を取得してます。
そうじゃ、ここで「対象の画像の一覧を取得する」という処理が重複しているのが気になるのぉ。たとえば「JPEG画像のみ」表示するようになった場合、3つとも書き換えないといけなくなるじゃろ。単純に「コードの重複が悪」なのではなく、意味をきちんと考慮していない「処理の重複」が悪なのじゃ。
今のところ、「JEPG画像のみ」という仕様ではないので、そこまでやっちゃうとYAGNI(注7に反しませんか!?
そうじゃな。先読みし過ぎはよくないわい。しかし、この部分は「対象の画像の一覧を取得する」処理だということが、ぱっと見てわかりにくいとは思わんか?
そうですね、特にcontext.getRealPathっていうメソッド[8]を今回初めて知ったので、そっちに気が取られてコードの流れがわかりにくくなったように思えて気になっていました……。
メソッドに切り出すことで処理のブロックに「メソッド名」=「名前(コードの意図)」(注9)を付けることができるので、コメントいらずの可読性の良いコードになることがあるぞ。普通のプログラマよ、ちょっとやってみてくれぬか。