Slide 1

Slide 1 text

@smogami 2017-12-02 #NGK2017B

Slide 2

Slide 2 text

冬の夜長に ストレンジャーシングス

Slide 3

Slide 3 text

話者: @smogami 所属: JAWS-UG, FP in Scala読書会, 来栖川電算 職歴: 製造業系SIer 6年→ベンチャー 1.5年 業務: ScalaとAWSでSaaS開発

Slide 4

Slide 4 text

本日のお話 1. JSに型をつけてScalaから呼ぶ 2. TypeScriptというaltJSの変な型

Slide 5

Slide 5 text

altJSって? • 今日何度目だ「JS書きたくない」 • JSに代わる言語で書いたコードをJSに変換して、 ブラウザやnodejsなどで動かす仕組み • JSにはない便利機能を使えたり、JSの嫌なところ を意識せず書けたりするのがメリット • 古くはGWT(JavaでAjaxアプリ開発)

Slide 6

Slide 6 text

色んなaltJS 動的型付け • CoffeeScript • ClojureScript 静的型付け • TypeScript • Haxe • Scala.js(私) • Elm • ocamljs 名古屋で 使われてる

Slide 7

Slide 7 text

Scala.js採用してる理由 1. 強力な型システムや言語機能 2. JavaやScalaの人材と資産の活用 3. JetBrains IDEの強力なサポート Scala/Scala.jsで製品開発・運用中

Slide 8

Slide 8 text

TypeScriptやScala.jsなどの 静的型付け系altJSの大きなメリット JSライブラリに型定義をつけることで • 型を間違えた引数を関数に与えたりすると、 IDEやエディタがすぐにエラーを教えてくれる • オブジェクトが持つメソッドや属性を入力補完 できて、すばやくミスなくコードを書ける Binding or Façade

Slide 9

Slide 9 text

Scala.jsと型定義: 有名どころあり • jQuery, React, Vue, Angular • D3, Three.js, highcharts, Paper.js, Velocity.js… • Google Maps, YouTube, WebRTC, moment.js… • https://www.scala-js.org/libraries/facades.html に詳しい

Slide 10

Slide 10 text

静的型付け系altJSの悩みどころ • 有名ライブラリだと公式・コミュニティベースの 型定義が充実してきたが… • マイナーライブラリの型定義作るコスト • メチャクチャなオーバーロードだらけの便利関数 に型つけるつらさ 型安全の恩恵を得るには型定義メンテの代償が必要

Slide 11

Slide 11 text

できるだけラクに 型定義が欲しい!! エンジニア三大美徳 怠惰・短気・傲慢

Slide 12

Slide 12 text

JSライブラリにTypeScript用の型定義が普及してきた 巨人の肩に乗る

Slide 13

Slide 13 text

JSライブラリにTypeScript用の型定義が普及してきた ↑をScala.js用に変換するツール by Scala.js開発者 https://github.com/sjrd/scala-js-ts-importer 巨人の肩に乗る

Slide 14

Slide 14 text

JSライブラリにTypeScript用の型定義が普及してきた ↑をScala.js用に変換するツール by Scala.js開発者 https://github.com/sjrd/scala-js-ts-importer ↑をブラウザで手軽に試せるようにしました(実演) http://exoego.net/scala-js-ts-importer/ 巨人の肩に乗る

Slide 15

Slide 15 text

scala-js-ts-importerどうなの? • 完璧ではないが十分使える。これベースに、より Scalaらしく書けるラッパーを作ると生産性高い • TypeScriptとScalaの型システムは一致しないので、 小一時間の手作業はどうしても必要 • TSが「JSに型つけるためにがんばり過ぎ」な所は サポートが追いついていない ここを何とかしたらScala.jsの未来も明るい

Slide 16

Slide 16 text

ほそぼそと改善が続いている Me

Slide 17

Slide 17 text

scala-js-ts-importerハッカソン https://scala-tokai.connpass.com/event/72650/ 日時:明日 12/3 (日) 10:00~18:00 場所:名古屋 来栖川電算, JR/地下鉄 鶴舞駅 特典:フリードリンク、ピザ or 回らない寿司(宅配) 現在参加者3名…興味湧いたらぜひ!!

Slide 18

Slide 18 text

時間があったら TypeScriptの奇妙な型

Slide 19

Slide 19 text

こんなのどうやって Scala.jsに変換すれば いいんだ…

Slide 20

Slide 20 text

奇妙1. Literal type ある特定のリテラル値である、というような型。 Scalaにも欲しい(Scala 3で入る予定がある) type EventName = "ready" | "click" | "submit" type TimeUnit = "day" | "hour" | "minute" | "s" | "ms" type HttpResponse = 100 | 200 | 404 | ... let name: EventName = "NGK" // error!!

Slide 21

Slide 21 text

奇妙2. Type Predicate Union type(A または B、 A | B)のいずれかである ことを表せる特別なbooleanみたいなもの function isFish(pet: Fish | Bird): pet is Fish { return (pet).swim !== undefined; } let pet = getSmallPet(); if ((pet).swim) { (pet).swim(); } else { (pet).fly(); } if (isFish(pet)) { pet.swim(); } else { pet.fly(); } キャスト必要 キャスト不要 Type predicateを返すfunction=Type Guard

Slide 22

Slide 22 text

奇妙3. Index type オブジェクトの持つメンバーを型安全に参照できる。 型TのIndex type=メンバー名のstring literal typeのunion interface Person { name: string; age: number; location: string; } type K1 = keyof Person; // "name" | "age" | "location" type K2 = keyof Person[]; // "length" | "push" | "pop" | "concat" | …

Slide 23

Slide 23 text

奇妙4. Indexed access type Index typeの双対(dual)。 メンバーの型をメンバーの名前で参照できる type P1 = Person["name"]; // string type P2 = Person["name" | "age"]; // string | number type P3 = string["charAt"]; // (pos: number) => string type P4 = Person["foo"]; // error !! let myName: P1 = 30; // error!!

Slide 24

Slide 24 text

奇妙5. Mapped type Index typeとIndexed access typeを組み合わせることで 型TのメンバーPを加工した型をシンプルに定義できる type Nullable = { [P in keyof T]: T[P] | null } type Partial = { [P in keyof T]?: T[P] } type Proxy = { get(): T; set(value: T): void; } type Proxify = { [P in keyof T]: Proxy; }

Slide 25

Slide 25 text

まとめ • TypeScriptの型システムは、JavaScriptにとにかく型を つけようとがんばってる • TypeScript用の型定義をScala.js用に変換すると、比較 的ラクに型定義を得られる • 明日のscala-js-ts-importerハッカソン来てね! https://scala-tokai.connpass.com/event/72650/ • NetflixのStranger Thingsオススメ!

Slide 26

Slide 26 text

参考 • TypeScriptの高度な型 https://www.typescriptlang.org/docs/handbook/advance d-types.html • Scala.js用の型定義の代表例 http://www.scala-js.org/libraries/facades.html • Scala.js用型定義を集めたサイト https://definitelyscala.com/