Flutter On The Web が「ひな祭りの日」にイベント

# Flutterってなんだっけ？

2018年末に正式リリースされた当初、Flutterはモバイル向けのクロスプラットフォーム開発フレームワークとして登場しました。なんと開始6か月で500万人が利用したというから凄まじいですね。このとき、On The Web は置き去りにされていました。それが、そろそろ来るぞという噂話を繰り広げます。これ正式リリースしたら、また500万人使うんでしょうか？

[Announcing Flutter 1.12: What a year!](https://medium.com/flutter/announcing-flutter-1-12-what-a-year-22c256ba525d)によると、2019年末にFlutter On The Web がBeta版になっています。このBeta版のリリースから１年が過ぎました。もういつ来てもおかしくないぞ正式リリース！！早く欲しい！よだれがやばい！

# Flutterがイベントを開催？

[Flutter Engage](https://events.flutter.dev/) (2021/3/3 9:30AM~1:30PM PST)というお祭りをやるらしいです。

>Join the Flutter community around the world for this special online event! There will be opportunities to engage, innovate, and collaborate with the global community.

翻訳）世界中のFlutterコミュニティに参加して、この特別なオンラインイベントに参加してみませんか？世界中のコミュニティとの交流、イノベーション、コラボレーションの機会を提供します。

とのこと。なんか熱いので参加してみると良さそうです。日本時間だと、3/4の02:30から06:30です。これは徹夜か超早起きですね。

## Flutterを公式が解説？

上記の Flutter Engage では、３時間目に「Session 1: From Mobile App to Web App」が計画されています。

> In this talk, John and Mariam will show you exactly what it takes to get an existing Flutter app running on the web, how to debug on the web, and deploy your web app.

翻訳）この講演では、John と Mariam が既存の Flutter アプリをウェブ上で動作させるために必要なこと、ウェブ上でのデバッグ方法、ウェブアプリのデプロイ方法を正確に紹介します。

これは期待できますね。中の人が話してくれるからには分かりやすいんでしょう。（めっちゃハードル上げる）

# Flutterはどこが魅力的？

>Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.

翻訳）Flutter は、単一のコードベースからモバイル、ウェブ、デスクトップ向けに**ネイティブにコンパイルされた美しいアプリケーション**を構築するための **Google の UI ツールキット**です。

この**単一のコードベース**っていうのがすごくて、**dartのソースファイル１つで完結しちゃう感じ**なのが魅力的です。
※ただ、あんまりデザイナーズよりな外観になると厳しいかもです。

# なぜ単一コードベースが嬉しいのか？

snowpackやwebpackを試してみましたが、環境構築が難しいです。環境を構築できたとしても、バージョンの移り変わりの激しいこの分野ではテンプレートプロジェクトのようなものは意味をなさないでしょう。そのためにCLIがあったりしますが、それも完ぺきとは言いきれません。

これを、Dartが解決してくれると思っています。FlutterはDartだけ書けば良いです。これにより、scssのためのモジュールや、画像のためのモジュール、jsのトランスパイル、minifyによる圧縮など、**ひたすらコンパイルモジュールを組み合わせるという苦悩**から解放されることでしょう。

# JSXはさようなら？

CSSやJSXがなくなるので、コードの複雑さが減るのでしょうか？それは人によるかもしれません。何しろ、今までCSS・HTML・JSで分けて書いていたものが、ぱっと見同じ見た目で羅列されているのですから。もしかしたら、JSXとは違った拒否反応の症例が誕生するかもしれませんね。

dartでCSSしていて、CSSが要らないことが分かりやすい例：

```dart
const Card(
  child: Padding(
    padding: EdgeInsets.all(16.0),
    child: Text('Hello World!'),
  ),
)
```

# Flutterでデザインどう描くの？

flutter完全に初めてだと「Dartってjsに相当するんだよね、cssはどうするの？」と思いませんか？なんと、paddingとかborderとかほんとに何もかもdartで書きます。初めて見た感じは、「え？これ箇条書きなの？」でした。実際はもう少しロジックがあるのですが、どれほど簡単なのかご想像いただけたでしょうか？「難しいことを簡単にやってこそプロ」ですよね。この言葉の具現化だと思えます。

まあ、Dartファイルをモジュール分割したりはしますが、そこはご愛敬。

# Flutter で Material UI

[Material IO](https://material.io/)というサイトをご存知でしょうか？このサイトはGoogleが、「こんなデザインを推奨するよ」「うちではこうするから、みんなも合わせてくれるとキレイになるから嬉しいな」って言うためのサイトです。この中に、Flutterでプログラミングするときにコピペできるパーツキットが掲載されています。

たとえば、この[Button](https://material.io/components/buttons/flutter#using-buttons)だと、こんな感じのコードが記事中に書かれていて、説明を読みながらコピペして終わりです。

```dart
ElevatedButton.icon(
  onPressed: () {
      // Respond to button press
  },
  icon: Icon(Icons.add, size: 18),
  label: Text("CONTAINED BUTTON"),
)
```

これだけで、ボタンができちゃうんですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134703/f3fdd1bc-9357-89c8-428e-8cc0b1b626e7.png)

ここから色を変えたり、アニメーション入れたり、ボタン押下後の処理を足したり。全部Dart内です。

# FlutterはなぜOn The Webしようとしているの？

もともと、まっ平らなモバイルアプリ上にWebページを動かしているような実装のWebアプリなので（うそ）、ブラウザ付いているかどうかの違いだったから（うそ）。ハイ、しりません。想像で言うと、「せっかくクロスプラットフォームなんだから、全部対応させようぜ」ってノリじゃないでしょうか。

こちとら、サボリーマンですので、１つのソースコードで全プラットフォーム対応というのは至福です。Unityの次ぐらいに愛おしいですね。

# Flutterのまだまだなところは？

「いいとこばっかり挙げげてるけど、それじゃあ信用ならない。」って？
今一番の課題は、トップページの読み込みが遅いことです。
自作のAppbarしかないアプリをXサーバーに上げて実験してみました。
[LightHouse](https://developers.google.com/web/tools/lighthouse?hl=ja)を使って見ると驚きの結果に！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134703/6c7283e1-5c4a-a871-5f67-4205aa5068ae.png)
Performanceがひどいです。AccessibilityやBestPractisはTitleタグが無いことが原因でした。
また、SEOは高い点数を取れていますが、Metaタグを書き換える手段が今のところなさそうです。

# まとめ

早くStableして欲しいから、Githubに貢献しようかな。
良い子のみんなも、お腹が空いたら夕飯の準備を手伝おうな！約束だぞ！

**Excelsior!**