Flutter for Webが発表されたので、早速動かしてみた!!

## 前置き
2019年2月から[LIFE PEPPER](https://www.wantedly.com/companies/lifepepper)にエンジニアとして転職しました。
その影響で、現在は機械学習ではなく、Web/iOS/Androidのフロント・バックエンドを担当しています。(基本的にはフロントかな)
Flutter歴は1ヶ月ほど。モバイルアプリの経験はSwiftかじったり、React Nativeでアプリをリリースした経験がある程度です。


## 経緯
弊社では、4月から新規事業のiOS/Androidを **Flutter** + **Go** で開発しています。
技術選定の際にすでにFlutterでWebアプリを開発することができる[Hummingbird](https://medium.com/flutter-io/hummingbird-building-flutter-for-the-web-e687c2a023a8)の存在は知っていて、楽しみにしていたところ、
今回の[Google I/O 2019](https://events.google.com/io/)で興味深い発表があったので、シェアします。

## Flutter for Webが発表されたよ
今回の発表では[Flutter for Web](https://developers.googleblog.com/2019/05/Flutter-io19.html)がテクニカルプレビューとして発表されました。
Flutterは昨年の12月にバージョン1.0が正式リリースされ、その際に先に述べたHummingbirdやWindows/Mac/Linuxのデスクトップアプリケーションを開発できる[Flutter Desktop Embedding](https://github.com/google/flutter-desktop-embedding)も同時に発表されています。

今回の発表では、Flutter for Webが試用版として一般利用できるようになったので、早速試してみたいと思います。

## 環境

- Macbook Pro 16GB Mojave 10.14.4 
- Flutter 1.5.4
- Dart 2.3.0
- Visual Studio Code 1.33.1

## やってみよう

flutter_web はFlutter SDK 1.5.4 以上を要件としています。

```console
// Flutter を Upgrade
$ flutter upgrade 

// flutter_webをクローン
$ git clone https://github.com/flutter/flutter_web.git

// flutter_web用のpackageをインストール
$ flutter packages pub global activate webdev
$ export PATH="$PATH":"$HOME/flutter/.pub-cache/bin"
```

```console:./bash_profile
// webdevコマンドを使うためにPATHを通す
$ export PATH=/Users/your-flutter-path/flutter/.pub_cache/bin
```

```console
// PATHを有効化
$ source ~/.bash_profile

// クローンしたレポジトリのexampleを実行していく
$ cd flutter_web/examples/hello_world

$ flutter packages upgrade
! flutter_web 0.0.0 from path ../../packages/flutter_web                
! flutter_web_ui 0.0.0 from path ../../packages/flutter_web_ui          
Running "flutter packages upgrade" in hello_world...               18.6s

// web serverを立ち上げる
$ webdev serve
```

何もなかったらこれで実行できるようですが、自分はうまく行かなかったので以下のようにして実行を行いました。

## ハマりどころ
１ webdebコマンドが効かない
 
```console
// web serverを立ち上げるとdartコマンドがないと言われる
$ webdev serve
/Users/username/flutter/.pub-cache/bin/webdev: line 7: dart: command not found
```

@Nkzn さんの[Flutter Webを動かしたときにつまづいたこと](https://qiita.com/Nkzn/items/402a29fe9bb517ce78aa)でもあるように、dartコマンドのPATHが通っていないことで起こっているようなので、PATHを通してみます。


```sh:./bash_profile
export PATH="$PATH":"$HOME/flutter/.pub-cache/bin" 
export PATH="$PATH":"$HOME/flutter/cache/dart-sdk/bin" // 追加
```

```console
// それでもコマンドはない
$ dart
-bash: dart: command not found
```
 
２　そもそもDart SDK入れていなかった。

Flutter SDKをインストール際に勝手にDartも入っていたので、あるものだと思っていましたが、自身の環境自体にDart SDKはインストールされていませんでした。初歩的ですが、一瞬戸惑いましたのでついでのDart SDKもインストールしましょう。

```console
// Dart SDKをインストールする
$ brew tap dart-lang/dart
$ brew install dart
$ brew update
$ brew upgrade dart
$ brew cleanup dart
```
参照：[初心者のためのDart 2入門](https://www.tuyano.com/index3?id=5639221461123072&page=2)

これでdartおよびwebdevコマンドは無事に使えるようになりました。

３ それでもエラーは出る

webdevコマンドが使えるようになったので早速実行してみます。

```console
// pub getが必要ということを指摘される
$ webdev serve
webdev could not run for this project.
The pubspec.yaml file has changed since the pubspec.lock file was generated, please run "pub get" again.

// 実行してみる
$ pub get
Downloading ...

// 再度実行する
$ webdev serve
[INFO] Serving `web` on http://localhost:8080
[INFO] Running build completed, took 14.2s
[INFO] Caching finalized dependency graph completed, took 144ms
[INFO] Succeeded after 14.4s with 548 outputs (3169 actions)
```
行けました！
これで `http://localhost:8080` にアクセスすると`Hello World`できるようになります。

<img width="1161" alt="スクリーンショット 2019-05-09 11.03.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228436/57e577fc-bbdd-8979-6054-ba04e9e6f26e.png">

## せっかくなのでexamplesを全部動かしてみよう

examplesには`hello_world`の他に3つサンプルがあります。これを一つ一つ実行していきます。

**注：**　自分だけかもしれないのですが、他のサンプルを実行する際に`$ webdev serve` を実行すると必ず `$ pub get` するように求められます。ここに関しては調査中です。

#### custom_fonts

<img width="1499" alt="スクリーンショット 2019-05-09 11.17.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228436/37ebe747-6dbc-bc49-b4ad-73955449a112.png">

---

#### gallery

![ezgif.com-video-to-gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228436/0efb7299-7145-f5e8-2e35-78691bd6f30e.gif)

---

#### spinning_square

![ezgif.com-video-to-gif2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228436/4a01d5d4-60fd-03bd-4002-246a1c7e9289.gif)

---

## 感想
今回は試用版ですので、まだ製品として利用はできないようですが、Flutterが今後本当にマルチプラットフォーム開発を行える可能を大いに感じる、非常な有意義な時間でした。
公式でもすでに60fpsをサポートしている(?)ので、アニメーションはぬるぬる動きます。
今年には製品版作れるくらいになるのかな？ ともあれクロスプラットフォーム開発は楽しいですので、皆さんも是非お時間あれば取り組んでみてください！

## 参考文献一覧
- [Flutter for Web](https://flutter.dev/web)
- [Flutter: a Portable UI Framework for Mobile, Web, Embedded, and Desktop](https://developers.googleblog.com/2019/05/Flutter-io19.html)
- [flutter_web](https://github.com/flutter/flutter_web)
- [Bringing Flutter to the Web](https://medium.com/flutter-io/bringing-flutter-to-the-web-904de05f0df0)
- [初心者のためのDart 2入門](https://www.tuyano.com/index3?id=5639221461123072&page=2)
- [/bin/sh: dart: command not found #27162](https://github.com/flutter/flutter/issues/27162)
- [Flutter Webを動かしたときにつまづいたこと](https://qiita.com/Nkzn/items/402a29fe9bb517ce78aa)