play framework で react.js やろうとしてみたメモ
Playframework に ReactJS 突っ込もうかと思ったのだが、そもそもが JSX ベースの開発だ。
Playframework のデフォは Coffee しか対応していない。
他の人はどうしてるのかなぁと思って調べてみたが
なんてのがあった。
中で何使ってんのかなーと思って調べてみたら npm 経由のやつがあった。
そりゃScalaネイティブでコンパイラとかしんどいもんなぁ…
他にめぼしいものもない…わけでもない。ScalaJS で React しようというのがいくつかあった。
ScalaJS 上で DSL 用意してなかなかキモい(褒め言葉)書き方で React するとか、
ScalaJS の構文はほぼそのままに、アノテーション仕掛けた箇所だけアノテーションで回避するものも。
まぁそれは置いておきましょう。
環境は
- MAC 10.10.3
- Homebrew インストール済み
- npm 2.9.0
- Playframework 2.3.8
まずはNPMセットアップから
使うって言ってるしね。Homebrew でインストールした。
環境は mac 10.10.3 で実験なので、Homevrew が一番手っ取り早かった。人によっては watilde/npmbrew · GitHub 使ってるのは見た事あるけど、どっちがいいかは不明。
homebrew で入れた場合、npm 2.5.1 が入ったのを確認(これ入れたタイミングで違うかも?)。
一応 npm update -g npm
で更新をかけたところ、アップデートバージョンは 2.9.0 になった。
playframework のプロジェクト作成
activator
も Homebrew でインストールし、activator new
でプロジェクト作成。play-scala でとりあえずプロジェクトを作る。
作成されたプロジェクトは play 2.3.8 だ。
ReactJS が動くまで
やった事
project/plugins.sbt
に sbt-reactjs
を突っ込む。ddispaltro/sbt-reactjs · GitHub の readme でそう書いてるしね。
次に build.sbt
に webjars と webjars react を突っ込む。下記みたいな感じ。
libraryDependencies ++= Seq( jdbc, anorm, cache, ws, "org.webjars" %% "webjars-play" % "2.3.0-3", "org.webjars" % "react" % "0.13.1" )
sbt-web 記述は無視。Play でやってるしね。
conf/routes に webjars を突っ込もう
# Home page GET / controllers.Application.index # Map static resources from the /public folder to the /assets URL path GET /assets/*file controllers.Assets.at(path="/public", file) GET /webjars/*file controllers.WebJarAssets.at(file)
とりあえずビルド sbt run
(activator run 使うのか?sbt 入ってたしこっちで起動)。
さすがに落ちる気配はない。まープラグイン入れただけで落ちるって事はないでしょうよ。
で、早速 app/views/index.scala.html を下記のように編集
@(message: String) @main("Welcome to Play") { <div id="application"></div> <script src="@routes.WebJarAssets.at(WebJarAssets.locate("react-with-addons.min.js"))"></script> <script src="@routes.Assets.at("javascripts/components/App.js")"></script> }
で、app/assets/javascripts/components/App.jsx ファイルを作成(intelij で良さげなプラグイン知ってたら誰か教えてください)
React.render( <h1>Hello, world!</h1>, document.getElementById("application") );
で動かした結果が下記。
よっし正常動作してる