$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
俺の望むライブラリがない!
Search
Koutarou Chikuba
May 29, 2014
Technology
1
2.2k
俺の望むライブラリがない!
JS ojisan #2
Koutarou Chikuba
May 29, 2014
Tweet
Share
More Decks by Koutarou Chikuba
See All by Koutarou Chikuba
CI/CD 改善の勘所
mizchi
0
140
極限環境で最終ビルドを絞るためのフロントエンド設計
mizchi
16
5.7k
Server Side JavaScript のためのバンドル最適化
mizchi
5
7.5k
V8 as a container on CDN Edge worker
mizchi
6
2.4k
Edge Side Frontend という新領域
mizchi
35
14k
バンドル最適化マニアクス at tfconf
mizchi
8
4.5k
「たかがJavaScript」のその先 #TECHPLAY
mizchi
47
20k
Deno Node 両刀
mizchi
7
2.5k
「フロントエンド領域」を再定義する
mizchi
50
37k
Other Decks in Technology
See All in Technology
Bakuraku Engineering Team Deck
layerx
PRO
10
3.3k
Ryzen NPUにおけるAI Engineプログラミング
anjn
0
150
TypeScript×CASLでつくるSaaSの認可 / Authz with CASL
saka2jp
2
240
IPv6-mostly field report from RubyKaigi 2026
sorah
0
250
Flutter Thread Merge - Flutter Tokyo #11
itsmedreamwalker
1
130
Digital omtanke på Internetdagarna 2025
axbom
PRO
0
160
AI開発の定着を推進するために揃えるべき前提
suguruooki
1
470
AI/MLのマルチテナント基盤を支えるコンテナ技術
pfn
PRO
4
650
インフラ屋さんはAIコーディングエージェントとどう生きるか/How infrastructure engineers interact with Kiro
ozawa
2
110
生成AI・AIエージェント時代、データサイエンティストは何をする人なのか?そして、今学生であるあなたは何を学ぶべきか?
kuri8ive
2
950
生成AIシステムとAIエージェントに関する性能や安全性の評価
shibuiwilliam
2
310
プラットフォームエンジニアリングとは何であり、なぜプラットフォームエンジニアリングなのか
doublemarket
1
530
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
697
190k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Done Done
chrislema
186
16k
Code Reviewing Like a Champion
maltzj
527
40k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.8k
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Site-Speed That Sticks
csswizardry
13
980
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
jQuery: Nuts, Bolts and Bling
dougneiner
65
8k
Building Adaptive Systems
keathley
44
2.9k
Code Review Best Practice
trishagee
73
19k
Transcript
ԶͷΉϥΠϒϥϦ͕ͳ ͍ʂʂʂ ---------------------------- @mizchi
ࣗݾհ 4 νϟϦͰ͖ͨ 4 Angular͕ݏ͍ 4 AltjsϚχΞ 4 ͙͙Ε
͋ΔήʔϜΛ࡞͍ͬͯΔͱ ߏ 4 CoffeeScript 4 brunch 4 cordova 4 snap.svg
4 vue.js ͦͷΜ
΄͍͠ͷ͕શવΓͳ͍…
࠷ۙͷϑϩϯτΤϯυ։ൃελοΫ 4 Ϗϧυཧπʔϧ(grunt/gulp/brunch) 4 npm/bower 4 ϞδϡʔϧγεςϜ(require.js/browserify) 4 CSSύΠϓϥΠϯ(sass/compass/less)
ϥΠϒϥϦબఆͲ͏͢Δ?
ϥΠϒϥϦબఆͲ͏͢Δ? 4 ͱʹ͔͘αϯυϘοΫε࡞ͬͯࢼ͢
αϯυϘοΫε࡞Γ·͘Δ mizchi-sandbox
Θ͔Δ͜ͱ
ੈͷதʹ
Զ͕΄͍͠ϥΠϒϥϦ͕
ͥΜͥΜͳ͍ʂʂʂ
Ͳ͏͢Δͷʁ શ෦࡞Δ͔͠ͳ͍ʂ(ࡨཚ)
࡞ͬͨ 4 momic 4 libretto 4 warden 4 TypedCoffeeScript
΄͍͠ͷ 4 ϒϥβετϨʔδͷActiveRecordΈ͍ͨͳͭ
Momic
Momic 4 IndexedDb/localStorageϥούʔ 4 rubyͷActiveModel෩API
Momic user = new User user.name = 'mizchi' user.age =
26 user.save().then => console.log 'save done!' User.find().then (users) => console.log users
ݱঢ় ศརͳͷʹԶ͔ͬͯ͠ͳ͍
΄͍͠ͷ1 4 Vue.jsͷϧʔλʔ
Warden
Warden 4 grapnel.jsΛchaplin.js෩ʹ֦ு 4 vue.jsͱҰॹʹ͏ͷΛఆ(vue-router͕·ͩͳ͍) 4 vue.jsͷ࡞ऀʹհͯ͠Β͑ͨͷͰˑ42
# 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' ͜Μͳײ͡
ݱঢ় 4 ศརry 4 ެࣜʹհ͞ΕΔͱͦΕͳΓʹΘΕΔͬΆ͍ʁʁ
ଞʹ 4 ඇಉظίϯτϩʔϧϑϩʔ
libretto
libretto 4 ඇಉظίϯτϩʔϧ 4 ϢʔβʔͱͷΠϯλϥΫγϣϯ੍ޚ 4 εςʔτϚγϯ੍ޚ
libretto Purchase = Libretto.extend steps: start: 'waitUserSelection' waitUserSelection: ['purchase', 'cancel']
purchase: 'end' waitUserSelection: (context) => context.itemName = 'apple' 'purchase' purchase: (context) -> new Promise (done) => done()
libretto ݱঢ়ɿநߴͯ͘Զ͔ͬͯ͠ͳ͍
΄͍͠ͷ 4 coffeescirptॻ͍ͯΔͱܕ͕΄͘͠ͳͬͯ͘Δ
TypedCoffeeScript 4 ͬͺܕ΄͍͠͡ΌΜʁͱ։ൃ։࢝ 4 coffeescriptͷΏΔ;Θจ๏ + TypeScriptతܕνΣοΫ 4 AST֦ுͯ͠੩తʹTypeCheck(ϥϯλΠϜνΣοΫ͡Ό ͳ͍ʂ)
4 CoffeeScriptReduxͷ֦ு(jashkenasͷͰͳ͍)
TypedCoffeeScriptͰͰ͖Δ͜ͱ1 double :: Int -> Int double = (n) ->
n * 2 num1 :: Int = double 5 num2 :: String = double 5 # => TypeError
TypedCoffeeScriptͰͰ͖Δ͜ͱ2 struct Point x :: Number y :: Number p
:: Point = {x: 3, y: 3}
TypedCoffeeScriptͰͰ͖Δ͜ͱ3 class X text :: String f :: Number ->
Number f: (n) -> @text = n.toString()
TypedCoffeeScriptͰͰ͖Δ͜ͱΓ 4 ςετίʔυಡΊ 4 https://github.com/mizchi/TypedCoffeeScript/blob/ master/test/type_checker.coffee
ࠓޙͷల 4 TypeScript Importer 4 ͦͷͨΊʹASTվળத 4 moduleγεςϜ 4 ܕͷΧόϨοδܭଌ
ͦͷաఔ 4 CoffeeScriptReduxʹsuper͕ͳ͍ʂ 4 ࣮ͯ͠ຊՈʹPRத 4 TypedCoffeeScriptͰಋೖࡁΈ
ݱঢ় 4 ͗ͯ͢͠৮Εͯͳ͔ͬͨ 4 ֎ਓ͔Β͋Ε͜ΕΕͬͯݴΘΕΔ 4 ։ൃʹؾ߹ͱ͕࣌ؒඞཁͰਏ͍
͞Βʹͭ͘Γͨ͘ͳͬͨͷ 4 TypeScriptͷlib.d.ts͍͍ͨͳʁ
dts-parser 4 TypeScriptͷASTΛಡΈ͍͢ײ͡ͰJSONͰग़ྗ
dts-parser declare module Foo { export function fun(str?: number[]):void; export
var a:number; export class Bar { x: any; } }
dts-parser modules: - nodeType: Module moduleName: Foo modules: (empty array)
classes: - nodeType: ClassNode className: Bar properties: ... ུ
৭ʑ࡞ͬͨײ
ͭͬͯ͘Θ͔ͬͨ͜ͱ 4 υοάϑʔσΟϯάେࣄ 4 ࣗͰ͏ͱΓͳ͍ϙΠϯτ͕Θ͔Δ 4 ΄ͬͱ͍ͯࣗҎ֎ͬͯ͘Εͳ͍
ϥΠϒϥϦΛఏڙ͢Δʹ 4 ૬खͷڥΛ੍ݶ͠ͳ͍(require.js/common.js) 4 ࣮࣭όχϥJS/CoffeeScript/TypeScript ― ศརͳϥΠϒϥϦ͕ͳ͍͜ͱΛఆ 4 jQuery/underscore͕͋Δͱࢥ͏ͳ 4
ඞཁͳͷ͚ͩҠ২ 4 bower/npmύοέʔδԽ
ͬͯΒ͏ʹ 4 ʮӳޠͰʯdescriptionॻ͘ 4 Githubઓಆྗ/࣏ྗΛ্͛Δ 4 ࠾༻࣮࡞Δ(ݫ͍͠) 4 ςετΛॻ͘(ͩΔ͍) 4
ςετΛͨ͘͞Μॻ͘(ΊͬͪΌͩΔ͍)
Ұ൪େࣄͳ͜ͱ 4 ࣏ 4 ॳಈ͕ͳ͍ͱ୭ݟͯ͘Εͳ͍ 4 ͯͿߥΒ͠ͱҰॹͰ࠷ॳʹWatcher͔ͭͳ͍ͱ୭Έͯ ͘Εͳ͍ʂʂʂ
ͳΜͰ͜Μͳ͜ͱͯ͠Δͷʁ
͜͜·ͰΔϞνϕʔγϣϯ 4 ٕज़ͷ୳ٻ(झຯ) 4 ωΠςΟϒฒͷΞϓϦ࡞ΕΔ͜ͱΛূ໌(ҙ) 4 ࣄΛָʹ͢Δ(࣮ӹ)
ऴΘΒͳ͍ϠΫङΓΛܦͯ…
Զୡͷઓ͍·ͩ͡·ͬͯͳ͍ʂ 4 ήʔϜ࡞ͬͯҰൃͯΔͧʁ
ݴ͍͔ͨͬͨ͜ͱ 4 TypedCoffeeScriptͷίϛολืूͯ͠·͢