Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

ࣗݾ঺հ • ౉ᬒ ཾ೭հʢΘͨͳ΂ɹΓΎ͏ͷ͚͢ʣ • Twitter - @HeavenOSK • ࢖༻ݴޠɿDart/Swift/Kotlin • FlutterΤϯδχΞʢΤψ࣍ݩגࣜձࣾʣ

Slide 3

Slide 3 text

ຊ୊

Slide 4

Slide 4 text

High-Order Components ͬͯԿʁ

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

1.όʔδϣϯ൪߸ͷߦ Widget _buildVersionNumberRow() { return Container( height: 70.0, child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ 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, ), ), ), ); }

Slide 13

Slide 13 text

2.ΞϓϦ࿈ܞͷߦ Widget _buildApplicationConnectionRow() { return Container( height: 70.0, child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ 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, ), ), ), ); } Մม

Slide 14

Slide 14 text

Մม෦෼͸੺࿮಺͚ͩ

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

• Container, Row, Text͸ڞ௨ • ӈଆͷ෦඼͚͕ͩՄมͰʮԿ͔ͷWidgetʯ͕ೖΔ • FlutterͰ͸ʮ͢΂͕ͯWidgetʯ • ͭ·Γӈଆʹ͸ʮWidgetΫϥεͷԿ͔ʯ͕ೖΔ • (WidgetΛδΣωϦοΫͳίϯϙʔωϯτͷܕͱߟ͑Δ) ϙΠϯτ

Slide 17

Slide 17 text

֤ߦΛग़ྗ͢ΔHOC Widget _buildSettingsListItem(String label, {Widget rightSideWidget}) { final children = List(); 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, ), ), ), ); }

Slide 18

Slide 18 text

ݺͼग़͠ଆͷίʔυ _buildSettingsList() { return ListView( children: [ _buildSettingsListItem( 'ΞϓϦ࿈ܞ', rightSideWidget: Switch( value: false, onChanged: (currentValue) {}, ), ), _buildSettingsListItem( 'όʔδϣϯ', rightSideWidget: Text( '1.0.0', style: _InformationTextStyle, ), ), ], ); }

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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