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

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

Reactのコンポーネントを再利用するテクニック「High-Order Components(HOC)」をFlutterで使う方法を簡単な例で説明します。

D8f039b7c0bdfdc1f28dd9f4db81b1be?s=128

Ryunosuke Watanabe

January 30, 2019
Tweet

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