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.9k
React/FluxベースのElectronアプリをリモートチームで開発した話
FRONTEND CONFERENCE 2017 にて、
- リモートチームで社内ハッカソンをやったエピソード
- その時に使ったフロント技術の紹介
を発表した時の資料です。
Kaiichiro Ota
March 18, 2017
Tweet
Share
More Decks by Kaiichiro Ota
See All by Kaiichiro Ota
エンジニアリングマネジメント体制を変えて起きたこと
kaiichiro
0
120
モノリス化したコード・組織の両方を分割して アーキテクチャを改善する / Developers Summit 2023 Summer
kaiichiro
1
1.9k
肥大化・モノリス化するプロダクト開発組織を自律的で小さなチーム群に変えていく ―kintone開発チームの事例―
kaiichiro
0
3.4k
リモートモブプロタイマーを作っている話 / Developing a Remote Mob Programming Timer
kaiichiro
0
380
改善を重ねるリモートスクラム開発 〜kintone開発の現場から〜
kaiichiro
4
3.9k
Other Decks in Programming
See All in Programming
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
260
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
20
3.8k
GraphRAGの仕組みまるわかり
tosuri13
8
510
エンジニア向け採用ピッチ資料
inusan
0
180
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
130
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
280
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
590
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
170
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
840
Create a website using Spatial Web
akkeylab
0
310
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
Team operations that are not burdened by SRE
kazatohiei
1
290
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Side Projects
sachag
455
42k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Into the Great Unknown - MozCon
thekraken
39
1.9k
Visualization
eitanlees
146
16k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Writing Fast Ruby
sferik
628
62k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
800
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!