High-Order Components を使って 再利用性が高いコードを書く

Transcript

1. High-Order Components Λ࢖ͬͯ ࠶ར༻ੑ͕ߴ͍ίʔυΛॻ͘ ౉ᬒ ཾ೭հ @HeavenOSK

2. ࣗݾ঺հ • ౉ᬒ ཾ೭հʢΘͨͳ΂ɹΓΎ͏ͷ͚͢ʣ • Twitter - @HeavenOSK • ࢖༻ݴޠɿDart/Swift/Kotlin

   • FlutterΤϯδχΞʢΤψ࣍ݩגࣜձࣾʣ

3. ຊ୊

4. High-Order Components ͬͯԿʁ

5. High-Order Components(HOC) • Reactʹ͓͚ΔɺίϯϙʔωϯτΛ࠶ར༻͢ΔͨΊͷςΫ χοΫ • https://reactjs.org/docs/higher-order-components.html • ίϯϙʔωϯτΛऔಘͯ͠ɺ৽͍͠ίϯϙʔωϯτΛฦ͢ ؔ਺

6. Flutter͸ReactʹӨڹΛड͚͍ͯΔ • Flutterͷઃܭ͸ίϯϙʔωϯτࢦ޲ͰɺReactʹӨڹΛड ͚͍ͯΔ • https://flutter.io/docs/resources/faq#does-flutter-come-with-a- framework • Reactͷ։ൃςΫχοΫ͸ɺFlutterͰ΋ద༻Ͱ͖Δ৔߹͕͋Δ •

   Redux…΄͔ • High-Order Components - HOC΋ɺFlutterͰద༻Ͱ͖Δ

7. HOCΛͲ͏࢖͑͹͍͍Μ ͩΖ͏

8. ը໘ͷྫΛݟͳ͕Βߟ͑ͯΈ ·͢

9. ը໘࢓༷ • ઃఆը໘ • Ϧετܗࣜ • ϦετΞΠςϜҰͭʹର ͯ͠ɺҰͭͷઃఆ߲໨

10. ը໘࢓༷ʢৄࡉʣ • શମ͸Column͔ListView • ֤ߦ • ࠨଆ͸Textʢڞ௨ͷελΠ ϧʣ • ӈଆ͸৭ʑ

    • ButtonɺSwitchɺText

11. HOCΛ࢖Θͣʹ࣮૷ͨ͠ ίʔυΛݟͯΈ·͢ https://github.com/HeavenOSK/flutter_high_order_components/ commit/d3a8f61617e87f3a81accc2b9fa414f3e0f0c3cf

12. 1.όʔδϣϯ൪߸ͷߦ Widget _buildVersionNumberRow() { return Container( height: 70.0, child: Row(

    mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[ Text( 'όʔδϣϯ', style: _LabelTextStyle, ), Text( '1.0.0', style: _InformationTextStyle, ), ], ), padding: EdgeInsets.symmetric(horizontal: 12.0), decoration: BoxDecoration( border: Border( bottom: BorderSide( width: 1.0, color: _BorderColor, ), ), ), ); }

13. 2.ΞϓϦ࿈ܞͷߦ Widget _buildApplicationConnectionRow() { return Container( height: 70.0, child: Row(

    mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[ Text( 'ΞϓϦ࿈ܞ', style: _LabelTextStyle, ), Switch( value: false, onChanged: (currentValue) {}, ), ], ), padding: EdgeInsets.symmetric(horizontal: 12.0), decoration: BoxDecoration( border: Border( bottom: BorderSide( width: 1.0, color: _BorderColor, ), ), ), ); } Մม

14. Մม෦෼͸੺࿮಺͚ͩ

15. HOCͰڞ௨Խͯ͠ΈΔ https://github.com/HeavenOSK/flutter_high_order_components

16. • Container, Row, Text͸ڞ௨ • ӈଆͷ෦඼͚͕ͩՄมͰʮԿ͔ͷWidgetʯ͕ೖΔ • FlutterͰ͸ʮ͢΂͕ͯWidgetʯ • ͭ·Γӈଆʹ͸ʮWidgetΫϥεͷԿ͔ʯ͕ೖΔ

    • (WidgetΛδΣωϦοΫͳίϯϙʔωϯτͷܕͱߟ͑Δ) ϙΠϯτ

17. ֤ߦΛग़ྗ͢ΔHOC Widget _buildSettingsListItem(String label, {Widget rightSideWidget}) { final children =

    List<Widget>(); children.add( Text(label, style: _LabelTextStyle), ); if (rightSideWidget != null) { children.add(rightSideWidget); } return Container( height: 70.0, child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: children, ), padding: EdgeInsets.symmetric(horizontal: 12.0), decoration: BoxDecoration( border: Border( bottom: BorderSide( width: 1.0, color: _BorderColor, ), ), ), ); }

18. ݺͼग़͠ଆͷίʔυ _buildSettingsList() { return ListView( children: <Widget>[ _buildSettingsListItem( 'ΞϓϦ࿈ܞ', rightSideWidget:

    Switch( value: false, onChanged: (currentValue) {}, ), ), _buildSettingsListItem( 'όʔδϣϯ', rightSideWidget: Text( '1.0.0', style: _InformationTextStyle, ), ), ], ); }

19. HOCʹͨ݁͠Ռ • ίʔυͷ΄ͱΜͲͷ෦෼Λڞ௨ԽͰ͖ͨ • ίʔυ͕ಡΈ΍͘͢ͳͬͨ • Ͳͷ෦෼͕ڞ௨෦෼͔ɺՄม෦෼͔Ұ໨Ͱ෼͔Δ • →ίʔυͷϝϯςφϯε͕͠΍͍͢

20. ·ͱΊ • Flutterʹ͓͚ΔHOC͸ʮWidgetΛऔಘͯ͠ɺ৽͍͠WidgetΛ ฦؔ͢਺ʯ • Flutterͷඪ४ϥΠϒϥϦͰ͸ɺHOC͸Α͘࢖ΘΕ͍ͯΔ • Container΍ColumnͳͲͷίϯετϥΫλ΋ɺchild/ childrenҾ਺ͰWidgetΛऔಘͯ͠ɺ৽ͨͳWidgetΛฦ͢ HOC

    • ϥΠϒϥϦ࣮૷͚ͩͰͳ͘ɺΞϓϦͷϓϩάϥϜͰ΋࢖ͬͯ ͍͖͍ͨ

21. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝ ·ͨ͠ ౉ᬒ ཾ೭հ @HeavenOSK