この書籍について
この書籍は、慶應義塾大学AI・高度プログラミングコンソーシアムの2020年度講義「FlutterでWebアプリ開発初級編」で使用した資料を再編したものです。
全5回、プログラミング初学者からFlutterに興味のある人を対象にしています。
2020年4月時点での内容のため、現在と多少状況が異なる場合があります。
Flutterとは?
Flutterは、2015年に発表・2018年に正式版リリースされた"新しい"フレームワークです。
Googleが中心となってオープンソースで開発が続けられています。
クロスプラットフォームであるため、1つのコードで
- Android
- iOS
- Web(Beta)
- Windows(Alpha)
- Mac(Alpha)
- Linux(Alpha)
- その他(Fuchsia, 組み込み, etc..)
などの様々な環境で動かすことができます!
少し古いですが、Flutterについて詳しくは「Flutter Webはいいぞ – KCS ComputerSociety」で書いていたりします。
グーグルのUIフレームワーク「Flutter」、利用広がる--新たなリリースモデルも
既に世界には200万人の開発者がいる
その勢いは同じくクロスプラットフォームフレームワークのReact Nativeをも凌ぐ
Flutter Web
Flutterは様々な場面(主にモバイル)で役立つ子ですが、今回扱うのはWeb向けの「Flutter Web」になります。Flutter Web(Flutter on the Web/Flutter for Web)は2018年12月発表・2019年12月Beta版開始のFlutterの中でもまた若いフレームワークです。モバイル向けの書き方ほぼそのままでWebアプリが作れちゃいます。
Webの世界にはRuby on Rails、PHP、React、Vue等たくさんの言語/フレームワークが存在しますが、その中でFlutter Webを選ぶメリットは
- デザインが楽!
- 元からGoogleのMaterial Designに沿った見た目のWidget(ボタンやカード等)が用意されているのでそれらを組み合わせるだけでかっこいいものが作れる
- HTMLを書かなくていい
- CSSを書かなくていい
-
JavaScriptを書かなくてい
- Dartという素晴らしい言語で開発ができる
特に他のフレームワークでは決して逃れられないHTML/CSS/JSから完全逃避できる面が非常に大きいです。
デメリットは
- 実行速度が遅い これを見れば分かる
- 普通のホームページを作るには機能が貧弱
- 元々モバイルアプリ作る用のフレームワークだからね
- DOMによる表示ではないため、既存の資源がほとんど使えない(WebではなくDart/Flutterのエコシステムからライブラリを探すことになる)
- まともなHTMLを作らないのでブログ等にも向かない(SEO対策できない)
現状Flutter Webはミニゲームなどの単純なページに使うのが適解だと思われます。
Dart
こちらもGoogle先生主導のオープンソースで開発されている言語です。立ち位置は
JavaScript <= Dart < Java
くらい
FlutterはDartで開発するので覚えなくてはなりません。しかし文法自体は標準的なので他の言語を触ったことのある人ならすぐに書け、初学者でも学びやすい言語だと思います。
DartはFlutterの他、AngularDartやサーバーサイドで使われることがあるが基本はFlutterとセットのものだと考えて良い
Flutter Webで作られた作品の紹介
- Flutter Samples:公式のサンプル集(コレ自体もFlutter Web製)。[Demo]と書いてあるものはWebでも動く
- Flutter Gallery: 公式のデザインサンプル。アニメーションがきれい
- Journey: 商用利用例
- 拙作
- クラタンfor Web: 三田祭に出展した単語帳/クイズアプリ(Android版も同じコードで作成)
- ルーレット: ルーレット
- 動物将棋: どうぶつしょうぎのflutter web実装
- 年賀状: ゲームも作れる
- つらたん: アニメーションを頑張った例
- KCS新歓特設サイト2020: 普通のWebサイトを模したなにか
- 湯豆腐: 真面目に作ったゲーム
- 蜿: グラフィカルなゲーム
- p987: ゲーム!!
- Flutter製のアプリ・サービスなど: WebだけでなくFlutterでできたアプリの紹介
- Penmark: 便利な時間割アプリ。実はFlutter。