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

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

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