1 of 22

slamdata/purescript-halogen の紹介

@e_ntyo (https://entyo.github.io)

2 of 22

@e_ntyo

  • 大学中退 → フリーター
  • もうすぐ誕生日
    • ほしいものリスト

3 of 22

このスライドの内容

  1. そもそもPureScriptとは
  2. slmadata/purescript-halogen というUIライブラリの紹介

4 of 22

PureScriptを�知っている方

5 of 22

PureScriptとは

  • いわゆるAltJSの１つ

.purs

.js

compile by psc

.js

use via FFI

6 of 22

PureScriptとは

  • Haskellライクな関数型プログラミング言語
    • 静的型による強力な型システム
      • 型クラス, パターンマッチ, Record型, などの超便利機能
      • 開発者支援
        • コードの自動生成
        • エディタでのコード補完・定義ジャンプ

7 of 22

PureScriptとは

  • Haskellライクな関数型プログラミング言語
    • 圏論の世界の概念を利用できる
      • Functor, Monoid → リスト操作が便利に
      • Applicative → フォームバリデーションが簡単に
      • Monad → 副作用を持つ値, Nullableな値の取扱が安全に

重要: 圏論での意味合いがわかっていなくても使える（こわくない）

8 of 22

slamdata/purescript-halogen

  • VDOMを利用したPureScriptのUIライブラリ
    • コンポーネントツリーでUIを組み立てる
      • 個人的な印象: PureScriptの世界線でのReact.js

9 of 22

slamdata/purescript-halogen

  • 例 - entyo/WatchingU

10 of 22

slamdata/purescript-halogen

  • 例 - entyo/WatchingU

11 of 22

slamdata/purescript-halogen

  • 例 - コンポーネントの定義

12 of 22

slamdata/purescript-halogen

  • 例 - コンポーネントの構成要素

13 of 22

slamdata/purescript-halogen

  • 例 - コンポーネントの構成要素

14 of 22

slamdata/purescript-halogen

  • 例 - コンポーネントの動作

15 of 22

slamdata/purescript-halogen

  • 例 - コンポーネントの動作

16 of 22

slamdata/purescript-halogen

  • 例 - State -> View

17 of 22

slamdata/purescript-halogen

  • 例 - State -> View

18 of 22

19 of 22

SPAをつくるぞ！

  • Global Stateの管理はどうするの？

20 of 22

SPAをつくるぞ！

  • 〇〇はできますか？
    • Routerは？
      • ある
    • Server Side Renderingは？
      • 未対応（対応している別のUIライブラリはある）
    • SVG Supportは？
      • actively developmentが終了

21 of 22

まとめ

  • PureScript → HaskellライクなAltJS
    • 最新の関数型プログラミング言語
    • 既存のJSのコードは再利用できる
  • purescript-halogen → VDOMを利用したPureScriptのUIライブラリ
    • 安全な（ランタイムエラーのない）SPAを開発できる

22 of 22

See Also

  • entyo/WatchingU
  • コモナドスケッチ ~ 1. DOMのコラージュ ~
    • PureScriptでSPAを書いていく連載記事