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
190
Node.js, Deno, Bun 最新動向とその所感について
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
10
4.9k
Welcome JSConf.jp 2024
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
1
4.5k
tc39 x jsconf.jp Panel Discussion 2024
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
0
300
Removing Corepack
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
9
1.8k
JavaScript Runtime とはなにか
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
15
3k
Strip Types と Storage
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
4
470
Module Harmony について
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
4
1.8k
LTのやり方
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
16
2.9k

Other Decks in Programming

See All in Programming
AIによる開発の民主化を支える コンテキスト管理のこれまでとこれから
Avatar for Mulyu mulyu
3
180
組織で育むオブザーバビリティ
Avatar for ryotaro kobayashi ryota_hnk
0
170
CSC307 Lecture 06
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
680
AI時代のキャリアプラン「技術の引力」からの脱出と「問い」へのいざない / tech-gravity
Avatar for MinoDriven minodriven
20
7.1k
CSC307 Lecture 03
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
490
Apache Iceberg V3 and migration to V3
Avatar for Tomohiro Tanaka tomtanaka
0
160
Package Management Learnings from Homebrew
Avatar for Mike McQuaid mikemcquaid
0
210
ThorVG Viewer In VS Code
Avatar for Nor-s nors
0
770
MUSUBIXとは
Avatar for Hisaho nahisaho
0
130
SourceGeneratorのススメ
Avatar for tkym htkym
0
190
AIと一緒にレガシーに向き合ってみた
Avatar for nyafunta9858 nyafunta9858
0
190
FOSDEM 2026: STUNMESH-go: Building P2P WireGuard Mesh Without Self-Hosted Infrastructure
Avatar for Date Huang tjjh89017
0
160

Featured

See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
2.7k
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
1
1.6k
Claude Code のすすめ
Avatar for schroneko schroneko
67
210k
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
150
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.8k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
60
42k
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
170
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
3
220
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
Avatar for Tech SEO Connect techseoconnect
PRO
0
56
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon szymonslowik
1
210
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k

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