Flutter入門 - Speaker Deck

Flutter入門

by Takayuki

Slide 1

Slide 1 text

Flutter入門鈴木孝之

Slide 2

Slide 2 text

"HFOEB ࣗݾ঺հɾձࣾ঺հ 'MVUUFSͱ͸ 'MVUUFSΛֶ΅͏ͱࢥͬͨཧ༝ ։ൃͨ͠αʔϏε

Slide 3

Slide 3 text

ࣗݾ঺հɾձࣾ঺հ

Slide 4

Slide 4 text

1.ࣗݾ঺հ ◆໊લ ླ໦ ޹೭(Suzuki Takayuki) ※ಉ੏ಉ໊ଟͯ͘ࠔͬͯ·͢ɻɻɻ ◆ࣗݾ঺հ ɾ1990೥ɺਆಸ઒ݝੜ·Εɻ ɾࣾձਓʹͳ͔ͬͯΒɺϓϩάϥϛϯάΛ࢝ΊΔɻ ɾ2015೥ʹϑϧεϐʔυʹೖࣾ͠ɺ2017೥ʹಠཱɻ ɾϑϦʔϥϯεͰϦϞʔτϫʔΫΛ൒೥΍ͬͨޙʹԭೄͰىۀ ◆झຯ ίεϓϨɺԻָϥΠϒɺϚϥιϯେձʹग़Δɺ໺ٿ؍ઓ BDD(Ϗʔνۦಈ։ൃ)

Slide 5

Slide 5 text

1.ࣗݾ঺հ

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

'MVUUFSͱ͸

Slide 11

Slide 11 text

FlutterΛ࢖༻͢ΔͱɺiOS͓Αͼ AndroidͰ୯Ұͷίʔυ͔ΒωΠςΟϒ ΞϓϦΛߏஙͰ͖·͢ɻ ͭ·ΓɺΫϩεϓϥοτϑΥʔϜ։ൃ ٕज़Ͱ͢ɻ ͜Ε͸୯ҰͷίʔυΛهड़Ͱ͖ΔςΫ ϊϩδʔͰ͋ΓɺΞϓϦέʔγϣϯ͸ Android͓ΑͼiOSϓϥοτϑΥʔϜͷ ྆ํͰಈ࡞͠·͢ɻ Flutterͱ͸ https://note.com/heavenosk/n/n245b72973600

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Dart͸ɺ΢ΣϒΞϓϦέʔγϣϯ։ൃͷͨΊʹGoogle͕։ൃͨ͠ϓ ϩάϥϛϯάݴޠͰ͢ɻ େن໛ͳΞϓϦέʔγϣϯ/αʔϏε։ൃ ΛαϙʔτͰ͖ΔΫϥεϕʔεͷΦϒδΣΫτࢦ޲ݴޠɻ Dartݴޠͱ͸ʁ https://www.ossnews.jp/oss_info/Dart

Slide 14

Slide 14 text

JavaScriptͷ୅ସΛ໨ࢦ͢ Dart͸ɺʮJavaScriptݴޠͰ͸ղܾͰ͖ͳ͍ݴޠͷ໰୊Λղܾ͢Δʯɺʮ༏Εͨύ ϑΥʔϚϯεʯɺʮେن໛ͳϓϩδΣΫτͰͷ࢖༻ʹ଱͑Δʯɺʮ҆શʯͷ؍఺͔Β ઃܭ͞Ε·ͨ͠ɻ https://www.ossnews.jp/oss_info/Dart Dartݴޠͱ͸ʁ

Slide 15

Slide 15 text

Flutterʹ͸ɺAndroid Studioɺ IntelliJ IDEAɺ͓ΑͼVisual Studio Code༻ͷެࣜ։ൃϓϥάΠϯ͕͋ Γ·͢ɻ ϓϥάΠϯΛ࢖༻ͤͣʹ FlutterͷίϚϯυϥΠϯπʔϧΛ࢖ ༻͢Δ͜ͱ΋Ͱ͖ΔͨΊɺ͓ؾʹ ೖΓͷΤσΟλʔΛ࢖༻ͯ͠Flutter ͰΞϓϦέʔγϣϯΛ։ൃͰ͖· ͢ɻ ։ൃπʔϧͷ࢖༻ํ๏ https://employment.en-japan.com/engineerhub/entry/2019/08/06/103000

Slide 16

Slide 16 text

·ͣɺެࣜͷAndroid Studio΢ΣϒαΠτ͔ΒAndroid StudioΛμ΢ϯϩʔυ͠·͢ɻ https://developer.android.com/studio Android StudioͷηοτΞοϓ https://employment.en-japan.com/engineerhub/entry/2019/08/06/103000

Slide 17

Slide 17 text

FlutterϓϥάΠϯΛΠϯετʔϧ͢Δ Android Studio༻ͷFlutterϓϥάΠϯΛΠϯ ετʔϧͯ͠࢖༻͠·͢ɻ Android Studio ͷ[ઃఆ]͔Β[ϓϥάΠϯ]Λબ୒͠ɺը໘ͷ Լ෦ʹ͋Δ[ϦϙδτϦͷࢀর]Λબ୒͠· ͢ɻ ը໘಺ΛʮflutterʯͰݕࡧ͠ɺදࣔ͞ΕΔ ʮFlutterʯΛબ୒͠ɺInstallϘλϯͰΠϯε τʔϧ͠·͢ɻ Android Studio Setup https://employment.en-japan.com/engineerhub/entry/2019/08/06/103000

Slide 18

Slide 18 text

ΠϯετʔϧޙɺAndroid StudioΛ࠶ ىಈ͍ͯͩ͘͠͞ɻ ࠶ىಈޙɺ Android Studioͷελʔτը໘ʹʮ৽ نFlutterϓϩδΣΫτΛ։࢝͢Δʯͷ ϝχϡʔ͕දࣔ͞ΕΔͷͰબ୒͠· ͢ɻ Android Studio Setup https://employment.en-japan.com/engineerhub/entry/2019/08/06/103000

Slide 19

Slide 19 text

[৽نFlutterϓϩδΣΫτ]ը໘Ͱɺ [FlutterΞϓϦέʔγϣϯ]Λબ୒͠ɺ [࣍΁]ʹਐΈ·͢ɻ Android Studio Setup https://employment.en-japan.com/engineerhub/entry/2019/08/06/103000

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

࠶ੜϘλϯΛΫϦοΫ͢Δ Android Studio Setup https://employment.en-japan.com/engineerhub/entry/2019/08/06/103000

Slide 22

Slide 22 text

ΞϓϦΛىಈ͢Δ Android Studio Setup https://employment.en-japan.com/engineerhub/entry/2019/08/06/103000

Slide 23

Slide 23 text

'MVUUFSΛֶ΅͏ͱࢥͬͨཧ༝

Slide 24

Slide 24 text

ΫϩεϓϥοτϑΥʔϜͷٕज़બఆΛ͢Δࣄ͕૿͑ͨ ɾ·ͣ͸؆୯ʹϓϩτλΠϓΛ ωΠςΟϒΞϓϦͰ࡞Γ͍ͨͰ͢ɻ ɾωΠςΟϒΞϓϦΛ࡞Γ͍ͨͷͰɺ Flutter͔React NativeͰ͓ئ͍Ͱ͖·ͤΜʁ ɾٕज़બఆ͢Δ্ͰͲΜͳ΋ͷ͔ࣗ෼΋ ஌͓͖͍ͬͯͨɻ ͳͲ

Slide 25

Slide 25 text

ࠓ·Ͱͷࣗ෼͕։ൃܦݧͷ͋Δϑϩϯτٕज़

Slide 26

Slide 26 text

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 ͸શ͘ Ұ͔Βઃܭ͞Ε͍ͯ·͢ɻ

Slide 27

Slide 27 text

FlutterͱReact NativeͷUIͷҧ͍ - React Native ͸ωΠςΟϒ UI Λ࠾༻͍ͯ͠·͕͢ɺFlutter ͸ಠࣗ UI Λ࠾༻͍ͯ͠·͢ɻ - ͭ·ΓɺReact Native ΞϓϦ͸ϓϥοτϑΥʔϜʹΑͬͯݟͨ໨͕ม ΘΓ·͕͢ɺFlutter ΞϓϦ͸ͲͷϓϥοτϑΥʔϜͰ΋౷Ұ͞Εͨݟ ͨ໨ʹͳΓ·͢ɻ https://qiita.com/nskydiving/items/c13c949cc17c6f980a67

Slide 28

Slide 28 text

FlutterͱReact NativeͷϦιʔε֬อʹ͍ͭͯ - ೔ຊͩͱ·ͩReact NativeͷΤϯδχΞͷํ͕গ͚ͩ͠ଟ͍ҹ৅ɻ  - ւ֎ͰΦϑγϣΞͰൃ஫͢Δʹͯ͠΋ɺFlutterΤϯδχΞ͸୯Ձ͕ߴ ͯ͘ίετײ͕߹Θͳ͍ɻ https://qiita.com/nskydiving/items/c13c949cc17c6f980a67

Slide 29

Slide 29 text

։ൃͨ͠αʔϏε

Slide 30

Slide 30 text

WWW.SITE2MAX.PRO Free PowerPoint & KeyNote Templates DEMO Event Search Event Search

Slide 31

Slide 31 text

࣮૷͠Α͏ͱࢥͬͨཧ༝ Πϕϯτͷݕࡧ৚݅ ͕͋·Γͳ͍…

Slide 32

Slide 32 text

࣮૷͠Α͏ͱࢥͬͨཧ༝ ΞϓϦ൛΋͋·Γ࢖͍΍͢ ͘ͳ͍ɻ

Slide 33

Slide 33 text

ΞϓϦέʔγϣϯ શମߏ੒ https://connpass.com/ api/v1/event/ API connpass API͔Β Πϕϯτ৘ใΛऔಘ

Slide 34

Slide 34 text

34 Ωʔϫʔυݕࡧ ஍Ҭݕࡧ Mock ը໘ϞοΫ ଞͷݕࡧ৚݅΋࣮૷ தɻ

Slide 35

Slide 35 text

Connpass API࢓༷ॻ ݕࡧ৚݅͸͍͔ͭ͋͘ΔͷͰɺҾ͖ଓ ͖ɺ࣮૷த https://connpass.com/about/api/

Slide 36

Slide 36 text

࣮૷಺༰ ΞϓϦͷએݴ

Slide 37

Slide 37 text

࣮૷಺༰ Connpass͔Βͷऔಘ৘ใΛ Ұͭͷclassʹू໿ɻ

Slide 38

Slide 38 text

࣮૷಺༰ Widget෦෼ɻݕࡧϑΟʔϧυͱυ ϩοϓμ΢ϯΛੜ੒

Slide 39

Slide 39 text

࣮૷಺༰ ݕࡧॲཧ෦෼ɻConnpass APIΛୟ ͍ͯऔಘɻ

Slide 40

Slide 40 text

·ͱΊ

Slide 41

Slide 41 text

࣮૷ͯ͠Έͨײ૝ - ॻ͍ͨײ͡ɺTypeScriptʹࣅ͍ͯΔؾ͕͢Δɻ - WidgetΛ࡞Δͷ͕೉͍͠ɻ͜ΕΛ͓٬͞Μͷࢦఆͨ͠σβΠ ϯ౰ͯΔ࡞ۀͱ͔͸େมͦ͏ɻ - ֶशίετ͸ߴͦ͏͚ͩͲɺ׳ΕΕ͹͖ͬͪΓॻ͚ΔͷͰɺ ྑͦ͞͏ɻ