Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
High-Order Components を使って 再利用性が高いコードを書く
Search
Ryunosuke Watanabe
January 30, 2019
Programming
4
810
High-Order Components を使って 再利用性が高いコードを書く
Reactのコンポーネントを再利用するテクニック「High-Order Components(HOC)」をFlutterで使う方法を簡単な例で説明します。
Ryunosuke Watanabe
January 30, 2019
Tweet
Share
More Decks by Ryunosuke Watanabe
See All by Ryunosuke Watanabe
Vue でサクッと作る: Studio でのプロトタイピング開発
ryunosukeheaven
1
1.3k
2022/05/18 STUDIO に GPT 入れてみた
ryunosukeheaven
1
3.6k
20201202_Port_Flutter_Firebase_Architecture
ryunosukeheaven
4
3.1k
Other Decks in Programming
See All in Programming
組織に自動テストを書く文化を根付かせる戦略(2024秋版) / Building Automated Test Culture 2024 Autumn Edition
twada
PRO
9
3.9k
ActiveRecordの力でDBのメタデータを迅速に解析する
lnit
5
2.1k
watsonx.ai Dojo #3 プロンプトエンジニアリング入門
oniak3ibm
PRO
0
460
レイトレ合宿10 レンダラー紹介 / Renderer Introduction, Ray Tracing Camp 10
shocker_0x15
0
640
Jakarta EE as Seen Trough the Lens of the ASF
ivargrimstad
0
950
レガシーな Android アプリのリアーキテクチャ戦略
oidy
1
160
モジュラモノリス、その前に / Modular monolith, before that
euglena1215
8
750
Golang と Erlang
taiyow
7
1.8k
20241004 モノタロウ式~ドメインモデリングとリアーキテクチャ
monotaro
PRO
2
700
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
1.3k
Cloud Adoption Framework にみる組織とクラウド導入戦略
tomokusaba
2
690
Vaporモードを大規模サービスに最速導入して学びを共有する
kazukishimamoto
3
3.2k
Featured
See All Featured
Speed Design
sergeychernyshev
23
550
Embracing the Ebb and Flow
colly
84
4.4k
BBQ
matthewcrist
85
9.2k
The Cost Of JavaScript in 2023
addyosmani
44
5.9k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
Writing Fast Ruby
sferik
626
60k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
43
6.6k
Optimising Largest Contentful Paint
csswizardry
31
2.9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
7.7k
Unsuck your backbone
ammeep
668
57k
Transcript
High-Order Components Λͬͯ ࠶ར༻ੑ͕ߴ͍ίʔυΛॻ͘ ᬒ ཾ೭հ @HeavenOSK
ࣗݾհ • ᬒ ཾ೭հʢΘͨͳɹΓΎ͏ͷ͚͢ʣ • Twitter - @HeavenOSK • ༻ݴޠɿDart/Swift/Kotlin
• FlutterΤϯδχΞʢΤψ࣍ݩגࣜձࣾʣ
ຊ
High-Order Components ͬͯԿʁ
High-Order Components(HOC) • Reactʹ͓͚ΔɺίϯϙʔωϯτΛ࠶ར༻͢ΔͨΊͷςΫ χοΫ • https://reactjs.org/docs/higher-order-components.html • ίϯϙʔωϯτΛऔಘͯ͠ɺ৽͍͠ίϯϙʔωϯτΛฦ͢ ؔ
FlutterReactʹӨڹΛड͚͍ͯΔ • FlutterͷઃܭίϯϙʔωϯτࢦͰɺReactʹӨڹΛड ͚͍ͯΔ • https://flutter.io/docs/resources/faq#does-flutter-come-with-a- framework • Reactͷ։ൃςΫχοΫɺFlutterͰద༻Ͱ͖Δ߹͕͋Δ •
Redux…΄͔ • High-Order Components - HOCɺFlutterͰద༻Ͱ͖Δ
HOCΛͲ͏͍͍͑Μ ͩΖ͏
ը໘ͷྫΛݟͳ͕Βߟ͑ͯΈ ·͢
ը໘༷ • ઃఆը໘ • Ϧετܗࣜ • ϦετΞΠςϜҰͭʹର ͯ͠ɺҰͭͷઃఆ߲
ը໘༷ʢৄࡉʣ • શମColumn͔ListView • ֤ߦ • ࠨଆTextʢڞ௨ͷελΠ ϧʣ • ӈଆ৭ʑ
• ButtonɺSwitchɺText
HOCΛΘͣʹ࣮ͨ͠ ίʔυΛݟͯΈ·͢ https://github.com/HeavenOSK/flutter_high_order_components/ commit/d3a8f61617e87f3a81accc2b9fa414f3e0f0c3cf
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, ), ), ), ); }
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, ), ), ), ); } Մม
Մม෦͚ͩ
HOCͰڞ௨Խͯ͠ΈΔ https://github.com/HeavenOSK/flutter_high_order_components
• Container, Row, Textڞ௨ • ӈଆͷ෦͚͕ͩՄมͰʮԿ͔ͷWidgetʯ͕ೖΔ • FlutterͰʮ͕ͯ͢Widgetʯ • ͭ·ΓӈଆʹʮWidgetΫϥεͷԿ͔ʯ͕ೖΔ
• (WidgetΛδΣωϦοΫͳίϯϙʔωϯτͷܕͱߟ͑Δ) ϙΠϯτ
֤ߦΛग़ྗ͢Δ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, ), ), ), ); }
ݺͼग़͠ଆͷίʔυ _buildSettingsList() { return ListView( children: <Widget>[ _buildSettingsListItem( 'ΞϓϦ࿈ܞ', rightSideWidget:
Switch( value: false, onChanged: (currentValue) {}, ), ), _buildSettingsListItem( 'όʔδϣϯ', rightSideWidget: Text( '1.0.0', style: _InformationTextStyle, ), ), ], ); }
HOCʹͨ݁͠Ռ • ίʔυͷ΄ͱΜͲͷ෦Λڞ௨ԽͰ͖ͨ • ίʔυ͕ಡΈ͘͢ͳͬͨ • Ͳͷ෦͕ڞ௨෦͔ɺՄม෦͔ҰͰ͔Δ • →ίʔυͷϝϯςφϯε͕͍͢͠
·ͱΊ • Flutterʹ͓͚ΔHOCʮWidgetΛऔಘͯ͠ɺ৽͍͠WidgetΛ ฦؔ͢ʯ • Flutterͷඪ४ϥΠϒϥϦͰɺHOCΑ͘ΘΕ͍ͯΔ • ContainerColumnͳͲͷίϯετϥΫλɺchild/ childrenҾͰWidgetΛऔಘͯ͠ɺ৽ͨͳWidgetΛฦ͢ HOC
• ϥΠϒϥϦ࣮͚ͩͰͳ͘ɺΞϓϦͷϓϩάϥϜͰͬͯ ͍͖͍ͨ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝ ·ͨ͠ ᬒ ཾ೭հ @HeavenOSK