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

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

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

Dcf21b9343dcaa8b7d716b45f02457c1?s=128

Kaiichiro Ota

March 18, 2017
Tweet

Transcript

  1. 2.

    ࣗݾ঺հ • ଠా ֆҰ࿠ (͓͓ͨ ͔͍͍ͪΖ͏) • αΠϘ΢ζגࣜձࣾ େࡕ։ൃ෦ •

    ࣾྺ/WebΤϯδχΞྺɿ2೥ • ීஈ͔ΒϦϞʔτνʔϜ։ൃʢେࡕ1/দࢁ4/౦ژ2) • ۀ຿Ͱ࢖͏ٕज़ɿC/C++, Java, JavaScript/ TypeScript, jQuery, MySQL, etc.
  2. 5.

    ࣾ಺ϋοΧιϯ • ೥1ճ։࠵ɺ3೔ؒ • ςʔϚ͸ఆΊͣ • νʔϜ or ݸਓ (ر๬੍)

    • ౦ژ/দࢁ/େࡕ͔ΒࢀՃ • νʔϜ͸جຊϥϯμϜ
  3. 12.

    ݁Ռ… • 3೔ؒͰͪΌΜͱ࡞Εͨʂ • େ৆ʹ͸͋ͱ1ථಧ͔ͣ (26 vs 27) • ࣮ࡍ࢖ͬͨਓ͔Βخ͍͠൓ڹ͕

    ௨஌ॲཧ͕ͱͯ΋ָʹͳΓ·ͨ͠ʂ શମͷϏδϡΞϧσβΠϯ͕ྑ͍ͱࢥ͍·͢ʂ ϝϯγϣϯͷ10161௨஌͕ศརͰ͢ʂ
  4. 18.
  5. 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
  6. 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 ộ
  7. 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 ộ JNHTSDʜ EJWDMBTTDPOUFOU ộ
  8. 23.
  9. 27.

    React/Flux: ϦϞʔτϋοΧιϯత؍఺ • ઃܭΛ੍ݶͯ͘͠ΕΔ → ໎Θͳ͍ • Conflict࣌ͷରԠ͕͠΍͍͢ • ࣮૷্ͷίϛϡχέʔγϣϯͷઅ໿

    • ࣮૷ྔ͸Ͳ͏ͯ͠΋૿͑Δʢྫɿ<td>ཁૉΛ1ݸมߋ ͢ΔͨΊʹActionΛൃߦͯ͠ͷঢ়ଶมߋ͕ඞཁʣ • ֶशίετ େن໛։ൃͷจ຺ͰޠΔͷ͕Ԧಓͱࢥ͏͚Ͳɺ
  10. 28.
  11. 29.

    Electron: ֓ཁ • HTML/CSS/JS ͰσεΫτοϓΞϓϦ࡞੒Ͱ͖ ΔϥΠϒϥϦ • Windows/macOS/Linux ରԠ •

    Chromium/Node.js ϕʔε • AtomɺVisual Studio CodeɺSlack • खܰײ͕ڧ͍
  12. 30.

    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 Ͱσόοά
  13. 33.

    ֤؀ڥ޲͚Πϯετʔϥ࡞੒ • $ npm install electron-builder • $ npm run

    dist • → dist/myApp-1.0.0.dmg ͕Ͱ͖Δ (macͷྫ) "scripts": { "dist": "build" } package.json:
  14. 35.