Chapter 02

【基礎解説】Flutter、Flutter Webの解説

このチャプターの目次

Flutterとは

Flutter（フラッター）とは、2018年にGoogleが正式リリースした、オープンソースのクロスプラットフォーム開発を得意とするフレームワークです。

iOSとAndroidの双方に対応したスマホアプリやWebアプリ、macOS/Windows/Linuxのクライアントアプリを同時に開発することができます。
https://flutter.dev/

iOSとAndroidの双方を同時に開発可能
これが一番の特徴だと思います。
元々、iOS、Androidそれぞれで開発していたものが一つに統合されるので、工数や開発スピードが単純に1/2になります。
ホットリロード機能
ホットリロード機能を使用すると、プログラムを変更した際にすぐにUIに反映させることができます。
これにより通常のアプリ開発で発生する変更箇所の確認にかかる手間(再ビルド等)が大幅に削減でき、スムーズに開発ができます。
言語はDartを使用
Dartは、JavaScriptの代替言語として2011年にGoogleからリリースされました。
そのため、構文はJavaScriptよりはどちらかというとJavaに似ていますが、その割にとっつきやすく、他言語と比べても比較的簡単に扱える言語です。

Flutter Web(Flutter on the Web/Flutter for Web)は、
2018年12月発表、2019年12月Beta版開始、2021年3月のFlutter2に合わせてStable版開始と、Flutterの中でもまだ若いフレームワークです。

モバイル向けの書き方ほぼそのままでWebアプリがつくれます。
ですので、1つのFlutterのソースコードで、iOS・Android・Webアプリを同時に作ることが可能となっています。

Flutter Webでは、DartからJavaScriptに変換したコードをブラウザ上で動かしています。
iOS/Android・Webどちらでも同じUIになるよう、Flutter側が内部的にHTML・Canvas・CSSを用いて描画しています。

Webアプリ用に言語やコードを変更する必要がない
スマホアプリ用に作成したコードがそのままWebアプリにも使用できるため、Webアプリ用に作り直す必要が基本的にありません。
デザイン(UI)が簡単に実装できる
元からGoogleのMaterial Designに沿った見た目のWidget(ボタンやカード等)がFlutterでは用意されているので、それらを組み合わせるだけで、ある程度様になったWebアプリが簡単に作成できます。
なのでWebアプリでよく使う、HTML、CSS、JavaScriptを書かなくても作成できます。(今回は一部JavaScriptを使用しています。)