自社開発チームのFlutter奮闘記

みなさんこんにちは、広島大学大学院国際協力研究科の小川翔生です！現在はクランチタイマー株式会社

で長期インターンに参加しています。

私自身、自社開発チームで主にフロントエンドを担当しているので今回は、Flutterを勉強してみて感んじた

感想や技術周りの話をしていきたいと思います。


また、自社で開発しているプロダクトに関して、詳しく記載しているストーリーがありますので、こちらも

ご覧になってください。

フロントエンド(Flutter)

現在開発しているものは、アプリケーションは工数削減のためマルチプラットフォームであるFlutterを用い

て開発を行なっています。

Flutterを勉強してみての感想

自分がFlutterを勉強する前は、HTML, CSS, Ruby on railsをちょろっと勉強したぐらいだったので、ネイテ

ィブアプリを作るのは初めてでした。

一番初めに、業務をこなした時思ったのが、UIを作るのが直感的で作りやすいなと思いました。Flutterで

は、Widgteという用意されているUIがあり、その用意されているものを正しく積み上げていけばUIが作れ

ます。ですので、積み木感覚でUIを作ることができ、楽しく、容易にできたという印象です。

UI部分は、比較的飲み込みやすかったにですが、躓いた部分も多々あります。

つまづいた部分

つまづいた部分を以下に並べると、

• 状態管理の概念の理解
• 複雑なUIの組み立て
• Classなどのオブジェクト指向の理解

フロントエンドを行う上で切っても切れない存在なのが状態管理です。

ここで、自分はフロントエンドを触れるのが初めてというのもあり、そもそもの状態管理の概念からつま

づきました笑
Qiitaなどで、なんとか概念を理解はしたものの、Flutterでの状態管理の実装方法がなんとも最初は理解に

苦しみました。

次に、複雑なUIの組み立てに苦労しました。

UI作るの比較的飲み込みやすいって言ってたじゃん！！と突っ込まれそうですがごめんなさい、凝ったUIを

作るときは結構ハマります。

全体的に言えることなんですが、Flutterに関する日本の記事があまりないので、ハマったときは、英語記事

で解決策を見出さないといけません。そこも人によってはつまづきポイントかもしれません。

また、これはFlutterに限らないことなんですが、オブジェクト指向の概念にも自分はつまづきました。

型、class、インスタンス化 etc…

FlutterのUIはwidgetを組み立てると言いましたが、そのwidgetはclassからできており、widgetという型で

できていました。ですので、UIをつくつときも、オブジェクト指向的知識は不可欠だったんですが、そこ周

辺の知識を疎かにしFlutter書いていたので細かい部分でわからないところが多々ありました。

社内でのFlutter知識の共有

また、新しい自社開発メンバーが入ってきてくれたこともあり、自分が学んできた内容をどのように共有し

ようかと考えたときに、以下の4ステップで知識を共有しました。

1. FlutterでどのようにUIを作成するのか、手本のUIとそのコードを見ながら練習。
2. 自社開発で使用している状態管理はどのようにするのか、手本のコードを見ながら練習。
3. ペアプロで開発中のタスクをこなし、どんなことを考えながら開発をするのか、自社開発のアーキテクチャーはどうなっているのかを説明しながらコードを書いていく。
4. 実際に開発中のタスクをこなしてもらいながら1、2の復習。

まず、ベースとなる基礎知識をハンズオン形式で学んでもらいます(自分がかいたQiitaなど)。できる限り現

在使用している技術にフォーカスして行なってもらいました。

その次に、ペアプロで開発の流れを説明しながら進めていきます。ここで、ペアプロのイメージですとお互

いが時間を設けながら、個人でコードを書いていくという流れが一般的ですが、ほとんど初めての状況で

この方法をとっても、全体像が把握できないため、自分がなんのコードを書いているのかわからなくなり

ますし、知識が足りないことによる非効率なコーディングになるためその手法はとらず、説明に特化したペ

アプロを行いました。

最後に、実際に一人でタスクを行ってもらいながら1、2の復習をしてもらいました。

また、コードを書いた人がコード近くに、コメントを書きこのコードがなんの動作を行っているのかを説

明したり、slackで参考にした記事を共有して知識の共有を行っています。

Flutterの技術面

UI構築

UI構築は、基本的にFlutter sdkで提供さえれているwidgetを使いまくって作成しています。こんなにwidget

を用意してくれてgoogleさんありがとうって感じです。

約半年Flutterで開発していても、まだ知らないwidgetが多くあるので、youtubeにあげられているWidget of

the weekという動画をみて毎回へぇ〜っと感心しながら開発しています。

(開発する前に一通り見ておいた方がいいかもしれません。)

状態管理

Flutterを使うにあたって、一番考えなければいけない部分が、状態管理の実装をどうするかです。

現在、Flutterは公式ドキュメントにあるように多くの状態管理手法があります。

その中でも、近年比較的これを使っておけば間違いないというものが出てきました。

それが、Provider(現在はriverpodの方が上)です。

今現在では、provider + changeNotifierの組み合わせの状態管理手法が無難で、比較的大きなプロジェクト

になっても適切に扱えば問題なく使用できます。

また、初学者にとって非常にとっつきやすいのも良い部分ですね。
公式サイト

しかし、現在のプロダクトではこの状態管理は使用していません。

どの状態管理を使っているかというと、provider + freezed + stateNotifier の3つを組み合わせた状態管理手

法をとっています。

provider + changeNotifierとは異なり、

• 状態変数を一つの変数(state)のみで管理している。
• 状態変数を管理するclussとそれを取り扱うロジック部分のcluss完全に別れている。
  etc…

という特徴を持っています。

扱いやすさでいうと、changeNotifierの方が扱いやすいのですが、provider + freezed + stateNotifierの状態

管理の方が状態変数がimmutableに扱われるなどの得られるメリットが多くあるためこの状態管理手法にし

たんだと思われます。(自分が剪定したわけではない)

また、どんなメリットがあるのかは調べてみてください。

現在のプロダクトではprovider + freezed + stateNotifierを採用していますが、去年(2020年)にproviderに変

わるriverpodという新しい状態管理手法が出てきました。

完全にproviderの上位互換なので、今後採用する可能性もあります。
Riverpod

開発で気をつけていること

Flutterでアプリを開発していくにあたり、今後パフォーマンスを意識した開発を行なっていこうと考えてい

ます。

状態変数に変更があった時、widgetが再ビルドされるのですが、その時にいかに無駄な再ビルドを防ぐか

を意識します。

ポイントとしては、

• constをできるだけつける
• widgetを深くしない
• widgetをメソッドでなくclassで定義する
• Consumerwidgetの使用を考慮に入れる
  などです。

まだまだあるかもしれませんが、もしこうしたらパフォーマンス上がるよというのがあったらご教授お願

いします。

CI/CDツール

FlutterのCI/CDツールとしてCodemagoicを使用しています。

Flutterに特化しているので設定も比較的簡単だと思われます。

slackにビルドの始まり、終わりを通知してくれたり、firebase app distributionに自動配布してくれたり、

多くの設定を加えることができるので非常に便利です。

App storeにアプリ公開も自動でしてくれるみたいなので、リリースのタイミングになったら設定をしてみ

ようと思います。

Flutter開発で大変なこと

FlutterはGoogle製というのもあり、AndroidではFirebaseの設定、codemagicの設定、環境ごとのビルド設

定などの設定は、比較的簡単にできるのですが、やはりiosの設定となると厄介だなという印象です。

ある記事では、IOSネイティブ開発経験のある方で、慣れている方でもかなり難しかったと書かれていました。
ですので、しっかり参考になりなる記事を見ながら進めていかないといけないですね　。。。

最後に

このように、新しい知識、技術がどんどん出てくるFlutterですが、今ある知識でも非常に多いです。ですの

で、しっかりキャッチアップしながらアプリに必要な機能をつけることができるようもがいています笑

チーム内でも、コミュニケーションを取りながらどんな技術があり、どう実装するのかを話しあっており

お互いをお互いが支えている状況です。

今後とも、自分たちが満足できるアプリを作れるよう開発していきます。

また、クランチタイマー株式会社は現在正社員を絶賛募集中です！！

もし少しでも興味があれば、クランチタイマーの応募ページに訪れてみてください！！