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
270
Vue でサクッと作る: Studio でのプロトタイピング開発
ryunosukeheaven
1
2.8k
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
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
260
Result型で“失敗”を型にするPHPコードの書き方
kajitack
4
560
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
260
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
140
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
1
600
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
530
ふつうの技術スタックでアート作品を作ってみる
akira888
0
310
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
220
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
620
RailsGirls IZUMO スポンサーLT
16bitidol
0
130
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
1
410
技術同人誌をMCP Serverにしてみた
74th
1
530
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Code Reviewing Like a Champion
maltzj
524
40k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
BBQ
matthewcrist
89
9.7k
Speed Design
sergeychernyshev
32
1k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Producing Creativity
orderedlist
PRO
346
40k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
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