Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
console.animate
Search
katashin
September 15, 2017
Programming
2
2.7k
console.animate
ToKyoto.js ― Kyoto.js in Tokyo
https://kyotojs.connpass.com/event/64310/
katashin
September 15, 2017
Tweet
Share
More Decks by katashin
See All by katashin
テストの重要性 / Test is Important
ktsn
0
200
Gulp のビルドをもっと効率化するツールを作ってみた / Making a Tool for Optimizing a Build Process of Gulp
ktsn
2
2.4k
ラムダ計算入門 / Introduction of Lambda Calculus
ktsn
0
380
Contextual ThisType and Vue.js
ktsn
0
13k
TypeScript で型検査器を作る / Implementing a type checker with TypeScript
ktsn
0
22k
大規模静的サイトのためのビルドツール
ktsn
0
2.3k
型付きテンプレートがほしい
ktsn
1
44k
Toward Type Safety of Vuex
ktsn
1
990
Vue の TypeScript 事情
ktsn
1
2.6k
Other Decks in Programming
See All in Programming
AI 時代だからこそ抑えたい「価値のある」PHP ユニットテストを書く技術 #phpconfuk / phpcon-fukuoka-2025
shogogg
1
400
仕様がそのままテストになる!Javaで始める振る舞い駆動開発
ohmori_yusuke
1
560
CloudflareのSandbox SDKを試してみた
syumai
0
120
Temporal Knowledge Graphで作る! 時間変化するナレッジを扱うAI Agentの世界
po3rin
5
1.3k
Vue 3.6 時代のリアクティビティ最前線 〜Vapor/alien-signals の実践とパフォーマンス最適化〜
hiranuma
2
430
HTTPじゃ遅すぎる! SwitchBotを自作ハブで動かして学ぶBLE通信
occhi
0
230
複数チーム並行開発下でのコード移行アプローチ ~手動 Codemod から「生成AI 活用」への進化
andpad
0
100
Phronetic Team with AI - Agile Japan 2025 closing
hiranabe
0
130
イベントストーミングのはじめかた / Getting Started with Event Storming
nrslib
1
140
Vueのバリデーション、結局どれを選べばいい? ― 自作バリデーションの限界と、脱却までの道のり ― / Which Vue Validation Library Should We Really Use? The Limits of Self-Made Validation and How I Finally Moved On
neginasu
3
1.8k
ネストしたdata classの面倒な更新にさようなら!Lensを作って理解するArrowのOpticsの世界
shiita0903
1
290
AI POSにおけるLLM Observability基盤の導入 ― サイバーエージェントDXインターン成果報告
hekuchan
0
460
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
65
8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.6k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
4 Signs Your Business is Dying
shpigford
186
22k
Product Roadmaps are Hard
iamctodd
PRO
55
12k
Build your cross-platform service in a week with App Engine
jlugia
234
18k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
24
1.5k
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.3k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
970
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.7k
Transcript
console.animate
!LUTO LBUBTIJO
ͬͪ͜ͷ͡Όͳ͍Ͱ͢
IUUQTEFWPSPDPN
None
None
render(‘͜Μʹͪ’) ͜Μʹͪ <canvas> [0, 0, 0, 0, 0, 0, 0,
209, 0, …] ImageData
[0, 0, 0, 0, 0, 0, 0, 209, 0, 0,
0, 255, …] ImageData SFE HSFFO CMVF BMQIB
BMQIBͰUSVFɹͦΕҎ֎ͰGBMTF [ [f, f, f, f, f, f, … ],
[f, f, f, f, f, f, … ], [f, f, f, f, t, t, … ], [f, f, f, f, t, t, … ], [f, f, f, f, f, f, … ], … ]
पลͷGBMTFΛמΓऔΔ [ [f, f, f, f, f], [f, t, t,
t, f], [f, t, t, t, f], [f, f, f, f, f] ]
5SVFˠ˙ɹGBMTFˠ˘ [ [˘, ˘, ˘, ˘, ˘], [˘, ˙, ˙,
˙, ˘], [˘, ˙, ˙, ˙, ˘], [˘, ˘, ˘, ˘, ˘] ]
7JFXQPSUΛͣΒͯ͠Ξχϝʔγϣϯ DPOTPMFDMFBSˠDPOTPMFMPHˠʜ [ [˘, ˘, ˘, ˘, ˘], [˘, ˙,
˙, ˙, ˘], [˘, ˙, ˙, ˙, ˘], [˘, ˘, ˘, ˘, ˘] ]
ΧʔιϧͳΜͯͳ͍ͷͰ DPOTPMFDMFBSˠDPOTPMFMPHˠʜ
ʊਓਓਓਓʊ ʼɹɹʻ ʉ:?:?:?:ʉ
'JSFGPY $ISPNF 4BGBSJ
ͳ͔ͥ'JSFGPYͷEFWUPPMͷύϑΥʔϚϯε ͕܈Λൈ͍ͯྑ͍ DPOTPMFMPHͷୈೋҾʹελΠϧΛͤΔ console.log('%cfoo’, 'font-size: 10px;') DBOWBTʹେ͖Ίʹॻ͍͔ͯΒ খ͍͞αΠζͰDPOTPMFMPH͢Δͷ͕ྑ͍ײ͡ ݟ
࣍Τοδݕग़ʜʜʁ render(‘’)