Flutter入門

flutter初心者でもわかりやすく、簡単なアプリを作るまでの話をします。例えば、UI宣言やホットリロードなど便利機能の使い方などもお話します。

Transcript

1. Flutter入門 鈴木孝之
2. "HFOEB ࣗݾ঺հɾձࣾ঺հ
   'MVUUFSͱ͸
   'MVUUFSΛֶ΅͏ͱࢥͬͨཧ༝
   ։ൃͨ͠αʔϏε
3. ࣗݾ঺հɾձࣾ঺հ
4. 1.ࣗݾ঺հ ◆໊લ ླ໦ ޹೭(Suzuki Takayuki) ※ಉ੏ಉ໊ଟͯ͘ࠔͬͯ·͢ɻɻɻ ◆ࣗݾ঺հ ɾ1990೥ɺਆಸ઒ݝੜ·Εɻ ɾࣾձਓʹͳ͔ͬͯΒɺϓϩάϥϛϯάΛ࢝ΊΔɻ ɾ2015೥ʹϑϧεϐʔυʹೖࣾ͠ɺ2017೥ʹಠཱɻ ɾϑϦʔϥϯεͰϦϞʔτϫʔΫΛ൒೥΍ͬͨޙʹԭೄͰىۀ ◆झຯ ίεϓϨɺԻָϥΠϒɺϚϥιϯେձʹग़Δɺ໺ٿ؍ઓ BDD(Ϗʔνۦಈ։ൃ)
5. 1.ࣗݾ঺հ
6. Copyright Re:Build.inc All Rights Reserved. 1.ձࣾ঺հ ◆ձ໊ࣾ גࣜձࣾRe:Build ◆ॅॴ ԭೄݝಹ೼ࢢٱໜ஍2-2-2 λΠϜεϏϧ ◆ࣄۀ಺༰ ɾࣗࣾWEBαʔϏεͷاըɾ։ൃɻ ɾडୗ։ൃ ◆ࣾһ 7໊ ◆ΤϯδχΞͷಇ͖ํ ϦϞʔτϫʔΫՄೳͳࣗ༝ͳಇ͖ํΛਪ঑ͯ͠·͢ʂ
7. Copyright Re:Build.inc All Rights Reserved. 7 ɾαʔϏε໊ Tadoru
 https://tadoru.work/
 
 ɾγεςϜ֓ཁ ΤϯδχΞಛԽܕͷ ϦϑΝϥϧ Ϋϥ΢υιʔγϯά 1 ձࣾ঺հ
8. Copyright Re:Build.inc All Rights Reserved. 8 ɾαʔϏε໊ Re:Build Boot Camp
 https://rebuild-bootcamp.jp/
 
 ɾ֓ཁ ԭೄͱٶ࡚Ͱʮ࣮຿ϨϕϧʯΛ໨ ࢦ͢ํ޲͚ͷϓϩάϥϛϯάε Ϋʔϧ ɾ࢖͏ٕज़ LaravelɺVue.jsͳͲ 1 ձࣾ঺հ
9. Copyright Re:Build.inc All Rights Reserved. 9 ࣮຿Ϩϕϧ ॳ৺ऀ ॳڃऀ ஍ํͷॳ৺ऀ޲͚ͷϓϩάϥ ϛϯάεΫʔϧΛଔۀͨ͠ޙ ͷॳڃऀ͔Β࣮຿Ϩϕϧ·Ͱ ͷؒΛຒΊΔεΫʔϧ 1 ձࣾ঺հ
10. 'MVUUFSͱ͸
11. FlutterΛ࢖༻͢ΔͱɺiOS͓Αͼ AndroidͰ୯Ұͷίʔυ͔ΒωΠςΟϒ ΞϓϦΛߏஙͰ͖·͢ɻ ͭ·ΓɺΫϩεϓϥοτϑΥʔϜ։ൃ ٕज़Ͱ͢ɻ ͜Ε͸୯ҰͷίʔυΛهड़Ͱ͖ΔςΫ ϊϩδʔͰ͋ΓɺΞϓϦέʔγϣϯ͸ Android͓ΑͼiOSϓϥοτϑΥʔϜͷ ྆ํͰಈ࡞͠·͢ɻ Flutterͱ͸ https://note.com/heavenosk/n/n245b72973600
12. 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
13. Dart͸ɺ΢ΣϒΞϓϦέʔγϣϯ։ൃͷͨΊʹGoogle͕։ൃͨ͠ϓ ϩάϥϛϯάݴޠͰ͢ɻ େن໛ͳΞϓϦέʔγϣϯ/αʔϏε։ൃ ΛαϙʔτͰ͖ΔΫϥεϕʔεͷΦϒδΣΫτࢦ޲ݴޠɻ Dartݴޠͱ͸ʁ https://www.ossnews.jp/oss_info/Dart
14. JavaScriptͷ୅ସΛ໨ࢦ͢ Dart͸ɺʮJavaScriptݴޠͰ͸ղܾͰ͖ͳ͍ݴޠͷ໰୊Λղܾ͢Δʯɺʮ༏Εͨύ ϑΥʔϚϯεʯɺʮେن໛ͳϓϩδΣΫτͰͷ࢖༻ʹ଱͑Δʯɺʮ҆શʯͷ؍఺͔Β ઃܭ͞Ε·ͨ͠ɻ https://www.ossnews.jp/oss_info/Dart Dartݴޠͱ͸ʁ
15. Flutterʹ͸ɺAndroid Studioɺ IntelliJ IDEAɺ͓ΑͼVisual Studio Code༻ͷެࣜ։ൃϓϥάΠϯ͕͋ Γ·͢ɻ ϓϥάΠϯΛ࢖༻ͤͣʹ FlutterͷίϚϯυϥΠϯπʔϧΛ࢖ ༻͢Δ͜ͱ΋Ͱ͖ΔͨΊɺ͓ؾʹ ೖΓͷΤσΟλʔΛ࢖༻ͯ͠Flutter ͰΞϓϦέʔγϣϯΛ։ൃͰ͖· ͢ɻ ։ൃπʔϧͷ࢖༻ํ๏ https://employment.en-japan.com/engineerhub/entry/2019/08/06/103000
16. ·ͣɺެࣜͷAndroid Studio΢ΣϒαΠτ͔ΒAndroid StudioΛμ΢ϯϩʔυ͠·͢ɻ https://developer.android.com/studio Android StudioͷηοτΞοϓ https://employment.en-japan.com/engineerhub/entry/2019/08/06/103000
17. FlutterϓϥάΠϯΛΠϯετʔϧ͢Δ Android Studio༻ͷFlutterϓϥάΠϯΛΠϯ ετʔϧͯ͠࢖༻͠·͢ɻ Android Studio ͷ[ઃఆ]͔Β[ϓϥάΠϯ]Λબ୒͠ɺը໘ͷ Լ෦ʹ͋Δ[ϦϙδτϦͷࢀর]Λબ୒͠· ͢ɻ ը໘಺ΛʮflutterʯͰݕࡧ͠ɺදࣔ͞ΕΔ ʮFlutterʯΛબ୒͠ɺInstallϘλϯͰΠϯε τʔϧ͠·͢ɻ Android Studio Setup https://employment.en-japan.com/engineerhub/entry/2019/08/06/103000
18. ΠϯετʔϧޙɺAndroid StudioΛ࠶ ىಈ͍ͯͩ͘͠͞ɻ ࠶ىಈޙɺ Android Studioͷελʔτը໘ʹʮ৽ نFlutterϓϩδΣΫτΛ։࢝͢Δʯͷ ϝχϡʔ͕දࣔ͞ΕΔͷͰબ୒͠· ͢ɻ Android Studio Setup https://employment.en-japan.com/engineerhub/entry/2019/08/06/103000
19. [৽نFlutterϓϩδΣΫτ]ը໘Ͱɺ [FlutterΞϓϦέʔγϣϯ]Λબ୒͠ɺ [࣍΁]ʹਐΈ·͢ɻ Android Studio Setup https://employment.en-japan.com/engineerhub/entry/2019/08/06/103000
20. 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
21. ࠶ੜϘλϯΛΫϦοΫ͢Δ Android Studio Setup https://employment.en-japan.com/engineerhub/entry/2019/08/06/103000
22. ΞϓϦΛىಈ͢Δ Android Studio Setup https://employment.en-japan.com/engineerhub/entry/2019/08/06/103000
23. 'MVUUFSΛֶ΅͏ͱࢥͬͨཧ༝
24. ΫϩεϓϥοτϑΥʔϜͷٕज़બఆΛ͢Δࣄ͕૿͑ͨ ɾ·ͣ͸؆୯ʹϓϩτλΠϓΛ ωΠςΟϒΞϓϦͰ࡞Γ͍ͨͰ͢ɻ ɾωΠςΟϒΞϓϦΛ࡞Γ͍ͨͷͰɺ Flutter͔React NativeͰ͓ئ͍Ͱ͖·ͤΜʁ ɾٕज़બఆ͢Δ্ͰͲΜͳ΋ͷ͔ࣗ෼΋ ஌͓͖͍ͬͯͨɻ ͳͲ
25. ࠓ·Ͱͷࣗ෼͕։ൃܦݧͷ͋Δϑϩϯτٕज़
26. 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 ͸શ͘ Ұ͔Βઃܭ͞Ε͍ͯ·͢ɻ
27. FlutterͱReact NativeͷUIͷҧ͍ - React Native ͸ωΠςΟϒ UI Λ࠾༻͍ͯ͠·͕͢ɺFlutter ͸ಠࣗ UI Λ࠾༻͍ͯ͠·͢ɻ - ͭ·ΓɺReact Native ΞϓϦ͸ϓϥοτϑΥʔϜʹΑͬͯݟͨ໨͕ม ΘΓ·͕͢ɺFlutter ΞϓϦ͸ͲͷϓϥοτϑΥʔϜͰ΋౷Ұ͞Εͨݟ ͨ໨ʹͳΓ·͢ɻ https://qiita.com/nskydiving/items/c13c949cc17c6f980a67
28. FlutterͱReact NativeͷϦιʔε֬อʹ͍ͭͯ - ೔ຊͩͱ·ͩReact NativeͷΤϯδχΞͷํ͕গ͚ͩ͠ଟ͍ҹ৅ɻ
 - ւ֎ͰΦϑγϣΞͰൃ஫͢Δʹͯ͠΋ɺFlutterΤϯδχΞ͸୯Ձ͕ߴ ͯ͘ίετײ͕߹Θͳ͍ɻ https://qiita.com/nskydiving/items/c13c949cc17c6f980a67
29. ։ൃͨ͠αʔϏε
30. WWW.SITE2MAX.PRO Free PowerPoint & KeyNote Templates DEMO Event Search Event Search
31. ࣮૷͠Α͏ͱࢥͬͨཧ༝ Πϕϯτͷݕࡧ৚݅ ͕͋·Γͳ͍…
32. ࣮૷͠Α͏ͱࢥͬͨཧ༝ ΞϓϦ൛΋͋·Γ࢖͍΍͢ ͘ͳ͍ɻ
33. ΞϓϦέʔγϣϯ શମߏ੒ https://connpass.com/ api/v1/event/ API connpass API͔Β Πϕϯτ৘ใΛऔಘ
34. 34 Ωʔϫʔυݕࡧ ஍Ҭݕࡧ Mock ը໘ϞοΫ ଞͷݕࡧ৚݅΋࣮૷ தɻ
35. Connpass API࢓༷ॻ ݕࡧ৚݅͸͍͔ͭ͋͘ΔͷͰɺҾ͖ଓ ͖ɺ࣮૷த https://connpass.com/about/api/
36. ࣮૷಺༰ ΞϓϦͷએݴ
37. ࣮૷಺༰ Connpass͔Βͷऔಘ৘ใΛ Ұͭͷclassʹू໿ɻ
38. ࣮૷಺༰ Widget෦෼ɻݕࡧϑΟʔϧυͱυ ϩοϓμ΢ϯΛੜ੒
39. ࣮૷಺༰ ݕࡧॲཧ෦෼ɻConnpass APIΛୟ ͍ͯऔಘɻ
40. ·ͱΊ
    
41. ࣮૷ͯ͠Έͨײ૝ - ॻ͍ͨײ͡ɺTypeScriptʹࣅ͍ͯΔؾ͕͢Δɻ - WidgetΛ࡞Δͷ͕೉͍͠ɻ͜ΕΛ͓٬͞Μͷࢦఆͨ͠σβΠ ϯ౰ͯΔ࡞ۀͱ͔͸େมͦ͏ɻ - ֶशίετ͸ߴͦ͏͚ͩͲɺ׳ΕΕ͹͖ͬͪΓॻ͚ΔͷͰɺ ྑͦ͞͏ɻ