Game Widget Library using React

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

Demo note: please do not share in SNS….

Our stack • Babel • React • Facebook / ﬂux
• 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 / ﬂux
• css-modules (post-css) • webpack

·͊΍ͬͺΓ ES2015 ࢖Θͳ ͍ख͸ͳ͍

2015೥ͳͷʹ·ͩ class ࢖Θ ͳ͍ͱ͔ɺtemplate string literals ࢖Θͳ͍ͱ͔ϓϥΠυ ͕ڐ͞ͳ͔ͬͨɻ

͋Μ·Γେͨ͠໰୊͸ى͖ͳ͔ͬ ͨ • Babel v6 Ͱੌ·͍͡σάϨ͕Ұճى͖ͯQA ͷਓୡશମͷख͕ࢭ·ͬͨɻɹ • ES2015 શવ๻ͷνʔϜʹਁಁͯ͠ͳ͍໰୊

͋Μ·Γେͨ͠໰୊͸ى͖ͳ͔ͬ ͨ • Babel v6 Ͱੌ·͍͡σάϨ͕Ұճى͖ͯQA ͷਓୡશମͷख͕ࢭ·ͬͨ(ͷͰɺv5ʹ໭͠ ͨɻ) • ES2015
શવ๻ͷνʔϜʹਁಁͯ͠ͳ͍໰୊

͜Ε·Ͱॻ͍ͯͨͷ͸͘͢͝ basic ͳ JavaScript prototype? ԿͦΕͳਓୡ

ٻΊΒΕΔڭҭ…

tower-of-babel νϡʔτϦΞϧΛ࡞ͬͯ ΈΜͳʹ΍Βͤͨ

ͱΓ͋͑ͣॻ͚ΔΑ͏ʹ ͳͬͨ

ͨͩ͠ɻɻɻ

ES5 ͷڭҭ͕ͦ΋ͦ΋͞Εͯ ͳ͍ɻ

Array methods஌Βͳ͗͢͞ ໰୊ Function.bindͱ͸ʁ໰୊

tower-of-es5 ͷػӡ…

ES2015 ࣌୅͔ͩΒͦ͜ɺ ES5΋ͪΌΜͱ֮͑ͯѹ౗త ੒௕

·ͱΊ

React / babel / post-css / ﬂux Ͱ widget ϥΠϒϥϦΛ࡞ͬͯΈͨ
• ͍ΖΜͳήʔϜͰ༡Ϳ࣌ʹReact ͰϥΠϒϥϦ ͕ಈ͕࣌͘དྷΔ͔΋ • CSS in JS ͸ࠓ͸ css-modules͕ྑ͍ɺͨͩ͠༻ ๏༻ྔʹؾΛ͚ͭͯɻ • ES2015Λָ͠ΉͳΒɺES5΋͍ͭͰʹ཈͑Α͏

Thank you for listening

Game Widget Library using React

Game Widget Library using React

More Decks by Yosuke Furukawa

Other Decks in Programming

Featured

Transcript