Webアプリエンジニアにこそ知ってほしい Flutterでのモバイルアプリ開発について

Webアプリエンジニアにこそ知ってほしい Flutterでのモバイルアプリ開発についてメタバース焚火会 2022-12-08

❖ くすたん ❖ ヘッジホッグ.exe LLC / unimal Co.,Ltd. (モバイルアプリ, Webアプリ開発)
❖ Flutter, Firebase, Vue, Laravel ❖ 鹿児島.mk, メタバース焚火会自己紹介

• モバイルアプリ開発においてざっくりした知見を得て、モバイルアプリエンジニアと話がしやすくなる • Flutterが好きになる • Flutterを触ってみたくなる目的

• モバイルアプリ開発の概要 • Flutterの概要 • Flutterのメリットとデメリット • Flutterを始めたい人へお品書き

モバイルアプリ開発の概要

• Webアプリと異なりURLが存在しないため、直アクセスができない • 配信にはApple・Googleの審査が必要なので、AppleやGoogleが許してくれるアプリを作る必要がある • ブラウザ上で動くわけではないため、実機(or シミュレータ)で都度ビルドしての動作確認が必須 •
各OS(iOS・Android)用のアプリを開発するには、それぞれ別の言語での開発が必要 • PUSH通知やカメラ、XR(AR/VR)等の端末の機能をフル活用できるモバイルアプリ開発について

Flutterの概要

• Google が提供しているクロスプラットフォームフレームワーク • Widgetと呼ばれるアプリケーション構築専用のHTMLタグのようなものをツリー構造に組み合わせることで、UIを構築できる • 言語はDartでTypeScriptに近い書き味 • Hot
Reloadが搭載されているので、毎度ビルドし直さなくてよい • UIはGoogle推奨のマテリアルデザインになる • これ1つでiOS・Android、Windows、MacOSのアプリが開発できる Flutterの概要

メリット・デメリット

• 1つの言語で各OSのUIが組めるので、開発効率が上がる(OS毎の実装漏れが減る) • (個人的に)宣言的UIだからかUIを組んでいて気持ちいい • Webのフロントエンドができる人なら、Flutterでのコーディングに関しては比較的容易に習得できる(アプリをリリースできるかは別) メリット

• XRやOS依存の特別な機能を利用するには、ネイティブ(Swift, Kotlin)のコードを書かないといけない • 各OSでデザインを変えたい場合(iOSはフラットデザイン, Androidはマテリアルデザイン)は、開発効率が落ちる • できたばかりのフレームワークなので破壊的変更が多々ある
デメリットそうは言っても運用でカバーはできる

Flutterを始めたい人へ

• 状態管理のことは気にせずに、StatefulWidgetを使って何かアプリを作ってみるのがオススメ • 公式もサンプル集を公開しているので、気になったものを少し改造してみるとか • https://ﬂutter.github.io/samples/# 細かいことは気にせずに作ってみる

12/17 にFlutterハンズオンもやります！

おまけ

Flutter WebでSEOスコア100を獲得した方法

12月11日のアドベントカレンダーで報告予定！！

Webアプリエンジニアにこそ知ってほしい Flutterでのモバイルアプリ開発について

Webアプリエンジニアにこそ知ってほしい Flutterでのモバイルアプリ開発について

qst_exe

More Decks by qst_exe

Other Decks in Programming

Featured

Transcript