ElmのSignalについての記事は沢山上がっていますので、今回はTaskについての記事を書きます。

Tasksについて

非同期処理とGUI

Elmには、非同期処理を上手く扱う仕組みとしてTasksというものがあります。ElmはフロントエンドGUIのための言語でありますが、GUIでは非同期処理は欠かすことができないでしょう。とある、重い処理のためにユーザの操作ができないとあれば、困る場合があるからです。

さて、非同期処理は基本的にコールバック地獄になりやすく、そのためJSではPromiseなど、さまざま言語でコールバック地獄をなんとかしようとする仕組みがあります。ElmのTaskもそうした、仕組みの一つでしょう。

Tasks

さて、Tasksは、Elm 0.15から導入されました。基本的には、HTTPのリクエストや、データベースを扱いたい時などの、非同期処理 を扱うための仕組みです。

簡単なソースコード例の紹介

いろいろと説明する前に、Tasksを使ったソースコードを出してみましょう。

Httpの通信するサンプルを書いてみます。elmを書く前に、nodeで簡単なjsonを返すだけのサーバーを作りました。

var http = require('http');
var server = http.createServer();

server.on('request', doRequest);
server.listen(8080);
function doRequest(req, res) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.write('{"msg":"Hello World"}');
    res.end();
}

さて、このサーバーにリクエストを送るサンプルを書きます。依存するライブラリは以下の通りです。

"dependencies": {
        "elm-lang/core": "2.1.0 <= v < 3.0.0",
        "evancz/elm-html": "4.0.2 <= v < 5.0.0",
        "evancz/elm-http": "3.0.0 <= v < 4.0.0"
}

さて、以下が簡単なサンプルになります。

import Http 
import Html exposing (div, text)
import Html.Attributes
import Json.Decode as D exposing ((:=))
import Task exposing (..)
import Debug exposing (log)


main =
   div [] [text "Hello World"]

helloWorldTask : Task Http.Error String
helloWorldTask =
  Http.get (D.object1 identity ("msg" := D.string)) "http://localhost:8080"

port helloWorldRunner : Task String String
port helloWorldRunner =
  let
    errorLog error = 
              log "error" <|
                  case error of
                    Http.Timeout ->
                      "timeout"

                    Http.UnexpectedPayload msg ->
                      "unexpect payload : " ++ msg

                    Http.BadResponse code msg ->
                      "bad respose, code : " ++ (toString code) ++ " msg : " ++ msg

  in
    mapError errorLog << map (log "respose") <| helloWorldTask

まず、一つずつ簡単に、解説して行きます。

main

main =
   div [] [text "Hello World"]

Taskとか関係はありませんが、とりあえず、elm-htmlで、helloworldを表示するだけのコードです。

Task型

helloWorldTaskについて見ていきましょう。まず型からです。

helloWorldTask : Task Http.Error String

Taskという型が出てきました。Taskという型はなんらかの非同期処理の型です。
Taskは、2つの型引数を取ります。Task型は、なんらかの処理(task)を行なう型であり、その処理が失敗時(エラー時)に受け取る型と、成功時に受けとる型を想定します。なので、2つの型引数が考えられます。

type Task x a

基本的に、xはエラー時の値で、aは成功時の値を示します。なので、helloWorldTaskは、エラーとして、Http.Error型の値、成功時にString型の値を扱う、Task型となります。

helloWorldTaskの実装を見てみましょう。

helloWorldTask =
  Http.get (D.object1 identity ("msg" := D.string)) "http://localhost:8080"

Http.getは、getメソッドのリクエストを送る関数です。第一引数にレスポンスをDecodeための、Decoder型を、そして、リクエストURLのString型を取ります。

処理としては、"http://localhost:8080"にgetのリクエストし、レスポンスとして{"msg":"Hello World"}という文字列が返されるため、それをDecodeする処理です。

port

さて次に, portです。

port helloWorldRunner : Task String String

先程、Taskを定義しましたが、定義しただけでは、Taskは動きません。Taskを動かすためには、portを通して定義しなければなりません。

また、 portと通して定義できる値は、TaskとSignal Taskです。実行タイミングを扱うのであれば、Signal Taskを定義しましょう。

成功時と失敗時の処理

さて、helloworldRunnerの実装を見て行きましょう。

port helloWorldRunner =
  let
    errorLog error = 
              log "error" <|
                  case error of
                    Http.Timeout ->
                      "timeout"

                    Http.UnexpectedPayload msg ->
                      "unexpect payload : " ++ msg

                    Http.BadResponse code msg ->
                      "bad respose, code : " ++ (toString code) ++ " msg : " ++ msg

  in
    mapError errorLog << map (log "respose") <| helloWorldTask

さて、まずは、letを使い、errorLogという、Http.Errorを、ログ表示する関数を書いています。

    errorLog error = 
              log "error" <|
                  case error of
                    Http.Timeout ->
                      "timeout"

                    Http.UnexpectedPayload msg ->
                      "unexpect payload : " ++ msg

                    Http.BadResponse code msg ->
                      "bad respose, code : " ++ (toString code) ++ " msg : " ++ msg

次に、Task.mapErrorと、Task.mapを用いて、成功時と失敗時にそれぞれ適当なメッセージをログに残すようにしています。

    mapError errorLog << map (log "respose") <| helloWorldTask

<<などを使い、関数合成しています。

Taskの基本的な概要まとめ

以上が、Taskの基本的な概要となります。基本的にTask型を作り、portを通して定義することによって、Taskが動くようになります。

Taskの合成

Signal同時が合成できたように、Taskもまた、合成することができます。それを、また先程の例を修正し、説明してきます。

コード例の紹介

import Http 
import Html exposing (div, text)
import Html.Attributes
import Json.Decode as D exposing ((:=))
import Task exposing (..)
import Debug exposing (log)


main =
   Signal.map (\result -> div [] [text result]) myMailbox.signal


helloWorldTask : Task Http.Error String
helloWorldTask =
  Http.get (D.object1 identity ("msg" := D.string)) "http://localhost:8080"


myMailbox : Signal.Mailbox String
myMailbox = Signal.mailbox ""

sendMe : String -> Task x ()
sendMe = Signal.send myMailbox.address

sendMeError : Http.Error -> Task x ()
sendMeError error = 
  sendMe <| case error of
    Http.Timeout ->
      "timeout"

    Http.UnexpectedPayload msg ->
        "unexpect payload : " ++ msg

    Http.BadResponse code msg ->
      "bad respose, code : " ++ (toString code) ++ " msg : " ++ msg



port helloWorldRunner : Task x ()
port helloWorldRunner =
    helloWorldTask `andThen` sendMe
                   `onError` sendMeError

上のコードは、Mailboxが出てきていますが、これは後日また改めて記事にしたいと思っています。

さて、上記では、sendMeとsendMeErrorというTask x ()を返す関数を作成しています。

sendMe : String -> Task x ()

sendMeError : Http.Error -> Task x ()

それらをport helloWorldRunnerにて、andThenとonErrorを用い合成していまうす。


port helloWorldRunner : Task x ()
port helloWorldRunner =
    helloWorldTask `andThen` sendMe
                   `onError` sendMeError

ここで、andThenはTaskが成功した時にするTaskを、onErrorは失敗したときにするTaskを合成しています。上記では、helloWorldTaskが成功した時に、成功時の値を受けとりsendMeで返されるTaskが実行され、エラー時に、失敗時の値を受けとりsendMeErrorで返されるTaskが実行されるのです。

まとめ

以上で、Taskを使って、elmを非同期処理を書くための概要を説明しました。

まとめますと、

Taskは非同期処理を行なう型。成功時と失敗時の型を持つ。
portを通して定義されるTaskが実行される。
Taskは、他のTaskを組み合わせることができる。

ということになります。

ElmのTasksについて