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
860
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
すぐ試せる Raycastの推しポイント4選🚀 〜Raycast の AI 活用 & オマケ〜
ryunosukeheaven
0
290
Vue でサクッと作る: Studio でのプロトタイピング開発
ryunosukeheaven
1
2.9k
2023/05/18 STUDIO に GPT 入れてみた
ryunosukeheaven
2
3.8k
20201202_Port_Flutter_Firebase_Architecture
ryunosukeheaven
4
3.3k
Other Decks in Programming
See All in Programming
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
22
5.7k
AI時代のUIはどこへ行く?
yusukebe
18
8.8k
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
270
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
440
Namespace and Its Future
tagomoris
6
700
請來的 AI Agent 同事們在寫程式時,怎麼用 pytest 去除各種幻想與盲點
keitheis
0
120
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
taked137
0
160
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
10
3.9k
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
270
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
240
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.4k
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
510
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
How GitHub (no longer) Works
holman
315
140k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Into the Great Unknown - MozCon
thekraken
40
2k
A better future with KSS
kneath
239
17k
The Invisible Side of Design
smashingmag
301
51k
Side Projects
sachag
455
43k
Documentation Writing (for coders)
carmenintech
74
5k
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