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.4k
Flutter入門
flutter初心者でもわかりやすく、簡単なアプリを作るまでの話をします。例えば、UI宣言やホットリロードなど便利機能の使い方などもお話します。
Takayuki
May 22, 2020
Tweet
Share
More Decks by Takayuki
See All by Takayuki
エンジニアのキャリア論
bumptakayuki
0
140
地方カンファレンス主催のススメ
bumptakayuki
1
170
Laravelで敢えて試す脆弱性のある書き方
bumptakayuki
1
920
地方でのPHPエンジニア採用って実際どうなの?
bumptakayuki
0
580
沖縄観光、名物を一挙紹介!
bumptakayuki
2
580
Laravel ShiftでLaravelのバージョンアップしてみた話
bumptakayuki
1
2.2k
flutterでイベントアプリを作ってみた
bumptakayuki
0
130
オフショア開発の辛みと学んだ事
bumptakayuki
0
360
ChatGPTにStripeのサンプルコードを書かせてみた
bumptakayuki
1
190
Other Decks in Programming
See All in Programming
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
7
4.1k
Datadog Workflow Automation で圧倒的価値提供
showwin
1
100
負債になりにくいCSSをデザイナとつくるには?
fsubal
10
2.5k
Unity Android XR入門
sakutama_11
0
170
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
890
ML.NETで始める機械学習
ymd65536
0
220
From the Wild into the Clouds - Laravel Meetup Talk
neverything
0
100
1年目の私に伝えたい!テストコードを怖がらなくなるためのヒント/Tips for not being afraid of test code
push_gawa
1
490
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
14
4.5k
仕様変更に耐えるための"今の"DRY原則を考える
mkmk884
9
3k
昭和の職場からアジャイルの世界へ
kumagoro95
1
420
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
820
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Producing Creativity
orderedlist
PRO
344
40k
4 Signs Your Business is Dying
shpigford
182
22k
Designing for Performance
lara
604
68k
Faster Mobile Websites
deanohume
306
31k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
The Pragmatic Product Professional
lauravandoore
32
6.4k
A Philosophy of Restraint
colly
203
16k
How GitHub (no longer) Works
holman
314
140k
A Modern Web Designer's Workflow
chriscoyier
693
190k
How to Think Like a Performance Engineer
csswizardry
22
1.4k
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Λ࡞Δͷ͕͍͠ɻ͜ΕΛ͓٬͞Μͷࢦఆͨ͠σβΠ ϯͯΔ࡞ۀͱ͔େมͦ͏ɻ - ֶशίετߴͦ͏͚ͩͲɺ׳ΕΕ͖ͬͪΓॻ͚ΔͷͰɺ ྑͦ͞͏ɻ