Chapter 02

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

tokku5552
tokku5552
2022.11.26に更新

Flutterとは

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

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

Flutterの特徴

  • iOSとAndroidの双方を同時に開発可能
    これが一番の特徴だと思います。
    元々、iOS、Androidそれぞれで開発していたものが一つに統合されるので、工数や開発スピードが単純に1/2になります。
     

  • ホットリロード機能
    ホットリロード機能を使用すると、プログラムを変更した際にすぐにUIに反映させることができます。
    これにより通常のアプリ開発で発生する変更箇所の確認にかかる手間(再ビルド等)が大幅に削減でき、スムーズに開発ができます。
     

  • 言語はDartを使用
    Dartは、JavaScriptの代替言語として2011年にGoogleからリリースされました。
    そのため、構文はJavaScriptよりはどちらかというとJavaに似ていますが、その割にとっつきやすく、他言語と比べても比較的簡単に扱える言語です。

https://dart.dev/

Flutter Webとは

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を用いて描画しています。

https://flutter.dev/multi-platform/web

Flutter Web の特徴

  • Webアプリ用に言語やコードを変更する必要がない
    スマホアプリ用に作成したコードがそのままWebアプリにも使用できるため、Webアプリ用に作り直す必要が基本的にありません。
     

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