「デベロッパーフレンドリーなフレームワークで初学者にもやさしい」Flutter未経験エンジニアが語るFlutter開発の魅力

トヨタコネクティッドでは、クルマのコックピットなど次世代の車載機を開発するにあたって、Flutter/Dartを採用しています。Flutterは2018年にリリースされた比較的新しい技術であることから、実務で使用した経験を持つエンジニアは多くありません。2021年にトヨタコネクティッドの開発チームに参画した山崎（写真・右）、伏見（写真・左）もまた、Flutter開発未経験者でした。そんな二人に、技術習得の過程や、実際にFlutter開発に携わってみての思いを聞きました。

「Flutter/Dartという新しい技術を採用している点に目を惹かれた」

——二人のこれまでの経歴と、トヨタコネクティッドに入社することになったきっかけを教えてください。

伏見：私は新卒でIT企業に入社し、ITのイロハを学びました。HTML、CSS、JSなどを用いたスマートフォンサイトの構築作業や、SPA（シングルページアプリケーション）のアクセス解析ツールの開発、フロントエンド開発からバックエンドのアプリケーション､データベース、Webサーバーまで、幅広く経験してきました。

あるときスマホアプリを作成することになり、どのプラットフォームを使うか調査をする中でFlutterに出会いました。結局はFlutterを採用しなかったので、開発は経験できませんでした。

当時、転職をしようとエージェントに登録をしていたのですが、フロントエンジニアの募集はほとんどがWeb開発かスマートフォンアプリの開発でした。その中で、トヨタコネクティッドの「次世代の車載機開発」は目を引くものがあって、詳細を見てみたらFlutter/Dartとあったのです。

それを見て、新しい技術であるFlutterを採用して車載機を作る、ほかではできない経験ができそうだという印象を持って参画を決めました。

山崎：私は社会人になって初めて携わった仕事が、iOSとAndroidのハイブリッドアプリの開発でした。共通の処理をC++で書いて、個別のプラットフォームはそれぞれ、Objective-C、Javaで書くといったものです。こうしたハイブリッドアプリの開発をしたり、Unityエンジンを使った3Dコンテンツの制作を行ったり、C++で軍事訓練シミュレーターを書いていたこともあります。

2社目に移ってからは、モバイルゲームのSDK（Software Development Kit）の開発に携わりました。C++とiOS/Androidの双方のやり取りをメインで行いながら、CI/CDを取り込んでリリース工程を自動化するといったことをしていましたね。

当時、C++やJava、Objective-Cなど、それまで自分が使ってきた技術スタックが比較的古いことに不安を覚えていました。新しい技術を学習したいと考えたときに「Flutter Engage」というYouTubeチャンネルを見て、トヨタコネクティッドの名前を知ったのです。

自動車メーカーでは車載機を作るとき、Qtなど古くからエンジニアに慣れ親しんできたフレームワークを使っているのだろうというバイアスがありました。ですが、トヨタコネクティッドの開発リーダーは、Flutterの速いレスポンスを使ってスマートフォンのような操作性を実現すると言っていて、この会社に入りたいと思ったのです。

当時は募集要項に「Flutter」と書かれていることがそもそも少なかったのと、日米統合で100名規模の開発チームを作るという目標を掲げていた点にも惹かれましたね。

——現在はそれぞれどんな業務に取り組んでいますか？

山崎：私と伏見さんは同じ開発チームにいて、次世代の車載機アプリのUI開発や多言語対応の技術検討など、アプリケーションの基本となる機能の開発に携わっています。

多言語対応の技術検討の例を挙げると、画面に表示する文言が長すぎて指定された固定幅に納まらない場合、文字切れという処理を行います。

たとえば、モバイルアプリケーションで文字切れの処理をする場合、文字が切れる部分に「…」を置いて続けたり、何も表示せずにしたりします。ですが、車載機で大切な文言が途中から表示されなくなってしまうと、安全性の面でも困ったことになります。

そのために、文字切れをした場合にどう表示するかを検討したり、文字切れが発生したときにできるだけ早い段階で検知して、翻訳者に通知するシステムを作ったりといったことをしています。

伏見：いま話に出た多言語対応の技術検討については山崎さんがメインで担当していますが、私は共通で使用するボタンやトグルなどのUIパーツをFlutterで実装していますね。

初学者にやさしい設計。学ぶ手段も多くスムーズな技術習得が可能

——二人はFlutter開発の実務は未経験だったということですが、あえてFlutter開発に挑戦しようと考えた理由を教えてください。

伏見：私が実務で経験したことがあった言語はJavaとJavaScriptの2つだけでしたが、JavaScriptで使っていたフレームワークのReactはFlutterと似ている部分が多いのです。React同様、FlutterもUIを意識しながら開発ができるので、新しく触れる技術だからといってそこまで不安はありませんでした。Flutter自体が新しい技術だったので、メンバーの中にも実務経験で使ったことがある人は少ないのではないかと思ったこともあります。

山崎：私も、未経験だからといって不安を感じることはありませんでした。Flutterを学習するにあたっては、デベロッパーサイトを見たり、チュートリアル形式で手を動かしたりしていますが、フレームワークがとにかく初学者に優しい設計になっている印象です。「こんなものが作りたい」と思ったときに、方法を調べればすぐにサンプルコードと一緒にレシピが出てきます。

伏見：Cやアセンブラのような低級言語を使うとなると、いきなり実務に飛び込むのは抵抗がありますが、Flutter/DartであればGoogleがドキュメントを用意してくれているだろうし、自分でも学び進められるだろうなと思いましたね。

山崎：そうですね。JavaScriptが使えればFlutterはできるだろうと認識していましたし、Javaの経験があってクラス設計やオブジェクト指向の知識があれば、すんなり入れそうな雰囲気がありました。

伏見：その点では、Flutterそのものへの技術的な不安よりは、プロジェクトへの不安がありましたね。前職はエンジニアが3名ほどの小規模プロジェクトに携わっていたので、そこから100名、200名といった規模の大きなプロジェクトになるという点が一番気がかりでした。

山崎：そうですね。開発プロセスをどう進めるか学習するところから始まって、1週間単位で作業を進めていくスクラムでの開発に取り組むのも初めてだったので、戸惑いはありました。

———入社後、どのように技術習得をしていったのでしょう。

山崎： Flutter/Dartのデベロッパーサイトを読んで、気になるところは実際に手を動かしてチュートリアルをする。その繰り返しですね。チュートリアルの段階では、つまずくようなことはほぼありませんでした。

伏見：私の場合、入社してすぐプロジェクトに参加するのではなく、Flutterで簡単なパーツを作成するところからスタートしました。チームメンバーである山崎さんがフォローしてくれたので、大きくつまずくことはありませんでしたね。

実際のプロジェクトに入ったあとも、既にプロジェクト内にFlutterを使ったコードがたくさんあるので、そこを読めば理解できます。すべてきれいなコードで書かれているので、読みやすいし学びやすかったですね。

——Flutterを身につけていく過程で、これまでの経験が生かされた場面はありましたか？

伏見：プログラミングは、とにかく実行してログを吐かせることの繰り返しでいろいろ試すという側面がありますよね。前職では新しいものを自分でイチから設計して作る場面が多かったので、そういった経験を生かして、どういう設計で作ればパーツがきれいに動くか、想像しながら作ることができました。

山崎：前職で扱っていた軍事訓練シミュレーターは、改修をしようとしてGoogleで情報を探しても、なかなか情報が出てきませんでした。コードもオープンソースではなかったので、英語で書かれたドキュメントを見ながら試行錯誤していましたが、Flutterの習得にもその経験が役立っているように思います。

いざとなったら、APIリファレンスを直接見ればどうなっているのか確認できますし、何よりもFlutterはオープンソースなので、リファレンスを見てもわからないと思ったら直接コードを見て確認できます。

Flutterはデベロッパーフレンドリー「開発者のための環境が整ったフレームワーク」

——実務で実際にFlutterを使ってみて、技術的観点からどう感じますか？

山崎：Flutterの一番の特徴はホットリロード機能ではないかと思っています。コードで問題があったときにわざわざリビルドしなくても、リロードボタンを押せば画面に結果が表示されます。何か問題が起こったとき、修正にかかる開発サイクルが小さくて済みますね。

プログラムの構成という点では、以前の経験や知識が少なからず足かせになってしまったことがありました。たとえば、UIの状態を変更したいとき、Qtなどのフレームワークだとボタンの文言を変えるためにSetTitleなどの関数を使って明示的に変更をします。Flutterでは部品の中にデータを持っていて、そのデータを直接触ることで部品の文言をビルドし直す仕組みになっているので、そこに戸惑いました。

伏見：コーディングしながらUIを意識できるのも利点の一つですね。

状態管理の手法については、StatefulWidget, BloC, ChangeNotifier, provider, riverpodなどがありますが、王道的なものはなく、どれを採択するかはエンジニアに依存している印象です。

Flutter/Dartの難しくもおもしろい点だと感じたのが、Dartのコンストラクターの書き方ですね。コンストラクターの書き方が特殊でいろんな種類があるので、そこにつまずきました。一方で、これはどういう目的で作られたコンストラクターなんだろうと考えながら進めていくのが楽しくもありますね。

山崎：Flutterに限らず、AndroidやGoogle製品が使っている開発フレームワークはデベロッパーフレンドリーだと感じますね。たとえば、自分が作ったコードを検証するためのシステムが用意されていてテストが簡単にできたり、Flutter testというコマンドを1つ置けばテストを実行してくれたり。デバッグするにあたっても、画面の中にブレークポイントがあります。

このように、Flutter開発の一番のポイントはデベロッパーフレンドリーであるところです。何か問題があったときでも開発者のための環境が整っているので、助けになるでしょう。

——それぞれ、技術的に感じている課題はありますか？

伏見：Flutterはフロントエンドの知識があれば対応できますが、それをOSとつなげる作業をする際はバックエンド側の知識が必要です。私自身、バックエンドに関する知見が薄いと感じているので、そうした知識や経験のある人がチームにいれば心強いですね。

山崎：Flutterで作ったアプリはモバイルの環境で動かすわけではなく、車載機に組み込んで使います。開発の段階ではWebやモバイルのシミュレーターなど、自分の好きなプラットフォームを使って動作を確かめていますが、実際に車載デバイスに入れ込んで動作したときにパフォーマンスが保たれるかを考えなければなりません。

伏見さんが言ったように、バックエンドとのやりとりの仕組みを学習しなければならないと思いますし、そもそも車載用デバイスにアプリケーションをビルトするための知識が必要です。今後はそこが大きなチャレンジになると思っています。

——二人の今後の目標や、開発を通して実現したいことはありますか？

山崎：私は一連のプロセスの中でも、単体テストが大好きなんです。テストは動く仕様書だと思っていて、「こういう仕様と前提のもとにプログラムを書きました」という意思がテストに表れるのですよね。わからないコードを確認するときにも最初にテストコードを確認しています。

もちろん実装も手は抜きませんが、まずテストの段階で自分がどういうものを作るのか記述してから、それにあわせて実装をしていく。実装したものがきちんと動くか、テストを回す。そうした開発サイクルを突き詰めていきたいと思っています。

伏見：今後はより高品質なものを作っていきたいと考えています。こうした大規模なプロジェクトでは、雑なものを作ると巻き戻しに時間がかかってしまいます。ファーストコーディングの段階から品質の高いものを作るよう意識していきたいですね。

山崎：そうですね。Flutterはユニットテストに強いフレームワークだと感じています。単体テストだけでなく、ウィジェットテストやインテグレーションテストを行うことができるので、早い段階で不具合を見つけることができるのではないかと思っています。こういったテストに関する知識を身につけて、問題が起こったときの検証に生かしていきたいと考えています。

さまざまな技術に触れられる環境でキャリアが積める環境がある

——どんな方がトヨタコネクティッドと親和性があると考えますか。

伏見：新卒で入社した若いメンバーは、みなさん先輩や上司に対して、アクティブに話しかけにいく様子が見られますし、ポジティブ思考な方が多いですね。これは、相談を持ちかけたときに快く答えてくれる環境が整っているからだと思います。チーム内にオープンなコミュニケーションができる雰囲気があるので、Flutter未経験でもキャッチアップしやすいですね。

山崎：Flutterだけでなくいろんな技術に触れたい人にとってよい環境ですね。次世代車載機のプロジェクトで、Flutter開発で部品を作るのは一部です。UIの部品をfigmaでデザインしたり、デザインを自動でプログラムの一部に取り込む開発があったり、マージリクエストをする前にコードが品質を保っているかどうかをチェックするシステムがあったり、いろんな開発ができます。

伏見：プロジェクト全体を通して、Flutterのコードだけでなく、CI/CDもしっかり整備されているので、そのメンテナンスも含めやりがいがありますよね。

山崎：私は自分が持つ技術スタックを一新させたいと考えてトヨタコネクティッドに転職しましたが、まさにいま、それが実現できています。チームには新しい技術に精通したメンバーがいますし、伏見さんのようにフロントエンジニアとしてバリバリやってきた方もいるので、そういった方たちから学びを得られるという面でも、このプロダクトに携われてよかったと思っています。