行き倒れJavaアプリ_2_Spring_MVCを作ってみる
前回の次回予告でSpring Dataでテーブル情報取得とか大ぼら吹いてたけど、尺がなかったから今回はHello WorldとDB接続に絞りました。
画面作るにもCSSフレームワークやら見繕ってきたほうが絶対いいよなと思い始めています。テーブル取得ができたあとは、のんびりHTMLを作っていこうと思います。
1.Spring MVCを使って、部品を揃えてみよう
Spring MVCというと意味分からないからまとめてみると、こういう仕組みになるようファイルを分けて作ったもののことをMVCと呼ぶそうです。
MVCはそれぞれModel(モデル)、View(ビュー)、Controller(コントローラー)といい、それぞれが役割を持つ部品です。
また、それらに加え『Controller内では詳細処理を書かず、数ある部品を呼び出し組み立てるだけ』というベルトコンベアのオバチャンみたいな仕組みを持たせるため、難しい処理を一手に担うService(サービス)という内部処理用クラスを作る必要がある。まったくもってややこしい(が、作りがわかるとなかなかわかりやすくなってくる)。
a)HTML(View)を作ろう
作るファイルは『src/main/resources/templates』の中に入れましょう。そうしないとファイルを見に行ってくれず404エラーになります。
ファイル名と一致する部分で右クリックをし、 New>Other... からHTMLを選択、ファイル名を入力し作成します。形式はとりあえずHTML5にしました。今回はついでに、キャラクター一覧画面的なものも視野に入れつつ作るので、ファイル名は"characterList.html"です。
HTML5といってもぴんとこないんですけど、多分よりプログラムルールがしっかりしたコードと化したHTML先輩ということなんでしょう。
数年前まで使っていたものが新しいバージョンになったというと、他にはCSS3何かが挙げられますね。こっちはなんだかよくわからないがフラットデザイン作りやすくなるよう設定できるものが増えていたりと何かと重宝しています。
話もそこそこに、作られたHTMLファイルに手を加えていきます。まだ実行前段階なので、表示できるかどうかだけを簡単に確認できるだけの作りにしておきましょう。
注意したいのが、metaタグの最後に入れられている / なる記号。
プロジェクト作成の時にThymeleafを入れた際には、HTMLのタグに閉じタグがないと問答無用でエラーを発生させ画面表示をさせないという仕様があります。
よって、metaタグなどの閉じタグのないタグ(</meta>とかないじゃん)には、最後に / を加えておかなければいけないみたいです。
あと特殊記号<とか>とかをThymeleaf上で表示させようとそのまま書き込むと十中八九エラーになります。これはどちらかというとThymeleafというよりはHTML5側の厳密な精査によるエラーといったほうが正しいのでしょうか。ただのHTMlサイトだとブラウザ頭いいから特殊記号でも察して表示してくれるのでよくわからん。
なおこれだけではまだ404エラーになるので、次はControllerを作ります。
b)Java(Controller)を作ろう
Controller、Model、Serviceに当たる部分、というよりViewに当たる部分以外はJavaで作っていきます。
『src/main/java』フォルダ内にフォルダ(パッケージ)を追加しておきます。名前は"com.co.min5.controller"とします。あとでModelとServiceも作るので、同じような感じでformとserviceのパッケージも追加しておきました。
HTMLを作ったときと同じように、右クリックでNewを選択し、クラスを作成します。名前は"CharacterController.java"です。
Java上では【アノテーション】と呼ばれる記号・便利ツールが使えます。【】で括られた部分はFFでいうところのワードメモリーシステムを意識しています(訳:重要)。
@Controllerは、これはSpring MVCでいうところのControllerに当たる部分という意味を真下のクラスに持たせるための記号。
@RequestMapping("characterLsit")は、"characterList"というファイルが呼び出された時に、表示前にこの処理を通過すること、と命令するための記号。
@RequestMappingのあとの括弧部分で、より詳細なオプションなど決めることができるのですが、面倒なので割愛。
あと、HTMLファイルに移動させるために、移動先のファイル名を拡張子抜きで、returnに文字列として返してください。これをしないでvoid型のメソッドにした日には実行後行く宛がなくて処理が終了します。
実は画面表示だけなら、ControllerとViewだけでできます。
ここに動的処理を加えるとなると、ModelとServiceの存在が必要になってくるわけです。
また、前回の最後あたりで画面表示が404で~と書いていた部分がありましたが、Spring Dataを導入した時点で application.properties というファイルにDB接続設定をしなければ実行ができません。すんません、あれ嘘言いました。
c)Java(Model)を作ろう
Modelといいますが名称はFormです。なぜか。わかりません。なぜでしょう。。。
ModelとかFormとかわかんねーよハゲって人はbeansとでも言い換えればわかりやすいでしょうか。
さくっと作っていきます。
Controllerでは前置に置いていたはずの、@Controllerのようなアノテーションが付いていません。Modelはそんなん付けなくても動きます。正しくは、Controller側でModelであることを認識させるためにアノテーションを付けるので、Modelクラスには付ける必要が無いのです。
また、変数にはそれに対応するSetterとGetterを作成しましょう。変数が test ならキャメルケース式で getTest 、 setTest という具合です。
Spring MVCでリクエスト値を変数にセットしたり、Thymeleaf式で変数値を呼び出したりするときは、このGetter、Setter名でないと正常に機能しません。触っていた時、名前を間違えてSetterを作ってバグが発生して、一日を無駄にしました。
また、毎日同じ位置で分け目を作っていると、その部分を中心に髪が薄くなっていくそうです。
気にしている人は、週に一度、分け目を変えて生活すると、髪がモーゼの十戒を引き起こすことはないと思います。
これだけではModelを作っただけで、まだSpring MVCに適用されたとはいえません。
Controller側に、先程のCharacterFormがModelクラスであることを宣言しましょう。そう、アノテーションでね。
indexメソッドの引数にCharacterFormを指定します。
これだけだと意味がないので、アノテーションに @ModelAttribute を付けましょう。これはリクエストとして送られてきた変数名を、Model宣言されたクラスの変数へSetterメソッドにより代入し初期化を行うという宣言です。のはず。オプションとして付けられる("characterForm")の文字列は、returnされたView内で変数を呼び出し使用する時の格納場所の名称です。
@ModelAttribute("hoge")でThymeleaf式でModelの変数たちがhogeという場所から呼び出すことができるよ、的な。
うるせえいいから参考書だ。
d)ついでに簡単なThymeleaf式
どうやってModelの値を参照するのって話なので、簡単な文字列表示用Thymeleaf式。
適当に私の本名を入れるじゃないですか。
HTMLのタグにThymeleaf式を入れておくじゃないですか。これで終わりです。簡単でしょ。
タグ内に"th:text="${characterForm.test}"という謎のオプションが付いています。これがThymeleaf式と呼ばれるもので、基本的にはタグ内に"th:~"といったふうにして宣言されます。
これを応用して、"th:value="${hoge.hoge}"などで値を設定し、"th:checked="${hoge.hoge} == 'value'"などで比較式から値を設定など、少々複雑な処理も簡単に実現ができるようになります。
公式チュートリアル( http://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf_ja.html )が非情に優秀なので、それをご覧ください。Qiitaのチートコードもかなり活用できます。
2.application.propertiesにDB接続設定を入力してみよう
Spring MVCは作成しましたが、今のままでは実行ができません。
ひとまず、実行ができるように application.properties に内容を入力していきましょうか。
別にたいしたものでもないですがユーザ名とパスワードは伏す。
Spring data application.properties とかで検索するとバンバン出てくるからそれ見て。
yml形式で記述するようなつくりもあるのですが、Gradleでは自動的にapplication.propertiesが作られるようなのでこっちで。ymlはヤムルというのが一般的なんだそうですが、なんかカッコイイからという理由でエミルと呼んでます。周りに説明するときはワイエムエルと呼んでます。
spring.databace.urlの項目に、オプションで autoReconnect=true&useSSL=false と書いているのは、SSL通信できてねーぞとコンソールに警告が出てくるのが腹たたったので付け加えました。SSL通信を切るためのオプションです。実際はこんなことやっちゃだめだし、SSL通信可能にして、実用的なものを作るようにしようね。
3.画面を表示させてみよう
これでやっと正常実行が可能になります。
TomCat御大を実行して、ブラウザからcharacterListにアクセスしてみます。
完成!
名前が表示され、無事Hello Worldが行えました。
>> to_be_continued...
MySQLへの接続、Spring MVCの使用が終わり、次回は
『MySQLからSpring Dataを使って、MySQLからデータを取得してみよう』
です。