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
Yuto
October 04, 2023
Programming
31
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Flutterのすヽめ
社内勉強会用資料
Yuto
October 04, 2023
More Decks by Yuto
See All by Yuto
自分の言葉で伝える
tsukamoto1783
0
2
画像のリサイズ関数の裏側では何が起きている?
tsukamoto1783
0
18
「ラストエリクサー症候群」からの脱却~ 持ってるアイテム温存するだけで眠らせてませんか? ~
tsukamoto1783
0
26
humanlayerのブログから学ぶ、良いCLAUDE.mdの書き方
tsukamoto1783
0
290
【超入門】AR 技術の"さわり"だけ学んでみる
tsukamoto1783
0
30
MCPサーバーって結局何ができるの?
tsukamoto1783
0
33
LT会:普段お世話になってるStackTraceと少しだけ向き合ってみる
tsukamoto1783
0
80
初使用の技術スタックで、 ミニマルなアプリケーションを 2日で作る
tsukamoto1783
0
90
アクセシビリティ対応について考えよう
tsukamoto1783
0
31
Other Decks in Programming
See All in Programming
AWS CDK を「作」ってみた 〜フルスクラッチで見えた CDK の裏側〜 / aws-cdk-from-scratch
gotok365
3
2.8k
「寝てても仕事が進む」Claude Codeで組む第二の脳
tomoyafujita2016
0
340
仕様書を書く前にハーネスを作る - Agent Native開発は「探索を速く、判定を固く」
gotalab555
4
1.7k
freee が目指す データ マネジメント戦略 AI-Ready 時代を支える 攻めのガバナンスとは
freee
PRO
0
410
the container ship “Apple Silicon”@WWDC26 Recap -Japan-\(region).swift
shingangan
0
130
Claude CodeとAgentCore Gatewayを繋ぐ際の認証認可 / Authentication and authorization when connecting Claude Code with AgentCore Gateway
har1101
2
300
torikago - Ruby::Boxで照らすモジュラモノリスの実行境界
se4weed
1
380
Android CLI
fornewid
0
220
AI時代に設計が 最大の生産性レバーになる 意図駆動開発とデータを消さない設計|Don't Delete Your Data or Your Intent — Design as the Deepest Lever in the AI Era
tomohisa
1
990
yield再入門 #phpcon
o0h
PRO
0
1.1k
Jindong: Introducing Declarative Haptics in Compose Multiplatform
l2hyunwoo
0
120
これって Effect でできたのでは? / TSKaigi Mashup Kansai #2
susisu
0
250
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
57
14k
Building a Modern Day E-commerce SEO Strategy
aleyda
45
9.2k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
konakalab
0
540
Lightning talk: Run Django tests with GitHub Actions
sabderemane
0
230
Measuring Dark Social's Impact On Conversion and Attribution
stephenakadiri
2
250
We Are The Robots
honzajavorek
0
300
Making the Leap to Tech Lead
cromwellryan
135
10k
Speed Design
sergeychernyshev
33
2k
WCS-LA-2024
lcolladotor
0
800
The Power of CSS Pseudo Elements
geoffreycrofte
82
6.5k
A designer walks into a library…
pauljervisheath
211
24k
Technical Leadership for Architectural Decision Making
baasie
3
490
Transcript
Flutterのすゝめ 〜 新規モバイルアプリ開発 ≒ Flutter !? 〜 社内勉強会 2023/10/4
Flutterのすゝめ 〜 新規モバイルアプリ開発 ≒ Flutter !? 〜 社内勉強会 勉強会を実施する意図 •
勉強会で話すために内容整理することで、自身の理解が深まる。 • 間違っている部分があれば指摘いただけ認識修正できる。 • 他の人の考えや意見が得れるきっかけとなり、新たな気づきが得れる。 はじめに • 私はFlutterを主で開発している身なので、贔屓目に記載がある可能性があります。 • ここで言う「ネイティブ言語」とは、swift, kotolinのことを指します • コメント、質問、補足、指摘修正、ガヤ、等々ありましたらSlackのスレッドに書き込んでくれたら確認しま す。喜びます。(口頭でもOK)
目次 • Flutterとは? • Flutterの特徴 • 「Flutter」 vs 「React Native」
• Flutterの課題
目次 • Flutterとは? • Flutterの特徴 • 「Flutter」 vs 「React Native」
• Flutterの課題
Flutterとは? • Flutter(フラッター)とは、2018年にGoogleが正式リリースした、オープンソース のフレームワーク • 使用言語はDrat(Google製) • JavaScriptの代替言語として2011年にGoogleからリリース • クロスプラットフォーム
• iOSとAndroidの双方に対応したスマホアプリや、Webアプリ、 macOS/Windows/Linuxのクライアントアプリを同時に開発することができる
Flutterを使用している企業例 • Alibaba, BMW, Google, etc. • TOYOTA, CyberAgent, DNA,
etc.
目次 • Flutterとは? • Flutterの特徴 • 「Flutter」 vs 「React Native」
• Flutterの課題
Flutterの特徴 • iOSとAndroidの双方を同時に開発可能(クロスプラットフォーム) 単純工数が1/2に。 • ホットリロード機能 プログラムを変更したらすぐにUIに変更がかかるので、いちいち再buildする必要が ない。開発体験◎ • 必要なバックエンド周りは全てモバイル特化のミドルウェア(Firebase)で完結
Push通知、DBのデータは全てリアルタイム更新可能、cloud functions, Auth, etc. • 標準でマテリアルデザイン(Material3)に対応 • Material3 demo app • FigmaでFlutter向きのアプリデザインを簡単に作成する方法 • etc.
ホットリロード demo
None
目次 • Flutterとは? • Flutterの特徴 • 「Flutter」 vs 「React Native」
• Flutterの課題
「Flutter」 vs 「React Native」 • Flutter: • Google • ”一回書けば、全て(様々)のプラットフォームで動く”
• React Native • Facebook • “Write once, Run anywhere” ではなく、“Learn once, Write anywhere” • ≒”Reactを一度学べば、どのプラットフォームでも動く” 参考:React Native: Bringing modern web techniques to mobile / This is working
どちらの方が優れているとかではないが、トレンド的にはFlutterの方が勢いがある印象
備考:ネイティブ言語との比較
目次 • Flutterとは? • Flutterの特徴 • 「Flutter」 vs 「React Native」
• Flutterの課題
Flutterの課題 • 比較的新しいフレームワークで、アップデートが活発でキャッチアップが大変 • カメラやBluetoothなどデバイス固有機能や、最新のデバイス機能は苦手 • 人材確保が困難
Flutterの課題 • 比較的新しいフレームワークで、アップデートが活発でキャッチアップが大変 • カメラやBluetoothなどデバイス固有機能や、最新のデバイス機能は苦手 • 人材確保が困難
アップデートが活発でキャッチアップが大変 • 月1〜2ぐらいの頻度でバージョンアップが行われている 参考:Flutter SDK releases
Flutterの課題 • 比較的新しいフレームワークで、アップデートが活発でキャッチアップが大変 • カメラやBluetoothなどデバイス固有機能や、最新のデバイス機能は苦手 • 人材確保が困難
デバイス固有機能はやや苦手 • デバイスの最新機能 • ネイティブ言語(swift, kotlin)での実装が落ち着いてからFlutterへ持ち込まれる。 • ex.) FaceID, ワイヤレス充電
• カメラ(VR, AR)やBluetooth連携、など • 基本的な使用であればパッケージで対応できるが、細かい制御や特殊な仕様だと厳 しい印象 • 結局パッケージの中身は内部的にネイティブ言語を呼び出していることが多いの で、自作で機能をネイティブ言語で実装する必要あり。 • ≒逆に考えると、Flutterアプリで欲しい機能があればネイティブ言語で実装がで きるということ!
Flutterの課題 • 比較的新しいフレームワークで、アップデートが活発でキャッチアップが大変 • カメラやBluetoothなどデバイス固有機能や、最新のデバイス機能は苦手 • 人材確保が困難
人材確保が困難 • 新しいフレームワークなので、実務系経験者が少ない • そもそも求人数が少ない • Flutterだけの経験だけでなく、ネイティブ言語での開発経験が求められがち
Greenでの検索結果 検索キーワード 検索結果 Java 1684企業 5583求人 Python 1479企業 4449求人 Aws
2177企業 8248求人 Typescript 990企業 2620求人 React 1160企業 3154求人 Swift 597企業 1555求人 Kotlin 548企業 1583求人 Flutter 287企業 734求人 React Native 133企業 279求人 • Flutterの求人数は、Java求人の約 1 / 7 • 求人内容のほとんどが以下のどれかの印象 • ネイティブ言語で作られているアプリのFlutterリプレイス 人材 • 今後社内でFlutterを進めていくためのFlutterテックリード 募集 • 数名のスタートアップ企業 • どの条件でも基本はネイティブ言語の開発経験は重要視
RIZAPの事例 引用:https://fortee.jp/iosdc-japan-2023/proposal/4a8ef72b-9c0c-40ef-8e8f-084fd0199c49
まとめ • Flutterとは? • iOSとandroidを同時に開発できるGoogle製のクロスプラットフォーム • Flutterの特徴 • iOSとandroidを同時に開発できる •
開発体験が良い • バックエンドツールも充実 • 標準デザインはMaterial3 • Flutter vs React Native • 思想の違いです。どちらもクロスプラットフォームとして優秀 • Google Trends的にはFlutterの方やや人気そう • Flutterの課題 • キャッチアップ大変 • デバイス固有の機能は苦手 → 必要であればネイティブ言語の実装が必要 • 人材確保が困難