Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React/FluxベースのElectronアプリをリモートチームで開発した話
Search
Kaiichiro Ota
March 18, 2017
Programming
2
1.7k
React/FluxベースのElectronアプリをリモートチームで開発した話
FRONTEND CONFERENCE 2017 にて、
- リモートチームで社内ハッカソンをやったエピソード
- その時に使ったフロント技術の紹介
を発表した時の資料です。
Kaiichiro Ota
March 18, 2017
Tweet
Share
More Decks by Kaiichiro Ota
See All by Kaiichiro Ota
モノリス化したコード・組織の両方を分割して アーキテクチャを改善する / Developers Summit 2023 Summer
kaiichiro
1
970
肥大化・モノリス化するプロダクト開発組織を自律的で小さなチーム群に変えていく ―kintone開発チームの事例―
kaiichiro
0
2.5k
リモートモブプロタイマーを作っている話 / Developing a Remote Mob Programming Timer
kaiichiro
0
240
改善を重ねるリモートスクラム開発 〜kintone開発の現場から〜
kaiichiro
4
3.5k
Other Decks in Programming
See All in Programming
Fast JSX: Don't clone props object #28768
yossydev
1
110
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
650
『Railsオワコン』と言われる時代に、なぜブルーモ証券はRailsを選ぶのか
free_world21
0
240
Git Lint
bkuhlmann
4
750
ADRを一年運用してみた/adr_after_a_year
hanhan1978
7
2.4k
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
unvalley
5
920
Apache Hive 4 on Treasure Data
ryukobayashi
0
330
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
110
Let's learn code review
riofujimon
2
360
try! Swift Tokyo 初参加報告LT
hinakko2
0
220
Hanami and htmx
bkuhlmann
0
210
Random\Randomizer クラスで日常のあれこれを解決しよう! / Random\Randomizer class solves familiar trouble
cocoeyes02
0
250
Featured
See All Featured
Bash Introduction
62gerente
604
210k
Writing Fast Ruby
sferik
621
60k
Unsuck your backbone
ammeep
663
57k
Making Projects Easy
brettharned
108
5.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
2
3.4k
Making the Leap to Tech Lead
cromwellryan
124
8.5k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Designing with Data
zakiwarfel
96
4.8k
Agile that works and the tools we love
rasmusluckow
325
20k
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.5k
Atom: Resistance is Futile
akmur
259
25k
What's in a price? How to price your products and services
michaelherold
237
11k
Transcript
React/Fluxϕʔεͷ ElectronΞϓϦΛ ϦϞʔτνʔϜͰ։ൃͨ͠ ଠా ֆҰ Frontend Conference 2017 ࣾϋοΧιϯͰ
ࣗݾհ • ଠా ֆҰ (͓͓ͨ ͔͍͍ͪΖ͏) • αΠϘζגࣜձࣾ େࡕ։ൃ෦ •
ࣾྺ/WebΤϯδχΞྺɿ2 • ීஈ͔ΒϦϞʔτνʔϜ։ൃʢେࡕ1/দࢁ4/౦ژ2) • ۀͰ͏ٕज़ɿC/C++, Java, JavaScript/ TypeScript, jQuery, MySQL, etc.
͢༰ 1.ϦϞʔτνʔϜͰࣾϋοΧιϯͨ͠ • Ͳ͏ਐΊ͔ͨ • ͬͯΈֶͯΜͩ͜ͱ 2.ͬͨϑϩϯτٕज़ͷհʴͲ͏ཱ͔ͬͨ • React •
Flux • Electron
1. ϦϞʔτνʔϜͰ ࣾϋοΧιϯͨ͠
ࣾϋοΧιϯ • 1ճ։࠵ɺ3ؒ • ςʔϚఆΊͣ • νʔϜ or ݸਓ (ر੍)
• ౦ژ/দࢁ/େࡕ͔ΒࢀՃ • νʔϜجຊϥϯμϜ
3ڌϦϞʔτνʔϜ ཚͷ۩߹ ʴ ୭ग़ுͰ͖ͳ͍߹ ʹΑΓ… 3ڌϦϞʔτνʔϜͷੜ
ෆ҆ • ۭؒత੍ɿҰର໘Ͱ͠߹͑ͳ͍ • ࣌ؒత੍ɿ࣌ؒʹ੍ݶ͕͋Δ • ٕज़త੍ɿಘҙɾ୲ɾεΩϧͷࠩ Ͱ͖Δ͔ͳ ్தͰςϯγϣϯԼ͕ͬͨΒਏ͍
! ! ! ࡞Δͷɿ͚ࣾ௨ॲཧπʔϧ • ࣾһෳͷࣗࣾαʔϏεΛซ༻ͯ͠ࣄΛ͢Δ • "௨"Λݟಀͨ͘͠ͳ͍ ɾ1αʔϏε1λϒ ɾ໘/ݟಀ͕ͪ͠
ΞϓϦ ! ! ! API API API !!!
Ͳ͏ਐΊ͔ͨʁ • ٕज़બఆ • ৄ͍͠ਓ͕τοϓμϯͰɹ • Electron, React, Flux
Ͳ͏ਐΊ͔ͨʁ • ࣮த • GitͰpushʢϨϏϡʔແ͠ʣ • ৗ࣌νϟοτ • TVձٞ΄ͱΜͲͤͣʢඞཁͳ͔ͬͨʣ
Ͳ͏ਐΊ͔ͨʁ • ࣮த • GitͰpushʢϨϏϡʔແ͠ʣ • ৗ࣌νϟοτ • TVձٞ΄ͱΜͲͤͣʢඞཁͳ͔ͬͨʣ ਐḿɾ୲
ࡶஊ ࣭ɾൈ͚·͢ɾetc.
݁Ռ… • 3ؒͰͪΌΜͱ࡞Εͨʂ • େʹ͋ͱ1ථಧ͔ͣ (26 vs 27) • ࣮ࡍͬͨਓ͔Βخ͍͠ڹ͕
௨ॲཧ͕ͱָͯʹͳΓ·ͨ͠ʂ શମͷϏδϡΞϧσβΠϯ͕ྑ͍ͱࢥ͍·͢ʂ ϝϯγϣϯͷ10161௨͕ศརͰ͢ʂ
௨ϏϡʔΞ αʔϏε Ұཡ ௨Ұཡ
ϦϞʔτνʔϜͰϋοΧιϯɿ ͜͠͏ͩͱݫ͔ͬͨ͠ • ର໘ͷٞͰͳ͍ͱ͍͜͠ͱʹઓͯ͠͠·͏ • ཁٻ/ཁ݅ͷੳ • ΞʔΩςΫνϟDBઃܭͷਂ͍ٞ • దͳٕज़͕બͳ͍
ϦϞʔτνʔϜͰϋοΧιϯɿ ֶͼ • νϟοτͰҊ֎ͳΜͱ͔ͳΔ • ୲ͷ͕ࠩڧΈʹͳΔ • దͳٕज़બఆେࣄʢˠޙͷʣ ΞϓϦ
2. ͬͨϑϩϯτٕज़ʹ͍ͭͯ
React, Flux, Electron
React
React: ֓ཁ • JavaScriptϥΠϒϥϦ $ npm install react react-dom •
MVCͰ͍͏V(Ϗϡʔ)෦Λ୲ • jQueryͱԿ͕ҧ͏ʁ • ඞͣίϯϙʔωϯτ(Ϋϥε)Λ࣮͢Δ • DOMͰͳ͘ίϯϙʔωϯτ͕ঢ়ଶΛอ࣋ • ঢ়ଶΛͲΜͳDOMͱͯ͠ඳը͢Δ͔Λએݴతʹهड़ • DOMɺঢ়ଶมߋʹͬͯมΘΔ("react"͢Δ) [ { text: "hoge" }, { text: "fuga" } ] <ul> <li>hoge</li> <li>fuga</li> </ul> σʔλ(ঢ়ଶ) DOM
React: ۩ମྫ class NotificationList extends React.Component { // … render()
{ // ঢ়ଶมߋ͞ΕͨΒࣗಈతʹݺΕΔ const cards = this.state.ntfs.map(ntf => { return <Notification id=ntf.id ntf=ntf.data /> }); return ( <div>{cards}</div> ); } // … } /PUJpDBUJPO-JTU ௨σʔλΛঢ়ଶʹ࣋ͭ NotificationList /PUJpDBUJPO /PUJpDBUJPO ộ
React: ۩ମྫ class Notification extends React.Component { // … render()
{ return ( <div> <img src={this.props.ntf.iconUrl} /> <div className="content">{this.props.ntf.content}</div> // … </div> ); } // … } Notification /PUJpDBUJPO 1ͭͷ௨σʔλΛ ड͚औͬͯඳը /PUJpDBUJPO-JTU ௨σʔλΛঢ়ଶʹ࣋ͭ /PUJpDBUJPO ộ JNHTSDʜ EJWDMBTTDPOUFOU ộ
React: ϝϦοτ • ঢ়ଶ(σʔλ)͕ूͰ͖Δ • → DOMͷؒͷ߹ੑ͕औΓ͍͢ • Ͳͷঢ়ଶ͕ߋ৽͞Ε͔ͨɺReact͕ࢹͯ͠DOMʹࠩө •
→ ແବͳDOMͷߋ৽͕ى͖ͣߴ • Өڹൣғ͕Ѳ͍͢͠
Flux
Flux: ֓ཁ • ΞʔΩςΫνϟʔύλʔϯͷҰͭ • ReactͱҧͬͯϥΠϒϥϦΛࢦ͢Θ͚Ͱͳ͍ • ReactҎ֎ʹద༻ͯ͠ྑ͍ • σʔλͷྲྀΕΛҰํʹݶఆ
• ঢ়ଶ(σʔλ)มߋͷखଓ͖Λنఆ
Flux: ۩ମతʹ • ঢ়ଶͷஔ͖ॴͱมߋܦ࿏ΛҰݩԽ • "Store"͕શͯͷঢ়ଶΛ࣋ͭ • "Action"Λੜͯ͠"Dispatcher"͕ൃߦ શ௨ σʔλ
෦API ྫɿ௨Λফ͢ ௨Ϧετ Λදࣔ (React)
Flux: ϝϦοτ • ͜ΜͳϞϠϞϠ͕ආ͚ΒΕΔ • ʮ͜ͷσʔλ(ঢ়ଶ)͓͔͍͚͠ͲɺͲ͜Ͱॻ͖͑ͯΔͷ…ʁʯ • ·ͣɺStoreʹରԠ͢ΔActionΛ୳ͤΑ͍ • ʮ͜ͷσʔλͲ͔͜Βॻ͖͑Δͷ͕ਖ਼͍͠ઃܭ…ʁʯ
React/Flux: ϦϞʔτϋοΧιϯత؍ • ઃܭΛ੍ݶͯ͘͠ΕΔ → ໎Θͳ͍ • Conflict࣌ͷରԠ͕͍͢͠ • ্࣮ͷίϛϡχέʔγϣϯͷઅ
• ࣮ྔͲ͏ͯ͠૿͑Δʢྫɿ<td>ཁૉΛ1ݸมߋ ͢ΔͨΊʹActionΛൃߦͯ͠ͷঢ়ଶมߋ͕ඞཁʣ • ֶशίετ େن։ൃͷจ຺ͰޠΔͷ͕Ԧಓͱࢥ͏͚Ͳɺ
Electron
Electron: ֓ཁ • HTML/CSS/JS ͰσεΫτοϓΞϓϦ࡞Ͱ͖ ΔϥΠϒϥϦ • Windows/macOS/Linux ରԠ •
Chromium/Node.js ϕʔε • AtomɺVisual Studio CodeɺSlack • खܰײ͕ڧ͍
Electron: ىಈʙΟϯυදࣔ $ electron . .BJO1SPDFTT → ./package.jsonͰࢦఆͨ͠ JavaScript Λ࣮ߦ
win = new BrowserWindow({width: 900, height: 700}); win.loadURL(`file://${app.getAppPath()}/../index.html`); 3FOEFSFS1SPDFTT ίϚϯυϥΠϯ͔Β࣮ߦ → ΟϯυΛ։͍ͯதʹindex.htmlΛදࣔ ɹ - Renderer Process Λෳੜ͢ΕෳΟϯυ - Chrome DevTools Ͱσόοά
σεΫτοϓ௨ const ntf = new Notification(title, { body: content });
όοδΞΠίϯ (mac only) if (process.platform === 'darwin') { app.setBadgeCount(count); }
֤ڥ͚Πϯετʔϥ࡞ • $ npm install electron-builder • $ npm run
dist • → dist/myApp-1.0.0.dmg ͕Ͱ͖Δ (macͷྫ) "scripts": { "dist": "build" } package.json:
Electron: ϝϦοτ • Webٕज़ͰखܰʹϚϧνϓϥοτϑΥʔϜΞϓϦ • ϒϥβޓੑˠߟྀෆཁ • ʮͱΓ͋͑ͣʯ͚ͬ͜͏؆୯ • ɿWindowsύεࢦఆͰ͠͠ϋϚΔ
·ͱΊ
·ͱΊ • શϦϞʔτνʔϜͰϋοΧιϯͰ͖Δ • React/Flux → νʔϜ։ൃʹཱͭ • Electron →
؆୯ʹଟ͘ͷਓʹͬͯΒ͑Δ
Thank you!