技術をかじる猫

適当に気になった技術や言語、思ったこと考えた事など。

play framework で react.js やろうとしてみたメモ

Playframework に ReactJS 突っ込もうかと思ったのだが、そもそもが JSX ベースの開発だ。
Playframework のデフォは Coffee しか対応していない。

他の人はどうしてるのかなぁと思って調べてみたが

github.com

なんてのがあった。
中で何使ってんのかなーと思って調べてみたら npm 経由のやつがあった。

github.com

そりゃScalaネイティブでコンパイラとかしんどいもんなぁ…
他にめぼしいものもない…わけでもない。ScalaJS で React しようというのがいくつかあった。

github.com

ScalaJS 上で DSL 用意してなかなかキモい(褒め言葉)書き方で React するとか、

xored/scala-js-react · GitHub

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.sbtsbt-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")
);

で動かした結果が下記。

f:id:white-azalea:20150501175958p:plain

よっし正常動作してる