ざっくりわかる 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 らしいデザインのアプリにするには少し手間がかかります

おわり

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

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