ざっくりわかる Flutter

Google が開発した マルチプラットフォームアプリフレームワーク Fluter です

この動画は Flutter という名前は聞いたことあるけど どういうものかはわからないよという人向けに ざっくりと Flutter の概要について知ってもらおうというものです

ぶっちゃけこれを見たからと言って 今日から Flutter でバリバリアプリ開発できるぜ! とはいかないと思いますが この動画をみて興味が出てきたよっていう人が Flutter を学び始めるきっかけになれば嬉しいです

では早速概要の説明から Flutter は主に iOS と Android 向けに アプリを開発するときに使われる マルチプラットフォーム開発フレームワークです

Flutter を理解するにはまずこの 「マルチプラットフォーム」 という言葉の意味を理解しなければいけません

通常アプリを開発するためには OS ごとに 専用のプログラミング言語と 専用の開発環境を利用する必要があります

iOS なら Swift(もしくは Objective-C)と Xcode Android なら Kotlin(もしくは Java)と Android Studio といった具合に同じ機能の同じ見た目のアプリを作るとしても OS ごとにそれぞれイチから作っていかなければいけません

同じアプリ開発というジャンルでも OS が違えば画面の作り方からなにから全部違うので iOS と Android どっちにも対応したアプリを作るというのは 実はとっても大変なんです

「でも作りたいのものは同じなんだから 一回開発したらどの OS でも同じように動いてほしい!」

そんなわがままを叶えてくれるのが 今回紹介する Flutter などを含む マルチプラットフォームフレームワークと呼ばれるものです

有名どころだと Facebook が作った React Native Microsoft が作った Xamarin ちょっと毛色は違うけど ゲームを作るときに使う Unity や Unreal Engine なども マルチプラットフォーム対応を謳っています

これらは共通して 一つのソースコードが複数の OS で動く という特徴をもっています

そんなマルチプラットフォームフレームワークの一角として わりと最近登場したのが Flutter というわけです

Flutter がサポートしている OS は 主に iOS と Android ですが 実はそれ以外にも Web, Windows, MacOS, Linux がサポートされています

一つのソースコードで モバイルアプリだけじゃなくて デスクトップアプリや Web アプリまで作れちゃいます

仕組み

では次に Flutter の仕組みについてみていきましょう Flutter ではマルチプラットフォームに対応するために Flutter Engine という独自のレンダリングエンジンを持っています

レンダリングエンジンとはすごーくざっくり言うと 「ここに何々を表示するよ!」と決める君のことです

Flutter で作ったアプリは このレンダリングエンジンの上で動くことになるので Flutter Engine さえ動かせるようにすれば iOS でも Android でも 同じように使えるアプリを作れるってわけです

またこの Flutter Engine 結構ハイパフォーマンスに作られていて マルチプラットフォームにありがちな なんかもっさりした感じがほとんどありません

この Flutter Engine の上で これまた Google が作った Dart という言語を使ってアプリを書いていきます

特徴

概要はこれくらいにして Flutter の特徴を見ていきましょう

開発コストの削減

メリットはまずなんといっても 開発のコストを減らすことができることです

たとえばモバイルアプリを作るのに iOS に 3 人 Android に 3 人 のエンジニアが必要なところでも Flutter なら合わせて 3 人で済むことが多いです 単純に半分の作業量になるってことです

実際には OS ごとに対応が必要な場面があるので 厳密に半分ってわけには行かないですが それでも大体 6 割くらいの作業量で抑えることができます

UI がとても書きやすい

また Flutter は UI がとても書きやすいです

たとえば iOS アプリを作るときは Storyboard という画面をつくる専用のファイルに 画面のレイアウトを書いていって アプリのロジック部分となるコードは Swift という言語で書くことがほとんどです 同様に Android アプリ開発では UI は xml で書いて ロジックは Kotlin Web 開発では UI は HTML と CSS で書いて ロジックは Javascript と UI とロジックを分けて書くことが一般的です

しかし Flutter では UI もロジックもすべて Dart というプログラミング言語で書きます どちらがいいかはいろんな意見があって 正解はないと思いますが 個人的にはこちらのスタイルのほうが コードの見通しがよくて好みです

ちなみに iOS の SwiftUI や Android の Jetpack Compose のように UI をコードで表すスタイルが iOS や Android でも取り入れられ始めています

また Flutter は同じく Google が作っている マテリアルデザインという デザインシステムをベースに作られています

Flutter にはマテリアルデザインに則って アプリで使う便利なパーツが たくさん含まれているので これらを組み合わせることで 基本的な UI を手間なく作ることができます

ホットリロード

次に紹介したい Flutter の目玉機能が ホットリロード これはめちゃくちゃ便利なので ぜひ皆さんに知ってほしい

モバイルアプリを作るときは お手持ちのスマホや エミュレーターというスマホをパソコン上に模したソフトで 動作確認をしながら作っていくのですが 通常の場合コードを変更するたびに毎回ビルドをして アプリを再インストールする必要があります

規模のちっちゃいアプリならまだいいですが 大規模なアプリになると初回のビルドに 10 分や 20 分 2 回目以降のビルドにも 5 分程度かかることはざらにあるので ちょっとしたお直しにもすごく時間がかかってしまいます

また変更したい箇所が アプリを起動してからボタンを 10 回押して ようやくたどりつく奥地にある場合は 毎回起動からやり直さないといけません

これがなんと Flutter なら r キーをポチッと押すだけで一瞬で反映されます コードを変更したあとに 再ビルドも再インストールも必要ありません

Flutter はこのホットリロードにより 変更を逐一確かめながら 開発をすることができるので

トライアルアンドエラーが どうしても多くなりがちな初心者の方には とっても嬉しい機能です

さて紹介したい Flutter のメリットは 他にもたくさんあるんですが 全部紹介していると 動画がとんでもない長さになってしまうので これくらいにして お次はデメリットもいくつか挙げていきましょう

四方山話

…の前に四方山話のコーナーです 真面目な解説ばっかりしていると 中だるみしちゃうので 本題とちょっと関係ある雑学を話す コーナーを入れようと思います 今回のテーマは「Fuchsia」です

まだ正式サポートではないものの Flutter では対象プラットフォームとして Fuchsia という OS もサポートされています

この Fuchsia とは Google が目下開発中の新しい OS で まだ情報はほとんど出ていなくて 謎に包まれているものの 他の OS をベースとしない 全くゼロから作られているという特徴があります

例えば Android OS は Linux という OS のベースとなる汎用のソフトウェアを モバイル向けにカスタマイズしたものです

これに対して Fuchsia は 既存の Linux などのソフトウェアを ベースにするのではなく 全部ゼロから作られています

なぜ Fuchsia が Linux を採用しなかったかについては 公式のドキュメントは見つけられなかったので これは完全に私の推測なのですが

Linux は Android だけでなく PC 用の OS やサーバーの OS としても よく使われている汎用のソフトウェアなので Android だけのための 変更などはなかなか入れづらく

モバイルデバイスや IoT など 比較的リソースの限られた環境向けにも 細かいチューニングができるように 下から上まですべて作るという 方針になったのではないでしょうか

ちなみにカーネルという Android で Linux が担当している部分は Fuchsia では zircon と呼ばれています

出ている情報がまだほとんどなくて 謎につつまれた Fuchsia ではありますが 将来的に Android を置き換えるかも? と噂されているなど なにかと話題の OS です

Flutter はこの Fuchsia もサポートしてるので もし将来 Fuchsia が Android に置き換わることになっても 比較的楽に対応することができそうです

ちなみにこの Fuchsia 現在 Google Nest Hub で実際に動いているので お手元にある方はぜひお試しください

閑話休題

iOS っぽいデザインは苦手

まずこの Flutter iOS っぽいデザインは少し苦手です 先に紹介したように Flutter はマテリアルデザインをベースに作られています これはメリットでもあるのですが どうしても Android っぽいデザインに なってしまうというデメリットもあります

Flutter には CupertinoWidget という iOS のデザインに即した UI パーツも含まれているのですが マテリアルデザインのパーツに比べると数はまだ少ないので どうしても自分で実装しないといけない部分も多く iOS らしいデザインのアプリにするには少し手間がかかります

最新の OS の機能への対応にすこし時間がかかる

また Flutter で作ったアプリは OS 関係なく共通のコードで動きますが ときには Bluetooth やカメラなど OS が持っている機能にアクセスする必要も出てきます

そういった OS 固有の機能でも 公式や有志のライブラリを使うことで ほとんどの場合対応できますが

発表されたばかりの新機能などは ライブラリが出てくるのを待つ必要があるため 使えるようになるまでに時間がかかることがあります

もちろん自分でライブラリを書けばすぐに対応ができますが OS とやりとりをするライブラリを作るのは Flutter の他の開発に比べて難易度が高く ネイティブ開発の知識もガッツリ必要になってくるので 「OS の新しい機能をバリバリ使って革新的なアプリを作るぜ!」 って人は注意が必要です

おわり

誰にそそのかされたわけでもないですが ずっとやってみたかった YouTube 動画を撮ってみました 評判がよくても悪くても とりあえず 10 本くらいは作ってみようかなと思うので 高評価とチャンネル登録お願いします

これやってほしい!みたいな題材があれば コメント欄で教えてください それではまた次回!