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
Game Widget Library using React
Search
Yosuke Furukawa
PRO
March 01, 2016
Programming
0
1.6k
Game Widget Library using React
React meetup 第三回の発表資料です
Yosuke Furukawa
PRO
March 01, 2016
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
9
3.8k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4.1k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
230
Removing Corepack
yosuke_furukawa
PRO
9
1.6k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.8k
Strip Types と Storage
yosuke_furukawa
PRO
4
410
Module Harmony について
yosuke_furukawa
PRO
3
1.7k
LTのやり方
yosuke_furukawa
PRO
16
2.6k
AppRouter Panel Talk
yosuke_furukawa
PRO
3
810
Other Decks in Programming
See All in Programming
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.2k
Is Xcode slowly dying out in 2025?
uetyo
1
260
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
3
6k
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
600
Goで作る、開発・CI環境
sin392
0
220
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
110
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
50
33k
WindowInsetsだってテストしたい
ryunen344
1
240
CursorはMCPを使った方が良いぞ
taigakono
1
240
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
110
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
420
Featured
See All Featured
Speed Design
sergeychernyshev
32
1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Docker and Python
trallard
44
3.5k
The Invisible Side of Design
smashingmag
301
51k
GitHub's CSS Performance
jonrohan
1031
460k
Testing 201, or: Great Expectations
jmmastey
42
7.6k
How to train your dragon (web standard)
notwaldorf
94
6.1k
Transcript
Game Widget Library using React @yosuke_furukawa
Twitter: @yosuke_furukawa Github: yosuke-furukawa
New Logo
New Node.js Logo is here
Recent works in my company • front-end / server-side engineer
• creating apps using Electron • creating widget library using React
Recent works in my company • front-end / server-side engineer
• creating apps using Electron • creating widget library using React
Demo note: please do not share in SNS….
Our stack • Babel • React • Facebook / flux
• css-modules (post-css) • webpack
Our stack • Babel • React • Facebook / flux
• css-modules (post-css) • webpack
tackling CSS in React
ͳΔ͘1ͭͷJSϑΝΠϧͰ ͔݁ͤͨͬͨ͞ɺJS, CSS͕ ෳʹ͔ΕΔΑ͏ͳঢ়گΛ ආ͚͔ͨͬͨɻ
ήʔϜͷதͰಡΈࠐ·ΕΔͷ Ͱɺcss ͷclassNameڝ߹Λ ͔͗ͨͬͨɻ
We try to choose • CSS in React (using style
attribute) • Radium • css-modules
We try to choose • CSS in React => media
query pseudo attribute ɺ͍͍ͨػೳ͕͑ͳ͔ͬͨɻ • Radium => media query ͳͲରԠ͍ͯ͠Δͷͷɺ Ұ෦ͷpseudo ଐੑͱ͔͕͑ͳ͍ɺยखམͪͩͬͨ • css-modules => CSSͷػೳ͕ී௨ʹ͑ͨɻclass໊ ͷڝ߹શʹ͛ͳ͍͕ɺ͋Δఔ͛Δɻ
css-modules :local(.localClass) { color: green; } :local(.subClass) { color: red;
} :global(.globalClass) { color: blue; } ._23_aKvs-b8bW2Vg3fwHozO { color: green; } ._13LGdX8RMStbBE9w-t0gZ1 { color: red; } .globalClass { color: blue; } http://morishitter.hatenablog.com/entry/2015/09/28/103334
ϑΝο࠷ߴΜ͚ɺ શ෦ΫϦΞͩʂʂ
ൃੜ…
widget library ඞͣήʔϜͷ ϖʔδΑΓઌʹग़ͯͳ͍ͱ͍͚ ͳ͍ͷͰɺ ϨϯμϦϯά্ඞਢͷϨΠΞτ ʹͳΔɻ
scriptΛಡΈࠐΉҐஔ͕ॏཁʹ ͳΔ <script src=“widget.js” /> ͜ΕΛͲ͜ͰಡΈࠐΉ͖͔ <html> <head> <!— ͜͜ͰಡΈࠐΉ?
—> <link rel=“stylesheet” href=“hoge.css”> <!— ͜͜ͰಡΈࠐΉ? —> </head> <body> <!— ͦΕͱɺ͜͜ͰಡΈࠐΉ? —> </body> </html>
ຊདྷ JS ϨΠΞτͱແ ؔͳ͜ͱ͕ଟ͍ͷͰ body ด͡λάͷ্Ͱఆٛ͢Δ͜ͱ ͕ଟ͍͕ɺ͜ͷ߹ css ͱ ಉ༷ͷҐஔʹඞཁʹͳΔ
ϥΠϒϥϦϨΠϠ͚ͩ͡Όղ ܾͰ͖ͳ͍ͷͰɺ͍ํͷυ Ωϡϝϯτʹ໌هɻɻɻ
ࠓେ͖ͳى͖ͯͳ͍ (∩´∀ʆ)∩ƂŖŘ
ͨͩ͠ • ͲΜͳΞϓϦέʔγϣϯ͜ͷΓํ͕ྑ͍ͱࢥΘͳ͍ɻ • JSͱCSSΛҰॹʹͨ͜͠ͱͰى͖Δଟ͍ɻ • cache ͕ޮ͔ͳ͍ͱ͔ • http2
࣌ʹͳͬͨΒͦͦฒྻͰऔͬͯ͜ΕΔͷʹͦͷྑ͞Λ ফͯ͠Δͱ͔ • ࠓճͷΑ͏ͳέʔεׂ͕ͱಛघͳͷͰͳ͍͔ɻ • ΈΜͳී௨ʹCSSΛॻ͖·͠ΐ͏ɻ
Our stack • Babel • React • Facebook / flux
• css-modules (post-css) • webpack
·͊ͬͺΓ ES2015 Θͳ ͍खͳ͍
2015ͳͷʹ·ͩ class Θ ͳ͍ͱ͔ɺtemplate string literals Θͳ͍ͱ͔ϓϥΠυ ͕ڐ͞ͳ͔ͬͨɻ
͋Μ·Γେͨ͠ى͖ͳ͔ͬ ͨ • Babel v6 Ͱੌ·͍͡σάϨ͕Ұճى͖ͯQA ͷਓୡશମͷख͕ࢭ·ͬͨɻɹ • ES2015 શવͷνʔϜʹਁಁͯ͠ͳ͍
͋Μ·Γେͨ͠ى͖ͳ͔ͬ ͨ • Babel v6 Ͱੌ·͍͡σάϨ͕Ұճى͖ͯQA ͷਓୡશମͷख͕ࢭ·ͬͨ(ͷͰɺv5ʹ͠ ͨɻ) • ES2015
શવͷνʔϜʹਁಁͯ͠ͳ͍
͜Ε·Ͱॻ͍ͯͨͷ͘͢͝ basic ͳ JavaScript prototype? ԿͦΕͳਓୡ
ٻΊΒΕΔڭҭ…
None
tower-of-babel νϡʔτϦΞϧΛ࡞ͬͯ ΈΜͳʹΒͤͨ
ͱΓ͋͑ͣॻ͚ΔΑ͏ʹ ͳͬͨ
ͨͩ͠ɻɻɻ
ES5 ͷڭҭ͕ͦͦ͞Εͯ ͳ͍ɻ
Array methodsΒͳ͗͢͞ Function.bindͱʁ
tower-of-es5 ͷػӡ…
ES2015 ͔࣌ͩΒͦ͜ɺ ES5ͪΌΜͱ֮͑ͯѹత
·ͱΊ
React / babel / post-css / flux Ͱ widget ϥΠϒϥϦΛ࡞ͬͯΈͨ
• ͍ΖΜͳήʔϜͰ༡Ϳ࣌ʹReact ͰϥΠϒϥϦ ͕ಈ͕࣌͘དྷΔ͔ • CSS in JS ࠓ css-modules͕ྑ͍ɺͨͩ͠༻ ๏༻ྔʹؾΛ͚ͭͯɻ • ES2015Λָ͠ΉͳΒɺES5͍ͭͰʹ͑Α͏
Thank you for listening