iOS エンジニアが考える Webアプリ開発

Slide 1

Slide 1 text

iOS ΤϯδχΞ͕ߟ͑Δ WebΞϓϦ։ൃ muukii

Slide 2

Slide 2 text

About Me ‣ muukii ‣ iOS Engineer at eureka, Inc. ‣ Pairs Global Team ‣ GitHub : @muukii ‣ https://muukii.me ☕ ⌚

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

1BJSTʹ͍ͭͯ !4

Slide 5

Slide 5 text

4PVUI,PSFB Japan Taiwan No.1 2017 release No.1 !5 1BJSTʹ͍ͭͯ ల։ࠃ ̐ͭͷϓϥοτϑΥʔϜ CONFIDENTIAL INFORMATION: Not for Public Distribution - Do Not Copy

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

Agenda › ࠷ۙͪΐͬͱͨ͠WebΞϓϦΛ࡞ΔҊ͕݅΍͖ͬͯ·ͨ͠ › ͔ͤͬ͘ͳͷͰେن໛ͳΞϓϦΛ࡞ΔέʔεΛ૝ఆͯ͠΍ͬͯΈ͍ͨ › ΄ͱΜͲ஌͕ࣝͳ͍ঢ়ଶͳͷͰɺ৭ʑௐ΂ͨ͜ͱ › iOSΞϓϦͷUIΛ࡞Γଓ͚͖ͯͨܦݧΛݩʹɺ࠷ۙΠϯϓοτͯ͠ ͍ΔWebΞϓϦ։ൃͷ஌ࣝͰɺେن໛ͳΞϓϦΛ࡞ΔͳΒʮ͜Μͳ ײ͡ʹ࡞͍͖͍ͬͯͨͳʔʯͱࢥ͏·ͱΊɻ

Slide 8

Slide 8 text

ݱঢ়ͷ๻ › Gatsby + Netlify Ͱ੩తαΠτΛ࡞͍ͬͯΔ › React › styled-components ͳͲ › TypeScript › VSCode

Slide 9

Slide 9 text

WebΞϓϦ։ൃΛ࢝ΊΔલͷঢ়ଶ › ࠓ·ͰͣͬͱSwiftΛॻ͍͖ͯͨ › Webͷۀ຿ܦݧͳ͠

Slide 10

Slide 10 text

WebΞϓϦ։ൃΛ࢝ΊΔલͷঢ়ଶ › ஌ࣝͱͯ͠͸ͦΕͳΓʹΩϟονΞοϓ͍ͯͨ͠ › Ϗϧυπʔϧͷಈ޲ͱ͔ › ΞʔΩςΫνϟͱ͔ › ωΠςΟϒΞϓϦ։ൃ͸WebΞϓϦͷςΫϊϩδʔʹΠϯεύ ΠΞ͞ΕΔ͜ͱ͕ଟ͍ͨΊ

Slide 11

Slide 11 text

WebΞϓϦ։ൃΛ࢝ΊΔલͷঢ়ଶ › JS΋͋·Γৄ͘͠ͳ͍ › SwiftͰfunctional-programmingͷงғؾʹ৮Ε͍ͯͨ͜ͱͰॿ ͔Δ෦෼͸ଟ͔ͬͨ

Slide 12

Slide 12 text

WebΞϓϦ։ൃΛ࢝ΊΔલͷঢ়ଶ › CSS͸ཧղ͍ͯ͠Δͭ΋Γʹͳ͍ͬͯΔ › ʮiOSΞϓϦ։ൃͰFlexboxϨΠΞ΢τ৮͍ͬͯΔ͠େৎ෉Ͱ͠ΐ ͏ʯ

Slide 13

Slide 13 text

࠷ॳʹ໎ͬͨ͜ͱ › ViewϨΠϠʔͷϑϨʔϜϫʔΫ͸Ͳ͏͢Δ? › Vue? React? › Angular͸Ұ୴͓͍͓ͯ͘ɻ

Slide 14

Slide 14 text

࠷ॳʹ໎ͬͨ͜ͱ › ViewपลͷΞʔΩςΫνϟ͸? › PairsͷGlobal൛iOSΞϓϦͰ΋Fluxʹ͍ۙ͜ͱ΍͍ͬͯΔ › ʮ։ൃ͍ͯ͠Δ͏ͪʹFlux, Reduxͱ͔Λߟ͑࢝ΊΔͩΖ͏ ͳʔʯͱߟ͑Δͷ͸ޙճ͠ʹ

Slide 15

Slide 15 text

࠷ॳʹ໎ͬͨ͜ͱ › Ͱ͖Ε͹JSͰ΋ʮ੩తܕ෇͚ʯ͸ཉ͍͚͠Ͳ › TypeScript? › Flow?

Slide 16

Slide 16 text

ࣗ෼ͳΓͷཧղͷਐΊํ › iOSΞϓϦ։ൃͷ஌ࣝʹ౰ͯ͸Ίͯࣗ෼ͳΓʹೲಘ͍ͯ͘͠ελΠϧ

Slide 17

Slide 17 text

› JSͷڍಈͷཧղ › runkit.com͕Α͔ͬͨ › ૉ੖Β͍͠Playground ✨ › JSͷΦϒδΣΫτͷಈ͖Λ࣮ࡍʹίʔυΛಈ͔࣮ͯ͠ݧ͍ͯ͘͠ › ʮObjective-C΍SwiftͰ͍͏ɺ͜͏͍͏ಈ͖ํʯΈ͍ͨͳΠϯϓοτ ࣗ෼ͳΓͷཧղͷਐΊํ

Slide 18

Slide 18 text

› Ϗϧυπʔϧͷ΍͍ͬͯΔ͜ͱ͕ຐ๏ʹݟ͑Δ › ͍ΖΜͳϏϧυπʔϧ͋Δ͠ɺ͍ΖΜͳ͜ͱ͕࣮ߦ͞Ε͗ͯ͢ཧղͰ͖Δؾ͕͠ͳ͍... › ͦ΋ͦ΋͜Μͳෳࡶͳ͜ͱ͠ͳ͍ͱWebΞϓϦͬͯ࡞Εͳ͍ͷʁͭΒ͍ͳɻͱࢥͬͨ ͜ͱ΋ɻ › ͔͠͠ɺiOSΞϓϦͰ΋Ϗϧυπʔϧ͸ෳ਺ଘࡏ͢Δ͠ɺϏϧυͷෳࡶ౓͸΍͹͍ › Xcode͕Θ͔Γ΍͘͢ݟ͍ͤͯΔ͚ͩ › ͦΕͳΒWebͰ΋౰વى͖Δࣄ৅ͳΜͩɻͱཧղ ࣗ෼ͳΓͷཧղͷਐΊํ

Slide 19

Slide 19 text

› developϏϧυͩͱେৎ෉͚ͩͲreleaseϏϧυͩͱڍಈ͕ҧ͏ › SwiftͰ΋࠷దԽίϯύΠϧͰى͜ΓಘΔ ࣗ෼ͳΓͷཧղͷਐΊํ

Slide 20

Slide 20 text

› τϨϯυͷҠΓมΘΓ͕ૣ͗͢Δ!? › ·͊ɺୀ۶͠ͳͯ͘ྑ͍͔ʂ › ΑΓྑ͍Ξϓϩʔν͕ϘϯϘϯొ৔͢Δ؀ڥ͸ຊ౰ʹ͍͢͜͝ͱͩͱ ࢥ͏ › ΈΜͳͷΞΠσΞ͕٧Ίࠐ·Εຏ͔Ε͍ͯ͘εϐʔυ͕͍͢͝ɻ › ίϛϡχςΟͷڊେ͞ʹײಈ ࣗ෼ͳΓͷཧղͷਐΊํ

Slide 21

Slide 21 text

› HTMLͷ૊Έํ΍CSS FlexboxͷϨΠΞ΢τ › iOSΞϓϦ։ൃͰYoga, Textureʹ৮Ε͍ͯͨͷͰɺͦͦ͜͜Πϝʔδ௨ΓʹϨΠ Ξ΢τ͕૊Ίͨɻ › ͔͠͠ɺத਎ͷElement͕͏·͍͜ͱ๲ΒΜͰ͘Εͳ͍ͱ͔ࠔΔ͜ͱ͸࣌ʑ ͋ͬͨɻ › Instagram΍Pinterestͷߏ଄ΛಡΉ͜ͱ͕Ͱ͖Δ͔Βࢀߟʹͳͬͨɻ › Webͷͱͯ΋ྑ͍ͱ͜ΖɻωΠςΟϒΞϓϦͰ͸͜Ε͸೉͍͠ ࣗ෼ͳΓͷཧղͷਐΊํ

Slide 22

Slide 22 text

Vue? React? › ࠷ॳ͸Vue.jsΛ࢖ͬͨ › ͔͠͠ɺࣗ෼ʹ͸ͲͷΑ͏ʹಈ͍͍ͯΔͷ͔Α͘Θ͔Βͳ͔ͬͨ

Slide 23

Slide 23 text

ͱΓ͋͑ͣReactΛબ୒ › ࠓͳΒVue΋ཧղͰ͖Δ͔΋͠Εͳ͍

Slide 24

Slide 24 text

ͱΓ͋͑ͣReactΛબ୒ › ίϯϙʔωϯτΫϥεͷఆ͕ٛࣗ෼తʹಡΈ΍͔ͬͨ͢ɻ › ཧղ͕ਐΊ΍͔ͬͨ͢ɻComponentΫϥε͸iOSΞϓϦͷUIViewͩͱࢥ͏ͱָʹͳͬͨ › Component಺ʹશ͕ͯଘࡏ͢Δ › iOSͰ͸ΧελϜϏϡʔ͸UIViewΫϥεͷαϒΫϥεΛ࡞Γɺͦ͜ʹϓϩύςΟ(ঢ়ଶ)ɾϨΠΞ΢τɾελΠϧΛ ఆ͍ٛͯ͘͠ › React => DOM-tree ͸ iOS => UIView-tree ʹ૬౰͢Δ › iOSͱҟͳΔͷ͕ɺrender › renderͰฦ٫͢ΔJSX͸View࣮ମͰ͸ͳ͘DOM-NodeΛ࡞Γ্͛ΔͨΊͷઃܭॻɻ(͋ͬͯΔʁ ʣ › UIViewͰ͸ৗʹ࣮ମΛѻ͏ɻ ௚઀DOMΛૢ࡞͢Δײ͡ʹ͍ۙͱࢥ͏

Slide 25

Slide 25 text

JavaScript? TypeScript? Flow? › ʮ੩తܕ෇͚ʯ͸ཉ͔ͬͨ͠ › ੩తܕ෇͚ݴޠͷಛ௃͸ɺʮؒҧͬͨίʔυΛίϯύΠϧ࣌ʹ։ ൃऀ΁ڭ͑Δ͜ͱ͕Ͱ͖Δ࢓૊ΈΛ։ൃऀ͕࡞Δ͜ͱ͕Ͱ͖Δʯ ͜ͱ › ίϯύΠϧΤϥʔʹͰ͖Δ

Slide 26

Slide 26 text

JavaScript? TypeScript? Flow? › Flow΋࢖ͬͯΈ͚ͨͲɺTypeScriptʹ໭Γ·ͨ͠ɻ › VSCodeͷαϙʔτ͸TypeScriptͷํ͕ڧྗͩͬͨͷ͕େ͖͍ › ·ͨɺαϙʔτ͞Ε͍ͯΔϥΠϒϥϦ΋ଟ͍ › ࠷ॳ͸ؾʹͳΒͳ͔͚ͬͨͲɺ΍ͬͺΓ͋Δͱॿ͔Γ·͢ɻ › υΩϡϝϯτಡ·ͳͯ͘΋ɺఆٛϑΝΠϧΛݟΔ͚ͩͰͳΜͱͳ ͘࢖͍ํ͕෼͔Δ (ϔομϑΝΠϧΛಡΉײ֮)

Slide 27

Slide 27 text

Scoped CSS (CSS in JS) › ݁࿦ styled-componentsͱReactඪ४ͷinline-styleΛར༻

Slide 28

Slide 28 text

Scoped CSS (CSS in JS) › ࣗ෼ͷܦݧ্Ͱ͕͢ɺࣗࣾαʔϏε౳ͷϓϩμΫτʹ͓͍ͯStyleΛ ʮ૊Έ੾Δʯ͜ͱ͸ݱ࣮తͰ͸ͳ͍ › ελΠϧͷྫ֎͕͍ͬͺ͍ଘࡏ͢Δ͠ɺͲΜͲΜվળ΋ߦΘΕͯ ͍͘ › ͦͷதͰ͏·͘ߏ଄Խ͞ΕͨCSSΛ࡞Γ্͛Δͷ͸೉͍͠

Slide 29

Slide 29 text

Scoped CSS (CSS in JS) › ී௨ʹCSSΛ૊Ήͱେྔͷid΍class͕ొ৔ › मਖ਼࣌ʹӨڹൣғΛؾʹͯ͠ɺ৽͍͠id,classΛ௥Ճ͢Δѱ॥؀ʹɻ › ͦΕͳΒDRYΛڐ༰͠ScopedͳCSSΛॻ͍ͨํ͕ྑ͍ › ๻ͱͯ͠͸ɺUIͷ࣮૷ʹ͓͍ͯDRY͸ؾʹ͗ͯ͢͠͸ͳΒͳ͍ɻͲ͏ͤॻ ͖׵ΘΔ͔ΒDRYͷͨΊͷઃܭΛߟ͑Δ࣌ؒͷํ͕ແବʹͳΓ͔Ͷͳ͍ɻ › ·ͱΊΔ΂͖ͱ֬৴͕࣋ͯͨ࣌ʹίʔυΛ࠷దԽ͢Δ

Slide 30

Slide 30 text

σεΫτοϓ & ϞόΠϧରԠ › iOSͰ͍͏ͱ͜ΖͷɺiPhone ͱ iPadͷUniversalͳରԠ › ࣗ෼ʹͱͬͯ͸CSSͰDesktop -> Mobile·ͰͷϨΠΞ΢τΛ૊Έ੾Δͷ͸ແཧ ήʔͩͱײͨ͡ › ࠓͷ݁࿦ͱͯ͠͸ɺrenderͷ࣌ʹσΟεϓϨΠαΠζΛݟͯฦ٫͢ΔJSXΛ੍ޚ ͢Δख๏Λͱͬͨ › ଟ෼͜ΕΛΞμϓςΟϒϨΠΞ΢τͱݺͿ…? › contra/react-responsive

Slide 31

Slide 31 text

import * as React from 'react' const MediaQuery = require('react-responsive').default export namespace Lazy { export interface Props { children?: () => JSX.Element | string | number } const Query = (props: any) => { return ( {(isMatching: boolean) => { if (isMatching) { return props.children() } else { return null } }} ) } }

Slide 32

Slide 32 text

export namespace Lazy { export const Desktop = (props: Props) => { return } export const TabletMobile = (props: Props) => { return } }

Slide 33

Slide 33 text

import * as Layout from 'src/layout' export default class Top extends React.Component { render() { return ( <> {() => <……/>} {() => <……/>} > ) } } αΠζ͝ͱͷJSXఆٛΛClosureʹแΜͰ͓͖ɺϚο νͨ͠λΠϛϯάͰ࣮ߦͯ͠JSXΛฦ٫ (஗Ԇॲཧ) Desktop࣌ͷJSX Tablet & Mobile࣌ͷJSX

Slide 34

Slide 34 text

ωΠςΟϒΞϓϦͷ஌ݟ΋׆͔ͤΔ › CSSͷ૊Έํ › ݴ͏͜ͱ͕ޮ͔ͳ͍ϨΠΞ΢τ͸֊૚Λ૿΍͢ͳͲͷ޻෉Ͱ៉ྷ ʹ࣮ݱͰ͖Δ › HTMLͰ͍͏จॻߏ଄͸ཚΕΔ͚Ͳɺ΋͸΍࢓ํͷͳ͍͜ͱͳͷ Ͱ͸ʁͱɺͻͱ·ͣఘΊͨ

Slide 35

Slide 35 text

ωΠςΟϒΞϓϦͷ஌ݟ΋׆͔ͤΔ › ύϑΥʔϚϯε΁ͷߟྀ › ϦετͰແݶʹεΫϩʔϧ͍ͯ͘͠UIͷ৔߹ɺPinterestͷΑ͏ʹDOMͷNode਺͸૿΍ͣ͞ දࣔΛߦ͏΂͖ › NodeΛ૿΍͞ͳ͍͜ͱͰϝϞϦͷফඅྔ͕཈͑ΒΕΔ › ࣮࣭ɺऔಘͨ͠σʔλྔͷΈ › Ϣʔβʔ͸ύϑΥʔϚϯεΛΩʔϓͨ͠··ͣͬͱӾཡͰ͖Δ › ͜ͷΑ͏ͳ࣮૷͸ωΠςΟϒΞϓϦʹ͸ඪ४ίϯϙʔωϯτͱͯ͠ఏڙ͞Ε͍ͯΔ

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

WebΞϓϦ։ൃ໘ന͍ › WebΞϓϦ͔ΒiOSΞϓϦ։ൃʹ׆͔ͤΔ͜ͱ͸ͨ͘͞Μ͋Δͱײͨ͡ɻ › ReactͷStatelessͳComponentͳͲ (HOC) › ͦͯͦ͠ͷٯ΋ͨ͘͞Μ͋Γͦ͏ʂ › ΋ͬͱWebΤϯδχΞͱωΠςΟϒΤϯδχΞͰ৘ใަ׵Λ͍ͯ͘͠ ͜ͱͰɺࠓ·Ͱʹͳ͍৽͍͠Ξϓϩʔν͕ݟ͚ͭΒΕΔͷͰ͸ʁͱࢥͬ ͨ

Slide 38

Slide 38 text

Thank you