Gobble up pudding

プログラミングの記事がメインのブログです。

MENU

Angular + TypeScript + Spring Bootをやってみた

スポンサードリンク

f:id:fa11enprince:20180130152024j:plain 最近開発でAngular(2+) + TypeScript + Spring Bootを使っています。
それぞれのバージョンの詳細はこんな感じです。
Angular 5
TypeScript 2.6.1
Spring Boot 1.5
Java 8
Maven 3
Node.js 8.0.0
Angular-CLI 1.6.7

Node.jsのバージョンが微妙に古いのはnpm installしたときにうまくいかないものがあったためです。
ちなみにAngularもSpring Bootもかなり経験が浅いのでご指摘等あれば嬉しいです。

実際の構成例

GitHubに置きました。

github.com

AngularのチュートリアルとSpring Bootのチュートリアルを混ぜたものです。
ArpitSuthar (Arpit Suthar) · GitHub のをforkしました。

大まかな構成

TypeScriptをどう、SpringのTomcatと連携させるか考えていました。
あんまり複雑な構成にしたくなく、AngularJS(1系)の時のようにお手軽に使えるようにしたかったのです。
それでいろいろ調べたところ、下記の構成にしました。

src
 └ main
      └ client ... ここにAngularのソースを書く
      └ java
      └ resources
         └ static ... ここにAngularのTypeScriptのビルド結果が入る(Angular専用ディレクトリにする)
         └ public ... Spring bootのstaticのかわりにここを使う。Thymeleaf等で参照したいものがあればここに入れる

御覧の通りSpring Bootが中心の構成になっています。
フルでSPAにしたくなくって一部画面をThymeleafで使う場合も想定しています。
ただ、僕の少しAngular2+をかじったレベルの知識では、基本的にフルでAngularでSPAで作ったほうが楽そうです。
AngularJSは何も考えずに一部画面だけにAngularJS適用とかできましたが、
Angular2+の場合はちょっと考えないと一部画面だけAngular適用ってのは辛そうです。
ビルドはmavenにやらせてmaven経由でnpmをたたいてnpmのpackage.jsonからAngular-CLIのngコマンドをたたいて
TypeScript→JavaScript変換をしてビルドする感じです。

Angular2+について

AngularJSをちょっとだけ触ったことがあったのですが、
AngularJSに比べてかなり使いやすいです。学習コストは高いといわれますが、
Reactよりだいぶ学びやすいと思いました。
TypeScriptの恩恵もあってか、どう作ればいいかという道しるべを示してくれている分、
あんまり書き方に際は出ないような気がしました(コンポーネントの分割はどうするかとかはあるにしろ)。
TypeScript素敵です。ES6よりも当然、良いです。JavaScript全部TypeScriptにならないかな…と思える今日この頃です。

Spring Bootについて

Spring単体だと嫌なイメージしかなかったのですが、なかなか素敵なフレームワークです。
ただ、Ruby On Railsとかに比べるとだいぶ生産性は落ちる気がしますが、それでも素敵なフレームワークだと思います。
ただ、JPAというかHibernate、オメーはダメだ。
Hibernate、機能多すぎて、ハマりも多すぎて辛い…。RailsのActive Recordくらいシンプルになればいいのに。

ハマったところ

Angularがどう頑張っても更新されない…watchしてんのに…。
Angularのhtmlを更新してもなんで反映されないのよ…Springのdevtoolいれてんのに…と思っていました。

IntelliJだとこのハマりはないっぽいです。

なんで更新されなかったかというと次の挙動の違いがあるからです。
EclipseからのSpring Boot App
target/classes/resources/static/
を見に行くっぽいです。

mvn spring-boot:runで動かしたときは
webapp/src/main/resources/static
を参照しに行き、そちらを見に行くっぽいです。

というのが原因です。 ただ、Eclipseをリフレッシュしてしまえば、うまくいくこともママあります。