フレームワーク開発はジグソーパズルと似ている

こんにちは。ウェブ系システム開発者の山本です。

ウェブ開発のフレームワークって最近は本当にたくさんありますね。メジャーなところだとCakePHPや、Symfonyzend frameworkCodeIgniter、あとはRubyでお馴染みruby on railsなどでしょうか。

ここしばらくPHPフレームワークでの開発を継続的にやっています。去年はCakePHP1とCakePHP2を、そして今年はSymfonyを使った実務開発をしています。楽しくコーディングの日々を続ける中で、ジグソーパズルとフレームワークを用いた開発ってとても似ているなってふと思いました。

とにかく手を動かして答えを探る

パソコンでカタカタプログラムを打ち込むフレームワーク開発と、ジグソーパズル。
この2つの一体何が似ているのか。

直感的に感じた共通点は手を動かすことです。

どちらも、とにかく手を動かし探って作り上げていきます。ピースを組み立てていくと徐々に絵が見えてきます。

ピースをはめるまでのもやもやした感じ、
そしてピースがカチッとハマった時の心が小さく踊る感じ。

フレームワークに用意されている機能や仕組みはパズルのピース

必要なピースは、基本的にフレームワーク上に全て用意されています。

用意された無数の部品が正にピースのようなもので、ピッタリとピースをはめるまでの過程が苦労します。ですが、ぴったりとはまる瞬間が気持ちいいし楽しいです。

そしてピースがはまる度に徐々にリズムが生まれてきます。ジグソーパズルも後半になるほど楽ですね。

検索フォームを作った時に強く実感

パズルな感覚はデータ検索フォームを作った時に強く実感しました。

フォームに入力した文字でデータベースを検索して表示するシンプルな画面。
なにもフレームワークの仕組みを理解してまで頑張って検索しなくても、自分でゴリゴリ書いて実現してしまえばいいじゃんと思いながらも、フレームワークの仕組みを使って頑張って実装することにしました。

ピースが合うまでが、ものすごーく苦労しました!

そもそも、どうプログラムを書いていいのかわからないですし、
フレームワークで一体なにが行われているのか分からない!

思い通りにシステムが動かない時間が続きました。

・・・正直もうあまりやりたくない作業です。

開発を楽にするためのフレームワークなのに、
こんなに苦労して意味があるの?ってちょっと思いました。

でもでも!

それでも、マニュアルや動作サンプルを調べて動かしてみて、やっと動いた時に真価が分かりました。間違いなく苦労した以上の価値がありました。

動くまで苦労するけど、動いてしまえば「あれ、もう全部出来てる」って。データを検索できるし、表示もできる、入力チェックもできる、更にページングの実装まで出来上がってる…!

自力でこれらをコーディングする大変さも知っている自分にとっては、これがフレームワークの力なのかと唖然としましたね。

フレームワークに用意された仕組みを使って実現すること

せっかくフレームワークを使っているのですから、
是非フレームワークの仕組みを使ってやりたい事を実現することを検討してみてください。

必ずしもそれが最良とは限らないですし、時と場合によりますが
動いてしまえば苦労した以上の利益が得られることも多くあります。

新たなフレームワークやプラグインの使い方を知ることで、
今後の開発が圧倒的に楽になります。

フレームワークの理解を深めることは今後への投資とも言えるでしょう。

CakePHP2.0.3でJSファイルやCSSファイルを読み込む

CakePHP2で外部JSファイルとCSSファイルをHEADタグ内で読み込む方法です。
CakePHP1.2やCakePHP1.3と多少変わっています。

最初にwebrootフォルダのフォルダにCSSファイルとJSファイルを入れておきます。
/app/webroot/css → CSSファイル
/app/webroot/js → JSファイル

次に、レイアウトファイルのHEADタグ内で$scripts_for_layout変数を出力します。
/app/View/Layouts/default.ctp

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title><?php echo $title_for_layout; ?></title>

<?php echo $scripts_for_layout; ?>

<link rel="alternate" href="/feed/index.xml" type="application/rss+xml" title="RSS 2.0">
<!--&#91;if lt IE 9&#93;><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><!&#91;endif&#93;-->
</head>

次にViewファイルの上辺りで以下の内容を記述します。
以下の例ではscript1.jsとscript2.js、import.css、sub.cssが読み込まれます。
読み込みたいファイル名は合わせて修正してください。
(/app/View/ControllerName/action_name.ctp)

<?php echo $this->Html->script(array('script1', 'script2'), array('inline'=>false)); ?>
<?php echo $this->Html->css(array('import', 'sub'), false, array('inline'=>false)); ?>

CakePHP1時代と違ってHTMLヘルパーは$this->Htmlのような参照方法になったので注意します。
また、inlineオプションをfalseにすることによってレイアウトファイル側でスクリプトファイルを読み込んでくれます。
Cookbookのcssメソッドの説明scriptメソッドの説明に以下のように書かれています。

scriptメソッド:

Creates link(s) to a javascript file.
If key inline is set to false in $options,
the link tags are added to the $scripts_for_layout variable
which you can print inside the head tag of the document.

Include a script file into the page.
$options['inline'] controls whether or not a script
should be returned inline or added to $scripts_for_layout.
$options['once'] controls, whether or not you want to
include this script once per request or more than once.

cssメソッド:

Creates a link(s) to a CSS style-sheet.
If key ‘inline’ is set to false in $options parameter,
the link tags are added to the $scripts_for_layout variable which you can print inside the head tag of the document.

最後に、こんな感じでHTMLが出力されます。

<script type="text/javascript" src="/js/script1.js"></script>
<script type="text/javascript" src="/js/script2.js"></script>
<link rel="stylesheet" type="text/css" href="/css/import.css" />
<link rel="stylesheet" type="text/css" href="/css/sub.css" />

ViewからLayoutというちょっとトリッキーなデータの受け渡しなので
最初はちょっとだけ戸惑うかもしれないですね。
いちいちレイアウト側に分岐を書かなくていいので便利。

自作MVCフレームワークの作成中

自作MVCフレームワークエンジンの作成中です。

以前も見よう見まねでフレームワークらしいものを作ったことがあったのですが、
いまいち冗長で完成度が低かったのでリメイク中です。

モチベを上げるために仮称を決めてます。
Rhythm(リズム)です。
リズミカルにサイトを構築できたらという願いを込めてます。

作るに当たって参考にしまくってるのはCakePHPです。
なぜCakePHPかというと、会社でCakeを使っていると言うこともあって、こんがらがらないようにというのもあります。

それ以外にもURLまで綺麗というところはSEO的に惹かれますのでそういった点で参考にしてます。
あとは基本オブジェクト指向ではあるのですがオブジェクト指向を突き詰めすぎず、
配列など上手く使って使い勝手を重視しているところとかも参考にしてます。

最近MVCモデルを更に突き詰めたMVCAモデルなんてのも出てきてますが、それを知った上でMVCモデルにしてます。
自分が作るサイトなんてそんなに規模感無いですし、MVC論もそこまで突き詰めずゆるーいところで押さえています。
MVCA(Application)の利点は良く分かるのですがオブジェクト間のやりとりが増えてごちゃごちゃしちゃうなと思って今回はやめました。
あとで必要だと思ったら追加します。

ソースコードを晒すのはとっても恥ずかしいので公開はしないと思いますw
自分で使う分には実用レベルに近づいてきたところです。
徐々にフレームワークが成長していくのが楽しくて仕方ないです。

続きを作ってきます。