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
140
モノリス化したコード・組織の両方を分割して アーキテクチャを改善する / Developers Summit 2023 Summer
kaiichiro
1
2k
肥大化・モノリス化するプロダクト開発組織を自律的で小さなチーム群に変えていく ―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
Gemini CLI のはじめ方
ttnyt8701
1
110
Strands Agents で実現する名刺解析アーキテクチャ
omiya0555
1
110
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
3
310
Vibe coding コードレビュー
kinopeee
0
360
型で語るカタ
irof
1
880
LLMは麻雀を知らなすぎるから俺が教育してやる
po3rin
2
1.4k
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
24
10k
ZeroETLで始めるDynamoDBとS3の連携
afooooil
0
130
Quality Gates in the Age of Agentic Coding
helmedeiros
PRO
1
110
新しいモバイルアプリ勉強会(仮)について
uetyo
1
230
Prompt Engineeringの再定義「Context Engineering」とは
htsuruo
0
110
AI Ramen Fight
yusukebe
0
120
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
4 Signs Your Business is Dying
shpigford
184
22k
Docker and Python
trallard
45
3.5k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
182
54k
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!