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
複雑なドメインに挑む.pdf
Avatar for Yuki Sakai yukisakai1225
5
1.1k
ProxyによるWindow間RPC機構の構築
Avatar for syumai syumai
3
1.2k
Deep Dive into Kotlin Flow
Avatar for Matsuda Jumpei jmatsu
1
310
How Android Uses Data Structures Behind The Scenes
Avatar for HyunWoo Lee l2hyunwoo
0
410
Processing Gem ベースの、2D レトロゲームエンジンの開発
Avatar for tokujiros tokujiros
2
120
プロポーザル駆動学習 / Proposal-Driven Learning
Avatar for mackey0225 mackey0225
2
1.2k
デザイナーが Androidエンジニアに 挑戦してみた
Avatar for Kanon Fujita 874wokiite
0
280
Putting The Genie in the Bottle - A Crash Course on running LLMs on Android
Avatar for Iury Souza iurysza
0
140
Go言語での実装を通して学ぶLLMファインチューニングの仕組み / fukuokago22-llm-peft
Avatar for monochromegane monochromegane
0
120
開発チーム・開発組織の設計改善スキルの向上
Avatar for 増田 亨 masuda220
PRO
19
11k
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
Avatar for Naoki Kishida kishida
21
5.6k
旅行プランAIエージェント開発の裏側
Avatar for Ippo Matsui / 令和トラベル ippo012
2
890

Featured

See All Featured
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7.1k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
224
9.9k
It's Worth the Effort
Avatar for 3n 3n
187
28k
Writing Fast Ruby
Avatar for Erik Berlin sferik
628
62k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
23
1.4k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
30
9.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
34
3.1k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
580
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
29
5.5k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
How GitHub (no longer) Works
Avatar for Zach Holman holman
315
140k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
330
21k

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