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
Flutter入門
Search
Takayuki
May 22, 2020
Programming
1
1.5k
Flutter入門
flutter初心者でもわかりやすく、簡単なアプリを作るまでの話をします。例えば、UI宣言やホットリロードなど便利機能の使い方などもお話します。
Takayuki
May 22, 2020
Tweet
Share
More Decks by Takayuki
See All by Takayuki
Laravel × Clean Architecture
bumptakayuki
0
320
エンジニアのキャリア論
bumptakayuki
0
200
地方カンファレンス主催のススメ
bumptakayuki
1
210
Laravelで敢えて試す脆弱性のある書き方
bumptakayuki
2
1.1k
地方でのPHPエンジニア採用って実際どうなの?
bumptakayuki
0
670
沖縄観光、名物を一挙紹介!
bumptakayuki
2
670
Laravel ShiftでLaravelのバージョンアップしてみた話
bumptakayuki
1
2.7k
flutterでイベントアプリを作ってみた
bumptakayuki
0
160
オフショア開発の辛みと学んだ事
bumptakayuki
0
400
Other Decks in Programming
See All in Programming
速いWebフレームワークを作る
yusukebe
5
1.6k
開発チーム・開発組織の設計改善スキルの向上
masuda220
PRO
18
9.7k
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
410
オープンセミナー2025@広島LT技術ブログを続けるには
satoshi256kbyte
0
150
Honoアップデート 2025年夏
yusukebe
1
900
More Approvers for Greater OSS and Japan Community
tkikuc
1
110
兎に角、コードレビュー
mitohato14
0
170
rage against annotate_predecessor
junk0612
0
160
AWS発のAIエディタKiroを使ってみた
iriikeita
1
150
DockerからECSへ 〜 AWSの海に出る前に知っておきたいこと 〜
ota1022
5
1.9k
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
0
250
AIエージェント開発、DevOps and LLMOps
ymd65536
1
380
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Building Applications with DynamoDB
mza
96
6.6k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Rails Girls Zürich Keynote
gr2m
95
14k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Transcript
Flutter入門 鈴木孝之
"HFOEB ࣗݾհɾձࣾհ 'MVUUFSͱ 'MVUUFSΛֶ΅͏ͱࢥͬͨཧ༝ ։ൃͨ͠αʔϏε
ࣗݾհɾձࣾհ
1.ࣗݾհ ◆໊લ ླ ೭(Suzuki Takayuki) ※ಉಉ໊ଟͯ͘ࠔͬͯ·͢ɻɻɻ ◆ࣗݾհ ɾ1990ɺਆಸݝੜ·Εɻ ɾࣾձਓʹͳ͔ͬͯΒɺϓϩάϥϛϯάΛ࢝ΊΔɻ ɾ2015ʹϑϧεϐʔυʹೖࣾ͠ɺ2017ʹಠཱɻ
ɾϑϦʔϥϯεͰϦϞʔτϫʔΫΛͬͨޙʹԭೄͰىۀ ◆झຯ ίεϓϨɺԻָϥΠϒɺϚϥιϯେձʹग़Δɺٿ؍ઓ BDD(Ϗʔνۦಈ։ൃ)
1.ࣗݾհ
Copyright Re:Build.inc All Rights Reserved. 1.ձࣾհ ◆ձ໊ࣾ גࣜձࣾRe:Build ◆ॅॴ ԭೄݝಹࢢٱໜ2-2-2
λΠϜεϏϧ ◆ࣄۀ༰ ɾࣗࣾWEBαʔϏεͷاըɾ։ൃɻ ɾडୗ։ൃ ◆ࣾһ 7໊ ◆ΤϯδχΞͷಇ͖ํ ϦϞʔτϫʔΫՄೳͳࣗ༝ͳಇ͖ํΛਪͯ͠·͢ʂ
Copyright Re:Build.inc All Rights Reserved. 7 ɾαʔϏε໊ Tadoru https://tadoru.work/
ɾγεςϜ֓ཁ ΤϯδχΞಛԽܕͷ ϦϑΝϥϧ Ϋϥυιʔγϯά 1 ձࣾհ
Copyright Re:Build.inc All Rights Reserved. 8 ɾαʔϏε໊ Re:Build Boot Camp
https://rebuild-bootcamp.jp/ ɾ֓ཁ ԭೄͱٶ࡚Ͱʮ࣮ϨϕϧʯΛ ࢦ͢ํ͚ͷϓϩάϥϛϯάε Ϋʔϧ ɾ͏ٕज़ LaravelɺVue.jsͳͲ 1 ձࣾհ
Copyright Re:Build.inc All Rights Reserved. 9 ࣮Ϩϕϧ ॳ৺ऀ ॳڃऀ ํͷॳ৺ऀ͚ͷϓϩάϥ
ϛϯάεΫʔϧΛଔۀͨ͠ޙ ͷॳڃऀ͔Β࣮Ϩϕϧ·Ͱ ͷؒΛຒΊΔεΫʔϧ 1 ձࣾհ
'MVUUFSͱ
FlutterΛ༻͢ΔͱɺiOS͓Αͼ AndroidͰ୯Ұͷίʔυ͔ΒωΠςΟϒ ΞϓϦΛߏஙͰ͖·͢ɻ ͭ·ΓɺΫϩεϓϥοτϑΥʔϜ։ൃ ٕज़Ͱ͢ɻ ͜Ε୯ҰͷίʔυΛهड़Ͱ͖ΔςΫ ϊϩδʔͰ͋ΓɺΞϓϦέʔγϣϯ Android͓ΑͼiOSϓϥοτϑΥʔϜͷ ྆ํͰಈ࡞͠·͢ɻ Flutterͱ
https://note.com/heavenosk/n/n245b72973600
Benefits of Flutter ཧղ͍͢͠։ൃݴޠͰ ߏஙͰ͖Δ FlutterͰ༻͞ΕΔݴޠʮμʔτʯͱ ݺΕ·͢ɻ DartͱͱJavaScript ͷସݴޠͱͯ͠ొ͠ɺͦͷܗࣜ JavaScriptʹࣅ͍ͯ·͢ɻ
ϗοτϦϩʔυΛؚΉॊ ೈͳUI ϓϩάϥϜͷ༰Λมߋ͢Δͱɺ͙͢ ʹը໘ʹө͞Ε·͢ɻ ίϯύΠϧͤ ͣʹ։ൃ͍༷͢͠ʹͳ͍ͬͯ· ͢ɻ AOTίϯύΠϥʔͱJITί ϯύΠϥʔͷ྆ํΛ༻͠ ͨޮతͳ։ൃ ։ൃதɺΞϓϦέʔγϣϯͷ࣮ߦ ࣌ʹίϯύΠϧͯ͠ػցޠʹม͢ ΔJITͰϗοτϦϩʔυΛ༻Ͱ͖· ͢ɻϦϦʔεޙɺϏϧυ࣌ʹίϯύ Πϧ͞ΕΔAOTɺ࣮ߦʹඞཁͳෛ ՙͱ࣌ؒΛݮ͠·͢ɻ 1 2 3 https://udemy.benesse.co.jp/development/ios/flutter-intro.html
DartɺΣϒΞϓϦέʔγϣϯ։ൃͷͨΊʹGoogle͕։ൃͨ͠ϓ ϩάϥϛϯάݴޠͰ͢ɻ େنͳΞϓϦέʔγϣϯ/αʔϏε։ൃ ΛαϙʔτͰ͖ΔΫϥεϕʔεͷΦϒδΣΫτࢦݴޠɻ Dartݴޠͱʁ https://www.ossnews.jp/oss_info/Dart
JavaScriptͷସΛࢦ͢ DartɺʮJavaScriptݴޠͰղܾͰ͖ͳ͍ݴޠͷΛղܾ͢Δʯɺʮ༏Εͨύ ϑΥʔϚϯεʯɺʮେنͳϓϩδΣΫτͰͷ༻ʹ͑Δʯɺʮ҆શʯͷ؍͔Β ઃܭ͞Ε·ͨ͠ɻ https://www.ossnews.jp/oss_info/Dart Dartݴޠͱʁ
FlutterʹɺAndroid Studioɺ IntelliJ IDEAɺ͓ΑͼVisual Studio Code༻ͷެࣜ։ൃϓϥάΠϯ͕͋ Γ·͢ɻ ϓϥάΠϯΛ༻ͤͣʹ FlutterͷίϚϯυϥΠϯπʔϧΛ ༻͢Δ͜ͱͰ͖ΔͨΊɺ͓ؾʹ
ೖΓͷΤσΟλʔΛ༻ͯ͠Flutter ͰΞϓϦέʔγϣϯΛ։ൃͰ͖· ͢ɻ ։ൃπʔϧͷ༻ํ๏ https://employment.en-japan.com/engineerhub/entry/2019/08/06/103000
·ͣɺެࣜͷAndroid StudioΣϒαΠτ͔ΒAndroid StudioΛμϯϩʔυ͠·͢ɻ https://developer.android.com/studio Android StudioͷηοτΞοϓ https://employment.en-japan.com/engineerhub/entry/2019/08/06/103000
FlutterϓϥάΠϯΛΠϯετʔϧ͢Δ Android Studio༻ͷFlutterϓϥάΠϯΛΠϯ ετʔϧͯ͠༻͠·͢ɻ Android Studio ͷ[ઃఆ]͔Β[ϓϥάΠϯ]Λબ͠ɺը໘ͷ Լ෦ʹ͋Δ[ϦϙδτϦͷࢀর]Λબ͠· ͢ɻ ը໘ΛʮflutterʯͰݕࡧ͠ɺදࣔ͞ΕΔ
ʮFlutterʯΛબ͠ɺInstallϘλϯͰΠϯε τʔϧ͠·͢ɻ Android Studio Setup https://employment.en-japan.com/engineerhub/entry/2019/08/06/103000
ΠϯετʔϧޙɺAndroid StudioΛ࠶ ىಈ͍ͯͩ͘͠͞ɻ ࠶ىಈޙɺ Android Studioͷελʔτը໘ʹʮ৽ نFlutterϓϩδΣΫτΛ։࢝͢Δʯͷ ϝχϡʔ͕දࣔ͞ΕΔͷͰબ͠· ͢ɻ Android
Studio Setup https://employment.en-japan.com/engineerhub/entry/2019/08/06/103000
[৽نFlutterϓϩδΣΫτ]ը໘Ͱɺ [FlutterΞϓϦέʔγϣϯ]Λબ͠ɺ [࣍]ʹਐΈ·͢ɻ Android Studio Setup https://employment.en-japan.com/engineerhub/entry/2019/08/06/103000
Android StudioͷTools͔ΒʮAVD ManagerʯΛબ͠ɺAVDͷҰཡ ը໘͕දࣔ͞ΕͨΒɺࠨԼͷʮʴ Create Virtual DeviceʯΛબͼ· ͢ɻ࣍ͷը໘ͰҙͷHardware ΛબΜͰʮNextʯਐΈ·͢ɻ Android
Studio Setup https://employment.en-japan.com/engineerhub/entry/2019/08/06/103000
࠶ੜϘλϯΛΫϦοΫ͢Δ Android Studio Setup https://employment.en-japan.com/engineerhub/entry/2019/08/06/103000
ΞϓϦΛىಈ͢Δ Android Studio Setup https://employment.en-japan.com/engineerhub/entry/2019/08/06/103000
'MVUUFSΛֶ΅͏ͱࢥͬͨཧ༝
ΫϩεϓϥοτϑΥʔϜͷٕज़બఆΛ͢Δࣄ͕૿͑ͨ ɾ·ͣ؆୯ʹϓϩτλΠϓΛ ωΠςΟϒΞϓϦͰ࡞Γ͍ͨͰ͢ɻ ɾωΠςΟϒΞϓϦΛ࡞Γ͍ͨͷͰɺ Flutter͔React NativeͰ͓ئ͍Ͱ͖·ͤΜʁ ɾٕज़બఆ͢Δ্ͰͲΜͳͷ͔ࣗ ͓͖͍ͬͯͨɻ ͳͲ
ࠓ·Ͱͷ͕ࣗ։ൃܦݧͷ͋Δϑϩϯτٕज़
https://qiita.com/nskydiving/items/c13c949cc17c6f980a67 Development Language Development Environment Platform UI Application example Flutter
Google Dart Android Studio, IntelliJ IDEA, Visual Studio Code iOS, Android, Web, Windows, Mac, Linux Original UI Xianyu, Hamilton, Google Ads React Native Facebook JavaScript, TypeScript Nuclide, Visual Studio Code iOS, Android, Web(Mac, Windows) Native UI Instagram, Facebook, Facebook Ads, Skype, Tesla FlutterͱReact NativeͲͪΒ͕ྑ͍ͷͩΖ͏͔ʁ - ϑϨʔϜϫʔΫൺֱදΛݟ͍͚ͯͨͩΕ͔Δ௨Γɺ྆ऀඇৗʹΑ͘ࣅ͍ͯ·͢ɻ - React Native ͕طଘͷ Web ٕज़Λϕʔεʹઃܭ͞Ε͍ͯΔͷʹରͯ͠ɺFlutter શ͘ Ұ͔Βઃܭ͞Ε͍ͯ·͢ɻ
FlutterͱReact NativeͷUIͷҧ͍ - React Native ωΠςΟϒ UI Λ࠾༻͍ͯ͠·͕͢ɺFlutter ಠࣗ UI
Λ࠾༻͍ͯ͠·͢ɻ - ͭ·ΓɺReact Native ΞϓϦϓϥοτϑΥʔϜʹΑͬͯݟ͕ͨม ΘΓ·͕͢ɺFlutter ΞϓϦͲͷϓϥοτϑΥʔϜͰ౷Ұ͞Εͨݟ ͨʹͳΓ·͢ɻ https://qiita.com/nskydiving/items/c13c949cc17c6f980a67
FlutterͱReact NativeͷϦιʔε֬อʹ͍ͭͯ - ຊͩͱ·ͩReact NativeͷΤϯδχΞͷํ͕গ͚ͩ͠ଟ͍ҹɻ - ւ֎ͰΦϑγϣΞͰൃ͢Δʹͯ͠ɺFlutterΤϯδχΞ୯Ձ͕ߴ ͯ͘ίετײ͕߹Θͳ͍ɻ https://qiita.com/nskydiving/items/c13c949cc17c6f980a67
։ൃͨ͠αʔϏε
WWW.SITE2MAX.PRO Free PowerPoint & KeyNote Templates DEMO Event Search Event
Search
࣮͠Α͏ͱࢥͬͨཧ༝ Πϕϯτͷݕࡧ݅ ͕͋·Γͳ͍…
࣮͠Α͏ͱࢥͬͨཧ༝ ΞϓϦ൛͋·Γ͍͢ ͘ͳ͍ɻ
ΞϓϦέʔγϣϯ શମߏ https://connpass.com/ api/v1/event/ API connpass API͔Β ΠϕϯτใΛऔಘ
34 Ωʔϫʔυݕࡧ Ҭݕࡧ Mock ը໘ϞοΫ ଞͷݕࡧ࣮݅ தɻ
Connpass API༷ॻ ݕࡧ͍͔݅ͭ͋͘ΔͷͰɺҾ͖ଓ ͖ɺ࣮த https://connpass.com/about/api/
࣮༰ ΞϓϦͷએݴ
࣮༰ Connpass͔ΒͷऔಘใΛ Ұͭͷclassʹूɻ
࣮༰ Widget෦ɻݕࡧϑΟʔϧυͱυ ϩοϓμϯΛੜ
࣮༰ ݕࡧॲཧ෦ɻConnpass APIΛୟ ͍ͯऔಘɻ
·ͱΊ
࣮ͯ͠Έͨײ - ॻ͍ͨײ͡ɺTypeScriptʹࣅ͍ͯΔؾ͕͢Δɻ - WidgetΛ࡞Δͷ͕͍͠ɻ͜ΕΛ͓٬͞Μͷࢦఆͨ͠σβΠ ϯͯΔ࡞ۀͱ͔େมͦ͏ɻ - ֶशίετߴͦ͏͚ͩͲɺ׳ΕΕ͖ͬͪΓॻ͚ΔͷͰɺ ྑͦ͞͏ɻ