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
850
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
280
Vue でサクッと作る: Studio でのプロトタイピング開発
ryunosukeheaven
1
2.9k
2023/05/18 STUDIO に GPT 入れてみた
ryunosukeheaven
2
3.8k
20201202_Port_Flutter_Firebase_Architecture
ryunosukeheaven
4
3.2k
Other Decks in Programming
See All in Programming
中級グラフィックス入門~効率的なメッシュレット描画~
projectasura
3
1.8k
MCPで実現できる、Webサービス利用体験について
syumai
7
2.2k
GPUを計算資源として使おう!
primenumber
1
290
20250708_JAWS_opscdk
takuyay0ne
2
150
構造化・自動化・ガードレール - Vibe Coding実践記 -
tonegawa07
0
150
レトロゲームから学ぶ通信技術の歴史
kimkim0106
0
140
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.4k
TypeScriptでDXを上げろ! Hono編
yusukebe
3
880
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
720
What's new in AppKit on macOS 26
1024jp
0
180
AIに安心して任せるためにTypeScriptで一意な型を作ろう
arfes0e2b3c
0
270
LLMは麻雀を知らなすぎるから俺が教育してやる
po3rin
2
1.3k
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Why Our Code Smells
bkeepers
PRO
337
57k
Adopting Sorbet at Scale
ufuk
77
9.5k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
Code Review Best Practice
trishagee
69
19k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Code Reviewing Like a Champion
maltzj
524
40k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Automating Front-end Workflow
addyosmani
1370
200k
Documentation Writing (for coders)
carmenintech
72
4.9k
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