【purescript】purescript-react を動かしてみるまで頑張る

# purescript-reactとな

PureScriptに興味があるけど、
手っ取り早く何かを作りたい場合に何かないものか、
と思って探してみたらpurescript-reactを見つけた。

https://github.com/purescript-contrib/purescript-react

PureScriptの開発環境構築からひと通り軽く舐めてみたい。

# PureScriptって何？

何、というとあれだが、altJSの一つ。
以下のプレゼンを見ると良いのではないだろうか

[関数型AltJSの決定版！？](http://slides.pab-tech.net/flt-purescript/)

# Purescript開発環境構築

Purescriptの開発環境を構築しないと始まらない。

http://www.purescript.org/

から、インストール手順を参考にする。

## バイナリファイルをダウンロード

バイナリファイルで配布されているのか。

http://www.purescript.org/download/

からダウンロードを行う。
記事作成時のバージョンはv0.6.2だったので、v0.6.2を落とす。

![Screen Shot 2014-11-29 at 14.37.24.png](https://qiita-image-store.s3.amazonaws.com/0/3985/a22f32a5-40af-e1b2-48b3-ee177ded85a6.png)

自分の開発環境はMac OS Xなので、macos.tar.gzをダウンロードする。

## ダウンロード後

適当なディレクトリにバイナリファイルを配置し、PATHを通す。
[fish shell](http://fishshell.com/)かつ[oh-my-fish](https://github.com/bpinto/oh-my-fish)使ってるのでPATH追加はヘルパ関数([__append_path](https://github.com/bpinto/oh-my-fish/blob/master/functions/_append_path.fish))を使う :)

```
> mv ~/Download/purescript ~/
> _append_path ~/purescript
```

## node.jsの環境を構築する

JavaScriptへの変換を行うので、
JavaScriptそのものを実行するための環境が必要。

[nodebrew](https://github.com/hokaccha/nodebrew)を使い、node.jsの環境をさくっと構築する。
nodebrew及びnodeインストールの手順は、
[nodebrewのREADME.md](https://github.com/hokaccha/nodebrew/blob/master/README.md)を読むと簡単に導入できるので端折ります :)

## bowerをインストールする

purescript-reactのサンプルを動かすにあたり、
bowerが必要。

```
> npm install -g bower
```

## Gulpをインストールする

これもpurescript-reactのサンプルを動かすにあたり、必要。

```
> npm install --g gulp
```

# Purescriptを試す

まず、どうやってコンパイルすればいいのだろうか。
試しに書いてコンパイルしてみよう

[Purescript by Example](https://leanpub.com/purescript/read)より**2.5 Hello, PureScript!**を引用する。

```hs:welcome_to_underground.purs
module WelcomeToUnderground where

import Debug.Trace

main = trace "Welcome to underground!"
```

これをコンパイルしてみると...

```
> psc welcome_to_underground.purs --output welcome_to_underground.js
> ls -la
-rw-r--r--  1 matsuzakikeiji  staff    28K Nov 29 15:54 welcome_to_underground.js
-rw-r--r--  1 matsuzakikeiji  staff    94B Nov 29 15:46 welcome_to_underground.purs
> node welcome_to_underground.js
```

変換後のファイルサイズはでかい。型クラスとか入れてるから当たり前か。
そしてnodeで実行しても出力がない。なぜだろう...時間が無いからあとで調べるか。

# PureScriptの実行環境揃ったしpurescript-reactをいじる

## examples/tutorial

### いじってみる。

[purescript-react](https://github.com/purescript-contrib/purescript-react)を手元のlocal環境に持ってくる

```
> git clone git@github.com:purescript-contrib/purescript-react.git
```

### examples/tutorialのビルド

react tutorialのコードを使ったサンプルがあるので、
そのプロダクトをビルドしてみる。

[purescript-reactのREADME.md](https://github.com/purescript-contrib/purescript-react/tree/master/example/tutorial)を参考にした。

## ビルドから立ち上げまで

```
> cd purescript-react/example/tutorial
> npm install
> gulp example-tutorial
[13:28:05] Working directory changed to ~/Project/purescript-react
[13:28:05] Using gulpfile ~/Project/purescript-react/gulpfile.js
[13:28:05] Starting 'example-tutorial'...
[13:28:06] Finished 'example-tutorial' after 783 ms
> python server.py
Serving HTTP on 0.0.0.0 port 8000 ...
```

### 動作確認

立ち上がった

```
> open http://localhost:8000
```

![Screen Shot 2014-11-30 at 13.34.55.png](https://qiita-image-store.s3.amazonaws.com/0/3985/dbc7349f-d675-4a1a-61e6-3dee413a11a5.png)

### ソースコード

FFI機能を利用し、JavaScriptをPureScriptコードとして実行するなど、「へえ、そうなのか」という記法が多い。

FFIについてはこちらを見てみると良いかと。[FFI(Try PureScript)](http://try.purescript.org/example/ffi)

[submit](https://github.com/purescript-contrib/purescript-react/blob/36ed9aef24c100bd99e67b345713ea056dd8a6cf/example/tutorial/tutorial.purs#L83)とか。

```hs:tutorial.purs#submit
  foreign import submit
    "function submit(e) {\
    \  e.preventDefault();\
    \  return function() { \
    \    var author = this.refs.author.getDOMNode().value.trim();\
    \    var text = this.refs.text.getDOMNode().value.trim();\
    \    this.props.onCommentSubmit.call(this, {author: author, text: text});\
    \    this.refs.author.getDOMNode().value = '';\
    \    this.refs.text.getDOMNode().value = '';\
    \    return false;\
    \  } \
    \}" :: Event -> forall eff. Eff eff Boolean
```

# examples/appを見る

## app.pursをコンパイル

```
> cd examples/apps
> gulp example-apps
[14:36:47] Working directory changed to ~/Project/purescript-react
[14:36:48] Using gulpfile ~/Project/purescript-react/gulpfile.js
[14:36:48] Starting 'example-app'...
[14:36:48] Finished 'example-app' after 432 ms
```

## example/appの動作確認

gulpfile.jsで指定されたビルドパスにjsファイルが作られている。
また、bowerでreactをインストールする必要がある。

```
> mv ../../js/example/app/app.js .
> bower install react
> open index.html
```

![Screen Shot 2014-11-30 at 14.41.24.png](https://qiita-image-store.s3.amazonaws.com/0/3985/2299461b-3f16-5d7e-76b4-bacb27800ffb.png)

うまくビルドできた。

# purescript-reactはどうなのか　

React単体を動かすには、DOM変換に対応するファイルはあるが、
[react-bootstrap](http://react-bootstrap.github.io/)や[material-ui](https://github.com/callemall/material-ui)は個人で対応しなければ大変そうだなと思った。

時間が足りないのでこのぐらいで。