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
280
エンジニアのキャリア論
bumptakayuki
0
190
地方カンファレンス主催のススメ
bumptakayuki
1
200
Laravelで敢えて試す脆弱性のある書き方
bumptakayuki
2
1.1k
地方でのPHPエンジニア採用って実際どうなの?
bumptakayuki
0
650
沖縄観光、名物を一挙紹介!
bumptakayuki
2
640
Laravel ShiftでLaravelのバージョンアップしてみた話
bumptakayuki
1
2.6k
flutterでイベントアプリを作ってみた
bumptakayuki
0
160
オフショア開発の辛みと学んだ事
bumptakayuki
0
390
Other Decks in Programming
See All in Programming
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
120
Porting a visionOS App to Android XR
akkeylab
0
470
ふつうの技術スタックでアート作品を作ってみる
akira888
1
870
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
12
4.5k
技術同人誌をMCP Serverにしてみた
74th
1
650
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
170
Hack Claude Code with Claude Code
choplin
4
2.1k
PicoRuby on Rails
makicamel
2
130
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
420
NPOでのDevinの活用
codeforeveryone
0
840
Is Xcode slowly dying out in 2025?
uetyo
1
280
Deep Dive into ~/.claude/projects
hiragram
14
2.6k
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1031
460k
How GitHub (no longer) Works
holman
314
140k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Fireside Chat
paigeccino
37
3.5k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Facilitating Awesome Meetings
lara
54
6.4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Automating Front-end Workflow
addyosmani
1370
200k
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Λ࡞Δͷ͕͍͠ɻ͜ΕΛ͓٬͞Μͷࢦఆͨ͠σβΠ ϯͯΔ࡞ۀͱ͔େมͦ͏ɻ - ֶशίετߴͦ͏͚ͩͲɺ׳ΕΕ͖ͬͪΓॻ͚ΔͷͰɺ ྑͦ͞͏ɻ