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
10
3.8k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4.1k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
240
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
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
220
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
880
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
1.1k
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
200
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
200
What's new in AppKit on macOS 26
1024jp
0
150
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
620
ふつうの技術スタックでアート作品を作ってみる
akira888
1
1.3k
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
240
マッチングアプリにおけるフリックUIで苦労したこと
yuheiito
0
190
Model Pollution
hschwentner
1
160
Featured
See All Featured
Building Applications with DynamoDB
mza
95
6.5k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
How GitHub (no longer) Works
holman
314
140k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
GraphQLとの向き合い方2022年版
quramy
49
14k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Code Reviewing Like a Champion
maltzj
524
40k
The World Runs on Bad Software
bkeepers
PRO
70
11k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
For a Future-Friendly Web
brad_frost
179
9.8k
Automating Front-end Workflow
addyosmani
1370
200k
Navigating Team Friction
lara
187
15k
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