Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Muukii
April 25, 2018

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

Muukii

April 25, 2018
Tweet

More Decks by Muukii

Other Decks in Programming

Transcript

  1. About Me ‣ muukii <Hiroshi Kimura> ‣ iOS Engineer at

    eureka, Inc. ‣ Pairs Global Team ‣ GitHub : @muukii ‣ https://muukii.me ☕ ⌚
  2. 4PVUI,PSFB Japan Taiwan No.1 2017 release No.1 !5 1BJSTʹ͍ͭͯ ల։ࠃ

    ̐ͭͷϓϥοτϑΥʔϜ CONFIDENTIAL INFORMATION: Not for Public Distribution - Do Not Copy
  3. › HTMLͷ૊Έํ΍CSS FlexboxͷϨΠΞ΢τ › iOSΞϓϦ։ൃͰYoga, Textureʹ৮Ε͍ͯͨͷͰɺͦͦ͜͜Πϝʔδ௨ΓʹϨΠ Ξ΢τ͕૊Ίͨɻ › ͔͠͠ɺத਎ͷElement͕͏·͍͜ͱ๲ΒΜͰ͘Εͳ͍ͱ͔ࠔΔ͜ͱ͸࣌ʑ ͋ͬͨɻ

    › Instagram΍Pinterestͷߏ଄ΛಡΉ͜ͱ͕Ͱ͖Δ͔Βࢀߟʹͳͬͨɻ › Webͷͱͯ΋ྑ͍ͱ͜ΖɻωΠςΟϒΞϓϦͰ͸͜Ε͸೉͍͠ ࣗ෼ͳΓͷཧղͷਐΊํ
  4. ͱΓ͋͑ͣReactΛબ୒ › ίϯϙʔωϯτΫϥεͷఆ͕ٛࣗ෼తʹಡΈ΍͔ͬͨ͢ɻ › ཧղ͕ਐΊ΍͔ͬͨ͢ɻComponentΫϥε͸iOSΞϓϦͷUIViewͩͱࢥ͏ͱָʹͳͬͨ › Component಺ʹશ͕ͯଘࡏ͢Δ › iOSͰ͸ΧελϜϏϡʔ͸UIViewΫϥεͷαϒΫϥεΛ࡞Γɺͦ͜ʹϓϩύςΟ(ঢ়ଶ)ɾϨΠΞ΢τɾελΠϧΛ ఆ͍ٛͯ͘͠

    › React => DOM-tree ͸ iOS => UIView-tree ʹ૬౰͢Δ › iOSͱҟͳΔͷ͕ɺrender › renderͰฦ٫͢ΔJSX͸View࣮ମͰ͸ͳ͘DOM-NodeΛ࡞Γ্͛ΔͨΊͷઃܭॻɻ(͋ͬͯΔʁ ʣ › UIViewͰ͸ৗʹ࣮ମΛѻ͏ɻ ௚઀DOMΛૢ࡞͢Δײ͡ʹ͍ۙͱࢥ͏
  5. JavaScript? TypeScript? Flow? › Flow΋࢖ͬͯΈ͚ͨͲɺTypeScriptʹ໭Γ·ͨ͠ɻ › VSCodeͷαϙʔτ͸TypeScriptͷํ͕ڧྗͩͬͨͷ͕େ͖͍ › ·ͨɺαϙʔτ͞Ε͍ͯΔϥΠϒϥϦ΋ଟ͍ ›

    ࠷ॳ͸ؾʹͳΒͳ͔͚ͬͨͲɺ΍ͬͺΓ͋Δͱॿ͔Γ·͢ɻ › υΩϡϝϯτಡ·ͳͯ͘΋ɺఆٛϑΝΠϧΛݟΔ͚ͩͰͳΜͱͳ ͘࢖͍ํ͕෼͔Δ (ϔομϑΝΠϧΛಡΉײ֮)
  6. Scoped CSS (CSS in JS) › ී௨ʹCSSΛ૊Ήͱେྔͷid΍class͕ొ৔ › मਖ਼࣌ʹӨڹൣғΛؾʹͯ͠ɺ৽͍͠id,classΛ௥Ճ͢Δѱ॥؀ʹɻ ›

    ͦΕͳΒDRYΛڐ༰͠ScopedͳCSSΛॻ͍ͨํ͕ྑ͍ › ๻ͱͯ͠͸ɺUIͷ࣮૷ʹ͓͍ͯDRY͸ؾʹ͗ͯ͢͠͸ͳΒͳ͍ɻͲ͏ͤॻ ͖׵ΘΔ͔ΒDRYͷͨΊͷઃܭΛߟ͑Δ࣌ؒͷํ͕ແବʹͳΓ͔Ͷͳ͍ɻ › ·ͱΊΔ΂͖ͱ֬৴͕࣋ͯͨ࣌ʹίʔυΛ࠷దԽ͢Δ
  7. σεΫτοϓ & ϞόΠϧରԠ › iOSͰ͍͏ͱ͜ΖͷɺiPhone ͱ iPadͷUniversalͳରԠ › ࣗ෼ʹͱͬͯ͸CSSͰDesktop ->

    Mobile·ͰͷϨΠΞ΢τΛ૊Έ੾Δͷ͸ແཧ ήʔͩͱײͨ͡ › ࠓͷ݁࿦ͱͯ͠͸ɺrenderͷ࣌ʹσΟεϓϨΠαΠζΛݟͯฦ٫͢ΔJSXΛ੍ޚ ͢Δख๏Λͱͬͨ › ଟ෼͜ΕΛΞμϓςΟϒϨΠΞ΢τͱݺͿ…? › contra/react-responsive
  8. 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 ( <MediaQuery {...props}> {(isMatching: boolean) => { if (isMatching) { return props.children() } else { return null } }} </MediaQuery> ) } }
  9. export namespace Lazy { export const Desktop = (props: Props)

    => { return <Query {...props} minWidth={769} /> } export const TabletMobile = (props: Props) => { return <Query {...props} maxWidth={769} /> } }
  10. import * as Layout from 'src/layout' export default class Top

    extends React.Component<Props, {}> { render() { return ( <> <Layout.Lazy.Desktop> {() => <……/>} </Layout.Lazy.Desktop> <Layout.Lazy.TabletMobile> {() => <……/>} </Layout.Lazy.TabletMobile> </> ) } } αΠζ͝ͱͷJSXఆٛΛClosureʹแΜͰ͓͖ɺϚο νͨ͠λΠϛϯάͰ࣮ߦͯ͠JSXΛฦ٫ (஗Ԇॲཧ) Desktop࣌ͷJSX Tablet & Mobile࣌ͷJSX