初めに
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 を使って色々作っていきたいと思います😘