Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
iOS エンジニアが考える Webアプリ開発
Muukii
April 25, 2018
Programming
3
340
iOS エンジニアが考える Webアプリ開発
Muukii
April 25, 2018
Tweet
Share
More Decks by Muukii
See All by Muukii
Pairs iOSとトレンドの技術
muukii0803
0
480
Thoughts about build flow
muukii0803
2
150
スマホアプリ開発で大切なこと
muukii0803
3
68
エンジニアとして働くために
muukii0803
0
92
Q. Textureは部分的に導入できますか?
muukii0803
3
1.6k
安定したチャットを実現するための アプリとAPI設計
muukii0803
17
5.8k
快適なUIを持つアプリを作るために できること
muukii0803
12
2.1k
AutoLayout以外の選択肢
muukii0803
13
4.5k
Decodable - Pairs Taiwan
muukii0803
1
700
Other Decks in Programming
See All in Programming
Springin‘でみんなもクリエイターに!
ueponx
0
130
Java アプリとAWS の良い関係 - AWS でJava アプリを実行する一番簡単な方法教えます / AWS for Javarista
kanamasa
2
1.2k
io22 extended What's new in app performance
veronikapj
0
330
Beyond Micro Frontends: Frontend Moduliths for the Enterprise @wad2022
manfredsteyer
PRO
0
130
ドメインモデル方式のクラス設計 座談会
masuda220
PRO
3
1k
Value and Record Types
hschwentner
0
550
IE Graduation Certificate
jxck
6
4.7k
Meet Swift Regex
usamik26
0
310
"What's new in Swift"の要約 / swift_5_7_summary
uhooi
1
270
The strategies behind ddd – AdeoDevSummit 2022
lilobase
PRO
4
230
Jakarta EE 10 and Beyond
ivargrimstad
0
1.7k
dotdotdot_in_predict_function
bk_18
1
180
Featured
See All Featured
Support Driven Design
roundedbygravity
86
8.5k
The Web Native Designer (August 2011)
paulrobertlloyd
74
1.9k
Making Projects Easy
brettharned
98
4.3k
Raft: Consensus for Rubyists
vanstee
126
5.4k
Thoughts on Productivity
jonyablonski
43
2.3k
Pencils Down: Stop Designing & Start Developing
hursman
112
9.8k
The World Runs on Bad Software
bkeepers
PRO
57
5.3k
Facilitating Awesome Meetings
lara
29
4k
Scaling GitHub
holman
451
140k
We Have a Design System, Now What?
morganepeng
35
2.9k
Teambox: Starting and Learning
jrom
123
7.7k
A Philosophy of Restraint
colly
192
15k
Transcript
iOS ΤϯδχΞ͕ߟ͑Δ WebΞϓϦ։ൃ muukii
About Me ‣ muukii <Hiroshi Kimura> ‣ iOS Engineer at
eureka, Inc. ‣ Pairs Global Team ‣ GitHub : @muukii ‣ https://muukii.me ☕ ⌚
None
1BJSTʹ͍ͭͯ !4
4PVUI,PSFB Japan Taiwan No.1 2017 release No.1 !5 1BJSTʹ͍ͭͯ ల։ࠃ
̐ͭͷϓϥοτϑΥʔϜ CONFIDENTIAL INFORMATION: Not for Public Distribution - Do Not Copy
None
Agenda › ࠷ۙͪΐͬͱͨ͠WebΞϓϦΛ࡞ΔҊ͕͖݅ͬͯ·ͨ͠ › ͔ͤͬ͘ͳͷͰେنͳΞϓϦΛ࡞ΔέʔεΛఆͯͬͯ͠Έ͍ͨ › ΄ͱΜͲ͕ࣝͳ͍ঢ়ଶͳͷͰɺ৭ʑௐͨ͜ͱ › iOSΞϓϦͷUIΛ࡞Γଓ͚͖ͯͨܦݧΛݩʹɺ࠷ۙΠϯϓοτͯ͠ ͍ΔWebΞϓϦ։ൃͷࣝͰɺେنͳΞϓϦΛ࡞ΔͳΒʮ͜Μͳ
ײ͡ʹ࡞͍͖͍ͬͯͨͳʔʯͱࢥ͏·ͱΊɻ
ݱঢ়ͷ › Gatsby + Netlify Ͱ੩తαΠτΛ࡞͍ͬͯΔ › React › styled-components
ͳͲ › TypeScript › VSCode
WebΞϓϦ։ൃΛ࢝ΊΔલͷঢ়ଶ › ࠓ·ͰͣͬͱSwiftΛॻ͍͖ͯͨ › Webͷۀܦݧͳ͠
WebΞϓϦ։ൃΛ࢝ΊΔલͷঢ়ଶ › ࣝͱͯͦ͠ΕͳΓʹΩϟονΞοϓ͍ͯͨ͠ › Ϗϧυπʔϧͷಈͱ͔ › ΞʔΩςΫνϟͱ͔ › ωΠςΟϒΞϓϦ։ൃWebΞϓϦͷςΫϊϩδʔʹΠϯεύ ΠΞ͞ΕΔ͜ͱ͕ଟ͍ͨΊ
WebΞϓϦ։ൃΛ࢝ΊΔલͷঢ়ଶ › JS͋·Γৄ͘͠ͳ͍ › SwiftͰfunctional-programmingͷงғؾʹ৮Ε͍ͯͨ͜ͱͰॿ ͔Δ෦ଟ͔ͬͨ
WebΞϓϦ։ൃΛ࢝ΊΔલͷঢ়ଶ › CSSཧղ͍ͯ͠ΔͭΓʹͳ͍ͬͯΔ › ʮiOSΞϓϦ։ൃͰFlexboxϨΠΞτ৮͍ͬͯΔ͠େৎͰ͠ΐ ͏ʯ
࠷ॳʹ໎ͬͨ͜ͱ › ViewϨΠϠʔͷϑϨʔϜϫʔΫͲ͏͢Δ? › Vue? React? › AngularҰ୴͓͍͓ͯ͘ɻ
࠷ॳʹ໎ͬͨ͜ͱ › ViewपลͷΞʔΩςΫνϟ? › PairsͷGlobal൛iOSΞϓϦͰFluxʹ͍ۙ͜ͱ͍ͬͯΔ › ʮ։ൃ͍ͯ͠Δ͏ͪʹFlux, Reduxͱ͔Λߟ͑࢝ΊΔͩΖ͏ ͳʔʯͱߟ͑Δͷޙճ͠ʹ
࠷ॳʹ໎ͬͨ͜ͱ › Ͱ͖ΕJSͰʮ੩తܕ͚ʯཉ͍͚͠Ͳ › TypeScript? › Flow?
ࣗͳΓͷཧղͷਐΊํ › iOSΞϓϦ։ൃͷࣝʹͯΊͯࣗͳΓʹೲಘ͍ͯ͘͠ελΠϧ
› JSͷڍಈͷཧղ › runkit.com͕Α͔ͬͨ › ૉΒ͍͠Playground ✨ › JSͷΦϒδΣΫτͷಈ͖Λ࣮ࡍʹίʔυΛಈ͔࣮ͯ͠ݧ͍ͯ͘͠ ›
ʮObjective-CSwiftͰ͍͏ɺ͜͏͍͏ಈ͖ํʯΈ͍ͨͳΠϯϓοτ ࣗͳΓͷཧղͷਐΊํ
› Ϗϧυπʔϧͷ͍ͬͯΔ͜ͱ͕ຐ๏ʹݟ͑Δ › ͍ΖΜͳϏϧυπʔϧ͋Δ͠ɺ͍ΖΜͳ͜ͱ͕࣮ߦ͞Ε͗ͯ͢ཧղͰ͖Δؾ͕͠ͳ͍... › ͦͦ͜Μͳෳࡶͳ͜ͱ͠ͳ͍ͱWebΞϓϦͬͯ࡞Εͳ͍ͷʁͭΒ͍ͳɻͱࢥͬͨ ͜ͱɻ › ͔͠͠ɺiOSΞϓϦͰϏϧυπʔϧෳଘࡏ͢Δ͠ɺϏϧυͷෳࡶ͍ ›
Xcode͕Θ͔Γ͘͢ݟ͍ͤͯΔ͚ͩ › ͦΕͳΒWebͰવى͖ΔࣄͳΜͩɻͱཧղ ࣗͳΓͷཧղͷਐΊํ
› developϏϧυͩͱେৎ͚ͩͲreleaseϏϧυͩͱڍಈ͕ҧ͏ › SwiftͰ࠷దԽίϯύΠϧͰى͜ΓಘΔ ࣗͳΓͷཧղͷਐΊํ
› τϨϯυͷҠΓมΘΓ͕ૣ͗͢Δ!? › ·͊ɺୀ۶͠ͳͯ͘ྑ͍͔ʂ › ΑΓྑ͍Ξϓϩʔν͕ϘϯϘϯొ͢Δڥຊʹ͍͢͜͝ͱͩͱ ࢥ͏ › ΈΜͳͷΞΠσΞ͕٧Ίࠐ·Εຏ͔Ε͍ͯ͘εϐʔυ͕͍͢͝ɻ ›
ίϛϡχςΟͷڊେ͞ʹײಈ ࣗͳΓͷཧղͷਐΊํ
› HTMLͷΈํCSS FlexboxͷϨΠΞτ › iOSΞϓϦ։ൃͰYoga, Textureʹ৮Ε͍ͯͨͷͰɺͦͦ͜͜Πϝʔδ௨ΓʹϨΠ Ξτ͕Ίͨɻ › ͔͠͠ɺதͷElement͕͏·͍͜ͱΒΜͰ͘Εͳ͍ͱ͔ࠔΔ͜ͱ࣌ʑ ͋ͬͨɻ
› InstagramPinterestͷߏΛಡΉ͜ͱ͕Ͱ͖Δ͔Βࢀߟʹͳͬͨɻ › Webͷͱͯྑ͍ͱ͜ΖɻωΠςΟϒΞϓϦͰ͜Ε͍͠ ࣗͳΓͷཧղͷਐΊํ
Vue? React? › ࠷ॳVue.jsΛͬͨ › ͔͠͠ɺࣗʹͲͷΑ͏ʹಈ͍͍ͯΔͷ͔Α͘Θ͔Βͳ͔ͬͨ
ͱΓ͋͑ͣReactΛબ › ࠓͳΒVueཧղͰ͖Δ͔͠Εͳ͍
ͱΓ͋͑ͣReactΛબ › ίϯϙʔωϯτΫϥεͷఆ͕ٛࣗతʹಡΈ͔ͬͨ͢ɻ › ཧղ͕ਐΊ͔ͬͨ͢ɻComponentΫϥεiOSΞϓϦͷUIViewͩͱࢥ͏ͱָʹͳͬͨ › Componentʹશ͕ͯଘࡏ͢Δ › iOSͰΧελϜϏϡʔUIViewΫϥεͷαϒΫϥεΛ࡞Γɺͦ͜ʹϓϩύςΟ(ঢ়ଶ)ɾϨΠΞτɾελΠϧΛ ఆ͍ٛͯ͘͠
› React => DOM-tree iOS => UIView-tree ʹ૬͢Δ › iOSͱҟͳΔͷ͕ɺrender › renderͰฦ٫͢ΔJSXView࣮ମͰͳ͘DOM-NodeΛ࡞Γ্͛ΔͨΊͷઃܭॻɻ(͋ͬͯΔʁ ʣ › UIViewͰৗʹ࣮ମΛѻ͏ɻ DOMΛૢ࡞͢Δײ͡ʹ͍ۙͱࢥ͏
JavaScript? TypeScript? Flow? › ʮ੩తܕ͚ʯཉ͔ͬͨ͠ › ੩తܕ͚ݴޠͷಛɺʮؒҧͬͨίʔυΛίϯύΠϧ࣌ʹ։ ൃऀڭ͑Δ͜ͱ͕Ͱ͖ΔΈΛ։ൃऀ͕࡞Δ͜ͱ͕Ͱ͖Δʯ ͜ͱ ›
ίϯύΠϧΤϥʔʹͰ͖Δ
JavaScript? TypeScript? Flow? › FlowͬͯΈ͚ͨͲɺTypeScriptʹΓ·ͨ͠ɻ › VSCodeͷαϙʔτTypeScriptͷํ͕ڧྗͩͬͨͷ͕େ͖͍ › ·ͨɺαϙʔτ͞Ε͍ͯΔϥΠϒϥϦଟ͍ ›
࠷ॳؾʹͳΒͳ͔͚ͬͨͲɺͬͺΓ͋Δͱॿ͔Γ·͢ɻ › υΩϡϝϯτಡ·ͳͯ͘ɺఆٛϑΝΠϧΛݟΔ͚ͩͰͳΜͱͳ ͍͘ํ͕͔Δ (ϔομϑΝΠϧΛಡΉײ֮)
Scoped CSS (CSS in JS) › ݁ styled-componentsͱReactඪ४ͷinline-styleΛར༻
Scoped CSS (CSS in JS) › ࣗͷܦݧ্Ͱ͕͢ɺࣗࣾαʔϏεͷϓϩμΫτʹ͓͍ͯStyleΛ ʮΈΔʯ͜ͱݱ࣮తͰͳ͍ › ελΠϧͷྫ֎͕͍ͬͺ͍ଘࡏ͢Δ͠ɺͲΜͲΜվળߦΘΕͯ
͍͘ › ͦͷதͰ͏·͘ߏԽ͞ΕͨCSSΛ࡞Γ্͛Δͷ͍͠
Scoped CSS (CSS in JS) › ී௨ʹCSSΛΉͱେྔͷidclass͕ొ › मਖ਼࣌ʹӨڹൣғΛؾʹͯ͠ɺ৽͍͠id,classΛՃ͢Δѱ॥ʹɻ ›
ͦΕͳΒDRYΛڐ༰͠ScopedͳCSSΛॻ͍ͨํ͕ྑ͍ › ͱͯ͠ɺUIͷ࣮ʹ͓͍ͯDRYؾʹ͗ͯ͢͠ͳΒͳ͍ɻͲ͏ͤॻ ͖ΘΔ͔ΒDRYͷͨΊͷઃܭΛߟ͑Δ࣌ؒͷํ͕ແବʹͳΓ͔Ͷͳ͍ɻ › ·ͱΊΔ͖ͱ֬৴͕࣋ͯͨ࣌ʹίʔυΛ࠷దԽ͢Δ
σεΫτοϓ & ϞόΠϧରԠ › iOSͰ͍͏ͱ͜ΖͷɺiPhone ͱ iPadͷUniversalͳରԠ › ࣗʹͱͬͯCSSͰDesktop ->
Mobile·ͰͷϨΠΞτΛΈΔͷແཧ ήʔͩͱײͨ͡ › ࠓͷ݁ͱͯ͠ɺrenderͷ࣌ʹσΟεϓϨΠαΠζΛݟͯฦ٫͢ΔJSXΛ੍ޚ ͢Δख๏Λͱͬͨ › ଟ͜ΕΛΞμϓςΟϒϨΠΞτͱݺͿ…? › contra/react-responsive
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> ) } }
export namespace Lazy { export const Desktop = (props: Props)
=> { return <Query {...props} minWidth={769} /> } export const TabletMobile = (props: Props) => { return <Query {...props} maxWidth={769} /> } }
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
ωΠςΟϒΞϓϦͷݟ׆͔ͤΔ › CSSͷΈํ › ݴ͏͜ͱ͕ޮ͔ͳ͍ϨΠΞτ֊Λ૿͢ͳͲͷͰ៉ྷ ʹ࣮ݱͰ͖Δ › HTMLͰ͍͏จॻߏཚΕΔ͚Ͳɺํͷͳ͍͜ͱͳͷ Ͱʁͱɺͻͱ·ͣఘΊͨ
ωΠςΟϒΞϓϦͷݟ׆͔ͤΔ › ύϑΥʔϚϯεͷߟྀ › ϦετͰແݶʹεΫϩʔϧ͍ͯ͘͠UIͷ߹ɺPinterestͷΑ͏ʹDOMͷNode૿ͣ͞ දࣔΛߦ͏͖ › NodeΛ૿͞ͳ͍͜ͱͰϝϞϦͷফඅྔ͕͑ΒΕΔ › ࣮࣭ɺऔಘͨ͠σʔλྔͷΈ
› ϢʔβʔύϑΥʔϚϯεΛΩʔϓͨ͠··ͣͬͱӾཡͰ͖Δ › ͜ͷΑ͏ͳ࣮ωΠςΟϒΞϓϦʹඪ४ίϯϙʔωϯτͱͯ͠ఏڙ͞Ε͍ͯΔ
None
WebΞϓϦ։ൃ໘ന͍ › WebΞϓϦ͔ΒiOSΞϓϦ։ൃʹ׆͔ͤΔ͜ͱͨ͘͞Μ͋Δͱײͨ͡ɻ › ReactͷStatelessͳComponentͳͲ (HOC) › ͦͯͦ͠ͷٯͨ͘͞Μ͋Γͦ͏ʂ › ͬͱWebΤϯδχΞͱωΠςΟϒΤϯδχΞͰใަΛ͍ͯ͘͠
͜ͱͰɺࠓ·Ͱʹͳ͍৽͍͠Ξϓϩʔν͕ݟ͚ͭΒΕΔͷͰʁͱࢥͬ ͨ
Thank you