Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Flutter入門

 Flutter入門

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

Takayuki

May 22, 2020
Tweet

More Decks by Takayuki

Other Decks in Programming

Transcript

  1. Flutter入門
    鈴木孝之

    View Slide

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

    View Slide

  3. ࣗݾ঺հɾձࣾ঺հ

    View Slide

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

    View Slide

  5. 1.ࣗݾ঺հ

    View Slide

  6. Copyright Re:Build.inc All Rights Reserved.
    1.ձࣾ঺հ
    ◆ձ໊ࣾ
    גࣜձࣾRe:Build
    ◆ॅॴ
    ԭೄݝಹ೼ࢢٱໜ஍2-2-2 λΠϜεϏϧ
    ◆ࣄۀ಺༰
    ɾࣗࣾWEBαʔϏεͷاըɾ։ൃɻ
    ɾडୗ։ൃ
    ◆ࣾһ
    7໊
    ◆ΤϯδχΞͷಇ͖ํ
    ϦϞʔτϫʔΫՄೳͳࣗ༝ͳಇ͖ํΛਪ঑ͯ͠·͢ʂ

    View Slide

  7. Copyright Re:Build.inc All Rights Reserved.
    7
    ɾαʔϏε໊
    Tadoru

    https://tadoru.work/


    ɾγεςϜ֓ཁ
    ΤϯδχΞಛԽܕͷ
    ϦϑΝϥϧ
    Ϋϥ΢υιʔγϯά
    1 ձࣾ঺հ

    View Slide

  8. Copyright Re:Build.inc All Rights Reserved.
    8
    ɾαʔϏε໊
    Re:Build Boot Camp

    https://rebuild-bootcamp.jp/


    ɾ֓ཁ
    ԭೄͱٶ࡚Ͱʮ࣮຿ϨϕϧʯΛ໨
    ࢦ͢ํ޲͚ͷϓϩάϥϛϯάε
    Ϋʔϧ
    ɾ࢖͏ٕज़
    LaravelɺVue.jsͳͲ
    1 ձࣾ঺հ

    View Slide

  9. Copyright Re:Build.inc All Rights Reserved.
    9
    ࣮຿Ϩϕϧ
    ॳ৺ऀ
    ॳڃऀ
    ஍ํͷॳ৺ऀ޲͚ͷϓϩάϥ
    ϛϯάεΫʔϧΛଔۀͨ͠ޙ
    ͷॳڃऀ͔Β࣮຿Ϩϕϧ·Ͱ
    ͷؒΛຒΊΔεΫʔϧ
    1 ձࣾ঺հ

    View Slide

  10. 'MVUUFSͱ͸

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  25. ࠓ·Ͱͷࣗ෼͕։ൃܦݧͷ͋Δϑϩϯτٕज़

    View Slide

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

    View Slide

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

    View Slide

  28. FlutterͱReact NativeͷϦιʔε֬อʹ͍ͭͯ
    - ೔ຊͩͱ·ͩReact NativeͷΤϯδχΞͷํ͕গ͚ͩ͠ଟ͍ҹ৅ɻ

    - ւ֎ͰΦϑγϣΞͰൃ஫͢Δʹͯ͠΋ɺFlutterΤϯδχΞ͸୯Ձ͕ߴ
    ͯ͘ίετײ͕߹Θͳ͍ɻ
    https://qiita.com/nskydiving/items/c13c949cc17c6f980a67

    View Slide

  29. ։ൃͨ͠αʔϏε

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  36. ࣮૷಺༰
    ΞϓϦͷએݴ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  40. ·ͱΊ

    View Slide

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

    View Slide