React NativeͷϨΠΞ΢τΤϯδϯ YogaͰFlexboxϨΠΞ΢τΛ࡞Δ 2018.06.26 Roppongi.js #4 - @mottox2

@mottox2 • React, Ruby on RailsΛத৺ʹWebαʔϏε։ൃ͍ͯ͠·͢ • ReactNative΋৭ʑݴΘΕ͍ͯΔ͚Ͳ޷͖Ͱ͢ • UI EngineeringʹڵຯΞϦ • ϒϩά΍ͬͯ·͢(esa.io + note.mu + GatsbyJS) => mottox2.com Freelance web engineer Yuki Takemoto

ࠓ೔ͷ࿩ • Yogaͷ࿩ • YogaͷNodeͱLayoutʹ͍ͭͯ • ࣮ફ: JSON to Sketch.app

Yoga ͱ͸ʁ Yoga is a cross platform layout engine implementing Flexbox • https://yogalayout.com/͋ • Facebook੡ • FlexboxϥΠΫͳAPIΛ࣋ͬͨϨΠΞ΢τΤϯδϯ • React NativeɺComponent Kit (iOS)ɺLitho (Android)ͳͲͷϥΠϒϥϦͷ಺෦Ͱ࢖ ΘΕ͍ͯΔɻa͋ • ୯ମͰ΋࢖͏͜ͱ͕Ͱ͖Δɻࠓճ͸JS୯ମͰѻ͍͖ͬͯ·͢ɻ Yoga͸Flexbox࣮૷ͷΫϩεϓϥοτϑΥʔϜϨΠΞ΢τΤϯδϯ

Yoga Playground Playground - https://yogalayout.com/playground

Usage Docs Standalone example - https://yogalayout.com/getting-started/standalone

Yogaͷ֓೦ ~Node~ • ෯΍ߴ͞ɺFlexboxͷଐੑΛ࣋ͬͨΦϒδΣΫτ • `insertChild(childNode)`Ͱ਌ࢠؔ܎Λ࣋ͯΔɻ`getChild(index)` ͰࢠΛऔಘग़དྷ Δɻ • ਌Nodeʹରͯ͠ `calculateLayout()` Λ࣮ߦ͢ΔͱࢠϊʔυΛؚΊͨϨΠΞ΢τΛܭ ࢉͯ͘͠ΕΔɻ

Yogaͷ֓೦ ~Layout~ • left, right, top, bottom, width, heightΛ࣋ͭΦϒδΣΫτ • Node.getComputedLayout΍Node.getComputedXXX(ex. Left, Width)ؔ਺Ͱऔಘ Ͱ͖Δɻ • calculateLayoutΛ࣮ߦ͢Δ·ͰLayout͸औಘͰ͖ͳ͍ɻ(JSͷ৔߹NaN͕ฦΔ)

࣮ફ: JSON to Sketch.app

YogaͰܭࢉͨ͠ϨΠΞ΢τΛݩʹSketchϑΝΠϧΛ࡞ͬͯΈΔɻ
 JSX to Sketchͷ࣮૷ͱͯ͠͸طʹReact Sketch.app͕͋ΔͷͰɺࠓճ͸JSON to Sketchͷ࣮૷ΛਐΊ͍ͯ͘ɻͭ·Γ׬શྼԽ൛ͷ࠶ൃ໌Ͱ͢ɻ ࣮ફ: JSON to Sketch.app JSON file Yoga Node Tree Sketch file 1 2 3

airbnb/React Sketch.app ࢀߟ • JSX͔ΒSketchϑΝΠϧΛੜ੒Ͱ͖ΔϥΠϒϥϦɻ಺෦ͰYogaΛ࢖͍ͬͯΔɻ • http://airbnb.io/react-sketchapp/

STEP1: JSONܗࣜΛఆٛ
 STEP2: JSON͔ΒNode TreeΛ࡞ΔॲཧΛॻ͘ STEP3: Node TreeͱJSONΛ΋ͱʹSketchϑΝΠϧΛ࡞ΔॲཧΛॻ͘ ࣮ફ: JSON to Sketch.app

·ͣ͸ɺ࣍ͷΑ͏ͳJSONΛSketchϑΝΠϧʹஔ͖׵͑Δ͜ͱΛߟ͍͑ͯ͘ɻ දݱྗ͕௿͍ܗࣜͰ͋Δ͜ͱʹ͸໨ΛͭͿ͍ͬͯͩ͘͞ JSONΛఆٛ

JSONΛNode Treeʹͯ͠ɺ ϨΠΞ΢τܭࢉΛߦ͏ɻ Node TreeΛ࡞Δ

SketchAPIͰ૊Έཱͯ SketchAPIΛ࢖ͬͯɺ ϨΠϠʔΛ࡞͍ͬͯ͘ɻ

DEMO https://github.com/mottox2/json-sketchapp

• ϨΠΞ΢τܭࢉ͕ͳ͍ͷͰɺඇৗʹγϯϓϧʹίʔυ͕͔͚Δɻa • SketchAPIͷ࢖༻ײΛ೺Ѳ͢Δͷ͕Ұ൪͔͔࣌ؒͬͨɻ • JSXͷදݱྗͷߴ͞Λࢥ͍ͬͨ͠ɻjsonnetͷΑ͏ͳJSON֦ுه๏Λ࢖͏΂͖ ͩͬͨɻ • ࠓճͷίʔυ: https://github.com/mottox2/json-sketchapp • ࠓճͷσϞͰ࡞ͬͨJSON to Sketch.app͸࢖͍Έ͕ͪશ͘ͳ͍ɻࠔͬͨɻ σϞͷ·ͱΊ

• JSX΍YAML΍JSONΛಥͬࠐΜͰYogaͰLayoutΛܭࢉ • YogaͰܭࢉͨ͠΋ͷΛSketch΍PowerPointʹग़ྗ͢Δ • ༻్ʹϋϚΕ͹௒ศརϥΠϒϥϦͱͯ͠࢖͑Δa • ͨͩ͠׆͔ͤΔػձ͸͋·Γͳ͍ɻa Yoga͸Կʹ࢖͑Δͷ͔ʁ

• ࣗલͰϨΠΞ΢τܭࢉ͸࣮૷ͨ͘͠ͳ͍ͷͰɺFacebookͷ͍͢͝ਓ͕ͨͪ࡞ͬͨ ࢓૊Έʹ৐͔ͬΔͱ͍͍ͱࢥ͏ɻa • JSXͷํ͕දݱྗ͕ߴ͍ϑΥʔϚοτͳͷͰɺJSX to XXXΈ͍ͨͳ΋ͷΛ࡞Δ࣌ ʹYogaΛ࢖͑͹ʢͦΕͳΓʹʣ؆୯ʹͰ͖Δ͔΋͠Εͳ͍ɻa • ͱΓ͋͑ͣYoga Playground͞ΘͬͯΈͯཉ͍͠ɻΑ͘ग़དྷͯΔɻ • https://yogalayout.com/playground ͋ • cross-platform UIͱ͍͏จ຺Ͱairbnb/Lona͕ؾʹͳ͍ͬͯΔɻ ؾ͖ͮ

͋Γ͕ͱ͏͍͟͝·ͨ͠