🤘

WebエンジニアがFlutter入門した話

s0ar

2022/10/31に公開

おはようございます、こんにちは、こんばんは。
スペースマーケットでWebエンジニアをしています、s0arです。

Flutterに入門したきっかけ

スペースマーケットではアプリ開発に一部Flutterを使用しています。
自分はアプリの開発をしていないのですが、社内でFlutterの話をしているのを見て、ずっと興味がありました。
ただ、興味はありつつも、なかなか手を出せずにいました。
(どうしてもWebの技術の方を優先してしまって…という言い訳)

そんなときに、毎週金曜に行っているチャプター活動で、自己学習の時間を取れることになりました。

チャプター活動なにそれおいしいの？

チャプター活動とは、以下を目的として、毎週金曜にグループに分かれて行っている取り組みです。

メンバーの育成
技術的負債の継続的返却
職能に応じた相互扶助

これだけでは何がなんだか…だと思いますので、詳細は以下の記事をご覧ください。

Flutterワンチャンある

てなわけで、これチャンスじゃない？Flutterワンチャンあるんじゃない？ってことでFlutterやってみました。
ちなみにモバイルアプリ開発経験は、新卒入社した会社の入社時研修でAndroidアプリ開発を少しやった程度です。
もう8年ほど前の話ですね…何も記憶にないです…。
そんな素人同然…いやド素人がFlutterをやってみた話です。

Flutterやってみる

筆者の開発環境

macOS Monterey 12.6
CPU: Apple M1 Pro
メモリ: 16GB
エディタ: VSCode

インストールしてみる

めっちゃかんたんでした。
自分はbrew caskでインストールしましたが、公式見るとインストール方法があるので、お好きな方法でインストールされるのがよろしいかと。

❯ brew install --cask flutter

iOSやAndroidの開発をするなら、各開発環境の構築が必要です。
以下のコマンドで、足りないものが分かります。べんりですね。

❯ flutter doctor

自分はひとまずWebの開発だけやるので、他の開発環境構築はスキップします。
(実際はやりました。でもやってないことにします。Webの開発やるだけなら構築不要だってすべての構築終わってから気づいたんです。おちゃめでかわいいですね。)

プロジェクト作ってみる

以下のコマンドでプロジェクト作ります。カウンターアプリができます。

❯ flutter create flutter_counter_app
Creating project flutter_counter_app...
Running "flutter pub get" in flutter_counter_app...             1,213ms
Wrote 127 files.

All done!
In order to run your application, type:

  $ cd flutter_counter_app
  $ flutter run

Your application code is in flutter_counter_app/lib/main.dart.

ぼくにもできた！
では起動してみます。

❯ flutter run

こいつ…動くぞ…！

整理してみる

無事に起動したところで、実際にコードを見ていきましょう。
flutter createで生成されたコードはlib/main.dartに全てのコードが書いてあります。
これをそれっぽく整理していこうと思います。アーキテクチャはMVVMです。
過去にWindowsアプリケーション開発の経験があり、MVVMには一応馴染みがあるのでよゆーよゆー
(実際、6〜7年前の話なので、記憶ほぼ飛んでて普通にヤバいわよ！(ｶﾞﾁｬｶﾞﾑﾘｮ)

とりあえず、なんとなくModel, View, ViewModelに分けます。
ついでに、Viewはカウントアップのボタンとカウント表示を分けます。
で、「変更通知とかどうやるんだ…？とりあえずデファクトは何なんだ…？」ということでググるとRiverpodとfreezedを使うのが良いようです。
結果、構成はこんな感じになりました。

.
├── model
│   └── counter
│       ├── counter.dart               # カウント数管理
│       └── counter.freezed.dart       # カウント数管理(freezed)
├── view
│   ├── components
│   │   ├── counter
│   │   │   └── counter_view.dart      # カウント数表示
│   │   └── increment_button
│   │       └── increment_button.dart  # カウントアップボタン
│   └── pages
│       └── home
│           └── home_page.dart         # ページ
├── view_model
│   └── counter
│       └── counter_notifier.dart      # カウント数の変更通知
├── app.dart
└── main.dart

実装してみる

こんな流れで実装しました。

Model実装
- ほぼfreezedにおまかせです
ViewModel実装
- StateNotifierとStateNotifierProviderで実装
View実装
- パーツ分割(カウント表示部とカウントアップボタン)し
  - それぞれProvider経由でstateを受け取り、値を取得・更新
- pageに組み込み
app.dartにメインクラスを移動し、main.dartはmain関数のみの実装にする

出来上がったものがこちらです。

完走した感想

Flutterはおろか、Dart自体初めてでしたが、意外ととっつきやすく、このぐらいのコードであればあまり悩まずに実装できましたね…嘘です普通に悩みました。でも楽しかったです(こなみかん)
今度はもう少し実用的なアプリの実装に取り組んでみたいですね。

自己学習の時間がなかったらたぶん手を出していなかったと思うので、
チャプター活動さまさま…有意義な時間でした。

最後に

弊社スペースマーケットでは、一緒に働く仲間を募集中です。
ご興味ありましたら、ぜひ覗いてみてください！

GitHubで編集を提案

スペースマーケット Engineer BlogPublication

スペースを簡単に貸し借りできるサービス「スペースマーケット」のエンジニアによる公式ブログです。弊社採用技術スタックはこちら -> whatweuse.dev/company/spacemarket