見出し画像

Flutterへリプレースすることを決めた話

NTT Resonant Technology

NTTレゾナントテクノロジー アジャイルデザイン部の長谷川です。普段はiOS/Androidアプリの開発を行いつつ、プライベートではGolangやRust、Flutterを勉強しながらアプリを作っています。

突然ですが、皆さんは「BOSAI MEMO」というアプリをご存知でしょうか？
NTTレゾナントテクノロジーからリリースしたアプリで、災害が起きた際に必要となる備品をリストアップし、すでに準備済みかどうかを管理できるものとなっております。ぜひ以下の各OSのストアページにアクセスし、ダウンロードして使ってみてください。

Android

iOS

今回は、そんな「BOSAI MEMO」の開発言語やフレームワークをリプレースした話となります。

BOSAI MEMOの現状

技術スタック

現在公開されているBOSAI MEMOは、以下の技術スタックを使って開発しています。

iOS

  • Swift

  • SwiftUI

  • R.swift

  • RealmSwift

  • SwiftLint

  • Xcode

Android

  • Kotlin

  • xmlベースレイアウト

  • Navigation UI

  • Glide

  • OkHttp

  • gson

  • Timber

  • ktlint

  • Android Studio

その他

  • Firebase (Crashlytics, Analytics, Storage, App Distribution)

  • Amplitude

  • Slack

  • Gather

  • Figma

  • Figjam

  • Miro

開発の進め方

現在、私を含め5名のメンバーで開発を行っています。それぞれ普段は別のプロジェクトで開発を行っており、タスク間の空いている時間や定時外を利用して本アプリの開発を進めております。そのため、1人あたりの稼働時間は週に1〜2時間ほどとなっております。
また、本プロジェクトは主に「スクラム開発」に則って進めています。あまり稼働時間が多くないため、1ヶ月スプリントでプランニング〜振り返りを実施して進めています。

問題点

初回のver.1.0.0の公開以降、開発を進めていく中で以下のような問題が挙がりました。

  • 使える時間に限りがあり、両OSアプリをリリースするのに時間がかかる

  • 新しい技術に触れる機会があまり無い

  • モチベーションが下がっていた

①使える時間に限りがあり、両OSアプリをリリースするのに時間がかかる

前述のとおり各メンバーは普段別プロジェクトの業務を行っています。そのため、Android／iOSの両方のアプリを別々で開発しているとリリースするまでに時間がかかり、新機能や不具合修正を入れたアプリをすぐに提供することができていませんでした。

②新しい技術に触れる機会があまり無い

このプロジェクトの目的の1つとして「“Playground”アプリとして、日々の業務には導入しづらい最新ツールやフレームワークなどを試す」というものがあります。これは、普段の業務では気軽には入れられないものをこのアプリに入れて試し、その結果を普段の業務にも反映していくことを目的としています。
プロジェクト立ち上げ時は様々なことを検討し新しいツール・フレームワークを取り入れてきましたが、だんだんとその流れが停滞してきており、何か良いものはないかなと検討していました。

③モチベーションが下がっていた

これまでの内容とも被ってくるのですが、Androidでは従来のxmlベースのUIレイアウトを採用していました。そのため、Androidアプリをメインに担当しているメンバーからは、「開発の進捗も悪く、従来のフレームワークで実装を進めているのもあり、モチベーションが下がってきた」という意見も聞くようになりました。

上記のような問題があり、プロジェクトとしてもこれは良くない！と思ったため、「それならば、今話題の『Flutter』で1から作り直さないか？」と思い切って提案してみました。
開発メンバー全員、Flutterの存在は知っていても知識としてはほぼ0でしたので、戸惑った人もいたかもしれません。しかし、反対意見が出てくることはなく、やってみよう！という流れになりました。

こうして、2022年4月からFlutterへのリプレースを開始しました。

Flutterへのリプレースを決めた理由

他にも解決策はいくつか存在しますが、その中でもFlutterへのリプレースに舵を切った理由は以下になります。

  • 1つのコードで両OS向けのアプリケーションが作成できること

  • Googleが開発しており、モバイル向けOSへのサポートが厚い(特にAndroid)

  • Flutter/Dart用のサードパーティ製ライブラリが豊富

  • ホットリロード機能によりレイアウト実装も楽

アプリ開発にかけられる時間が少ないため、より効率良く素早くアプリを提供するためには、シングルコードで両OS向けアプリが作成できるのはとても魅力的でした。その他にもサードパーティ製ライブラリが豊富であることやホットリロード機能があるなど開発者には嬉しいサポートもあり、開発がしやすそうということでFlutterへのリプレースを決めました。

Flutterへリプレースするために実施したこと

開発メンバー全員Flutterについての知識は無かったため、まずはFlutterを全員で学ぶことから始めました。
使用したテキストは以下になります。

初心者でも分かりやすく内容も充実しており、今でもテキストのアップデートが続けられています。しかも、それが無料で見ることができます。本当にこのテキストの著者には感謝しています。

その他にも、チームとしてQiita Teamを利用することになりました。これは、各自が調査して覚えた内容や所感などを記事として投稿し共有することでお互いの知識を共有して補い合い、全員でスキルアップができることを目指しています。また、知識共有以外にも、オンボーディング資料や設計ドキュメントなどもQiita Teamに集約しようと決め、現在取り組みを進めています。

Qiita Team上に投稿された技術共有記事は現在22件に

現在の状況

現在は全画面のレイアウト実装が完了しました。Androidについてですが、Kotlinで実装された時と同じようなレイアウトで実装をすることができました。
比較のため、現在ストアに公開されているKotlinで実装されたAndroidアプリと、Flutterでレイアウト実装が完了したAndroidアプリの動画を撮りました。

Kotlinで実装されたAndroidアプリ
Flutterで実装されたAndroidアプリ

比較しても大きな差異はなく(一部画面は新規機能が追加されている状態なので、全く同じというわけではない)、動作も快適です。

今後について

ビジネスロジックの実装が残っているため、Flutterの学習を続けながら完成を目指しております。
Flutterへのリプレースが完了しリリースした後は、社内で実際に利用していただいた方からのフィードバックの反映やリプレース前に追加予定のあった機能もあるため、引き続きメンバー全員が楽しく開発を進めていければと思います。

最後に

NTTレゾナントテクノロジーではスマホアプリ開発エンジニアを募集しております。少しでも興味がありましたら、ぜひ以下の採用ページをご覧ください。

この記事が気に入ったらサポートをしてみませんか？