Tweet
Tweet

Slide 1

Slide 1 text

ॳݟ͔Β࣮຿Ͱ React-Native΍ͬͨ AndroidΤϯδχΞͷ ॴײͱRN֓ཁ @kirimin

Slide 2

Slide 2 text

ࠓճͷ಺༰ • React−NativeͰͷ։ൃ֓ཁ • AndroidΤϯδχΞ͕React-NativeͰ͕ͬͭΓ Ҋ݅ͰReact-NativeΛ΍ͬͯײͨ͜͡ͱ • ݸਓͷײ૝ʴ·ͩ·ͩRNॳ৺ऀͳͷͰɹɹɹ ࢀߟఔ౓ʹ

Slide 3

Slide 3 text

લఏ • ࣗ෼ʹ͍ͭͯ • Android։ൃྺ6೥͘Β͍ • ϑϩϯτΤϯυ͸झຯͰগ͠ᴩͬͨ͘Β͍ • ࣮຿Ͱ͸ϑϩϯτ։ൃܦݧͳ͠ • JavaScript΋࣮຿Ͱ͸΄΅ະܦݧ • React-Native͸׬શʹॳݟ • React΋ॳΊͯ • Redux΋ॳΊͯ

Slide 4

Slide 4 text

લఏ • Ҋ݅ʹ͍ͭͯ • iOSΤϯδχΞ2ਓʴAndroidΤϯδχΞ1ਓ+֎෦ͷํͷ̐ਓମ੍ • ࠷ॳ͸গ͠஌ࣝͷ͋Δ֎෦ͷํʹج൫෦෼ͷ࣮૷Λ΍ͬͯ΋Βͬͨ • ଞ3ਓ͸RNॳݟͰɺUIܥIssueͳͲ͔ΒঃʑʹҊ݅ʹίϛοτ • ΞϓϦͷن໛͸ͦͦ͜͜େ͖͍+σβΠϯཁٻ΋ߴΊ • UI͸جຊϚςϦΞϧσβΠϯϕʔε + OSඪ४ • FlowʴReduxߏ੒

Slide 5

Slide 5 text

React-NativeͰͷ։ൃ ֓ཁ

Slide 6

Slide 6 text

React-NativeͰͷ։ൃ֓ཁ • جຊ͸ϑϩϯτΤϯυͷٕज़ • JavaScript + CSS + React

Slide 7

Slide 7 text

JavaScriptʹ͍ͭͯ • ࠷৽ͷJavaScriptͷγϯλοΫε͕࢖͑Δ • Promise, async/await, constʹΑΔείʔϓ੍ޚ, Ξϩʔؔ਺… • ࢥͬͨΑΓ͸շదɻܕ·ΘΓҎ֎͸ͦΜͳʹετϨεΛײ͡ͳ ͍ • ͨͩ͠ඪ४ؔ਺ͷශऑ͞͸JVMҭͪʹ͸ΧϧνϟʔγϣοΫ • ࠷৽ͷJS͸ֶशίετ΋ͦΕ΄Ͳߴ͘ͳ͍

Slide 8

Slide 8 text

Flowʹ͍ͭͯ • JSʹܕࢦఆΛ௥Ճग़དྷΔ • ؔ਺ͷҾ਺΍໭Γ஋ʹܕΛ໌ࣔग़དྷΔͷ͸༗Γ೉͍ • nullableܕ΋ࢦఆͰ͖Δ • ͨͩ͠unwrapͳͲѻ͍͕ෆศͳͷͰ͋·Γ࢖͍ͨ͘ͳ͍ҹ৅ • ಠࣗܕఆٛ͸classͰ͸ͳ͘Object΁ͷtype alias • ίʔυิ׬͕ޮ͘Α͏ʹͳΔͷͰศར • ෼͔Γ͖͍ͬͯΔnullνΣοΫ΍৑௕ͳܕఆٛͳͲશྗͰFlowʹ४ڌ͠Α͏ͱ ͢ΔͱΘΓͱμϧ͍

Slide 9

Slide 9 text

Reactʹ͍ͭͯ • JS্ͰHTMLͱAndroidͷViewͷதؒͷΑ͏ͳʮComponentʯΛ ૊Έ߹ΘͤͯUIΛߏங͢Δ(JSX) • AndroidͰݴ͑͹layoutͷxml಺ʹJSίʔυΛॻ͘Α͏ͳΠϝʔ δ • ௚ײతͩ͠ૉૣ࣮͘૷ग़དྷͯྑ͍ • ͨͩ͠ViewͱUIϩδοΫ͕ີ݁߹͕ͪ͠(ޙड़͠·͢) • Reactࣗମͷֶशίετ͸௿͍ɻॳݟͰ΋งғؾͰॻ͚Δ

Slide 10

Slide 10 text

Redux • σʔλϑϩʔͷ͋ΓํΛఆٛͨ͠ύλʔϯɺٴͼͦͷϑϨʔϜϫʔΫ • ׬શʹॳݟࡴ͠ • ղઆͳ͠ʹίʔυΛಡΜ͚ͩͩͰ͸Կ͕ى͍ͬͯ͜Δͷ͔શ͘෼͔Βͳ͍ • ͨ͘͞Μͷղઆهࣄ͕͋Δ͕ಡΜͰ΋͙͢ʹ͸ཧղͰ͖ͳ͍ • େྔʹղઆهࣄΛಡΈړ࣮ͬͯࡍʹ৮ͬͯΑ͏΍͘ཧղͰ͖Δͱ͍͏ײ͡ • ෼͔Ε͹·͊ͳΔ΄Ͳͱ͍͏ײ͡ • ͨͩ͠େྔͷϘΠϥʔςϯϓϨʔτ

Slide 11

Slide 11 text

React-NativeͰͷUI࣮૷

Slide 12

Slide 12 text

React-NativeͰͷUI࣮૷ • React-NativeͰͷUI࣮૷͸Componentͱͷઓ͍ • ໎ͬͨΒެࣜDocsΛݟʹߦ͘ • ͨͩ͠஌Γ͍ͨࣄ͕ॻ͍ͯ͋Δͱ͸ݴ͍ͬͯͳ͍ • ඪ४Ͱఏڙ͞Ε͍ͯΔComponent͸࠷খݶͳͷͰOSSϥΠ ϒϥϦΛେ͍ʹ׆༻͢Δඞཁ͕͋Δ • OSS Componentͷ͓ؾ࣋ͪΛߟ͑Δ͓࢓ࣄ

Slide 13

Slide 13 text

React-NativeͰͷUI࣮૷ • ϨΠΞ΢τࣗମ͸CSSͰstyleΛఆٛ͢Δ • flexboxϕʔεͰॻ͚Δ • CSSͷ஌͕ࣝ͋Ε͹ϨΠΞ΢τߏங͸εϜʔζ • ٯʹCSS͕෼͔Βͳ͍ͱຖճάάΔ͜ͱʹͳΔ • OSࠩ෼͸ComponentͰٵऩ͞ΕΔ΋ͷ΋͋Δ͕ɺͦ͏Ͱͳ͍΋ͷ͸෼ذରԠ marginLeft: Platform.OS === 'ios' ? -8 : -6,

Slide 14

Slide 14 text

React-NativeͰͷUI࣮૷ import React, { Component } from 'react'; import { Text, View } from 'react-native'; class WhyReactNativeIsSoGreat extends Component { render() { return ( If you like React on the web, you'll like React Native. You just use native components like 'View' and 'Text', instead of web components like 'div' and 'span'. ); } } ←ComponentΫϥεఆٛ ←render()ؔ਺ͰϨΠΞ΢τΛߏஙͯ͠ฦ͢ ←Component(View)Λྻڍͯ͠UIߏங

Slide 15

Slide 15 text

React-NativeͰͷUI࣮૷ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View } from 'react-native'; export default class LotsOfStyles extends Component { render() { return ( just red just bigblue bigblue, then red red, then bigblue ); } } const styles = StyleSheet.create({ bigblue: { color: 'blue', fontWeight: 'bold', fontSize: 30, }, red: { color: 'red', }, }); ←Styleఆٛ(CSS)

Slide 16

Slide 16 text

React-NativeͰͷUI࣮૷ • ؤுΕ͹Nativeʹ͍ۙUIΛ࣮ݱग़དྷΔ…͕ • ʮNative։ൃͱݟ෼͚͕෇͔ͳ͍UIΛ؆୯ʹ࣮ݱͰ͖Δʯ ͱ͍͏Θ͚Ͱ͸ͳ͍ • AppBarͳͲڞ௨ͷ෦෼΍߆Γ͍ͨ෦෼͸ؤுͬͯNativeʹ دͤɺଞͷ෦෼͸ਵ࣌ଥڠͷ൑அΛ͠ͳ͕ΒਐΊͨํ͕ί εύ͸ߴ͍ͱࢥ͏ • جຊతʹ͸CSSͰωΠςΟϒͬΆ͍UIΛߏங͢ΔΠϝʔδ

Slide 17

Slide 17 text

React-NativeͰͷUIϩδοΫ • શͯͷUI͸Componentͱ͍͏୯ҐͰߟ͑Δ • ը໘શମ΋ComponentɺUIύʔπ΋Component • PropsͱStateͱ͍͏ಛผͳঢ়ଶΛ࣋ͭ • Props͸Componentੜ੒࣌ʹ֎෦͔Β౉͞ΕΔύϥϝʔλɺ౉ ͞Εͨޙ͸มߋ͠ͳ͍ • State͸Component಺෦ʹӅṭ͞ΕͨύϥϝʔλɺComponent ಺෦͔Β͔͠มߋ͠ͳ͍

Slide 18

Slide 18 text

React-NativeͰͷUIϩδοΫ • શͯͷUI͸Componentඳը࣌ʹݺ͹ΕΔrender()ؔ਺Ͱߏங ͢Δ • AndroidͳͲͷΑ͏ʹ௚઀ଞͷComponentͷΠϯελϯε Λऔಘͯ͠஋Λૢ࡞ͨ͠Γ͸͠ͳ͍ • ͡Ό͋Ͳ͏΍ͬͯUIΛߋ৽͢Δͷʁ • State͕มߋ͞ΕΔ౓ʹrender()͕ݺ͹ΕComponent͕࠶ ඳը͞ΕΔ

Slide 19

Slide 19 text

React-NativeͰͷUIϩδοΫ • ྫɿϘλϯΛԡͨ͠ΒςΩετΛදࣔ͢Δ type State = { isPressed: boolean } class WhyReactNativeIsSoGreat extends Component{ constructor (props: Props) { super(props) this.state = { isPressed: false } } render() { const pressedTextView = this.state.isPressed ? (pressed) : null return ( { setState({isPressed: true}) }} /> {pressedTextView} ); } } ←Stateఆٛ(Flow) ←StateॳظԽ(Flow) ↓Stateͷ஋ʹΑͬͯඳըΛม͑Δ ←ϘλϯԡԼ࣌ʹsetStateͰঢ়ଶΛมߋ render()ؔ਺͕࠶౓ݺ͹ΕΔ

Slide 20

Slide 20 text

React-NativeͰͷUIϩδοΫ • جຊతʹશͯͷඳըॲཧ͕render()ʹू໿͞ΕΔͷͰUIϩδοΫ, Viewͷ ঢ়ଶΛ௥͍΍͍͢ • render()ؔ਺͸ංେԽ͕ͪ͠ • ϨΠΞ΢τͱUIϩδοΫ/υϝΠϯϩδοΫ͕ີ݁߹ʹͳΓ͕ͪ • ComponentઃܭͱϞσϧઃܭΛͪΌΜͱ΍Βͳ͍ͱਏͦ͏ • ڞ௨෦඼ͷComponentԽ͸ਖ਼͍͕͠ɺ্ख͘΍Βͳ͍ͱ͔͑ͬͯσ βΠϯมߋ΍ը໘ʹΑΔඍົͳࠩ෼ͳͲͷϏδωεཁ݅ʹऑ͘ͳΔ

Slide 21

Slide 21 text

RN + Reduxͷ৔߹ • ΞϓϦͷશͯͷঢ়ଶ͸Storeͱ͍͏ΦϒδΣΫτʹอ࣋͞ΕΔ(γϯάϧτϯ) • ReduxΛ࢖͏৔߹͸setState()ͰStateΛߋ৽͢ΔมΘΓʹStoreͷঢ়ଶΛߋ৽ ͢ΔࣄͰComponentΛߋ৽͢Δ • Actionͱ͍͏ΠϕϯτʹΑͬͯStore΁ͷߋ৽ϦΫΤετΛૹΔˠStoreͷߋ ৽ʹΑ֤ͬͯComponentͷ࠶ඳը͕ߦΘΔˠStoreͷঢ়ଶΛݩʹUIΛඳը͢ ΔͨΊը໘͕ߋ৽͞ΕΔ • ReduxͰͷStoreͷߋ৽࣌ʹݺ͹ΕComponentͷPropsʹม׵͢Δͷ͕ mapStateToPropsؔ਺ɹ(͕͜͜ॳݟͰ͸ࠇຐज़ͬΆ͘ݟ͑Δ)

Slide 22

Slide 22 text

RN + Reduxͷ৔߹ • ྫ • API /events͔ΒΠϕϯτ৘ใΛऔಘ͠ɺStoreʹอଘ͢ΔActionʮfetchEventsʯ͕͋Δ • Ұཡը໘Ͱ͸Componentੜ੒࣌ʹfetchEventsΛݺͿ • APIϦΫΤετʹ੒ޭ͠Store͕ߋ৽͞ΕͨΒҰཡը໘ͷrender()͕ݺͼ௚͞ΕΠϕϯτ৘ ใ͕දࣔ͞ΕΔ • ৄࡉը໘Ͱ͸ΠϕϯτฤूޙʹfetchEventsΛݺͼΠϕϯτ৘ใΛߋ৽͢Δ • Storeͷߋ৽ʹΑΓৄࡉը໘ɺҰཡը໘ͦΕͧΕͰrender()͕ݺͼ௚͞ΕComponent͕ߋ৽ ͞ΕΔ • ը໘಺ʹStoreΛࢀর͢ΔComponent͕͍ͭ͋ͬͯ͘΋ಉ͡Α͏ʹ࠶ඳը͞ΕΔͨΊৗʹ Componetͱσʔλ͕ಉظ͞ΕΔ

Slide 23

Slide 23 text

RN + Reduxॴײ • ReduxͰ͸σʔλͷϑϩʔΛఆ͍ٛͯ͠Δ͚ͩͳͷͰɺViewϨΠ Ϡʔ΍υϝΠϯϨΠϠʔͷ੹຿෼͚ͳͲ͸ఆٛ͞Ε͍ͯͳ͍ • ʮReduxΛ࠾༻͢Δʯͱ͍͏ࣄ͚ͩΛܾΊͯ։ൃΛਐΊͯ͠·ͬ ͨ݁ՌɺStore͔ΒσʔλΛऔಘͨ͠ޙͷUIϩδοΫ΍υϝΠϯ ϩδοΫͷઃܭʹҰ؏ੑ͕ͳ͘ΧΦεԽͯ͠͠·ͬͨ • ReduxΛ࢖͏͚ͩͰ͸ʮFat Activityʯ໰୊͸ղܾ͠ͳ͍ • ReduxΛ࢖͏৔߹Ͱ΋AndroidͰͷCleanArchitectureͷΑ͏ͳϨ ΠϠʔυΞʔΩςΫνϟΛ࠾༻ͨ͠ํ͕Αͦ͞͏

Slide 24

Slide 24 text

։ൃ؀ڥ • Atom, Visual Studio Code, WebStorm(IntelliJ)ͳͲ • ࠷ॳ͸VS CodeͰ࣮૷్͍͕ͯͨ͠த͔ΒIntelliJʹҠߦͨ͠ • IntelliJͷIDEαϙʔτ͸ѹ౗తʹศར • ڧྗͳίʔυิ׬ɺimportิ׬ͳͲɺࢀরݕࡧɺrename ͳͲ • ωΠςΟϒ։ൃग़਎ऀͱͯ͠͸IntelliJ͸ඞਢͱ͍͏ҹ৅

Slide 25

Slide 25 text

AndroidΤϯδχΞతͳRNײ૝ • ϚϧνϓϥοτϑΥʔϜϑϨʔϜϫʔΫ͸ਖ਼௚͋·Γ৴༻͠ ͍ͯͳ͔͕ͬͨɺ૝૾Ҏ্ʹΑ͘ग़དྷ͍ͯΔ • JSɺReactͰͷ࣮૷͸ࢥͬͨΑΓ΋ਏ͘ͳ͍ • جຊϑϩϯτٕज़ελοΫͳͷͰɺRNΛֶश͢Δ͜ͱͰ Web։ൃεΩϧͷΩϟονΞοϓʹ΋ͳΔ • ֶशίετ΋௿Ίɻଟ෼AndroidΤϯδχΞ͕iOSΛֶͿΑΓ ΋RNΛֶͿํ͕࣮຿ϨϕϧʹͳΔ·Ͱͷϋʔυϧ͸௿͍

Slide 26

Slide 26 text

͓·͚ • RNͷͨΊʹϞμϯͳJavaScriptΛΩϟον Ξοϓ͍ͨ͠ਓʹΦεεϝͷຊ