感想
記事一覧はこちらです。
Javascrit の開発環境は Node.js + npm + npm-scripts + webpack + browser-sync + ESLint + Prettier + Jest の組み合わせでいいかな、と思っています。これに IntelliJ IDEA を組み合わせると実装がかなり楽になります。
Spring Boot のプロジェクトでも CSS フレームワークや Javascript のライブラリのインストール・管理は npm でいいですね。WebJars を使用する話をたまに聞きますが、自分が使うことはないでしょう（Gradle で全部管理したいとは特に思わないため）。また npm と同じパッケージマネージャで Yarn があり、npmから乗り換えてわかったYarnの4つのメリット とかの記事を見ると Yarn いいなと思いましたが、今回はそこまで手を出しませんでした。Javascript 関連はツール類も次々と出てきて新しいものに変えると便利そうなのですが、ついていくのが大変なんですよね。。。
記事を書き始めた頃にタスクランナーは gulp → npm-scripts へ切り替えよう的なものをいくつか見かけたので npm-scripts を使ってみましたが、今は npm-scripts で十分だと思っています。gulp については CSS で SASS を使うならまだ gulp の方が良さそう、複雑なタスクを書くなら gulp？、のような感じでいます。
webpack はとりあえず困らない程度には使えるようになったかな、という感じです（まあ Babel とかは入れていないのでそんなに使いこなしていないのではという気もしますが）。npm で Javascript のライブラリをインストールして、jQuery でスクリプトを書いて１つの js ファイルにまとめるためには必須ですね。npm でインストールしたライブラリを利用する jQuery の結構サイズの大きなスクリプトを書いても、webpack でバンドル＋Uglify するとかなりサイズが小さくなって軽快に動作するので便利です。また記事の途中でバージョンが 3 → 4 へ上がりましたが、今回の記事で使っている程度であればバージョンアップは難しくはありませんでした（英語の記事がいろいろ出ているのを見てからバージョンアップしましたが）。
ファイル変更時にブラウザを自動リロードしてくれると聞いて webpack-dev-server（今は webpack-serve） ではなく browser-sync を使ってみたのですが、これが便利でした！ Javascript のファイルを変更した時に F5 を押してリロードする必要が全然ないとは驚きです。 https 環境を作りたい時も browser-sync なら設定に１行追加すればよいだけなのも便利ですね。また JRebel がないとうまく機能しませんが、browser-sync → Tomcat 連携して、html,css,js は browser-sync、それ以外は Tomcat からレスポンスを返すようにして、Java 側のモジュール変更時もリロードさせることも出来ました。１点注意があるとすれば、browser-sync で返した HTML はたまに文字化けすることがあります（今回の記事では見ませんでしたが、他で開発に使用した時に見かけました）。
Prettier は記事を書いている途中から使われているのを見かけるようになって、でもフォーマットは IntelliJ IDEA でやってくれるから特に導入する必要はないかなと思っていたのですが、IntelliJ IDEA でも Prettier によるフォーマットがサポートされて、Javascript では Prettier でフォーマットするのが当たり前的な記事も見かけるようになって、最後に Jest 23 の Jest Each でデータテーブルを記述する時に Prettier があればフォーマットしてくれると聞いて、導入することにしました。実際インストールしてみると Javascript のファイルを綺麗にフォーマットしてくれるし、package.json や webpack.config.js 等の設定ファイルもきれいにフォーマット出来るので、今後はインストール必須にしたいと思います。
ESLint は Prettier が入るとフォーマットのチェックは Prettier に依存する？ようになってチェックする内容が減りますが、フォーマット以外にもチェックして欲しい点はあるので、使った方がよいのだろうなあ、という感じです。
記事を書き始めたころは Javascript のユニットテストは何を使えばよいのかよく分からず、なんか Jest が便利だよ的な記事を見かけて Jest を使ってみたのですが、今は Jest 一択です。機能が豊富でテストが書きやすく、IntelliJ IDEA でもサポートされていて実行しやすいのも魅力です。Jest 23 からは Spock のデータテーブルのような書き方もサポートされて、Parameterized test が出来るようになったのもいいですね。
Javascript の開発では IntelliJ IDEA で書くと便利ですね。便利と思っている点を上げてみると、
- モジュール分割している時も Ctrl+B を押せば実装箇所にジャンプしてくれるし、Alt+F7 で使用箇所一覧が表示されます。
- Ctrl+Shift+T を押すとモジュールに対応するユニットテストのファイルが開きます（なぜか開くんですよね、ファイル名で見ているだけけのような気がしますが）。ただし Java のように「Create New Test...」メニューは表示されません。
- リファクタリングも動作します。変数名や関数名を変えたくらいしかしていませんが、使用している箇所も問題なく修正されました。
- debug 実行ができます。Chrome で debug するのもいいのですが、IntelliJ IDEA で実行した方が breakpoint が設定しやすかったり、変数の値が確認しやすかったりします。
- Jest で書いたテストの実行がサポートされていて、テストが実行しやすいです。
- Prettier によるフォーマットもサポートされています。
- npm-scripts の実行もサポートされています。
あと Javascript でやらなかったと思っているものを上げると、以下のものでしょうか。
- TypeScript。便利なのかもしれませんが、たぶんついていけないでしょう。。。
- Flow。型を使えるようになるので使ってみたかったのですが、途中から入れる方法がよく分からなくて諦めました。
- ES2015（+Babel）。今回使っていませんが、無条件で使った方がよいと思っています。ES2015 の新文法がとにかく便利。
- Vue.js、React、Angular.js 等のフレームワーク。今回は事情により jQuery をベースに npm-scripts や webpack と組み合わせた例が欲しかったので使用しませんでしたが、迷わず使うでいいと思います。Angular.js、React はついていけない気がしていて、採用するなら Vue.js かな。。。
- Storybook。聞いただけで何に使うものか実はよく分かっていませんが、どうも便利らしい。
Geb が便利すぎる。。。 ブラウザの画面のテストをするなら MockMvc とかは使わずに Geb で書く方が圧倒的に楽ですね。Geb は Spock を拡張したものなので、Spock で便利と思っている機能（例えばデータテーブルによる Parameterized test）は全て使えますし、Groovy SQL も使えるので、画面の試験と合わせて DB やメールの確認も簡単に書けるんですよね。Spring Boot 2 から JUnit5 がサポートされて JUnit5 の話題が多いですが、自分は Groovy+Spock+Geb から移る気が全然起きないんですよね。。。
H2+Flyway を使うと１プロジェクトで DB 処理まで完結できるサンプルが作れるのは便利でした。今後は基本的にこの組み合わせでサンプルを作りたいと思います。ただし H2 は、Spring Security を導入していると管理画面にアクセスするのに少し手間がかかったり、組込モードの H2 に IntelliJ IDEA や DomaGen からアクセスするのにコツが必要だったりする点が注意ですね。
見返してみると Spring Boot 自体についてはほとんど何もしていませんね。。。 Javascript 開発環境を Spring Boot プロジェクト内に一緒に入れる方法とか、Geb のテスト環境を入れる方法とか、H2+Flyway を使って別に DB サーバを構築しなくても動作確認ができるプロジェクトを作成する方法とかを調べるのが目的だったので。まあ目的は全部達成できて自分としては満足な結果です。以外に全部入れられるものでした。
