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
Go製CLIツールをnpmで配布するには
syumai
2
1.1k
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
15
9.3k
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
3
910
#QiitaBash TDDで(自分の)開発がどう変わったか
ryosukedtomita
1
350
中級グラフィックス入門~効率的なメッシュレット描画~
projectasura
4
2.4k
DynamoDBは怖くない!〜テーブル設計の勘所とテスト戦略〜
hyamazaki
0
180
TypeScriptでDXを上げろ! Hono編
yusukebe
4
920
リッチエディターを安全に開発・運用するために
unachang113
1
350
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
750
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
rdlabo
0
420
MCPで実現できる、Webサービス利用体験について
syumai
7
2.3k
なぜ今、Terraformの本を書いたのか? - 著者陣に聞く!『Terraformではじめる実践IaC』登壇資料
fufuhu
3
380
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Into the Great Unknown - MozCon
thekraken
40
2k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
How STYLIGHT went responsive
nonsquared
100
5.7k
A Tale of Four Properties
chriscoyier
160
23k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.4k
Code Reviewing Like a Champion
maltzj
524
40k
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!