Game Widget Library using React

React meetup 第三回の発表資料です

Transcript

1. Game Widget Library using React @yosuke_furukawa
2. Twitter: @yosuke_furukawa Github: yosuke-furukawa
3. New Logo
4. New Node.js Logo is here
5. Recent works in my company • front-end / server-side engineer • creating apps using Electron • creating widget library using React
6. Recent works in my company • front-end / server-side engineer • creating apps using Electron • creating widget library using React
7. Demo note: please do not share in SNS….
8. Our stack • Babel • React • Facebook / flux • css-modules (post-css) • webpack
9. Our stack • Babel • React • Facebook / flux • css-modules (post-css) • webpack
10. tackling CSS in React
11. ͳΔ΂͘1ͭͷJSϑΝΠϧͰ ׬͔݁ͤͨͬͨ͞ɺJS, CSS͕ ෳ਺ʹ෼͔ΕΔΑ͏ͳঢ়گΛ ආ͚͔ͨͬͨɻ
12. ήʔϜͷதͰಡΈࠐ·ΕΔͷ Ͱɺcss ͷclassNameڝ߹Λ ๷͔͗ͨͬͨɻ
13. We try to choose • CSS in React (using style attribute) • Radium • css-modules
14. We try to choose • CSS in React => media query ΍ pseudo attribute ౳ɺ࢖͍͍ͨػೳ͕࢖͑ͳ͔ͬͨɻ • Radium => media query ͳͲ͸ରԠ͍ͯ͠Δ΋ͷͷɺ Ұ෦ͷpseudo ଐੑͱ͔͕࢖͑ͳ͍ɺยखམͪͩͬͨ • css-modules => CSSͷػೳ͕ී௨ʹ࢖͑ͨɻclass໊ ͷڝ߹͸׬શʹ͸๷͛ͳ͍͕ɺ͋Δఔ౓͸๷͛Δɻ
15. 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
16. ϑΝο࠷ߴ΍Μ͚ɺ શ෦ΫϦΞͩʂʂ
17. ໰୊ൃੜ…
18. widget library ͸ඞͣήʔϜͷ ϖʔδΑΓ΋ઌʹग़ͯͳ͍ͱ͍͚ ͳ͍ͷͰɺ
 ϨϯμϦϯά্ඞਢͷϨΠΞ΢τ ʹͳΔɻ
19. scriptΛಡΈࠐΉҐஔ͕ॏཁʹ ͳΔ <script src=“widget.js” /> ͜ΕΛͲ͜ͰಡΈࠐΉ΂͖͔໰୊ <html> <head> <!— ͜͜ͰಡΈࠐΉ? —> <link rel=“stylesheet” href=“hoge.css”> <!— ͜͜ͰಡΈࠐΉ? —> </head> <body> <!— ͦΕͱ΋ɺ͜͜ͰಡΈࠐΉ? —> </body> </html>
20. ຊདྷ JS ͸ϨΠΞ΢τͱ͸ແ ؔ܎ͳ͜ͱ͕ଟ͍ͷͰ body ด͡λάͷ্Ͱఆٛ͢Δ͜ͱ ͕ଟ͍͕ɺ͜ͷ৔߹͸ css ͱ ಉ༷ͷҐஔʹඞཁʹͳΔ
21. ϥΠϒϥϦϨΠϠ͚ͩ͡Όղ ܾͰ͖ͳ͍ͷͰɺ࢖͍ํͷυ Ωϡϝϯτʹ໌هɻɻɻ
22. ࠓ͸େ͖ͳ໰୊͸ى͖ͯͳ͍ (∩´∀ʆ)∩ƂŖŘ
23. ͨͩ͠ • ͲΜͳΞϓϦέʔγϣϯ΋͜ͷ΍Γํ͕ྑ͍ͱ͸ࢥΘͳ͍ɻ • JSͱCSSΛҰॹʹͨ͜͠ͱͰى͖Δ໰୊΋ଟ͍ɻ • cache ͕ޮ͔ͳ͍ͱ͔ • http2 ࣌୅ʹͳͬͨΒͦ΋ͦ΋ฒྻͰऔͬͯ͜ΕΔͷʹͦͷྑ͞Λ ফͯ͠Δͱ͔ • ࠓճͷΑ͏ͳέʔεׂ͕ͱಛघͳͷͰ͸ͳ͍͔ɻ • ΈΜͳ͸ී௨ʹCSSΛॻ͖·͠ΐ͏ɻ
24. Our stack • Babel • React • Facebook / flux • css-modules (post-css) • webpack
25. ·͊΍ͬͺΓ ES2015 ࢖Θͳ ͍ख͸ͳ͍
26. 2015೥ͳͷʹ·ͩ class ࢖Θ ͳ͍ͱ͔ɺtemplate string literals ࢖Θͳ͍ͱ͔ϓϥΠυ ͕ڐ͞ͳ͔ͬͨɻ
27. ͋Μ·Γେͨ͠໰୊͸ى͖ͳ͔ͬ ͨ • Babel v6 Ͱੌ·͍͡σάϨ͕Ұճى͖ͯQA ͷਓୡશମͷख͕ࢭ·ͬͨɻɹ • ES2015 શવ๻ͷνʔϜʹਁಁͯ͠ͳ͍໰୊
28. ͋Μ·Γେͨ͠໰୊͸ى͖ͳ͔ͬ ͨ • Babel v6 Ͱੌ·͍͡σάϨ͕Ұճى͖ͯQA ͷਓୡશମͷख͕ࢭ·ͬͨ(ͷͰɺv5ʹ໭͠ ͨɻ) • ES2015 શવ๻ͷνʔϜʹਁಁͯ͠ͳ͍໰୊
29. ͜Ε·Ͱॻ͍ͯͨͷ͸͘͢͝ basic ͳ JavaScript prototype? ԿͦΕͳਓୡ
30. ٻΊΒΕΔڭҭ…
32. tower-of-babel νϡʔτϦΞϧΛ࡞ͬͯ ΈΜͳʹ΍Βͤͨ
33. ͱΓ͋͑ͣॻ͚ΔΑ͏ʹ ͳͬͨ
34. ͨͩ͠ɻɻɻ
35. ES5 ͷڭҭ͕ͦ΋ͦ΋͞Εͯ ͳ͍ɻ
36. Array methods஌Βͳ͗͢͞ ໰୊ Function.bindͱ͸ʁ໰୊
37. tower-of-es5 ͷػӡ…
38. ES2015 ࣌୅͔ͩΒͦ͜ɺ ES5΋ͪΌΜͱ֮͑ͯѹ౗త ੒௕
39. ·ͱΊ
40. React / babel / post-css / flux Ͱ widget ϥΠϒϥϦΛ࡞ͬͯΈͨ • ͍ΖΜͳήʔϜͰ༡Ϳ࣌ʹReact ͰϥΠϒϥϦ ͕ಈ͕࣌͘དྷΔ͔΋ • CSS in JS ͸ࠓ͸ css-modules͕ྑ͍ɺͨͩ͠༻ ๏༻ྔʹؾΛ͚ͭͯɻ • ES2015Λָ͠ΉͳΒɺES5΋͍ͭͰʹ཈͑Α͏
41. Thank you for listening