初めに

Haskell と Elm をさわっている人が PureScript をさわってみる記事です

以下のようなカウンターを作ります。

PureScript を動かす

以前作成した PureScript のリポジトリをもとに始めていきます。

以下の手順で取り敢えず PureScript 動かせます👏

$ git clone https://github.com/dsaikawa/purescript-initial purescript-halogen-test
...
$ cd purescript-halogen-test
$ npm install
...
$ npm run start
...
[info] Build succeeded.
🍝
$

いざ Halogen を使ってみる🥳

Halogen インストール

$ npx spago install halogen
...
$

/src/Main.purs を書き換える
Halogen Guide からのコピペです
よくあるカウンターのサンプルです

module Main where

import Prelude

import Effect (Effect)
import Halogen as H
import Halogen.Aff as HA
import Halogen.HTML as HH
import Halogen.HTML.Events as HE
import Halogen.VDom.Driver (runUI)

main :: Effect Unit
main = HA.runHalogenAff do
  body <- HA.awaitBody
  runUI component unit body

data Action = Increment | Decrement

component =
  H.mkComponent
    { initialState
    , render
    , eval: H.mkEval $ H.defaultEval { handleAction = handleAction }
    }
  where
  initialState _ = 0

  render state =
    HH.div_
      [ HH.button [ HE.onClick \_ -> Decrement ] [ HH.text "-" ]
      , HH.div_ [ HH.text $ show state ]
      , HH.button [ HE.onClick \_ -> Increment ] [ HH.text "+" ]
      ]

  handleAction = case _ of
    Increment -> H.modify_ \state -> state + 1
    Decrement -> H.modify_ \state -> state - 1

バンドルしていきます

$ npx spago bundle-app -y -t public/index.js
...
$

/public/index.html を作ります

<!DOCTYPE html>
<html>
  <head>
    <title>Halogen App</title>
    <script src="./index.js"></script>
  </head>
  <body></body>
</html>

開発の準備をする

live-server
npm-run-all

の2つを使ってホットリロードをさせて開発の環境を揃えていきます

まずはインストール

$ npm install live-server npm-run-all
...
$

package.json の script の部分を以下のように書き換えます

"scripts": {
    "start:script": "npx spago bundle-app -t ./public/index.js -w",
    "start:live-server": "npx live-server public",
    "start": "run-p start:*",
    "build": "spago build"
  }

$ npm start
...

でホットリロードが行えるので開発が楽になると思います！

最後に

実際に動かすことができました、次は Halogen を使って色々作っていきたいと思います😘