【Flutter/コード自動生成】FlutterGenを使ってみる。

こんにちは。最近はニホンザルにハマっている[minako-ph](https://twitter.com/minako__ph)です。
_※おすすめの猿山があったら教えてください_

昨日、[@wasabeef_jp](https://twitter.com/wasabeef_jp) さんが このようなTweetをされてらっしゃいました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">書いた / コード自動生成の FlutterGen を作りました。 <a href="https://t.co/nNOMDG7q1c">https://t.co/nNOMDG7q1c</a> <a href="https://twitter.com/hashtag/flutter?src=hash&amp;ref_src=twsrc%5Etfw">#flutter</a> <a href="https://twitter.com/hashtag/flutterdev?src=hash&amp;ref_src=twsrc%5Etfw">#flutterdev</a></p>&mdash; ᴅᴀɪᴄʜɪ ғᴜʀɪʏᴀ / ᴡᴀsᴀʙᴇᴇғ (@wasabeef_jp) <a href="https://twitter.com/wasabeef_jp/status/1302880384451899392?ref_src=twsrc%5Etfw">September 7, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

> Flutter向けに画像リソースなどのコードを自動生成するためのツールです。

ちょうど iOS開発の時に使っていた R.swift みたいなツール無いかなーと探していたタイミングだったので、
おおお.....！！これは！！🎉 となり早速試してみました。

# 何ができるのか

- 自動生成により画像などのリソースファイルへアクセスできるようになる
- 実装する時にコード補完が効くのでタイポしなくなる
- 静的解析ができるので存在しないファイルの指定などによる実行時のエラーを防ぐ

# この記事の概要

FlutterGenについては作者の[わさびーふ](https://twitter.com/wasabeef_jp)さんが[日本語で詳しく](https://medium.com/@wasabeef/fluttergen-25149caea94f)書いてくださっているので
この記事ではシンプルにFlutterGenを導入するとこから、
コード自動生成によるコード補完を実際に体験するまでを試してみました。

# FlutterGenのインストール

今回は `Homebrew` でインストールしました。

```bash
$ brew install FlutterGen/tap/fluttergen
```

インストールが終わったら使用できる事を確認してみましょう

```bash
$ fluttergen -h
```

今回はHomebrewを使用しましたが 他にも、
`Dart Command-line` や `build_runner` が用意されています✔️

# 実際に使ってみる

## コードの自動生成を実行する

今回は３種類の画像とフォントを用意しました。それぞれを assets/ 配下に配置します。

![スクリーンショット_2020-09-08_1_29_10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/468787/c4bd2e13-2ebb-c1b7-3f76-202dd81beb78.png)
pubspec.yaml に追加できたら、次に**FlutterGen**によるコードの自動生成を実行します。
パスはプロジェクトの `pubspec.yaml` へのパスを指定します。

```bash
$ fluttergen -c ./pubspec.yaml
```

すると一瞬でコードの生成が完了しました！
![スクリーンショット_2020-09-08_0_59_35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/468787/aea63faf-9333-758c-f672-0b1ff8624b8a.png)

## 実際にエディタで使用してみる

`assets/images/` 配下の画像を指定したいので、`Assets.images.` と入力してみます。

すると以下のように、コード補完機能が使用できるようになっている事が確認できます👏！
![Sep-08-2020 01-51-32.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/468787/5ebb2574-07fa-36ea-5839-3c4292c7c134.gif)

これでタイポを気にせずスピーディーに実装できるようになりました！
**とっても快適 ....... ><✨**

公式でも解説されていますが、対象ファイルがFlutterで対応してる画像フォーマットの場合、
`Assets.images.warauEbifried` で **AssetImage class**として使え、実際に描画する際は
`Assets.images.warauEbifried.image(...)` とする事で **Image class** として
`Assets.images.warauEbifried.path` で **String** として使えます。

- 普通に書くと ↓

```dart
// 文字列指定する為 タイポしやすい...
Image.asset(
  'assets/images/warau_ebifried.png',
  width: 150.0,
),
```

- FlutterGenを使用して書くと ↓

```dart
// Image classとして使用する. Image classが持つパラメーターを使用できます
Assets.images.warauEbifried.image(
  width: 150.0,
),

// Stringとして使用する
Image.asset(
  Assets.images.warauEbifried.path,
  width: 150.0,
),
```

今回のようにディレクトリ名が `assets/` もしくは `asset/` の場合は冗長となる為 省略されますが、
`Assets.directoryName.directoryName.fileName` のように階層をそのまま使用できるようになっています。


フォントでも使ってみましょう。
以下のようにStringとしてコード補完ができることが確認できます👏！
![Sep-08-2020 02-14-42.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/468787/45d3ccde-023b-15bf-6091-63e02e71c2b4.gif)
フォントの場合 `FontFamily.notoSansJP` のように指定が出来ます。

# 感想

ファイル名やディレクトリを追ってコピペして貼り付けて や 定数宣言して... みたいな
地味にコストのかかる作業が解消されとても快適になりました ><✨ 有り難いです ..

他にも出来ることなど詳しくは公式も是非ご覧ください！

# 参考

[コード自動生成の FlutterGen を作りました。](https://medium.com/@wasabeef/fluttergen-25149caea94f)
[Github｜FlutterGen/flutter_gen](https://github.com/FlutterGen/flutter_gen)
[pub.dev｜flutter_gen](https://pub.dev/packages/flutter_gen)