Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
Flutterのすヽめ
Search
Yuto
October 04, 2023
Programming
34
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
4
画像のリサイズ関数の裏側では何が起きている?
tsukamoto1783
0
23
「ラストエリクサー症候群」からの脱却~ 持ってるアイテム温存するだけで眠らせてませんか? ~
tsukamoto1783
0
32
humanlayerのブログから学ぶ、良いCLAUDE.mdの書き方
tsukamoto1783
0
340
【超入門】AR 技術の"さわり"だけ学んでみる
tsukamoto1783
0
33
MCPサーバーって結局何ができるの?
tsukamoto1783
0
40
LT会:普段お世話になってるStackTraceと少しだけ向き合ってみる
tsukamoto1783
0
83
初使用の技術スタックで、 ミニマルなアプリケーションを 2日で作る
tsukamoto1783
0
91
アクセシビリティ対応について考えよう
tsukamoto1783
0
36
Other Decks in Programming
See All in Programming
Turning Architecture into Unit Tests in the AI Era (NSSpain XIV)
steliosf
PRO
1
140
AI時代のコードレビューは人に向けるな、仕組みに向けろ
texmeijin
5
3.6k
AWSに止められる覚悟してますか?
morizo_1984
2
530
カツオ、ご期待ください
suneo3476
0
170
ハーネス設計入門 〜 基礎知識の整理から実務へのステップアップ 〜
kinopeee
22
22k
【加筆修正版】Laravel のアプリケーションをどこにデプロイするか #phpcon_ehime
akase244
0
150
HTML-in-Canvasで作る未来のWeb UI表現
clockmaker
4
4.6k
更なる可用性を求めて、5年間運用したKotlinのアプリケーションをGoでリプレイスする話
ken_tunc
0
570
Agentic Software Factoryに、すごく賢いIF文を。 / super smart IF statement into the Agentic Software Factory.
rkaga
8
2.1k
最近”作らせてる” ローカルAIアプリの話
akit37
0
450
C#の現在地 進化の歴史と、AI時代の.NET Everywhere
neuecc
5
5.1k
APNsからLive Activityを開始する話
yumnumm
0
160
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
250
1.3M
What’s in a name? Adding method to the madness
productmarketing
PRO
24
4.2k
The Cost Of JavaScript in 2023
addyosmani
55
10k
Heart Work Chapter 1 - Part 1
lfama
PRO
10
37k
GitHub's CSS Performance
jonrohan
1033
470k
Done Done
chrislema
187
17k
AI: The stuff that nobody shows you
jnunemaker
PRO
10
1.1k
Navigating Team Friction
lara
192
16k
A Modern Web Designer's Workflow
chriscoyier
699
190k
How STYLIGHT went responsive
nonsquared
100
6.3k
Navigating Algorithm Shifts & AI Overviews - #SMXNext
aleyda
1
1.6k
エンジニアに許された特別な時間の終わり
watany
109
250k
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の課題 • キャッチアップ大変 • デバイス固有の機能は苦手 → 必要であればネイティブ言語の実装が必要 • 人材確保が困難