ひと漕ぎで二度おいしい!? Flutterを使ったモバイルアプリ開発への期待と実態と付き合い方 （NTTデータ テクノロジーカンファレンス 2020 発表資料） 2020年10月16日（金） NTTデータ システム技術本部 デジタル技術部 高見 将則 講演動画は、YouTubeチャンネル「NTT DATA Tech」にて公開中！ https://www.youtube.com/watch?v=JXCnM_M_jb8

1. © 2020 NTT DATA Corporation
NTTデータ テクノロジーカンファレンス 2020
ひと漕ぎで二度おいしい!?
Flutterを使ったモバイルアプリ開発への期待と実態と付き合い方
2020年10月16日
株式会社NTTデータ デジタル技術部 高見将則

2. 2
© 2020 NTT DATA Corporation
自己紹介
• 高見将則
• デジタル技術部 Aglieプロフェッショナル担当
• デジタル技術を使った研究開発やプロジェクト支援に従事
• 認定スクラムマスター、認定プロダクトオーナー、AWS SAA
• フロントエンド・モバイルアプリ開発の研究開発のリードエンジニア
• iOS、Android、Flutter、React Native、React.js
• CI/CDパイプライン職人としてリリースサイクル高速化や開発者のDX改善が得意
• 以前はJava、PHPを使った案件のアーキテクチャ設計、AWS設計、EM業など

3. 3
© 2020 NTT DATA Corporation
クロスプラットフォームとは？
• シングルソースで複数プラットフォームで動作するフレームワーク
• Flutter、React Native、Xamarin、Cordova、Ionicなど
• iOS、Android、Web、Windows、macOS、Linuxで動作する
• Google、Facebook、Microsoftなどがリードしている

4. 4
© 2020 NTT DATA Corporation
クロスプラットフォームに関するR&Dの取り組み
• 2018年からFlutter・React Nativeの技術検証に着手
• 商用開発に向けた技術検証結果やサンプルコードを社内・G会社向けへ展開
• Flutter・React Nativeを使ったプロジェクトへの技術支援を実施

5. 5
© 2020 NTT DATA Corporation
今日話すことと話さないこと
• 話すこと
• NTTデータにおけるFlutterを使ったモバイルアプリ開発の実績について
• Flutterを例にしたクロスプラットフォームに対する期待と実態の紹介
• Flutterの商用案件経験を踏まえて、クロスプラットフォームとどう付き合っていくべきなのか
• 話さないこと
• どのクロスプラットフォームがイケてるか？
• Flutterを使った最適なソフトウェアアーキテクチャや状態管理の話
• Webやデスクトップを含めたクロスプラットフォームの知見

6. © 2020 NTT DATA Corporation 6
Flutter x NTTデータ

7. 7
© 2020 NTT DATA Corporation
Flutterとは？
• Google製のクロスプラットフォーム開発フレームワーク
• 2018年のGoogle I/Oにて正式発表、10/16時点の最新のstableは1.22.1
• iOS、Androidに続いてWeb、Linux、Windows、macOSに順次対応中
• 主な特徴
• 開発言語はDart
• Declarative UI（宣言的UI）
• プラグインによる機能拡張が可能
• OS固有のビューや実行コードの記述が可能

8. 8
© 2020 NTT DATA Corporation
Flutter製の有名なスマートフォンアプリ
Flutter製の主要なGoogleプロダクト
• Stadia
• Google Ads
• Google Analytics
• Google Pay※1
2020年9月時点で100,000以上のアプリがGoogle Play Storeで公開中※2
※1. https://developers.googleblog.com/2020/09/google-pay-picks-flutter-to-drive-its.html
※2. https://medium.com/flutter/announcing-flutter-windows-alpha-33982cd0f433

9. 9
© 2020 NTT DATA Corporation
NTTデータにおけるFlutter採用プロジェクトの実績
PoC、社内アプリ、企画型案件、商用案件を着実に遂行中
N1 Neuro AI審査員
オフショアを活用し低予算で両OSを短期間でリリース
Sakenomy
少数精鋭で両OSをサービス運営、Flutter for Webも利用中
某金融機関様 アプリリニューアル案件
約100画面のiOS・Androidアプリを半年でリプレース
お出かけ混雑マップ
リモートかつ1.5ヶ月の超短期間で両OSを商用リリース
https://www.nttdata.com/jp/ja/news/release/2020/061801-01/
https://sakenomy.jp

10. © 2020 NTT DATA Corporation 10
クロスプラットフォームに向けられる
期待と現実

11. 11
© 2020 NTT DATA Corporation
クロスプラットフォームを使えば生産性が2倍!?
ワンコードでiOS・Androidが開発できる！
工数半減！！生産性2倍！！
ひと漕ぎで二度おいしい？？

12. 12
© 2020 NTT DATA Corporation
クロスプラットフォームで見込める生産性向上効果
OS共通部分をワンコードで書けるところが強み
• OS共通機能部分は共通化によって記述量が減り生産性向上が見込める
• OS別の機能はフレームワークでの対処がない場合は個別実装になる

13. 13
© 2020 NTT DATA Corporation
実際のソースコードから見る共通化効果の実態
ビジネス要件によってはOS固有実装は避けられない
• 共通化の恩恵を得るにはiOS / Androidで共通のデザイン・機能が前提
• 実際はクロスプラットフォームのAPIで吸収しきれないOS差分実装は一定数ある
• 要件によってはOS固有実装の割合が増えるケースもある
• OS別デザイン差分
• WebView
• Push通知
• 位置情報
• Bluetooth
• NFC
• 音声・動画再生
• ファイルI/O
• OS別3rd Party SDK利用
…

14. 14
© 2020 NTT DATA Corporation
【参考】実際のソースコードから見る共通化効果の実態
OS別による機能差分度合いで共通化効果が決まる
• A案件はOS差分はほぼなしでFlutterによる共通化に全振り
• B案件はビジネス要件上OS別SDKを利用しておりOS別実装の割合が多い
Flutter案件のソースコード
割合（LoC）
A案件 B案件
Flutter関連ソースコード 79.4% (4677) 59.1% (55963)
Android関連ソースコード 7.8% (459) 19.0% (18075)
iOS関連ソースコード 12.8% (751) 21.9% (20714)

15. 15
© 2020 NTT DATA Corporation
クロスプラットフォームの恩恵を受けるための隠れたコスト
1. フレームワークのバージョンアップに追従し続ける
• Flutterのstableバージョンの更新は約3ヶ月に一回ペース
• 最新OS対応、バグ改修は最新版にのみ反映される
2. OS差分をなるべく減らすデザイン・機能であり続ける
• クロスプラットフォームの恩恵を得るためには共通化が前提
3. クロスプラットフォームを扱える開発者を抱え続ける
• 新規技術のため市場にも人材が不足がち
継続して安定開発し続けるために払うべきコストがある

16. 16
© 2020 NTT DATA Corporation
トータルで見ると実態は1.x漕ぎで二度おいしい
ワンコードでiOS・Androidが開発できる！
工数半減！！生産性2倍！！
1.x 漕ぎで二度おいしい！
※ 0≦x<1で x はビジネス要件に依存

17. © 2020 NTT DATA Corporation 17
クロスプラットフォームと
どう付き合っていくべきか？

18. 18
© 2020 NTT DATA Corporation
クロスプラットフォームの恩恵を受け続けるための工夫
1. フレームワークのバージョン追従コストを下げる
2. OS差分実装をなるべく少なくする
3. フレームワークが扱える開発者を戦略的に育成する

19. 19
© 2020 NTT DATA Corporation
1.フレームワークのバージョン追従コストを下げる
• 自動テストの仕組みをCIパイプラインとして構築する
• フレームワークが持つ単体テスト・UIテストの仕組みをフル活用する
• 実機テスト・改修サイクルを短縮するためにCDパイプラインを構築する
• アプリ資材作成、資材配布を自動化する
• フレームワークが提供するAPIを中心に利用して野良プラグインは極力使わない
• メンテナンスされない野良プラグインはバージョンアップの足枷になる

20. 20
© 2020 NTT DATA Corporation
2. OS差分実装をなるべく少なくする
• iOSとAndroidでなるべくデザインや機能を統一する
• Material Designに寄せてCupertino(iOS-Style)はなるべく使わない
• OS別の固有の実装を生む機能追加をなるべく控える

21. 21
© 2020 NTT DATA Corporation
3.クロスプラットフォーム開発者を戦略的に育成する
• クロスプラットフォーム経験者は希少人材のため育成が前提
• 技術転換の素養のある開発者を公式チュートリアルやOJTで育成する
• iOSエンジニア・Androidエンジニア
• React.js・Vue.js ・Angular等の経験があるWebフロントエンドエンジニア
• フルスタック傾向のあるバックエンドエンジニア
• 新規技術の学習意欲の高いジュニアエンジニア
• デジタル技術部の社員・協働者内に40名以上のFlutter技術者を育成済み

22. © 2020 NTT DATA Corporation 22
まとめ

23. 23
© 2020 NTT DATA Corporation
クロスプラットフォームとどう付き合うべきか？
• クロスプラットフォームを採用する前に
• ビジネス要件や開発体制などを考慮して個別実装よりも価値が見込めるか
• OSによる機能・デザイン差分が少なく共通化効果が見込めるか
• クロスプラットフォームとしばらく心中する覚悟を持てるか
• クロスプラットフォームを採用したら
• フレームワークのバージョンアップに追従し続ける
• OS差分をなるべく生まないようにデザイン・機能追加する
• フレームワークが扱える開発者を戦略的に育成する

24. 24
© 2020 NTT DATA Corporation
まとめ
• クロスプラットフォームは銀の弾丸ではない
• 特定の条件下においてアジリティ高く開発する手段の一つ
• 継続的に恩恵を受け続けるには見えないコストを払う必要がある
• OS別に作るよりも生産性が高くなるかはビジネス要件次第
• 自身の置かれた状況から多角的に判断して最適な技術選択をすべき

25. © 2020 NTT DATA Corporation

26. 26
© 2020 NTT DATA Corporation
【おまけ】万が一のときOS別実装にスムーズに戻せるか？
• いざという時にクロスプラットフォームを捨てる選択肢を考えておく
• メインデベロッパーのメガプレイヤーがメンテナンスを放棄した
• ビジネス上致命的な阻害要因となる実装不具合が解消できない
• クロスプラットフォームが扱える開発者が継続的に維持できなくなった
• クロスプラットフォーム↔OS別実装の段階的移行も技術的に可能になりつつある
• 既存アプリにクロスプラットフォームを追加して実装を共通化する事例が出つつある
※1. https://docs.google.com/presentation/d/1fWd2hsDXhIidYIpmkKLClOTpcyHrvmuagn2JN9ZW0lo
※2. https://fortee.jp/iosdc-japan-2020/proposal/ffc2099c-a65c-414b-90f0-677b90260201
※1 ※2