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
デザインシステムが必須の時代に
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
2
130
Node.js, Deno, Bun 最新動向とその所感について
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
10
4.2k
Welcome JSConf.jp 2024
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
1
4.2k
tc39 x jsconf.jp Panel Discussion 2024
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
0
260
Removing Corepack
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
9
1.7k
JavaScript Runtime とはなにか
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
15
2.8k
Strip Types と Storage
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
4
420
Module Harmony について
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
3
1.7k
LTのやり方
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
16
2.7k

Other Decks in Programming

See All in Programming
Kiroで始めるAI-DLC
Avatar for kaonash kaonash
2
620
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
Avatar for Daichi Takeya taked137
0
190
Deep Dive into Kotlin Flow
Avatar for Matsuda Jumpei jmatsu
1
360
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
Avatar for Taito Tanaka taitotnk
0
870
Namespace and Its Future
Avatar for Satoshi Tagomori tagomoris
6
710
Putting The Genie in the Bottle - A Crash Course on running LLMs on Android
Avatar for Iury Souza iurysza
0
140
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
Avatar for Takahashi Ikki takahashiikki
1
110
MCPでVibe Working。そして、結局はContext Eng（略）/ Working with Vibe on MCP And Context Eng
Avatar for r-kagaya rkaga
5
2.3k
AIでLINEスタンプを作ってみた
Avatar for kmuto eycjur
1
230
奥深くて厄介な「改行」と仲良くなる20分
Avatar for おぐえもん oguemon
1
560
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
Avatar for Andrey Chernov inetand
0
2.4k
Testing Trophyは叫ばない
Avatar for toms toms74209200
0
890

Featured

See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
252
21k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
33
8.8k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
229
22k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
8
530
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.8k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
120k
The Language of Interfaces
Avatar for Des Traynor destraynor
161
25k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7.1k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
32
1.1k
KATA
Avatar for Megan Lloyd mclloyd
32
14k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
184
22k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
36
2.5k

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