俺の望むライブラリがない！

Slide 1

Slide 1 text

Զͷ๬ΉϥΠϒϥϦ͕ͳ ͍ʂʂʂ ---------------------------- @mizchi

Slide 2

Slide 2 text

ࣗݾ঺հ 4 νϟϦͰ͖ͨ 4 Angular͕ݏ͍ 4 AltjsϚχΞ 4 ͙͙Ε

Slide 3

Slide 3 text

͋Δ೔ήʔϜΛ࡞͍ͬͯΔͱ ߏ੒ 4 CoffeeScript 4 brunch 4 cordova 4 snap.svg 4 vue.js ͦͷ΁Μ

Slide 4

Slide 4 text

΄͍͠΋ͷ͕શવ଍Γͳ͍…

Slide 5

Slide 5 text

࠷ۙͷϑϩϯτΤϯυ։ൃελοΫ 4 Ϗϧυ؅ཧπʔϧ(grunt/gulp/brunch) 4 npm/bower 4 ϞδϡʔϧγεςϜ(require.js/browserify) 4 CSSύΠϓϥΠϯ(sass/compass/less)

Slide 6

Slide 6 text

ϥΠϒϥϦબఆͲ͏͢Δ?

Slide 7

Slide 7 text

ϥΠϒϥϦબఆͲ͏͢Δ? 4 ͱʹ͔͘αϯυϘοΫε࡞ͬͯࢼ͢

Slide 8

Slide 8 text

αϯυϘοΫε࡞Γ·͘Δ mizchi-sandbox

Slide 9

Slide 9 text

Θ͔Δ͜ͱ

Slide 10

Slide 10 text

ੈͷதʹ͸

Slide 11

Slide 11 text

Զ͕΄͍͠ϥΠϒϥϦ͕

Slide 12

Slide 12 text

ͥΜͥΜͳ͍ʂʂʂ

Slide 13

Slide 13 text

Ͳ͏͢Δͷʁ શ෦࡞Δ͔͠ͳ͍ʂ(ࡨཚ)

Slide 14

Slide 14 text

࡞ͬͨ 4 momic 4 libretto 4 warden 4 TypedCoffeeScript

Slide 15

Slide 15 text

΄͍͠΋ͷ 4 ϒϥ΢βετϨʔδͷActiveRecordΈ͍ͨͳ΍ͭ

Slide 16

Slide 16 text

Momic

Slide 17

Slide 17 text

Momic 4 IndexedDb/localStorageϥούʔ 4 rubyͷActiveModel෩API

Slide 18

Slide 18 text

Momic user = new User user.name = 'mizchi' user.age = 26 user.save().then => console.log 'save done!' User.find().then (users) => console.log users

Slide 19

Slide 19 text

ݱঢ় ศརͳͷʹԶ͔͠࢖ͬͯͳ͍

Slide 20

Slide 20 text

΄͍͠΋ͷ1 4 Vue.jsͷϧʔλʔ

Slide 21

Slide 21 text

Warden

Slide 22

Slide 22 text

Warden 4 grapnel.jsΛchaplin.js෩ʹ֦ு 4 vue.jsͱҰॹʹ࢖͏ͷΛ૝ఆ(vue-router͕·ͩͳ͍) 4 vue.jsͷ࡞ऀʹ঺հͯ͠΋Β͑ͨͷͰˑ42

Slide 23

Slide 23 text

# app/controllers/home-controller.coffee module.exports = class HomeController extends Warden.Controller beforeAction: (params) -> @reuse Layout index: (params) -> home = @reuse HomeView $ -> router = new Warden router.match '', 'home#index' ͜Μͳײ͡

Slide 24

Slide 24 text

ݱঢ় 4 ศརry 4 ެࣜʹ঺հ͞ΕΔͱͦΕͳΓʹ࢖ΘΕΔͬΆ͍ʁʁ

Slide 25

Slide 25 text

ଞʹ 4 ඇಉظίϯτϩʔϧϑϩʔ

Slide 26

Slide 26 text

libretto

Slide 27

Slide 27 text

libretto 4 ඇಉظίϯτϩʔϧ 4 ϢʔβʔͱͷΠϯλϥΫγϣϯ੍ޚ 4 εςʔτϚγϯ੍ޚ

Slide 28

Slide 28 text

libretto Purchase = Libretto.extend steps: start: 'waitUserSelection' waitUserSelection: ['purchase', 'cancel'] purchase: 'end' waitUserSelection: (context) => context.itemName = 'apple' 'purchase' purchase: (context) -> new Promise (done) => done()

Slide 29

Slide 29 text

libretto ݱঢ়ɿந৅౓ߴͯ͘Զ͔͠࢖ͬͯͳ͍

Slide 30

Slide 30 text

΄͍͠΋ͷ 4 coffeescirptॻ͍ͯΔͱܕ͕΄͘͠ͳͬͯ͘Δ

Slide 31

Slide 31 text

TypedCoffeeScript 4 ΍ͬͺܕ΄͍͠͡ΌΜʁͱ։ൃ։࢝ 4 coffeescriptͷΏΔ;Θจ๏ + TypeScriptతܕνΣοΫ 4 AST֦ுͯ͠੩తʹTypeCheck(ϥϯλΠϜνΣοΫ͡Ό ͳ͍ʂ) 4 CoffeeScriptReduxͷ֦ு(jashkenasͷͰ͸ͳ͍)

Slide 32

Slide 32 text

TypedCoffeeScriptͰͰ͖Δ͜ͱ1 double :: Int -> Int double = (n) -> n * 2 num1 :: Int = double 5 num2 :: String = double 5 # => TypeError

Slide 33

Slide 33 text

TypedCoffeeScriptͰͰ͖Δ͜ͱ2 struct Point x :: Number y :: Number p :: Point = {x: 3, y: 3}

Slide 34

Slide 34 text

TypedCoffeeScriptͰͰ͖Δ͜ͱ3 class X text :: String f :: Number -> Number f: (n) -> @text = n.toString()

Slide 35

Slide 35 text

TypedCoffeeScriptͰͰ͖Δ͜ͱ࢒Γ 4 ςετίʔυಡΊ 4 https://github.com/mizchi/TypedCoffeeScript/blob/ master/test/type_checker.coffee

Slide 36

Slide 36 text

ࠓޙͷల๬ 4 TypeScript Importer 4 ͦͷͨΊʹASTվળத 4 moduleγεςϜ 4 ܕͷΧόϨοδܭଌ

Slide 37

Slide 37 text

ͦͷաఔ 4 CoffeeScriptReduxʹ͸super͕ͳ͍ʂ 4 ࣮૷ͯ͠ຊՈʹPRத 4 TypedCoffeeScriptͰ͸ಋೖࡁΈ

Slide 38

Slide 38 text

ݱঢ় 4 ๩͗ͯ͢͠৮Εͯͳ͔ͬͨ 4 ֎ਓ͔Β͋Ε͜Ε΍ΕͬͯݴΘΕΔ 4 ։ൃʹؾ߹ͱ͕࣌ؒඞཁͰਏ͍

Slide 39

Slide 39 text

͞Βʹͭ͘Γͨ͘ͳͬͨ΋ͷ 4 TypeScriptͷlib.d.ts࢖͍͍ͨͳʁ

Slide 40

Slide 40 text

dts-parser 4 TypeScriptͷASTΛಡΈ΍͍͢ײ͡ͰJSONͰग़ྗ

Slide 41

Slide 41 text

dts-parser declare module Foo { export function fun(str?: number[]):void; export var a:number; export class Bar { x: any; } }

Slide 42

Slide 42 text

dts-parser modules: - nodeType: Module moduleName: Foo modules: (empty array) classes: - nodeType: ClassNode className: Bar properties: ... ུ

Slide 43

Slide 43 text

৭ʑ࡞ͬͨײ૝

Slide 44

Slide 44 text

ͭͬͯ͘Θ͔ͬͨ͜ͱ 4 υοάϑʔσΟϯάେࣄ 4 ࣗ෼Ͱ࢖͏ͱ଍Γͳ͍ϙΠϯτ͕Θ͔Δ 4 ΄ͬͱ͍ͯ΋ࣗ෼Ҏ֎࢖ͬͯ͘Εͳ͍

Slide 45

Slide 45 text

ϥΠϒϥϦΛఏڙ͢Δʹ͸ 4 ૬खͷ؀ڥΛ੍ݶ͠ͳ͍(require.js/common.js) 4 ࣮࣭όχϥJS/CoffeeScript/TypeScript ― ศརͳϥΠϒϥϦ͕ͳ͍͜ͱΛ૝ఆ 4 jQuery/underscore͕͋Δͱࢥ͏ͳ 4 ඞཁͳͷ͚ͩҠ২ 4 bower/npmύοέʔδԽ

Slide 46

Slide 46 text

࢖ͬͯ΋Β͏ʹ͸ 4 ʮӳޠͰʯdescriptionॻ͘ 4 Githubઓಆྗ/੓࣏ྗΛ্͛Δ 4 ࠾༻࣮੷࡞Δ(ݫ͍͠) 4 ςετΛॻ͘(ͩΔ͍) 4 ςετΛͨ͘͞Μॻ͘(ΊͬͪΌͩΔ͍)

Slide 47

Slide 47 text

Ұ൪େࣄͳ͜ͱ 4 ੓࣏ 4 ॳಈ͕ͳ͍ͱ୭΋ݟͯ͘Εͳ͍ 4 ͸ͯͿߥΒ͠ͱҰॹͰ࠷ॳʹWatcher͔ͭͳ͍ͱ୭΋Έͯ ͘Εͳ͍ʂʂʂ

Slide 48

Slide 48 text

ͳΜͰ͜Μͳ͜ͱͯ͠Δͷʁ

Slide 49

Slide 49 text

͜͜·Ͱ΍ΔϞνϕʔγϣϯ 4 ٕज़ͷ୳ٻ(झຯ) 4 ωΠςΟϒฒͷΞϓϦ࡞ΕΔ͜ͱΛূ໌(ҙ஍) 4 ࢓ࣄΛָʹ͢Δ(࣮ӹ)