Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Game Widget Library using React

Avatar for Yosuke Furukawa Yosuke Furukawa
PRO
March 01, 2016
Programming
0
1.6k

Game Widget Library using React

React meetup 第三回の発表資料です
Avatar for Yosuke Furukawa

Yosuke Furukawa
PRO

March 01, 2016
Tweet

More Decks by Yosuke Furukawa

See All by Yosuke Furukawa
Node.js, Deno, Bun 最新動向とその所感について
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
9
3.7k
Welcome JSConf.jp 2024
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
1
4.1k
tc39 x jsconf.jp Panel Discussion 2024
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
0
230
Removing Corepack
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
9
1.6k
JavaScript Runtime とはなにか
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
15
2.8k
Strip Types と Storage
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
4
410
Module Harmony について
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
3
1.7k
LTのやり方
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
16
2.6k
AppRouter Panel Talk
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
3
810

Other Decks in Programming

See All in Programming
Elixir で IoT 開発、 Nerves なら簡単にできる！？
Avatar for pojiro pojiro
1
150
GraphRAGの仕組みまるわかり
Avatar for とすり tosuri13
8
480
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
Avatar for Tetsuya Kikuchi tkikuc
20
3.6k
XSLTで作るBrainfuck処理系
Avatar for MakKi makki_d
0
210
Haskell でアルゴリズムを抽象化する / 関数型言語で競技プログラミング
Avatar for Naoya Ito naoya
17
4.9k
5つのアンチパターンから学ぶLT設計
Avatar for Narihara narihara
1
110
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
Avatar for Shohei Okada okashoi
1
190
なぜ「共通化」を考え、失敗を繰り返すのか
Avatar for Rinchoku rinchoku
1
510
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
Avatar for Chiaki Okamoto chiilog
1
210
つよそうにふるまい、つよい成果を出すのなら、つよいのかもしれない
Avatar for irof irof
1
300
Go1.25からのGOMAXPROCS
Avatar for kuro kuro_kurorrr
1
800
Google Agent Development Kit でLINE Botを作ってみた
Avatar for Kento.Yamada ymd65536
2
190

Featured

See All Featured
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
694
190k
Code Review Best Practice
Avatar for Trisha Gee trishagee
68
18k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.3k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
3.9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
35
2.3k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
36
2.8k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
29
1.8k
Building an army of robots
Avatar for Kyle Neath kneath
306
45k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.7k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
42
7.3k
Making Projects Easy
Avatar for Brett Harned brettharned
116
6.3k
The Language of Interfaces
Avatar for Des Traynor destraynor
158
25k

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. ٻΊΒΕΔڭҭ…

  31. None

  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