Hello Flutter（LTのスライドと原稿）

## これは何

2021年5月21日に開催される弊社内のLTイベント「Hello World」でのスライドと原稿をまとめた記事です。
内輪のイベントですが、外部に出してもある程度意味がある内容だろうと思い公開しました。

以下は実際の原稿とスライドです。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/9a35f245-844b-82bc-60e7-e4e23ae79177.png)

## はじめに

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/42138c73-f5ec-88ac-9195-5199019783c5.png)

今日はイベント名の「Hello World」にかけて「Hello Flutter」というタイトルでLTをします。
綿貫です、よろしくお願いします。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/57f11dc5-d170-e3fd-bab1-17c749c16446.png)

よろしくお願いしますが、多分みなさんの頭の中には「なんでFlutterなんだ？」という疑問が浮かんでいることでしょう。
現在会社で使っている技術でもないし、そもそも綿貫はデザイナーだし……。

ということで、どうしてFlutterを取り上げたのか？から話します。

## どうしてFlutter？

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/eb5966ef-97b9-f7cc-d09b-8d610a483f0f.png)

2021年3月3日[^1]のアップデートでFlutterがWebやデスクトップアプリをサポートしました。[^2]

[^1]: 参考までに、日本時間では4日でした。
[^2]: それ以前もベータ版としてWebやデスクトップアプリが作れたと思いますが、正式サポートはこのタイミングです。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/d8ae5f6f-c935-ef8a-c0a9-c70f0ac8f3b7.png)

このアップデートを受けて「会社でもFlutterで開発する場面が訪れるかもしれないなあ」と感じました。
理由はこの2つです。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/856bced3-a90b-1c20-c8df-4786b0d41153.png)

1. ビジネスにおいて、チャネル拡大はほとんど常に重要事項
1. WebとiOSとAndroidのエンジニアを揃えて採用するのはとても難しい

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/399176b5-a255-bfbd-e71f-8d84e139a1df.png)

チャネル拡大を目論むから色々なデバイスや環境に向けてサービスを提供したくなるけど、それぞれの分野のエンジニアを揃えて採用するのは難しい。
だからFlutterのようなクロスプラットフォーム開発ができる技術を採用する可能性は全然あるよねと、そういう理屈です。[^3]

[^3]: React Native for Webは？って話もあると思いますが、それはそれ、これはこれです。

## でも、お前デザイナーだろ？

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/595eb9d3-63c6-4065-2634-e317a80a9e4e.png)

仮にFlutterで開発するって言っても、乱暴に言ってしまえばデザイナーの制作にはそこまで関係ないんですよね。

同じ機能をHuman Interface GuidelinesとMaterial DesignとWebと……それぞれに沿った設計をするのは骨が折れますが、エンジニアと比べたら大したことは無いというか。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/9db87ca0-e517-584b-6d97-e965ddb06f2d.png)

しかし自分のモチベーションは別な場所にあって「エンジニアの技術選定を、デザイナーのスキル不足のせいで妥協させたくない」なんですね。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/77937b19-baf1-c05c-c588-a6ede1db9398.png)

数年前に「React使う？どうする？」って意見が全社で出てきた頃は「さすがにデザイナーがコードを全く触れなくなってしまうのでは？」っていう懸念が聞こえてきたんですよ。
全くもって妥当な話だと思いますが、それでも当時は複雑な気持ちだったんです。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/d80f5af5-9c75-68b5-b14b-4dd05a749b0a.png)

技術として良いものなら絶対使った方が良いじゃん！って思う自分と、ReactどころかjQueryも触ったことがなくて不安に思う自分と、どちらも存在していました。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/e0694cdf-58ef-8083-a7a3-1a235db5b30d.png)

なんやかんやあってポートフォリオを1人で構築できるくらいにはReactのスキルを身につけましたが、今後似たような状況は生み出したくないなあ……と思っています。
せめて「デザイナーが学ぶべき範囲は僕が責任持って教えるんで、選定基準に『現在のデザイナーの使用可否』は入れなくて大丈夫です」とスパッと言える状況にしておきたい。

という訳で、今回はそのうち使う可能性がありそうなうちの1つ、Flutterに手を出してみました。

## 実際に使ってみる

ここまで偉そうなことを言っていますが初めて触るので、まずはチュートリアルをしっかりやります。
初心者向けっぽいコンテンツを馬鹿にする人間は結局後から苦労するんです。

## インストール

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/3eba4d78-cd99-df12-0377-44f65cc5a141.png)

まずはインストール。

https://flutter.dev/docs/get-started/install/macos

OSごとにインストールの方法も違いますが、macOS用で進めていきます。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/505110d5-6e0b-c7df-9bbd-71e99d250d3e.png)

zipを落としてくるのがデフォルトで、GitHubからクローンしてくるのはアドバンスドなやり方だそうです。
パッケージマネージャーを使わないとアップデートとかバージョン設定とかどうするんだろうと感じましたが、最初は推奨設定で進める方が間違いがありません。
素直に従おうじゃありませんか。

言っても落としたzipを展開してホーム直下にでも置いてパスを通すだけです。[^4]

[^4]: 「パスを通すだけ」とか格好つけましたが、コピペで上手く動かなくてノリでアレンジしてコマンドを叩いたら環境変数を全部飛ばしてしまいました。変な汗を大量にかきました。

パスを通したら`doctor`コマンドを叩くことで自分の環境に何が足りないかを教えてくれます。

```shell
flutter doctor
```

チェックしてくれるのは以下の項目。
クロスプラットフォーム対応なので準備するものも多いですね。

- Andorid向けの準備
- iOS向けの準備
- Web向けの準備
- エディタ

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/cdaef06e-e040-6956-b725-4b79c91487d2.png)

自分の場合はAndroid Studioが入っていないのを注意されました。インストールします。

https://developer.android.com/studio

こちらも初めてのインストールなのでデフォルト設定のままウィザードを進めていきましたが1つ引っかかりました。

`Android SDK Command-line Tools`が必要になるのですが、デフォルト設定のままだと入れてくれなかったようです。
`flutter doctor --android-licenses`を叩いても怒られてしまいます。

```shell
Exception in thread "main" java.lang.NoClassDefFoundError: javax/xml/bind/annotation/XmlSchema
# ...
# 細々とした具体的なエラー内容が出た、今回は省略
Caused by: java.lang.ClassNotFoundException: javax.xml.bind.annotation.XmlSchema
```

よくよくドキュメントを読めば

> This installs the latest Android SDK, Android SDK Command-line Tools, and Android SDK Build-Tools, which are required by Flutter when developing for Android.

このように書いてあるのですが、FlutterもAndorid StudioもGoogleが提供してるしよっぽど良い感じに連携してくれるだろうと慢心していました。
ボンヤリ生きていてはいけませんね。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/2b4e3e9b-ad64-7594-bd94-8b3db9df9ff6.png)

結局

- `Android Studio > Preferences... > Appearance & Behavior > System Settings > Android SDK > SDK Tools`を開く
- `Android SDK Command-line Tools`にチェックを入れてApply
- ターミナルに戻って`flutter doctor --android-licenses`を叩く

で解消しました。

## エミュレーターの準備

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/987223a9-92d5-672c-46a0-f6d7680a9cfb.png)

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/d9945398-9335-0f9a-108e-f90a145ed48c.png)

iOSなら`cocoapods`をインストールする、Androidなら`AVD Manager`からハードウェアアクセラレーションを有効化しておく、と準備が必要です。

先ほど言った通りAndroidの開発環境を作ったことがないのもあって、`AVD Manager`へのアクセスだけで一苦労でした。

ドキュメントには

> Launch Android Studio, click the AVD Manager icon, and select Create Virtual Device…

と書いてあるんですが、いや、アイコンって言われても……って感じでした。
ちなみにコレです。難しくないですか？

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/03a31ce1-9223-2cdd-d60b-3a0d162b0db6.png)

ハードウェアアクセラレーションの設定も、リンクをたらい回しにされるようなドキュメントになっていて「ここってこんなに苦労する箇所か？」と涙が出そうになったのを覚えています。

## 新規プロジェクト作成

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/0f841642-53bf-2fb9-e5de-d99bc96ed112.png)

そんなこんなで準備を終え、いよいよプロジェクト作成へ。
Flutterの推奨エディタの中にVSCodeがあり、普段からVSCodeを使っているのでこちらで進めます。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/9b57adab-bfc8-94b7-1086-80b795f3a3ec.png)

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/0f9d55d2-dfcf-0f78-b799-19269aef6dd1.png)

エクステンションから`Flutter`をインストールしてコマンドパレットから`Flutter: New Application Project`を選択。

最初は`$HOME/my_first_flutter`の中に、サジェストされるがまま`flutter_application_1`の名前でプロジェクト作成したら動きませんでした。
最終的には`$HOME/my_first_flutter_application`という階層でプロジェクトを作り、動いています。

プロジェクトのフォルダ自体はアンダースコアを使うのはOKなんですが、親のフォルダはアンダースコアがダメ……？
ドキュメントを探してみましたが記述を見つけられず調査を断念しました。

## コードを書く

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/46ff69c6-81bc-7ce9-9b48-4d141b3941c1.png)

インストールやプロジェクト作成の時点だとドキュメントが意外と（？）不親切だったのに対して、コードのチュートリアルは迷うことなく進めました。
書いてある通りに進めれば問題無く動くというのはなんと素晴らしいことでしょうか。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/a1538cae-a5d2-ad83-976c-9d6574e5c879.png)

作業に取りかかる前にiOSのエミュレーターを立ち上げておいて

```shell
open -a simulator
```

その後は適宜必要な`run`コマンドを叩きます。
ものぐさな人は以下でiOSもAndroidもMac OSアプリも全部のエミュレーターが立ち上がります。

```shell
flutter run -d all
```

## 成果物

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/dd648426-9347-9f3d-e26e-081e1fd2c13e.png)

成果物は？って話ですが、今回はこの3つのチュートリアルを実施しました。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/54179f38-aedc-178b-236b-5466aee5943d.png)

https://flutter.dev/docs/get-started/codelab

ランダムな文字列のリストのビューを生成して、無限スクロールを実装する

https://codelabs.developers.google.com/codelabs/first-flutter-app-pt2#0

パート1で作ったものの色を変更しつつ、お気に入りアクションとお気に入りしたリストを閲覧できるようにする

https://flutter.dev/docs/development/ui/layout/tutorial

若干だけ複雑なレイアウトの練習、ロジックは一切無し

## 学び

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/9e0c3bb1-9aeb-6290-1fd7-fe8d1a4c4c0a.png)

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/ba45b030-ed64-9165-a24c-82a2b5a26dda.png)

まだ写経したら動いたって程度で1mmも理解できていませんが、Web出身のデザイナーとして把握しておくべきは

- Row, Column, Text, Center, Iconなど、初めから見た目のルールが設定されたウィジェットを組み合わせて作る
- title, subtitle, iconなど、決まったプロパティに値やウィジェットを渡すと勝手にレイアウトされる

あたりでしょうか。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/863311a5-4698-506a-d421-336b165cf3fc.png)

UIモックアップありきでコードを書くのは非常に大変そうなので、Flutterのルールやデフォルト値を把握した上でモックアップを作成する方が良さそうです。

理解が浅く、印象レベルでしかありませんが、このあたりのドキュメントとにらめっこする時間は長くなるのかなと思っています。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/9f0220e9-0193-2479-589d-24cb25c24b48.png)

https://flutter.dev/docs/get-started/flutter-for/web-devs

https://flutter.dev/docs/development/ui/widgets

## まとまらないまとめ

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/58afcb03-7a75-4b2e-af9d-c1033cdf9f70.png)

最後に、あまりまとまっていませんがまとめです。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/4130a424-6bfd-80f4-a953-21ce24c42b0d.png)

- 良い技術を「デザイナーが扱えないから」と選択肢から外すのは嫌
- というわけでFlutterも勉強してみた、なるほど分からん
- HTMLやCSSとは全然違う仕組みだから気合いを入れないといけない

自分の発表は以上です。ご清聴ありがとうございました。