React/FluxベースのElectronアプリをリモートチームで開発した話

FRONTEND CONFERENCE 2017 にて、
- リモートチームで社内ハッカソンをやったエピソード
- その時に使ったフロント技術の紹介
を発表した時の資料です。

Transcript

1. React/Fluxϕʔεͷ ElectronΞϓϦΛ ϦϞʔτνʔϜͰ։ൃͨ͠࿩ ଠా ֆҰ࿠ Frontend Conference 2017 ࣾ಺ϋοΧιϯͰ
2. ࣗݾ঺հ • ଠా ֆҰ࿠ (͓͓ͨ ͔͍͍ͪΖ͏) • αΠϘ΢ζגࣜձࣾ େࡕ։ൃ෦ • ࣾྺ/WebΤϯδχΞྺɿ2೥ • ීஈ͔ΒϦϞʔτνʔϜ։ൃʢେࡕ1/দࢁ4/౦ژ2) • ۀ຿Ͱ࢖͏ٕज़ɿC/C++, Java, JavaScript/ TypeScript, jQuery, MySQL, etc.
3. ࿩͢಺༰ 1.ϦϞʔτνʔϜͰࣾ಺ϋοΧιϯͨ͠࿩ • Ͳ͏ਐΊ͔ͨ • ΍ͬͯΈֶͯΜͩ͜ͱ 2.࢖ͬͨϑϩϯτٕज़ͷ঺հʴͲ͏໾ཱ͔ͬͨ • React • Flux • Electron
4. 1. ϦϞʔτνʔϜͰ ࣾ಺ϋοΧιϯͨ͠࿩
5. ࣾ಺ϋοΧιϯ • ೥1ճ։࠵ɺ3೔ؒ • ςʔϚ͸ఆΊͣ • νʔϜ or ݸਓ (ر๬੍) • ౦ژ/দࢁ/େࡕ͔ΒࢀՃ • νʔϜ͸جຊϥϯμϜ
6. 3ڌ఺ϦϞʔτνʔϜ ཚ਺ͷ۩߹ ʴ ୭΋ग़ுͰ͖ͳ͍౎߹ ʹΑΓ… 3ڌ఺ϦϞʔτνʔϜͷ஀ੜ
7. ෆ҆ • ۭؒత੍໿ɿҰ౓΋ର໘Ͱ࿩͠߹͑ͳ͍ • ࣌ؒత੍໿ɿ࣌ؒʹ੍ݶ͕͋Δ • ٕज़త੍໿ɿಘҙ෼໺ɾ୲౰੡඼ɾεΩϧͷࠩ ׬੒Ͱ͖Δ͔ͳ ్தͰςϯγϣϯԼ͕ͬͨΒਏ͍
8. ! ! ! ࡞Δ΋ͷɿࣾ಺޲͚௨஌ॲཧπʔϧ • ࣾһ͸ෳ਺ͷࣗࣾαʔϏεΛซ༻ͯ͠࢓ࣄΛ͢Δ • "௨஌"Λݟಀͨ͘͠ͳ͍ ɾ1αʔϏε1λϒ ɾ໘౗/ݟಀ͕ͪ͠ ΞϓϦ ! ! ! API API API !!!
9. Ͳ͏ਐΊ͔ͨʁ • ٕज़બఆ • ৄ͍͠ਓ͕τοϓμ΢ϯͰɹ • Electron, React, Flux
10. Ͳ͏ਐΊ͔ͨʁ • ࣮૷த • GitͰ௚pushʢϨϏϡʔແ͠ʣ • ৗ࣌νϟοτ • TVձٞ΄ͱΜͲͤͣʢඞཁͳ͔ͬͨʣ
11. Ͳ͏ਐΊ͔ͨʁ • ࣮૷த • GitͰ௚pushʢϨϏϡʔແ͠ʣ • ৗ࣌νϟοτ • TVձٞ΄ͱΜͲͤͣʢඞཁͳ͔ͬͨʣ ਐḿɾ෼୲ ࡶஊ ࣭໰ɾൈ͚·͢ɾetc.
12. ݁Ռ… • 3೔ؒͰͪΌΜͱ࡞Εͨʂ • େ৆ʹ͸͋ͱ1ථಧ͔ͣ (26 vs 27) • ࣮ࡍ࢖ͬͨਓ͔Βخ͍͠൓ڹ͕ ௨஌ॲཧ͕ͱͯ΋ָʹͳΓ·ͨ͠ʂ શମͷϏδϡΞϧσβΠϯ͕ྑ͍ͱࢥ͍·͢ʂ ϝϯγϣϯͷ10161௨஌͕ศརͰ͢ʂ
13. ௨஌ϏϡʔΞ αʔϏε Ұཡ ௨஌Ұཡ
14. ϦϞʔτνʔϜͰϋοΧιϯɿ ΋͜͠͏ͩͱݫ͔ͬͨ͠ • ର໘ͷٞ࿦Ͱͳ͍ͱ೉͍͜͠ͱʹ௅ઓͯ͠͠·͏ • ཁٻ/ཁ݅ͷ෼ੳ • ΞʔΩςΫνϟ΍DBઃܭͷਂ͍ٞ࿦ • ద੾ͳٕज़͕બ΂ͳ͍
15. ϦϞʔτνʔϜͰϋοΧιϯɿ ֶͼ • νϟοτͰҊ֎ͳΜͱ͔ͳΔ • ୲౰੡඼ͷ͕ࠩڧΈʹ΋ͳΔ • ద੾ͳٕज़બఆ͸େࣄʢˠޙ൒ͷ࿩΁ʣ ΞϓϦ
16. 2. ࢖ͬͨϑϩϯτٕज़ʹ͍ͭͯ
17. React, Flux, Electron
18. React
19. 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
20. 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 ộ
21. 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 ộ JNH
    TSDʜ EJW
    DMBTTDPOUFOU ộ
22. React: ϝϦοτ • ঢ়ଶ(σʔλ)͕ू໿Ͱ͖Δ • → DOMͷؒͷ੔߹ੑ͕औΓ΍͍͢ • Ͳͷঢ়ଶ͕ߋ৽͞Ε͔ͨɺReact͕؂ࢹͯ͠DOMʹࠩ෼൓ө • → ແବͳDOMͷߋ৽͕ى͖ͣߴ଎ • Өڹൣғ͕೺Ѳ͠΍͍͢
23. Flux
24. Flux: ֓ཁ • ΞʔΩςΫνϟʔύλʔϯͷҰͭ • ReactͱҧͬͯϥΠϒϥϦΛࢦ͢Θ͚Ͱ͸ͳ͍ • ReactҎ֎ʹద༻ͯ͠΋ྑ͍ • σʔλͷྲྀΕΛҰํ޲ʹݶఆ • ঢ়ଶ(σʔλ)มߋͷखଓ͖Λنఆ
25. Flux: ۩ମతʹ • ঢ়ଶͷஔ͖৔ॴͱมߋܦ࿏ΛҰݩԽ • "Store"͕શͯͷঢ়ଶΛ࣋ͭ • "Action"Λੜ੒ͯ͠"Dispatcher"͕ൃߦ શ௨஌ σʔλ ಺෦API ྫɿ௨஌Λফ͢ ௨஌Ϧετ Λදࣔ (React)
26. Flux: ϝϦοτ • ͜ΜͳϞϠϞϠ͕ආ͚ΒΕΔ • ʮ͜ͷσʔλ(ঢ়ଶ)͓͔͍͚͠ͲɺͲ͜Ͱॻ͖׵͑ͯΔͷ…ʁʯ • ·ͣɺStoreʹରԠ͢ΔActionΛ୳ͤ͹Α͍ • ʮ͜ͷσʔλ͸Ͳ͔͜Βॻ͖׵͑Δͷ͕ਖ਼͍͠ઃܭ…ʁʯ
27. React/Flux: ϦϞʔτϋοΧιϯత؍఺ • ઃܭΛ੍ݶͯ͘͠ΕΔ → ໎Θͳ͍ • Conflict࣌ͷରԠ͕͠΍͍͢ • ࣮૷্ͷίϛϡχέʔγϣϯͷઅ໿ • ࣮૷ྔ͸Ͳ͏ͯ͠΋૿͑Δʢྫɿ<td>ཁૉΛ1ݸมߋ ͢ΔͨΊʹActionΛൃߦͯ͠ͷঢ়ଶมߋ͕ඞཁʣ • ֶशίετ େن໛։ൃͷจ຺ͰޠΔͷ͕Ԧಓͱࢥ͏͚Ͳɺ
28. Electron
29. Electron: ֓ཁ • HTML/CSS/JS ͰσεΫτοϓΞϓϦ࡞੒Ͱ͖ ΔϥΠϒϥϦ • Windows/macOS/Linux ରԠ • Chromium/Node.js ϕʔε • AtomɺVisual Studio CodeɺSlack • खܰײ͕ڧ͍
30. Electron: ىಈʙ΢Οϯυ΢දࣔ $ electron . .BJO
    1SPDFTT → ./package.jsonͰࢦఆͨ͠ JavaScript Λ࣮ߦ win = new BrowserWindow({width: 900, height: 700}); win.loadURL(`file://${app.getAppPath()}/../index.html`); 3FOEFSFS
    1SPDFTT ίϚϯυϥΠϯ͔Β࣮ߦ → ΢Οϯυ΢Λ։͍ͯதʹindex.htmlΛදࣔ ɹ - Renderer Process Λෳ਺ੜ੒͢Ε͹ෳ਺΢Οϯυ΢ - Chrome DevTools Ͱσόοά
31. σεΫτοϓ௨஌ const ntf = new Notification(title, { body: content });
32. όοδΞΠίϯ (mac only) if (process.platform === 'darwin') { app.setBadgeCount(count); }
33. ֤؀ڥ޲͚Πϯετʔϥ࡞੒ • $ npm install electron-builder • $ npm run dist • → dist/myApp-1.0.0.dmg ͕Ͱ͖Δ (macͷྫ) "scripts": { "dist": "build" } package.json:
34. Electron: ϝϦοτ • Webٕज़ͰखܰʹϚϧνϓϥοτϑΥʔϜΞϓϦ • ϒϥ΢βޓ׵ੑˠߟྀෆཁ • ʮͱΓ͋͑ͣ഑෍ʯ΋͚ͬ͜͏؆୯ • ஫ɿWindows͸ύεࢦఆͰ͠͹͠͹ϋϚΔ
35. ·ͱΊ
36. ·ͱΊ • ׬શϦϞʔτνʔϜͰ΋ϋοΧιϯ͸Ͱ͖Δ • React/Flux → νʔϜ։ൃʹ໾ཱͭ • Electron → ؆୯ʹଟ͘ͷਓʹ࢖ͬͯ΋Β͑Δ
37. Thank you!