soy-curd's blog

へぼプログラマーです [https://twitter.com/soycurd1]

Elmのシグナルについて

Elmのシグナルについて、よくわからないかんじなのでメモ。

情報源はここ

シグナルって?

wikipediaによると、時間に従って変化する値、とある。例えばElmでは、ある時間、ある時間でのマウスの位置を保持したものをMouse.positionとして取得することができる。これがシグナルの例。

どうやって使うの?

mapすることによってシグナルの値に触ることができる。例えば、

import Graphics.Element exposing(..)
import Signal exposing(..)
import Mouse

main =
  show Mouse.x

としても、Elmはhtml上に、"Signal" としか表示させることができない。Signalの中にはMouse.xの値が詰まっているはずだ。そこで、以下のようにする。

import Graphics.Element exposing(..)
import Signal exposing(..)
import Mouse

main =
  map show Mouse.x

これで、マウスのx軸の値をリアルタイムでブラウザ上に反映させるhtmlを作成することができる。

にょろにょろ(<~)(~)の意味がわからないんだけど?

どちらもmap。

(<~)については、

import Graphics.Element exposing(..)
import Signal exposing(..)
import Mouse

main =
  show <~ Mouse.x
  -- map show Mouse.x と同じ!

ということで、普通のmapと同じ。ただmapを中置演算子にしただけなので、

main =
  show `map` Mouse.x

とイコールということになる。

(~)については、map2, map3, ...と同じ。

map2とはなにかというと、

import Graphics.Element exposing(..)
import Signal exposing(..)
import Mouse

xySignal : Signal (Int, Int)
xySignal = map2 (,)  Mouse.x  Mouse.y

main =
  show <~ xySignal

2つのシグナルの値を一気に取り出して、関数に適用することができるもの。これを(~)を使うと、

import Graphics.Element exposing(..)
import Signal exposing(..)
import Mouse

xySignal : Signal (Int, Int)
xySignal = (,) <~ Mouse.x ~ Mouse.y

main =
  show <~ xySignal

と書ける。

おわりに

2つのにょろにょろ(<~) (~)を理解するのにも、非常に時間がかかってしまった。Elm道は長い...