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
エンジニアのキャリア論
bumptakayuki
0
160
地方カンファレンス主催のススメ
bumptakayuki
1
190
Laravelで敢えて試す脆弱性のある書き方
bumptakayuki
1
960
地方でのPHPエンジニア採用って実際どうなの?
bumptakayuki
0
600
沖縄観光、名物を一挙紹介!
bumptakayuki
2
600
Laravel ShiftでLaravelのバージョンアップしてみた話
bumptakayuki
1
2.3k
flutterでイベントアプリを作ってみた
bumptakayuki
0
140
オフショア開発の辛みと学んだ事
bumptakayuki
0
370
ChatGPTにStripeのサンプルコードを書かせてみた
bumptakayuki
1
210
Other Decks in Programming
See All in Programming
本当だってば!俺もTRICK 2022に入賞してたんだってば!
jinroq
0
270
PsySHから紐解くREPLの仕組み
muno92
PRO
1
530
DomainException と Result 型で作る型安全なエラーハンドリング
karszawa
0
820
Day0 初心者向けワークショップ実践!ソフトウェアテストの第一歩
satohiroyuki
0
500
複数ドメインに散らばってしまった画像…! 運用中のPHPアプリに後からCDNを導入する…!
suguruooki
0
450
goにおける コネクションプールの仕組み を軽く掘って見た
aronokuyama
0
150
SQL Server ベクトル検索
odashinsuke
0
130
Develop Faster With FrankenPHP
dunglas
2
2.8k
DataStoreをテストする
mkeeda
0
220
マルチアカウント環境での、そこまでがんばらない RI/SP 運用設計
wa6sn
0
650
ローコードサービスの進化のためのモノレポ移行
taro28
1
350
海外のアプリで見かけたかっこいいTransitionを真似てみる
shogotakasaki
1
130
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.3k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Scaling GitHub
holman
459
140k
Rails Girls Zürich Keynote
gr2m
94
13k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
The World Runs on Bad Software
bkeepers
PRO
67
11k
It's Worth the Effort
3n
184
28k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
RailsConf 2023
tenderlove
29
1k
Optimising Largest Contentful Paint
csswizardry
35
3.2k
Automating Front-end Workflow
addyosmani
1369
200k
Why Our Code Smells
bkeepers
PRO
336
57k
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Λ࡞Δͷ͕͍͠ɻ͜ΕΛ͓٬͞Μͷࢦఆͨ͠σβΠ ϯͯΔ࡞ۀͱ͔େมͦ͏ɻ - ֶशίετߴͦ͏͚ͩͲɺ׳ΕΕ͖ͬͪΓॻ͚ΔͷͰɺ ྑͦ͞͏ɻ