ReactをCoffeeScriptで書くための開発環境を整える

はじめに

今年初めくらいから触ってみたいなと思っていたReact.jsですが、色々と情報が増えてきてやっと手をつける気になってきたので、これから勉強していきたいと思いました。

そこでどうせならCoffeeScriptで開発を進めていきたいので、React+CoffeeScriptで環境を作ってみたのでつらつらと書いていきたいと思います。

ビルドツールにはgulpとWebPackを中心に使っていきます。

サンプルファイル

今回のサンプルファイルはGitHubに一式あげているので、興味のある方はご確認下さい。

tsuyoshiwada/sample-react-coffee

下準備

作業ディレクトリに移動してターミナルで下記のように初期化します。

$ cd /path/to/dir/
$ npm init #適当にEnterしていきました

そしたらgulpのタスクファイルとWebPackの設定ファイルと、必要なディレクトリをそれぞれ作成します。

$ touch gulpfile.coffee webpack.config.coffee
$ mkdir assets src src/sass src/coffee

ここまでで下記のようなファイル構造になりました。

.
├── assets #htmlや画像を入れます
├── gulpfile.coffee
├── package.json
├── src
│   ├── coffee
│   └── sass
└── webpack.config.coffee

上記ではまだ存在していないのですが、後で記載する各タスクでdistディレクトリに全てコンパイルするように設定していきます。

使用するパッケージ・ライブラリたちをインストール

まずビルドに関するパッケージ群をインストールしていきます。

$ npm install --save-dev gulp gulp-util gulp-load-plugins gulp-ruby-sass gulp-autoprefixer gulp-watch browser-sync webpack coffee-script coffee-loader cjsx-loader

一気にたくさんいれました…！

1つずつみていく必要はないと思いますが、コードの中でXMLみたいにHTML構造を書いていけるJSXをCoffeeScriptから使用するために、cjsx-loaderを入れているのが今回のポイントかなと思います。

本筋から少しそれますが、ついでに.scssのコンパイルとブラウザの同期もしたいので合わせて入れています。

インストールされたパッケージ一覧は下記のとおりです。

• gulp
• gulp-util
• gulp-load-plugins
• gulp-ruby-sass
• gulp-autoprefixer
• gulp-watch
• browser-sync
• webpack
• coffee-script
• coffee-loader
• cjsx-loader

あと今回一番の主役であるReactをインストールします。

$ npm install react --save

各種設定

これで必要なパッケージは揃ったので、gulpとwebpackのそれぞれ設定をしていきます。

gulpのタスク作成

gulpfile.coffeeに下記の様にタスクを書き込みました。

gulp          = require("gulp")
$             = do require("gulp-load-plugins")
webpack       = require("webpack")
browserSync   = require("browser-sync").create()
webpackConfig = require("./webpack.config.coffee")


# ブラウザの同期
gulp.task("bs", ->
  browserSync.init(
    notify: false
    server: 
      baseDir: "./dist/"
  )
)

gulp.task("bs-reload", ->
  browserSync.reload()
)


# assetsディレクトリのコピー
gulp.task("assets-copy", ->
  gulp.src("./assets/**/*", base: "./assets")
  .pipe(gulp.dest("./dist"))
  .pipe(browserSync.stream())
)


# .scssのコンパイル
gulp.task("sass", ->
  $.rubySass("./src/sass",
    style: "expanded"
    stopOnError: true
  )
  .pipe($.autoprefixer())
  .pipe(gulp.dest("./dist/css"))
  .pipe(browserSync.stream())
)


# webpack
gulp.task("webpack", (cb) ->
  webpack(webpackConfig, (err, stats) ->
    if err
      throw new $.util.PluginError("webpack", err)
    $.util.log("[webpack]", stats.toString())

    browserSync.reload()
    cb()
  )
)


# 各ファイルをビルド
# ※今回はファイルの圧縮などはしていません
gulp.task("build", ->
  gulp.start("assets-copy")
  gulp.start("sass")
  gulp.start("webpack")
)


# ファイルの変更を監視
gulp.task("watch", ["bs", "build"], ->
  $.watch("./assets/**/*", ->
    gulp.start("assets-copy")
  )

  $.watch("./src/coffee/**/*", ->
    gulp.start("webpack")
  )

  $.watch("./src/sass/**/*", ->
    gulp.start("sass")
  )
)


# デフォルトのタスク
gulp.task("default", ->
  gulp.start("watch")
)

WebPackの設定

次にwebpack.config.coffeeで下記の様に設定します。
大事なポイントは、module.loadersで指定するcjsx-loaderかなと思います。

path    = require("path")


module.exports =

  progress: true

  entry:
    app: "./src/coffee/app.cjsx"

  output:
    path: path.join(__dirname, "./dist/js/")
    filename: "[name].bundle.js"

  devtool: "source-map"

  resolve:
    modulesDirectories: ["node_modules"]
    extensions: ["", ".cjsx", ".coffee", ".webpack.js", ".web.js", ".js"]

  # .cjsxファイルをコンパイルするためのLoaderを指定します
  module: 
    loaders: [
      {test: /.cjsx$/, loaders: ["coffee-loader", "cjsx-loader"]}
      {test: /.coffee$/, loader: "coffee-loader"}
    ]

それぞれのファイルを作成

ビルドするための環境は整ったので、それぞれ必要なファイルを作成していきます。

CoffeeScript

src/coffee/app.cjsxというファイルを作成して、簡単なコンポーネントを書いてみます。お決まりのHelloほにゃららです。

React = require("react")


# 単純に`Hello XX`と出力するだけのコンポーネント
Hello = React.createClass(
  propTypes:
    name: React.PropTypes.string.isRequired

  render: ->
    <div>Hello {@props.name}</div>
)


# Helloコンポーネントを#appにマウント
React.render(
  <Hello name="React.js!!" />,
  document.getElementById("app")
)

HTML

assets/index.htmlというファイルを作成します。
コンパイルしたJSとCSSをそれぞれ読み込んでいるのと、div#appが一つあるだけのファイルです。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>React + CoffeeScript</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div id="app"></div>
  <script src="js/app.bundle.js"></script>
</body>
</html>

Sass(scss)

src/sass/style.scssを作成していますが、今回中身は適当です。

body {
  color:#333;
  font-family:sans-serif;
  font-size:18px;
  text-align:center;
}

いよいよビルドしてみる

下記コマンドで全てのファイルがビルドされて、distディレクトリ内に展開されます。

$ gulp build

今回の例だと、

• dist/index.html
• dist/css/style.css
• dist/js/app.bundle.js
• dist/js/app.bundle.js.map

ができていれば成功です。

さっそくindex.htmlブラウザ見てみると…

ちゃんとHello React!!と表示されました。

開発中はファイルの更新に合わせてブラウザも自動で更新して欲しいので、下記のコマンドを叩いてから作業にとりかかります。

$ gulp
# または下記でもOK
$ gulp watch

おわりに

とりあえず、CoffeeScriptで書き始められるところまでは出来たのでReactのチュートリアルから、ちまちま進めていこうと思います。

更新履歴

2015.05.28 追記

webpackタスク内で、ログを吐き出すようにしれっと変更しました。合わせて最初にインストールするパッケージにgulp-utilを追加しています。
またサンプルファイルをGitHubにあげましたので興味のある方は下記よりご確認頂けます〜。

tsuyoshiwada/sample-react-coffee

2015.06.18 追記

gulpfile.coffee内のsassタスクに誤りがあったので修正しました。