「Flutter」と書いて「フラッター」と読みます。
この記事では、そんな「Flutter」の特徴をまとめていきます。
Flutterとは
Googleが開発したオープンソース型のモバイルUIフレームワーク。
2018年12月4日にFlutter1.0がリリース。
Flutter公式サイト
Flutterの特徴
Dartベースの単一のコードベース
DartはGoogleが開発したプログラミング言語で、
TypeScriptと同じでJavaScriptへトランスコンパイルして使う。
TypeScriptとの違いは、宣言型UIフレームワークが組み込まれていること。
宣言型UIフレームワークは、必要なパーツは全てサポートされ、
直感的なコードを書くだけでUIを構築できます。
Dart公式サイト
FlutterはこのDartを使って開発します。
クロスプラットフォーム
単一のコードで、Android・iOS向けのアプリを同時に作ることができます。
今までは、AndroidならKotlinやJavaを使って開発、
iOSならSwiftを使って開発していたものが、
Flutterなら1つのコードで開発できます。
当然、プログラムの修正も1つのコードで管理できるので、管理コストも減ります。
そして、Android・iOSの開発ができるだけでなく...
Webやデスクトップアプリも出来ちゃう...らしい...
ホットリロード
コードを書いてすぐに実際の動きを確認できます。
コンパイルの時間が短縮されるので、格段に開発スピードをあげることができます！
マテリアルデザイン
宣言型UIフレームワークが導入されているので、
直感的なコードでUIを構築できるのですが、
そのUIが私たちがよく目にするようなデザインのものに
なっちゃいます。勝手に。
その他の特徴
その他にも特徴がかなりあるので、後はメモ程度に列挙しておきます。
- 処理速度が高速
- カスタマイズ可能なUIウィジェット → 少し複雑なレイアウトも可能
- VSCodeで開発可能 → 開発はVSCodeかAndroid Studioの2択
- ビルドが簡単
- Firebaseとの相性抜群 → サーバー側はBaaS
- API・SDKが豊富(になってきている) → Stripe(決済)なども入れられる
- 英語の情報が多数 → 特に公式の情報が役に立つ
Flutterの将来性
AdobeXDでのコード生成
Today we announce @AdobeXD x Flutter 👏!
— Flutter (@FlutterDev) May 13, 2020
The XD to Flutter plugin is now available as early access for broader public testing. Adobe XD is a UI/UX collaboration tool to help teams create and share designs. #FlutterGoodNewsWednesday
Learn more here ↓ https://t.co/v9Xa381XSs
AdobeXDでアプリのデザインしたら、そのデザインをFlutterのコードに書き出してくれます。
つまり、デザインはデザイナーに任せて、エンジニアはBaaSとの接続などに集中すれば良いだけになるのです。
理想ではあるので、どんな感じのコードを生成してくれるかによって使い勝手は変わってきそう...
あと、Flutterが良い感じのデザインのウィジェット用意してくれてるので、勝手にデザインが出来ちゃう感じだから...
Codepenでのコードスニペット作成
When one door closes, an entry point opens! 🚪
— Flutter (@FlutterDev) June 15, 2020
Check out the new entry point for the CodePen Flutter Editor. You can now easily create a new Flutter pen by going to Create > Pen > Flutter Pen.
See the gif below for more details ↓ pic.twitter.com/uarI3yhawc
これがシンプルに凄い。
Flutterをインストールすることなく試せるって初心者からしても嬉しいし、
なんせCodepenの良さは共有できることだから、これを使って解説記事も書きやすい。
最高すぎますね。
Googleがガチで開発中(?)
開発のスピードがとにかく速いです。
この間、webの開発もできるようになったのかと思えば、
デスクトップアプリもいけるのかと。
Googleが出す公式のドキュメントは英語だがわかりやすい。
特に、Flutter Widget of WeekというYouTubeに上がっている動画は、
FlutterのUIウィジェットの理解に非常に役立ちます。
Flutter Widget of Week
新OS「Fuchsia」の登場でさらに...
Googleは新OS「Fuchsia」(フクシア)を開発しています。
このOSは、Androidを置き換わると言われています。
何が変わるのかというと、このFuchsiaというOSは、
デジタルなもの全てに搭載させられるように開発している。
つまり、IoTに対応できるOSを開発しているというわけなんです。
どこまでが実現されるかわかりせんが、公式サイトはもうすでに↓
Fuchsia公式サイト
この「Fuchsia」で動くアプリも作れてしまうのがFlutter。
というより、元は「Fuchsia」のために作られたのがFlutter。
ということはですよ。みなさん！！！
Flutterを制するものは、、、
まとめ
Flutterマジでワクワクです！
学び始める前は、聞いたことないなぁって感じで、
やっている人も周りに数人って感じでしたが、なんか流行ってきたかもですね。
日本語の情報ももっと増えれば完璧やね！(^^) ← 発信頑張るよ！
この記事が良いと思った方は、LGTMをしていただければ嬉しいです！
フォローも是非お願い致します(^^)