takeda_san’s blog

JavaFXと機械学習を頑張る方向。

Spring MVC + Thymeleafでバリデーションしたい

いつも書き方を忘れて、ネットの海をさ迷っちゃうのでいい加減自分でまとめようと思う。

コードはここです。
Kotlinなのは特に意味はないけれど、定期的に書かないと忘れちゃうからです。

github.com

とりあえず入力チェック編

まずは、必須入力チェックをしてみる。

f:id:takeda_san:20180115231808p:plain

ポイントその1:@NotNullじゃなくて@NotBlankを使うよ
@NotBlank
var name: String = ""

ここ、HTMLのtextフォームからフォームクラスにStringで値が入るときには、空""で入ってくる仕様らしい。
なのでnullかどうかを見る、@NotNullだとバリデートエラーにならなくて、空白か空かどうかも見てくれる、@NotBlankのほうがよさそう。

ポイントその2:BindingResultは必ず@Validatedの後
@RequestMapping(method = arrayOf(RequestMethod.POST))
fun doPost(@Validated inputForm: InputForm, bindingResult: BindingResult, model: Model): String {

    return "input/form";
}

BindingResultには、@Validatedを付けた引数のバリデート結果が入る。
んで、このBindingResult@Validatedが付いた引数の後ろに定義するという村の決まりごとがあって、これをしないとエラーでこける。

日本語で表示したい編

これ、エラー表示が英語じゃないですか!
そうですね、日本語で表示しましょう。

resourcesディレクトリの直下にValidationMessages.propertiesというファイルを作って、以下を書く。

org.hibernate.validator.constraints.NotBlank.message={0}:必須入力ですよ

んで、もう一度アプリケーション起動して、送信してみる。

f:id:takeda_san:20180116223249p:plain org.springframework.context.support.DefaultMessageSourceResolvable: codes [inputForm.name,name]; arguments []; default message [name]:必須入力ですよ

なんかtoStringっぽいのが出ているが、無事指定したメッセージが出でる。 @NotBlankは、hibernate validatorのアノテーションなので、そのデフォルトのメッセージ定義を上書きしてあげればよい。
ほかのアノテーションの定義は↓から、確認できる。

github.com

ポイントその3 プロパティファイルのはエンコーディングUTF-8

IDEとかで、プロパティファイルを作ると ISO-8859-1でエンコードされたりするんだけど、これだと日本語が文字化けしてうまく出力されない。
ちゃんと、エンコードの設定を確認する。

ポイントその4 {0}を使うときはメッセージ定義ファイルを作る

で、ここ({0})の部分。
ほかの解説ページとかだと、プロパティ名(今回の例だとname)が出るって書いてあるんだけど、うまく出てない。
org.springframework.context.support.DefaultMessageSourceResolvable: codes [inputForm.name,name]; arguments []; default message [name]

なぜかはわからんが、メッセージ定義ファイルを作ってあげるとちゃんと出る。
(しばらくなんでか調べたけどよくわからんかった)

外部にメッセージ定義(リソース?)を持つ設定の仕方は、いろんなところに書いてあると思うので説明は割愛。
application.propertiesに以下を設定。

spring.messages.basename=messages
spring.messages.cache-seconds=-1
spring.messages.encoding=UTF-8

resourcesディレクトリの直下にmessages.propertiesを作る。
(ファイルの名前は設定と一致してればなんでもよさそう)

もう一度起動しなおして、送信。
f:id:takeda_san:20180116224841p:plain

プロパティ名が出ました。
エラーメッセージにプロパティ名が出たのはいいけど、ユーザからしたらnameって何ぞや状態なので、これも差し替えましょう。
さっき作ったmessages.propertiesに、↓を書く。

name=名前

すると、ちゃんとnameのところが差し変わっている。
f:id:takeda_san:20180116225135p:plain

ちなみに、nameの部分はプロパティ名で、inputForm.nameとかでもちゃんと置換される。

独自のメッセージを表示したい編

おなじ、@NotBlankエラーでも違うエラーメッセージを項目ごとに出したいことがある。
その時は、次のようにアノテーションを指定する。

InputForm.kt

@NotBlank(message="年齢も恥ずかしがらずにちゃんと入力しよう")
var age: String = ""

アノテーションに直接メッセージを埋め込みたくない、几帳面なあなたはValidationMessages.propertiesにメッセージを書いて、それのキーを埋め込もう。

InputForm.kt

@NotBlank(message="{E0001}")
var age: String = ""

ValidationMessages.properties

E0001=年齢も恥ずかしがらずにちゃんと入力しよう

E0001、業務感がすごくてわくわくする

f:id:takeda_san:20180116230339p:plain

相関チェックしたい編

独自のチェックだったり、二つ以上の項目についてチェックしたいことがある。
そんな時は、自分でアノテーションを定義して、それを使う。

長々と書いてあるが、isValidがfalseならエラーになる。
それだけ。

    public boolean isValid(Object value, ConstraintValidatorContext context) {
        BeanWrapper beanWrapper = new BeanWrapperImpl(value);

        String param1 = (String)beanWrapper.getPropertyValue(this.param1Field);
        String param2 = (String)beanWrapper.getPropertyValue(this.param2Field);

        context.disableDefaultConstraintViolation();
        context.buildConstraintViolationWithTemplate(message)
                .addPropertyNode(this.param2Field)
                .addConstraintViolation();

        return Objects.equals(param1, param2);
    }

なぜここだけJavaなのか…
それはKotlinでアノテーションの書き方がわからなかったからだよ。
悲しい。

ポイントその5 アノテーションは、クラス宣言の上につける

相関チェックみたいに複数のプロパティを対象とするバリデートのアノテーションは、クラスの宣言部分の上につける。

@Equals(param1 = "email1", param2 = "email2")
class InputForm {

こんな感じ。

f:id:takeda_san:20180118223931p:plain

はじめてのSass

なぜ書くのか

Springでいろいろとやっていくうちに、WebサイトのHTMLとCSSをたくさん書くようになった。
自由奔放にCSSを書いて、そのあとに『サイトのテーマカラー変えようぜ!』と言われると非常に困ることがあった。
たとえば

  • テーマカラーとしての青
  • 決定ボタンとしての青
  • リンクの色の青

これが全部、同じ色のコードでスタイルの名前からは推測が難しい場合に一括置換できなくて泣きそうになる。
変えたいのはテーマカラーの青だけなのに、スタイルが意図しないところで使われてて、ほかのところも変わっちゃったり。

ほかにも、同じ部品用のスタイルがcssファイルに点在していて非常に見づらい。
点在しているはぐれスタイルを直し忘れて、つらい思いを日々している。
故郷のサーバーのサービスクラスのコードを書く仕事に帰りたい…

で、やりたいことが

  • 色の定数定義がしたい
    定数定義をスタイルで使って、色を変えたいときは、定義のコードを直すだけで、すべてのスタイルが適切に置き換わるようにしたい

  • 同じ部品のスタイルは一か所にまとめたい
    商品表示用のdivの配下につけるスタイルは、一か所にまとめて書く!みたいのを制限としてつけたい

でも、CSSでそんなことできるわけが…
それが、できるみたいなんですよ奥様。

SASS

なんかこれ、界隈では常識なのね。
CSSを直書きしていたのが、恥ずかしいわ。

sass-lang.com

上で書いたようなやりたいことが、このSassで出来るらしい。
CSSを便利に書けるようにしたSASSをコンパイルしてCSSにしてからHTMLに読み込ませるらしい。

やってみよう

  1. SASSを書きたい
  2. SCSSをCSSに変換するため、コンパイル環境が必要
  3. コンパイル環境の作成にはnode-sassというものが必要(本当はRubyでやるのが公式っぽい)
  4. node-sassを入れるためにパッケージ管理のnpmが必要
  5. npmの動作にはnode.jsが必要

うーん、この、RPGのTODOを箇条書きにした感じ。
そして、ついにナウさの頂点であるWeb界隈に本格入門する時が来てしまったか…

歴史編

作業の前にイマイチ、npmとかnode.jsが何者かわからないので歴史の勉強。
歴史大事。
npm とか bower とか一体何なんだよ!Javascript 界隈の文脈を理解しよう - Qiita

読んだ感想:Web界隈、進歩が早すぎる
Java EEとかだと仕様をじっくりねっとり考えて、固めて、各ベンダーが実装。
さらに開発者が使えるようになって、システムに組み込まれて、世に出るには1~2年ぐらい遅延がある。

対して、Web界隈はナウさの頂点だけあって課題解決のためには使ってみて、ええやん!だったものが、
標準になって、さらにそれを元に進化していくみたいな感じなのね。
戦場で鍛えられた実践主義みたいな感じでカッコイイ。

環境構築編

↓の通りにやってみよう。
なぜならcmderをオススメし、使っている為だ。+100万点。
みんなも使おうcmder。
xn--web-oi9du9bc8tgu2a.com

node.jsのインストールとnpmの動作確認

node.jsは、Windowsの場合初期設定がいろいろ必要なようなので、そのままインストールせずにnodistというので入れるのが良いらしい。
PATHの管理とかめんどくさそうだもんね…

C:\Users\takeda
λ nodist -v
0.8.8

また、node.jsをいれるとnpmも使えるようになるとのこと。

C:\Users\takeda
λ nodist + v8.9.4

C:\Users\takeda
λ nodist v8.9.4
v8.9.4
Default global pacakge update dsuccessful.

C:\Users\takeda
λ node -v
v8.9.4

C:\Users\takeda
λ npm -v
4.0.5

おー、すばらしい。

node-sassをインストール

npmでnode-sassを入れます。

C:\Users\takeda
λ npm i -g node-sass

C:\Users\takeda
λ node-sass -v
node-sass       4.7.2   (Wrapper)       [JavaScript]
libsass         3.5.0.beta.2    (Sass Compiler) [C/C++]

ログを見る限り、C:\Program Files (x86)\Nodist\binの下にインストールされるみたいね。

Sass書いてみよう編

適当なディレクトリを作る。

C:\Users\takeda
λ mkdir mysass

んで、実際に書いてみましょう。
(ここまでが長すぎる)

$base-color: #666;

body {
  color: $base-color;
}

こんな感じで色とかの値を定義できる。
テーマカラーとかをこれで定義して使えば、今までよりは書き直しやすくなるだろう。

.shop-list {
  font-size: 18px;
  
  a {
    font-size: 14px;
    color: $link-color;
  }
}

こんな感じで、入れ子で一つのスタイルを定義できる。
これで一つの部品に対するスタイルは一か所にまとまるだろう。

コンパイルしてみよう

C:\Users\takeda\mysass
λ node-sass style.scss style.css
Rendering Complete, saving .css file...
Wrote CSS to C:\Users\takeda\mysass\style.css

node-sass scssファイル名 cssファイル名 と指定して、コンパイルする。

出来たCSSを見に行こう。

んー、閉じかっこの位置が気に食わない。
でも、これが仕様らしい、まぁ確かにコンパイル後のコードって気にしないからどうでもいいか。
ちゃんと定義した値で置き換わってるし、入れ子にしたところは展開されている。
素晴らしい。

最後に

変更検知

実際に使うとなると、sassを変更して、いちいちコンパイルのコマンド打つのって大変。
このへんもちゃんと考えてあって変更検知用の設定もあるようだ。
node-sass style.scss style.css -w

僕にMacを買ってください

Windowsでnode.jsやろうとすると一工夫が必要。
多分ほかのツールにおいても、そうなのではないだろうか…
みんながMac使ってる理由がよくわかりました。

自分コインで採掘ごっこをしよう

やりたいこと

暗号通貨の採掘をしたい!!!
でも、今更採掘しても報酬が少ないらしい。
ゴールドラッシュを体験したい!!!
よし、自分でコインを作って、ザックザック掘ってやるぞ。

f:id:takeda_san:20180102224957p:plain

コードはここ。
github.com

あそびかた

注意事項

  • 採掘して得たコインは使い道がありません(!)
  • 採掘中はハッシュ探索の処理をしているのでCPUに負荷がかかります(!!)
  • アカウント管理をしていないのでリフレッシュすると残高がなくなります(!!!)
  • ほぼテストしてないので、バグがあるかもしれないです(!!!!)

遊び方(シングルプレイ)

Java 8以上で動かしてください。

  1. Jarファイルを落としてくる
    ↓からtsuramichain-0.0.1-SNAPSHOT.jarをダウンロードする。
    Release 0.0.1 · takedasan/tsuramichain · GitHub

  2. 起動する
    tsuramichain-0.0.1-SNAPSHOT.jarがおいてあるディレクトリまで移動して、↓のコマンドを実行する。
    java -jar tsuramichain-0.0.1-SNAPSHOT.jar

  3. Webページを開く
    http://localhost:HOGE/で開きます。
    HOGE→ログの中にポートがあるので、それを入れる。
    2018-01-02 22:47:02.186 INFO 7496 --- [ main] s.b.c.e.t.TomcatEmbeddedServletContainer : Tomcat started on port(s): 51095 (http)
    ↑こんなの、このログ場合はhttp://localhost:51095/で開く。

  4. 採掘開始!
    赤枠のスイッチをonにすると採掘開始で、コインがザックザックです。
    f:id:takeda_san:20180102225538p:plain

遊び方(マルチプレイ)

(本来、こっちがブロックチェーン的には正しい遊び方よね)

  1. サービスを複数起動する
    シングルプレイと同じようにJarから起動する。
    マルチプレイなので2つ以上やっておく。
    (ポートはランダムで振られるので多分衝突しないはず…)

  2. Webページをそれぞれひらいて、ノードを登録する
    一方のページでもう一方のサービスのホスト:ポートを入れて、Registボタンを押す。
    f:id:takeda_san:20180102230012p:plain もう一方のほうも同じくノードを登録しておく。

  3. 採掘開始!
    スイッチonで採掘開始。
    掘りまくってライバルに差を付けろ。

使ったもの

今回、この記事を参考にKotlinで作っています。
個人的には、実際に作るって本を読むよりもはるかに勉強になるので、こういうシンプルで、わかりやすいプログラム例があるのはほんとありがたい。
https://hackernoon.com/learn-blockchains-by-building-one-117428612f46

ワタクシ英語が苦手なので実際はこちらの翻訳版記事を読んでおりました。
ありがたや。
動作の中身はここを見たほうが早いと思うので割愛…

qiita.com

  • Spring Boot/Spring MVC/Vue.js
    だんだん、使い慣れてきて実家のような安心感。
    REST APIでクライアントとやりとりします。
    あと参考にしたプログラムに加えて、使いやすいようにWeb上で使えるGUIを付けました。

  • Kotlin
    今回、Kotlinのお勉強も兼ねております。
    まずは、Javaっぽく書いて→Kotlinっぽく書き直せるところは直すって感じでやっておりました。
    初めからガチガチにKotlinっぽいコードとは何か!!とやってると、いつまでたっても機能ができあがらんのでこっちのほうが性にあってます。

苦労したところ

KotlinでSpring MVCのコードを書いていてハマったのが、これ。
qiita.com

同じところでまる一日悩んでいました。
あとは、おもったよりスイスイ書けて、動いてしまってびっくり。

SpringとVue.jsで簡単なフォームアプリケーションをつくった

やりたいこと

ナウいフォームアプリケーションが作りたい!

コードはここ github.com

フォームで画像をアップロードして… f:id:takeda_san:20171229164703p:plain

一覧で出すだけ f:id:takeda_san:20171229164802p:plain

つかったもの

↓こういう風にただひたすらになにがしかのライブラリだったり、フレームワークの名前を羅列するのが夢でした。
かっこいいよね。

フロントエンドっぽい

Vue.js

最初は、Elementを使いたかったので採用したんだけど、使っていくうちに便利さに気が付く。
バインドの仕組みはJavaFXのプロパティと似ていて、とっつきやすい。
あと、公式のドキュメントの充実ぶり、文法の簡単さ(簡潔さ?)でとっつきやすい。
躓いたところはほとんど、Javascriptの基礎の基礎、部分のとこだけ。

Element

Vue.jsで使えるコンポーネント集。ナウさの根源。
http://element.eleme.io/#/en-US/component/installation

ここにあるコンポーネントを組み合わせるだけどフォームアプリケーションができてしまう勢い。
Bootstrapみたいに、わかりやすくレイアウトも組めて素晴らしい。

Thymeleaf

ファイルパスの置き換えにぐらいにしか使わなかったけど、もうちょっと凝ったレイアウトにしようとすると必要になってくる気がする。

jQuery

ナウさのなかに伝統あり。
DOM操作とかにはつかわなくて、サーバとajax通信するのに使ってます。
使い方をネットで探すと、ひとつの実装にいろんな記法があってどれが正しいのかよくわからん…
途中で気が付いたんだけど、ajax通信はどうやらaxiosってやつを使うのがナウそう。
あとで実装差し替えよう。

バックエンドっぽい

Spring Boot、Spring MVC

つらみボタンから引き続き。なんだろう、すごく便利。
サーバサイドってもっとコードがっつり、設定ファイルたんまりって印象だったけど本当に数行書くだけで動いて感動する。
今回はREST APIにも挑戦。

MyBatis

つらみボタンから引き続き。
SQLを自分で書きつつ、データのマッピングは良きに計らってくれるのがすごくいい。

Spiring Batch

バックエンドといえばバッチ処理
今回はサーバのデータを少し変形させて、ファイルに吐くみたいな処理を作りました。
スケジュールもできるし、オンラインバッチみたいのもできるみたいで、大抵のバッチ処理はこれで十分な気がする。

そのほか

WebJars

Javascriptがわからない、ひとの強い味方。
ほかのJarファイルと同じノリでJavascirptの各種ライブラリをJar形式で持ってきてくれるスゴイやつ。

vscode

htmlとcssJavascriptvscodeで書きました。
フォーマッタもまともだし、ある程度までなら文法ミスも指摘してくれて素敵。
ただ、Javastsで書いてるのでvscodevscodeを行ったり来たりしなきゃいけなくて、結構ストレス。

苦労したこと

ほとんど、フロントエンドがらみなんですが…

Javascriptフレームワークどれもインストールできない

Vue.jsを始めようと思って、公式のインストールのところを見にいくと・・・
npm install vue
うん、よくわからない。
そもそもインストールすらできないのだ。
たぶんJavaをやろうとするものがgradleとかmavenのコードを見せられてもよくわからん現象だと思うんだけど。
ハードル高い!

この問題は、WebJarsでインストールして解決しました。

Javascriptデバッグ大変

当たり前なんだけど、実行しないとエラーが出ない。
最初は、ちまちま開発者ツールでブレークポイントをつけつつ見てたんだけど、よくわからなった。
(vueの内部のコードがエラー個所としてでるので、なんのことやらなことが多い)
ブラウザにいくつかデバッグ用のプラグインを入れたら、多少マシになりました。
でも、うん大変。

URLを考えるのが大変

APIを作って、いくつかJavascript側からたたけるようにしてみたんだけれども、URLをどうやったら正しいのかがわからずに結構悩みました。
結局、ページ遷移とかでURLバーに出る奴は短め(機能を端的に表した単語一語)。
データのやり取りにのみ使うやつは、action/hogehogeみたいにactionを最初につけるようにしてみました。
機能が多かったり、URLからデータをとるみたいなことになってくると、地獄が見えそう。

感想

フォームアプリケーションを作ればSpringを完全に理解できるかと思ったが、使いたい機能が増えただけだった。
まだまだ先が流そう。
しかも、今回Javascriptにも入門してしまったので、わからないことの総量は増えている気がする…

pom.xmlにNeko HTMLを追加しても、追加したことにならないやつ

起こったこと

thymeleaf + vue.js(とElement)でフロントエンドを書いているんだけれども
<el-menu-item index="1-1" @click="onTopMenuCLick">
みたいな@マークが入ったものを書こうとすると
org.xml.sax.SAXParseException: Element type "el-menu-item" must be followed by either attribute specifications, ">" or "/>".
というエラーが出て怒られる。

これは、thymeleafの構文チェックが厳しすぎるかららしい。
確かに、<br>だって<br />って書かないと怒られるもんね… これを解決するにはもうちょっとゆるめにチェックしてもらう必要があるとのこと。
具体的にはapplication.propertiesにspring.thymeleaf.mode=LEGACYHTML5を追加して、Neko HTMLというライブラリを使えばよいらしい。
nekoHTML名前かわいい。

<dependency>
    <groupId>net.sourceforge.nekohtml</groupId>
    <artifactId>nekohtml</artifactId>
</dependency>

これをpom.xmlに追加して、もう一度試してみる。

org.thymeleaf.exceptions.ConfigurationException: Cannot perform conversion to XML from legacy HTML: The nekoHTML library is not in classpath. nekoHTML 1.9.15 or newer is required for processing templates in "LEGACYHTML5" mode [http://nekohtml.sourceforge.net]. Maven spec: "net.sourceforge.nekohtml::nekohtml::1.9.15". IMPORTANT: DO NOT use versions of nekoHTML older than 1.9.15.

nekoHTML追加したやろ!
リフレッシュしたり、読み込み順を変えたりしたけどまったく変わらず。
いい加減にしろ!!

んで、インターネッツとにらめっこすること数時間。

qiita.com

なんか、jarを自分でダウンロードしてローカルにおいてそれをクラスパスに追加するとうまくいくらしい。
やってみる・・・あ、動いた。

な・・・なんで・・・。

WebJarsを初めて使った

WebJarsってなんやねん

jsとかcssとかのライブラリをMavenとかGradle経由でJar形式で取得できるやつ。
Node.jsとかnpmとかよくわからない、自分向け。
なんかどこのライブラリ、フレームワークもいきなりnpmとか出てくるんだもの。

使い方(Maven編)

今回は世間ではよく使われているっぽいvue.jsとElementっていうコンポーネントライブラリを使ってみる。
Springとthymeleafだけだとカレンダーとかよく使われているコンポーネントがなくて、ナウいフォームアプリケーションが作れなかったので…

pom.xml

まず、公式に行って使いたいフレームワークなり、ライブラリを検索する。
(右上のほうに検索窓があります)

https://www.webjars.org/

んで、お目当てのものが見つかったら、[Build Tool]の欄から[Maven]を選択する。
んで、その下のXMLをまるっとpom.xmlにコピー。

f:id:takeda_san:20171220224556p:plain

こんな感じ。

HTML

ほぼ、ここを丸写し。

WebJars の利用 · GitBook

んで、普通のHTMLとだいたい同じなんだけれども、Thymeleafだと@{ほげほげ}で囲った形で、jsファイルを読み込む。
cssファイルも同じかなぁと思ったんだけど@{ほげほげ}で囲むとなぜか読み込まなかったので、普通に書く。 12/21 追記:これhrefの属性にthつけ忘れてますね…うわ恥ずかし。

あとは、参考サイトの通り。

バージョン表記をなくすとこうなる。

無事Elementのコンポーネントが表示されたぞ!やったー。
f:id:takeda_san:20171220230107p:plain

Springでつらいときに押すボタンをつくった

f:id:takeda_san:20171216155400p:plain

ひと月ぐらいは、サーバ立てておきます。
(特に監視してないので、落ちてたらごめんなさい)
ここから見れます。
つらいときに押すボタン

つくった経緯

会社で『おう、来年からSpringの案件な』と言われたので。
JJUG CCCで興味を持って、やりたいと言っていたけども一人でやるとは言って…
いや、弱気はいかん。やっていくのだ。

お勉強のみちのり

イチから勉強したので、ほかにも同じ境遇の方がいたら参考になるかなぁーと。
お勉強初めてこれ作るまで二週間ぐらい。
一日一時間ぐらいずつ。

今までの経験

だいぶ前にSeasar2ECサイト構築のお手伝いをしたなぁ…ぐらい。
HTMLもjsもDBもろくに触ったことがないよ!
名前は知ってるけど、何に使うのかわからないよ!
(つまり何もできないということだけど、いままで何やってきたのかは聞かないでほしい)

本を買う

まずは技術書だろうな。ということで書店へ。
いつも、池袋のジュンク堂にいきます。
3冊ぐらい新しめの本があって、買ったのは『Spring徹底入門』って本。
ちょうど案件で使うMyBatisが帯に書いてあって、中身も図が多くてわかりやすそうだな~ということで。

んで、1章から律義に読んでたんだけど、飽きるね、これ…
なんか正しく、もれなく解説しようとしててありがたいんだけど、いつまでも動かして遊べないので退屈。
というわけで、最後の方の13章のSpringBootから読み始めて、わからないことがあったら前に戻るみたいな読み方をしてました。
(この読み方も本の冒頭でオススメされてました)
実際に動かしながら、エラーとかわからんところを探すというのが実際に身に付きやすくてよかったなぁと。
ちゃんと読んだのは13章、14章ぐらいでした。
14章のチュートリアルでは、アプリケーション層とドメイン層でのパッケージの分け方にも言及されていて、大変お勉強になりました。

あと、サンプルコードを出版社HPにダウンロードしにいったついでに気が付いたんですけど、幻の15章がPDFで配布されてました。
15章はSpring Batchについて書いてあるみたいです。
ちょうど案件でも使うので得した気分。

自分でつくってみる

技術書読んだ後、Spring完全に理解した感あるので自分でなにかつくってみる。
ページ上でなんかアクションを起こして、なんかのデータをDBに保存するみたいな基本的なやつを作ります。
つらいときに押すボタン、すてきな響き。
Thymeleaf+Spring MVC+MyBatisでやっていく。
コードはここ。

github.com

まずはSpring Initializerでプロジェクトをサクッと作る。
この最初のプロジェクト設定が煩雑でまともに動くまで時間がかかりがちだと思うので、簡単にできるっていうのが素晴らしい。

https://start.spring.io/

んで、Spring徹底入門の14章のコードをパク…参考にしつつControllerとhtmlでHelloWorldします。
次にDBを作って、MyBatisでインターフェース作って、サービスクラスを作ってー(このへんも14章のコードをパク…)をしました。
いままでhibernateは使ったことはあったんだけど、イマイチ使いずらいなぁと思ってたところがあって
直接SQLを書けるMyBatisって素敵だと思いました。

ものの一週間もかからずに、目指してたものが完成しちゃいました。
これがフレームワークの力…!

うごかしてみる

なんか作ったら『みんな見て!』と思うのは当然。
GCPインスタンスを作って見れるようにしましょう。

インスタンスをサクッと作って、Javaとアプリケーションのjarファイルをアップロードする。
その後、Postgresqlインストールして、DB作ってJar実行ドーン。
(単独で動くjarが簡単につくれるのってすごい)

あと、ファイアウォールtcp:8080を開けておく。

まえに、GCPJavaを使う記事を書いたので詳しくはそちら。

takeda-san.hatenablog.com

なんか、WebサービスってもっとApacheとかTomcatとかの設定がいろいろなかったでしたっけ?
簡単に動くのはすごいが、何で動いてるのかは、もうちょっと勉強しないとだなぁ…

反省

Spring完全に理解して、Webアプリケーション余裕だと思ってたけど全然だったので反省点を書いておきます。

HTMLとjs書けない

当たり前だね。
いままでロクに書いてこなかったからね。
中・高校生ぐらいのころに、日記サイト作った以来だからね。
STS上で全部書いたんだけど、HTMLだとどんな属性が設定できるのかイチイチ検索して調べないといけなくて、ちょっぴりメンドクサイ。
世の皆様方はどうやって書いているんだろうか。

どう動いてるのかわかってない

いまだに@Autowiredが何なのかよくわかってないぐらい重傷なので、本の読んでないところをちゃんと読もうと思います。

ギョームアプリケーションはそんなに甘くない

セキュリティ関連、ログイン処理、REST API・・・まだまだ、お勉強することは山積みですね…
次はちゃんとしたフォームアプリケーション+バッチ処理を書こうと思います。