Slide 1

Slide 1 text

ScalaエンジニアがElmで 初めてのフロントエンド入門 松宮 康二 2019/05/27

Slide 2

Slide 2 text

自己紹介 ● 名前: 松宮 康二(まっつー) ● 最近触ってるもの(業務で) ● 最近の趣味 ○ ラーメン作り 2 twitter: @mattsu6666

Slide 3

Slide 3 text

テーマ ● Scalaエンジニアから見たElmはどんな感じか ● 気になった点や良かった点を雑多にお話できれば・・ 3

Slide 4

Slide 4 text

Elmとは ● Webアプリを作るための言語 ● 関数型言語 ● 静的型付け言語 ● 型推論がある言語 ● 実行時エラーが一切発生しない言語 ● 2012年に登場 ● 2014年頃にElmアーキテクチャが登場 ● 最新リリース0.19 4

Slide 5

Slide 5 text

Hello world def hello: Unit = println("Hello, world") hello = Debug.toString "Hello. world" Scala Elm 5

Slide 6

Slide 6 text

パラダイムの違い オブジェクト指向 関数型 関数型 Scala Elm 6

Slide 7

Slide 7 text

オブジェクト(型)の生成がシンプル case class User(id: Int, name: String) val user1 = new User(1, "aaa") val user2 = User(1, "aaa") val user3 = User.apply(1, "aaa") val user4 = User apply (1, "aaa") type alias User = { id : Int, name : String } user = User 1 "aaa" Scala Elm たった1通りの生成手段(多分) 複数の生成手段 もちろんただ冗長な訳ではなく, applyはファクトリメソッドを表す 7

Slide 8

Slide 8 text

タプルの要素は3つまで val tuple = (1,2,3,4,5...,22) tuple = (1,2,3) Scala Elm タプルは一時的に値の組を想定しているため ,3に制限 Scalaでは22個まで作成可能. 流石に22個要素があるタプルは見たこと無い 8

Slide 9

Slide 9 text

let式 def sum(a: Int, b: Int): Int = { val c = 10 def f(x: Int, y: Int, z: Int) = x + y + z f(a,b,c) } sum: Int -> Int -> Int sum a b = let -- 変数cのスコープはlet式内でのみ有効 c = 10 f x y z = x + y + z in f a b c Scala Elm 9 let式はない

Slide 10

Slide 10 text

統一されたコーディングスタイル Scala Style Guideに準拠したコードが推奨されて いる Scalafmtなどのフォーマッターを導入し コーディング規約を作成する elm-formatにより統一されたスタイル (インデントの数ですらイジれない ) Scala Elm 10

Slide 11

Slide 11 text

型は勝手に変換されない 1 + "a" // OK "a" + 1 // OK "a" + 1.toString // OK 1 ++ "a" -- コンパイルエラー "a" ++ 1 -- コンパイルエラー "a" ++ String.fromInt 1 -- OK "a" ++ 1 ^ Try using String.fromInt to turn it into a string? Scala Elm 暗黙の型変換により コンパイラがよしなに型変換をしてくれる 勝手に型変換はしないが 代わりに親切なエラーを出してくれる 11

Slide 12

Slide 12 text

列挙型(カスタム型)のちょっとした違い sealed trait Animal case object Cat extends Animal case object Dog extends Animal sealed trait Fruit case class Apple(id: Int) extends Fruit case class Banana() extends Fruit def message(fruit: Fruit): String = { fruit match { case Apple(1) => "apple-1" case Apple(_) => "apple-any" case Banana() => "banana" } } type Animal = Cat | Dog -- 値を持たせたり type Fruit = Apple Int | Banana message: Fruit -> String message fruit = case fruit of Apple 1 -> "apple-1" Apple _ -> "apple-any" Banana -> "banana" Scala Elm カスタム型に値を持たせる場合,フィールド名 は指定出来ないので,専用の型を定義する必 要がある 12

Slide 13

Slide 13 text

例外処理がない List(1).headOption > Option[Int] = Some(1) List().headOption > Option[Nothing] = None List(1).head > Int = 1 List().head > java.util.NoSuchElementException: head of empty list List.head [1] > Just 1 List.head [] > Nothing Scala Elm nullを表現する場合はMaybeなどでラップする nullを表現する場合はOptionなどでラップする ただし,例外処理を使っても良い 13

Slide 14

Slide 14 text

メソッドチェーンとパイプ (1 to 3).map(_.toString).mkString(",") > "1,2,3" List.range 1 3 |> List.map String.fromInt |> String.join "," > "1,2,3" Scala Elm コレクションが持つメソッドを呼び出してチェー ン 異なるモジュール同士をつなぐ List.range 1 3 |> List.map String.fromInt List Int List Int -> List String 14

Slide 15

Slide 15 text

関数はデフォルトでカリー化される def add(a: Int, b: Int, c: Int): Int = a + b + c def add(a: Int)(b: Int)(c: Int): Int = a + b + c add: Int -> Int -> Int -> Int add a b c = a + b + c : number -> number -> number -> number > add a b c = a + b + c : number -> number -> number -> number > add 1 : number -> number -> number Scala Elm ((add a) b) c みたいに 必ず1つの引数しか渡せない カリー化するかは自分で判断 15

Slide 16

Slide 16 text

以上・・ ● 言語機能はScalaに比べて非常にシンプル ● シンプルなので雑なコーディングが難しそう ● ScalaエンジニアがElmを始める敷居は比較的低そう(多分) ● なお,Elmアーキテクチャはまだ全然触ってません.. 16