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
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
470
エラーって何種類あるの?
kajitack
5
290
GraphRAGの仕組みまるわかり
tosuri13
7
480
VS Code Update for GitHub Copilot
74th
1
300
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
110
関数型まつりレポート for JuliaTokai #22
antimon2
0
150
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
4
910
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
290
Java on Azure で LangGraph!
kohei3110
0
170
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
170
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
100
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
410
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
7
490
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Optimizing for Happiness
mojombo
379
70k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
700
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
33
5.9k
Why Our Code Smells
bkeepers
PRO
337
57k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
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