React Nativeのレイアウトエンジン YogaでFlexible box layoutレイアウトを作る / yoga-with-sketch

[訂正] Flexbox => Flexible box layout

[Yoga Layout | Playground](https://yogalayout.com/playground/)

最高に役に立たないJSONからSketchファイルを作るリポジトリです。
[mottox2/json-sketchapp: Sketch Plugin: Convert JSON file to Sketch file](https://github.com/mottox2/json-sketchapp)

Transcript

1. React NativeͷϨΠΞ΢τΤϯδϯ YogaͰFlexboxϨΠΞ΢τΛ࡞Δ 2018.06.26 Roppongi.js #4 - @mottox2
2. @mottox2 • React, Ruby on RailsΛத৺ʹWebαʔϏε։ൃ͍ͯ͠·͢ • ReactNative΋৭ʑݴΘΕ͍ͯΔ͚Ͳ޷͖Ͱ͢ • UI EngineeringʹڵຯΞϦ • ϒϩά΍ͬͯ·͢(esa.io + note.mu + GatsbyJS) => mottox2.com Freelance web engineer Yuki Takemoto
3. ࠓ೔ͷ࿩ • Yogaͷ࿩ • YogaͷNodeͱLayoutʹ͍ͭͯ • ࣮ફ: JSON to Sketch.app
4. 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࣮૷ͷΫϩεϓϥοτϑΥʔϜϨΠΞ΢τΤϯδϯ
5. Yoga Playground Playground - https://yogalayout.com/playground
6. Usage Docs Standalone example - https://yogalayout.com/getting-started/standalone
7. Yogaͷ֓೦ ~Node~ • ෯΍ߴ͞ɺFlexboxͷଐੑΛ࣋ͬͨΦϒδΣΫτ • `insertChild(childNode)`Ͱ਌ࢠؔ܎Λ࣋ͯΔɻ`getChild(index)` ͰࢠΛऔಘग़དྷ Δɻ • ਌Nodeʹରͯ͠ `calculateLayout()` Λ࣮ߦ͢ΔͱࢠϊʔυΛؚΊͨϨΠΞ΢τΛܭ ࢉͯ͘͠ΕΔɻ
8. Yogaͷ֓೦ ~Layout~ • left, right, top, bottom, width, heightΛ࣋ͭΦϒδΣΫτ • Node.getComputedLayout΍Node.getComputedXXX(ex. Left, Width)ؔ਺Ͱऔಘ Ͱ͖Δɻ • calculateLayoutΛ࣮ߦ͢Δ·ͰLayout͸औಘͰ͖ͳ͍ɻ(JSͷ৔߹NaN͕ฦΔ)
9. ࣮ફ: JSON to Sketch.app
10. 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
11. airbnb/React Sketch.app ࢀߟ • JSX͔ΒSketchϑΝΠϧΛੜ੒Ͱ͖ΔϥΠϒϥϦɻ಺෦ͰYogaΛ࢖͍ͬͯΔɻ • http://airbnb.io/react-sketchapp/
12. STEP1: JSONܗࣜΛఆٛ
 STEP2: JSON͔ΒNode TreeΛ࡞ΔॲཧΛॻ͘ STEP3: Node TreeͱJSONΛ΋ͱʹSketchϑΝΠϧΛ࡞ΔॲཧΛॻ͘ ࣮ફ: JSON to Sketch.app
13. ·ͣ͸ɺ࣍ͷΑ͏ͳJSONΛSketchϑΝΠϧʹஔ͖׵͑Δ͜ͱΛߟ͍͑ͯ͘ɻ දݱྗ͕௿͍ܗࣜͰ͋Δ͜ͱʹ͸໨ΛͭͿ͍ͬͯͩ͘͞ JSONΛఆٛ
14. JSONΛNode Treeʹͯ͠ɺ ϨΠΞ΢τܭࢉΛߦ͏ɻ Node TreeΛ࡞Δ
15. SketchAPIͰ૊Έཱͯ SketchAPIΛ࢖ͬͯɺ ϨΠϠʔΛ࡞͍ͬͯ͘ɻ
16. DEMO https://github.com/mottox2/json-sketchapp
17. • ϨΠΞ΢τܭࢉ͕ͳ͍ͷͰɺඇৗʹγϯϓϧʹίʔυ͕͔͚Δɻa • SketchAPIͷ࢖༻ײΛ೺Ѳ͢Δͷ͕Ұ൪͔͔࣌ؒͬͨɻ • JSXͷදݱྗͷߴ͞Λࢥ͍ͬͨ͠ɻjsonnetͷΑ͏ͳJSON֦ுه๏Λ࢖͏΂͖ ͩͬͨɻ • ࠓճͷίʔυ: https://github.com/mottox2/json-sketchapp • ࠓճͷσϞͰ࡞ͬͨJSON to Sketch.app͸࢖͍Έ͕ͪશ͘ͳ͍ɻࠔͬͨɻ σϞͷ·ͱΊ
18. • JSX΍YAML΍JSONΛಥͬࠐΜͰYogaͰLayoutΛܭࢉ • YogaͰܭࢉͨ͠΋ͷΛSketch΍PowerPointʹग़ྗ͢Δ • ༻్ʹϋϚΕ͹௒ศརϥΠϒϥϦͱͯ͠࢖͑Δa • ͨͩ͠׆͔ͤΔػձ͸͋·Γͳ͍ɻa Yoga͸Կʹ࢖͑Δͷ͔ʁ
19. • ࣗલͰϨΠΞ΢τܭࢉ͸࣮૷ͨ͘͠ͳ͍ͷͰɺFacebookͷ͍͢͝ਓ͕ͨͪ࡞ͬͨ ࢓૊Έʹ৐͔ͬΔͱ͍͍ͱࢥ͏ɻa • JSXͷํ͕දݱྗ͕ߴ͍ϑΥʔϚοτͳͷͰɺJSX to XXXΈ͍ͨͳ΋ͷΛ࡞Δ࣌ ʹYogaΛ࢖͑͹ʢͦΕͳΓʹʣ؆୯ʹͰ͖Δ͔΋͠Εͳ͍ɻa • ͱΓ͋͑ͣYoga Playground͞ΘͬͯΈͯཉ͍͠ɻΑ͘ग़དྷͯΔɻ • https://yogalayout.com/playground ͋ • cross-platform UIͱ͍͏จ຺Ͱairbnb/Lona͕ؾʹͳ͍ͬͯΔɻ ؾ͖ͮ
20. ͋Γ͕ͱ͏͍͟͝·ͨ͠