Reasonでcss-modules #reasonml

Flowの中身を知るために最近OCamlに入門したものです。
昨日Reasonを初めてちゃんと触ってみて、強く良さを感じたので一コマ埋めさせてもらいました。

さて、ReasonにはOCamlの方言でありながらJavaScriptの既存のエコシステムにそのまま相乗り出来るという特徴があります。

そもそもbsbコマンドで生成されるプロジェクトはWebpackを用いてバンドルされていますし、文法からも既存のJavaScriptの世界観から無理なく入門してこれるように気を使われていることが分かります。
（試しに手元のReasonファイルをJavaScriptファイルとして解釈させてみても、大抵シンタックスハイライトが壊れません）

これによって、普段のアプリケーション開発で使っているような仕組みをほぼそのまま使うことが可能なようです。
今回はcss設計の救世主であるcss-modulesをReasonのコードで使ってみたいと思います。

css-modules関連のモジュールをインストール

まずはbsbコマンドでプロジェクトの雛形を作ります

bsb -init my-project -theme react

次にcss-modules関連のモジュールをインストールします
（css-modulesから脱線するので省略しましたが、postcss-loader等との併用も当然問題ありません）

yarn add -D css-loader css-loader extract-text-webpack-plugin

設定もいつも通りです

  module: {
    rules: [{
      test: /\.css$/,
      use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: [{
          loader: "css-loader",
          query: {
            modules: true,
            sourceMap: true,
            importLoaders: 2,
            localIdentName: "[name]__[local]___[hash:10]",
          }
        }, "postcss-loader"],
      }),
    }]
  },
  plugins: [
    new ExtractTextPlugin("style.css"),
  ]

いつも通りインストールしてwebpack.configに設定を書くだけですね。

最後にReason(BuckelScript)のFFIを用いてでCSSクラス名のオブジェクトを呼び出します。

[@bs.module] external style : Js.t({..}) = "./style.css";

これでstyleには./style.cssで定義したCSSクラスのオブジェクトが入っているので、あとはそのまま適用するだけです。
いつも通りですね。

ついでにclassnamesで複数のCSSクラスを適用してみたコードを書いてみます。

[@bs.module] external cx : (string, string) => string = "classnames";

let make = (~status, _children) => {
  ...ReasonReact.statelessComponent("MyComponent"),
  render: (_self) => {
    <div
      className=(cx(style##myHead, style##myBody))
    />
  }
};

以上です。
ほとんど特別なことをせずに既存のJSライブラリの提供する仕組みが使えてしまいました。

個人的には、静的型付けを前提としないJavaScriptに適切かつ健全に静的型付けをしようと試みた結果、Flowは難しくなってしまっていると思っているので、JavaScriptの文法を強く残したReasonには希望を感じます。同僚にも勧めやすいし。

2018年はReasonですね。
では。