SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Webアプリケーション開発技術の新潮流スタディーズ

関数型リアクティブプログラミング言語Elmに学ぶ フロントエンド開発の新しい形 【前編】

Webアプリケーション開発技術の新潮流スタディーズ 第4回


Elmの基本文法

ここからは、Elmを扱うための基本的な文法を解説していきます。 ただし、全ての文法を説明すると長くなってしまうので、解説は必要性の高いものに絞ります。

次のコードは、Elmで記述したHello, worldです。

import Html exposing (Html, text)

main : Html -- 型の定義
main = text "Hello, World!" -- 関数本体

何やらおまじないのように見えますが、ここでは次の2つだけを覚えてください。

  • 型の定義と関数の定義を上下に並べて記述する。型は省略できる
  • --より右はコメントになる

本記事(前編)では、ブラウザ上でElmプログラムを実行できる「Try Elm」を使用して動作を確認していきますが、 コマンドラインに慣れている方なら、REPL[3]を使用するのも良いでしょう。 一足先にElmをインストールして、elm-replコマンドでREPLを起動してみて下さい。

[3]: Read–eval–print loop(Wikipedia

基本の型

まずは基本的な型です。

-- 整数

i1 : Int
i1 = 10

i2 : Int
i2 = (10 + 2) * 3 -- 36


-- 小数

f1 : Float
f1 = 3.14

f2 : Float
f2 = 5 / 2 -- 2.5


-- 真偽値

b1 : Bool
b1 = True

b2 : Bool
b2 = -3 > 5 && 4 == 4 || "a" /= "b" -- True


-- 文字列

s1 : String
s1 = "hello"

s2 : String
s2 = "hello" ++ " world" -- "hello world"

この辺りは、JavaScriptや他の言語とほとんど同じなので特に問題ないと思います。

関数

関数は、次のようにスペースで区切って記述します。

  • 関数本体の定義: 関数 引数 引数... = 処理内容
  • 関数の適用: 関数 引数 引数...

次のコードにあるInt -> Boolは、「Int型を引数にとってBool型を返す」ことを表しています。

isNegative : Int -> Bool
isNegative n = n < 0

a = isNegative 4 -- False

b = isNegative -7 -- True

次は、引数を2つ取る関数です。

add : Int -> Int -> Int
add a b = a + b

a = add 1 2 -- 3

add10 = Int -> Int
add10 = add 10 -- 第1引数(a)だけを部分適用した新しい関数を作る

b = add10 30 -- 新しい関数に改めて第2引数(b)を与える -> 40

引数を2つ以上取る関数は、引数を途中まで適用することができます。 上の例では、Int -> Int -> Int型の関数に第1引数だけを渡し、「残りの第2引数を取って結果を返す関数」(Int -> Int)を生成しています。 よく使うので覚えておきたい構文です。

構造体

リスト

リストは、同じ型の複数の値を格納します。

list1 : List Int -- Int型を格納するリスト
list1 = [1,2,3]

list2 : List String
list2 = ["foo","bar","baz"]

list3 : List (List Int)
list3 = [[10], [20, -300]]

list4 = 1 :: [2,3,4] -- [1,2,3,4]

list5 = [] ++ [1,2] ++ [3,4,5] -- [1,2,3,4,5]

list6 = [1..6] -- [1,2,3,4,5,6]
  • ::は、リストの先頭(左端)に値を追加します。
  • ++は、リスト同士を結合します。

タプル

タプルは、複数の値を組にしたものです。リストとは違い、異なる型を組にすることができます。

tuple1 : (Int, Bool)
tuple1 = (1, True)

tuple2 = (1, "foo", True)

tuple3 : (,,) 1 "foo" True -- 上と同じ意味

(a, b, c) = tuple3 -- a, b, cはそれぞれ、1, "foo", True

レコード

レコードは、JavaScriptのObjectと思えばよいでしょう。

emp = { age = 30, name = "Taro Yamada" }

name1 = emp.name -- "Taro Yamada"

name2 = (.name) emp -- 上と同じ意味

次のシンタックスは、指定したプロパティを置き換えた新しいレコードを生成します。 元のレコードが変更されることはありません(Elmでは全てのデータがImmutableです)。

-- record1のmessageプロパティを"Goodbye"に置き換える
record2 =
  { record1 |
    message <- "Goodbye"
  }

type alias

Elmでは、型に別名(alias)を付けることができます。 別名は、type alias 型の別名 = 型の定義のように宣言します。

type alias Employee = { age : Int, name : String }

emp : Employee
emp = { age = 30, name = "Taro Yamada" }


type alias Name = String

type alias Formatter a = a -> String

最初のうちはレコード型を宣言する場合に使うことがほとんどかと思います。

次のページ
Union Typeとcase ~ of

修正履歴

この記事は参考になりましたか?

Webアプリケーション開発技術の新潮流スタディーズ連載記事一覧

もっと読む

この記事の著者

鳥居 陽介(株式会社ワークスアプリケーションズ)(トリイ ヨウスケ)

株式会社ワークスアプリケーションズ所属。イケてるアプリケーションを死ぬほど楽に作るために研究を続ける日々。社内での立ち位置は「フロントエンドのナウい人」。最近エバンジェリストという肩書きが付いた。趣味は作曲とスノーボード。 Blog: http://jinjor-labo.hatenablog.com/ ...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/8873 2017/03/02 16:39

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー