メインコンテンツまでスキップ

Halogenの主要な型まとめ

· 約6分

Halogenの型は複雑でよく混乱するのでまとめてみました。

Halogen.Component​

Halogenのコンポーネントの型。Halogen.mkComponentで生成する。

module Halogen
data Component (query :: Type -> Type) (input :: Type) (output :: Type) (m :: Type -> Type)

型パラメータ​

型説明
query親コンポーネントから受け取るリクエスト。handleQueryで処理をする。
inputコンポーネント生成時に親コンポーネントから受け取る。initialStateとreceiveで処理をする。
output親コンポーネントにデータを送る。 handleActionでraiseする。
mevalで扱うモナド。副作用を扱う時はMonadEffectやMonadAffのインスタンスにする。

例​

component :: forall m. MonadAff m => H.Component Query Input Output m
component =
  H.mkComponent
    { initialState
    , render
    , eval: H.mkEval
      { handleAction: handleAction
      , handleQuery: handleQuery
      , receive: Just <<< Receive
      , initialize: Just Initialize
      , finalize: Just Finalize }
    }

initialState​

コンポーネントのデフォルト状態を定義する関数。親コンポーネントから受け取ったinputデータから状態を生成する。

initialState :: input -> state

型パラメータ​

型説明
input親から受け取った入力データ。
stateコンポーネントの状態。

例​

type Input = { count :: Int }
type State = { count :: Int }
initialState :: Input -> State
initialState input = input

render​

HTMLを描画する関数。状態を受け取りH.ComponentHTMLを生成する。

render :: state -> H.ComponentHTML action slots m

型パラメータ​

型説明
stateコンポーネントの状態
actionhandleActionに送るAction。
slots子コンポーネントのRow。
mevalで扱うモナド。

例​

import Halogen as H
import Halogen.HTML as HH
import Halogen.HTML.Events as HE

data Action = Click MouseEvent
type State = { message :: String }

render :: forall m. State -> H.ComponentHTML Action () m
render { message } =
  HH.div
  [ HE.onClick Click ]
  [ HH.text message ]

receive​

親コンポーネントからの入力を対するActionをhandleActionに渡す関数。initialStateとの違いは副作用を扱えるところ。

receive :: input -> Maybe action

例​

data Action = Receive Input
receive = Just <<< Receive

initialize​

コンポーネントの初期化時に実行するActionをhandleActionに渡す関数。

initialize :: Maybe action

例​

data Action = Initialize
initialize = Just Initialize

finalize​

コンポーネントの後始末時に実行するActionをhandleActionに渡す関数。

finalize :: Maybe action

例​

data Action = Finalize
finalize = Just Finalize

handleAction​

コンポーネントの副作用を処理する関数。receive、initialize、finalizeから受け取るActionの他、クリックイベントなどで発行したActionを受け取り処理をする。

handleAction :: action -> HalogenM state action slots output m Unit

例​

data Action = Initialize
            | Finalize
            | Click MouseEvent
handleAction :: Action -> H.HalogenM State Action Slots Output m Unit
handleAction = case _ of
  Initialize -> pure unit
  Finalize -> pure unit
  Click e -> do
    state <- H.get
    H.put $ state { count = state.count + 1 }
    pure unit

handleQuery​

親コンポーネントから受け取ったクエリを処理する関数。

handleQuery :: forall a. query a -> HalogenM state action slots output m (Maybe a)

例​

data Query a = Increment a
             | GetCount (Int -> a)
handleQuery = case _ of
  Increment next -> do
    state <- H.get
    H.put state { count = state.count + 1 }
    pure (Just next)
  GetCount reply -> do
    state <- H.get
    pure $ Just $ reply state.count

Slot​

Slotは子コンポーネントを描画するときに使用する。親コンポーネントと子コンポーネントでどのようなデータがやり取りされるのかを定義する。

data Slot (query :: Type -> Type) output slot

型パラメータ​

型説明
query親から送られてくるリクエスト。
output親に送るデータ
slot親コンポーネントで子コンポーネントを識別する型。子コンポーネントを１つしか使わない場合はUnitでよい。

例​

type Slot = H.Slot Query Output Int

slot​

子コンポーネントをHTMLに埋め込む際に使う関数。

slot :: Proxy label -> slot -> component -> input -> (output -> action) -> ComponentHTML action slots m

型パラメータ​

型説明
labelRowのラベル。
slotSlotの最後の型パラメータslotの値。
component子コンポーネント。
input親コンポーネントから子コンポーネントに渡す入力値。
output子コンポーネントのOutput
action親コンポーネントAction
output -> action子コンポーネントのOutputを受け取って、親コンポーネントのActionを生成する関数。
slots親コンポーネントが使用する子コンポーネントのSlotを含んだRow。

例​

data Action = OnClick Output
data Output = Click MouseEvent
type Slot = H.Slot Query Output String
type Slots = ( button :: Slot )
buttom_ = Proxy::Proxy "button"

HH.slot
  button_
  1
  button
  { label: String
  , onClick: Click }
  OnClick