アーカイブ動画

■登壇者プロフィール

関沢 省吾 氏
トヨタ自動車株式会社
コネクティッドカンパニー コネクティッド先行開発部
デジタルコクピットソフト開発室　グループ長
名古屋大学大学院を修了後、2007年にトヨタへ入社。Lexus LFAをはじめ、各種車両の電子プラットフォーム開発や、TOYOTA LQのAIエージェント開発へ従事。2020年より現職。

Tim Mansfield氏
italist.inc CTO
他複数社の技術役員兼務
米国YouTubeやGoogleでの開発を経て、シリコンバレーのスタートアップでの数多くのプロダクト開発をもち、現在複数の企業の技術顧問、CTOを兼任。また、アメリカのエンジニアブートキャンプ事業のカリキュラム責任者としての経験を持ち、現在は、TECH PLAY ACADEMYにて日本の開発組織の育成事業におけるカリキュラム開発・メンター等を実施。

コックピットのUX/UIをリッチ、クイックに開発するためにFlutterを導入

まずは、コックピットのUX/UI開発 プロジェクトのリーダーを務める関沢省吾氏が登壇。開発におけるポイントを、次のように説明した。

「“新しい体験価値”をどれだけお客様に提供できるか。私たちがコックピットのUX/UI開発に置いて、最も重きを置いているポイントです。そして実現には、ユーザーと向き合い、UX/UIの改善を続けていく必要があります。中でもUIソフトウェア領域（スライド点線囲み）は、特にクイックな開発と改善が必要だと考えています」（関沢氏）

Flutterを導入したのは、まさにこのような開発思想が実現できるフレームワークであるからにほかならない。具体的に、次のようにFlutterの魅力を説明した。

「高性能なレンダリングエンジンであること。車室内でも、モバイルと同様のタッチスクリーンのUX/UIを提供できること。そして、ツールならびに開発環境が優れていることです」（関沢氏）

つまり、Flutterでコックピットの開発を進めれば、スマホのようなリッチなUX/UIを、スピーディーに開発できるということだ。

ところが導入を進めると、新しいフレームワークということもあり、Flutterを扱えるUIエンジニアが足りないという課題にぶち当たる。そこで、Flutterのスキルを持つエンジニアをキャリア採用するとともに、社内で育成することも計画。その研修プログラムが、次にティム氏が紹介する内容だ。

あらゆるステークホルダーに“幸せ”を提供することが研修のミッション

GoogleやYouTubeなどの大手スタートアップでエンジニアとして活躍し、現在はトヨタ自動車に限らず、アドバイザーやCTOとして、多くの企業で活躍しているティム氏。

ティム氏は「トヨタ自動車が何を求めているのか」を検討し、以下の3つの内容を、研修を通じて身につけられるようプログラムを組んだという。

【研修で身につける内容】
・ Flutterの使い方
・他のツール
・なぜ学ぶのか（学習そのものを学習する）

3つ目の「なぜ学ぶのか」について、ティム氏はより深く説明していった。

「人々を幸せにすることが、研修の目的であり、トヨタが求めていることです。人というソフトウェア、メカ的なハードウェア、さらにはサプライヤーや、顧客、社会、コミュニケーションなど。トヨタと関わるあらゆるステークホルダーが融合することで、トヨタウェイという唯一無二の価値を生み出す。その結果、多くの人が幸せになる。つまり、幸せを量産することが、トレーニングのミッションであると決定づけられました」（ティム氏）

トヨタウェイとは、いわゆる企業理念であり、トヨタではグローバルメンバーが共有すべき価値観や働く手法として定義している。

*トヨタウェイ2020
https://global.toyota/jp/company/vision-and-philosophy/toyotaway_code-of-conduct/

幸せは当然、今回研修に臨むソフトウェアエンジニアにも該当する。同内容についても、ティム氏は次のように言及した。

「エンジニアにとっては、新しい技術やプラットフォームを使えること。そのような技術スタックを採用している会社に勤めることが、幸せです。そのような観点からも、Flutterを活用したトヨタの取り組みは合致します」（ティム氏）

Flutter5つの特徴

続いてティム氏は、Flutterの特徴を解説。まずは大まかな概要を述べた後、大きく5つのポイントについて、実際の開発画面なども交えながら詳しく紹介していった。

「Flutterを利用すれば、ゲームや不動産アプリで見られるような、複雑でユニークな3次元デザインが、低ストレスかつ円滑・定期的に、開発することができます。新機能の開発ならびにリリースおいても、継続的に行えます。その結果、先の幸せが実現します。たとえば、Flutterを導入することで、AndroidやiOSのアプリの新機能の開発期間が、1～2週間減ったとの成果が報告されています。つまり、エンジニアのワークライフバランスにおいても、幸せを実現するSDKと言えます」（ティム氏）

・マルチプラットフォーム
iOS、Android、Web、Windows、Mac、Linuxなど。異なる仕様のプラットフォームに対して、全コードのうち90％においては、ひとつのコードベースを変更さえすれば、まさにマルチに、すべてのプラットフォームに対応できるコードに更新される。

・効率的なレンダリングエンジン
Flutterは直接GPUとやり取りする設計のため、ゲームアプリに搭載されているエンジンのような感覚で、データが高速にレンダリングされていく。具体的に目指しているFPS（フレームレート）は60以上。テレビ番組などは約30FPSであり、一瞬の判断を求められるゲームでも60FPS。「ゲームエンジンのような感覚」とティム氏は説明した。

・ますます大きくなるWidgetライブラリー
いわゆる見た目、まさにUIの特徴ともいえるWidget。Flutterであれば、このWidgetをゼロベースで構築することなく、数多くあるライブラリーから選んで利用することができる。数が膨大で、拡張もしやすいとティム氏は説明。実際に公式サイトのライブラリーを紹介した。なおFlutterでは、見た目だけでなくブロックの並べ方や画面に推移についてもWidgetと呼んでおり、「Everything is a Widget」と定義されている。

* 実際のライブラリー：https://api.flutter.dev/flutter/widgets/widgets-library.html

・ホットリロード
コード変更した際、開発者が手を動かす（リロード）ことなく、Flutterであれば自動でリロード、つまりホットリロードしてくれる。

・ネイティブプラットフォームアクセス
先に紹介した90％のベースコード以外、残りの10％のコードについては、それぞれのプラットフォームに合わせたかたちで記述する必要がある。しかし同作業においても、FlutterではJavaScript界隈の言語を変更する際に使うデータ交換フォーマットJsonと似たような機能を有しており、各ネイティブレベルの言語に簡単に変換できる。

「認知・負荷」をメタ的、モデル化することで解決していく

続いてティム氏は、研修内容の詳細についてエンジニア目線で紹介。トヨタ自動車がなぜ研修を受けて、技術を身につける必要があるのか。その解を考える参考となる書籍と共に紹介した。

「Flutterの技術を身につけるとのゴールから逆算し、日々の研修スケジュールを組み立てていくのが一般的な思考でしょう。ただその前に、自分が研修する目的や現在の立ち位置、スキルレベルなどを明確にしておくことが大切です」（ティム氏）

書籍のリンク：https://www.amazon.co.jp/dp/B07YY2WV6K/

さらに、その意識を明確にする際のポイントとなるキーワードを2つ挙げた。「認知」と「負荷」である。

人間の意思決定は間違える癖がある。そのため客観的なメタ認知で考える方が効率的だというティム氏。ここでも、すぐ実装に入るのではなく、何のためにコードを書いているのか。常にメタ的、上の階層や客観的視点で捉える必要があることを強調した。そしてティム氏はここでも、メタ認知の意識やスキルを高める書籍を紹介した。

書籍のリンク：https://www.amazon.co.jp/dp/B00555X8OA/

負荷については、「cognitive load（認知的負荷）」「intrinsic load(本質的な負荷)」「extraneous load（課題外在性負荷）」「germane（学習関連負荷）」などのタイプがある。たとえば認知的負荷は、自ら考えたり記憶したり判断する際に生じる負荷であり、学習関連負荷は、頭の中でスクリプトを描くような作業の際に生じる負荷でもある。

このような日々の業務や生活で生じる負荷、メンタルの悩みも客観的にモデル化することで、解決に導いていくことができると、ティム氏。具体的には、ブログなどにどのような悩みがあり、解決したいのかを書き出していくことなどだ。

「たとえば、これまで丁寧なコードレビューを受けたことがないので、可読性に自信がないとの不安があったとします。研修を受けることで、ただ動くだけのコーディングはやめる、といった解決を目指す。このような悩みや解決策の両方をブログなどに書き出します」（ティム氏）

「ツリー」や「シーケンス図」を頭の中で可視化しながら設計を進める

研修の最終フローでは、700以上のミニアプリを動かすプロジェクト（タスク）が用意されているという。ただ、そこに至るまでの期間は決まったシラバスで進めるのではなく、参加者の興味やパフォーマンスを加味しながら、場合によっては毎日チューニングするのがティム氏の研修スタイルだ。しかも、チューニングはティム氏だけでなく、メンバーとも議論を重ねた上で行われる。

「研修においては、セルフドリブン。自分自身で学んでいく姿勢が大事です。一方で、共に学ぶチームメンバーに困りごとを共有・相談することで、結果として課題解決につながることも多いです。仲間がいると、孤独なドリブンにもならないからです」（ティム氏）

設計思想については先に紹介したとおり。ツリー構造を常に頭の中で可視化しながら、何が起きているのか、行われているのかをしっかり把握。その上で、親クラス、専属クラスとツリー構造を作っていくことが大事だとティム氏。シーケンス図面を書き出すことも大事だと付け加えた。

「どこがクリックされるのか。メモリ上の管理や状態はどうなっているのか。ウィジェット、エレメント、レンダリングなど、各ツリーの存在をイメージしながら設計していきます。つまり、オブジェクト指向が重要であり、同手法で設計を進めることで、効率的でより良いUIを作ることができます」（ティム氏）

慣れないうちは戸惑うこともあるが、徐々に慣れてくるとティム氏。また悩んでもセルフドリブンで解決しない際には、先に紹介したとおり、メンバーとコミュニケーションすることで、解決策が見つかることが少なくないと補足した。

もうひとつ、ティム氏が設計思想でポイントとして挙げたのが「asynchronous processing」非同期処理である。「現実のものは非同期だから」とティム氏は説明し、時間を効率よく使う際に用いられるフレーズ「1秒1円」は断ること、と笑いながら紹介した。

BLoCパターンやClean Architectureについての解説

Flutterにおける状態管理手法の1つ、UIからビジネスロジックを分離し、コンポーネント単位で管理しやすくするためのBloC（Business Logic Component）パターンについても解説した。

「BLoCパターンはAndroidの開発現場で流行っている手法で、Flutterでも、よく利用されます。Reactを用いた開発でも似たような仕組みがあり、同パターンを使うことで、状態管理が美しくなります」（ティム氏）

ティム氏は実際に研修内でBLoCパターンを使っている様子も紹介した。

もうひとつ、研修を経てFlutterの活用、オブジェクト指向、BLoCパターンの活用など、冒頭説明したように、他のツールのスキルもアップしたエンジニアに、さらに身につけてもらいたい設計思想も紹介した。「Clean Architecture」である。

書籍のリンク：https://www.amazon.co.jp/dp/4048930656/

ティム氏は、同設計概念の根本となる書籍ならびにイラストを紹介すると共に、ここでも実際の開発画面、コード上で、同手法の重要な概念である各種オブジェクトのレイヤーなどを紹介。トピックはまだまだあると踏まえた上で、次のようなメッセージならびに、研修の様子をまとめた動画を流し、セッションを締めた。

「1つの得意分野だけが突出しているのではなく、他の技術やツールも使えるような、Vシェイプエンジニアになってほしい」（ティム氏）

研修受講者3名によるふりかえり、Q＆Aを紹介

ティム氏の研修は現在も続いており、卒業生は約20名。ティム氏に学んだFlutterスキルはもちろん、根本の開発設計思想なども意識しながら、現場で活躍中だ。セッションの後半では、そんな卒業生の3名が登場。研修の様子、苦労、学びなどを率直に紹介すると共に、イベント参加者からの問いに答えていった。その内容を紹介する。

改めて、オブジェクト指向を基礎から学ぶことができた

──卒業生3名のプログラミングスキルも含めたキャリアについて

前嶋：新卒で2019年度に入社しました。入社後は「MIRAI」の開発に従事、今年の1月からFlutterチームに所属しています。大学時代に3年ほどFORTRANを研究で使っていました。

小池：2019年度に入社し、シートやシートベルトといった内装設計業務に従事した後、昨年10月に同研修を受けました。大学の専攻が情報工学だったこともあり、C言語とPythonを使ったことがありました。

谷畑：2人と同じく2019年入社です。工場、プレス生産に関する技術業務に従事していました。大学院時代に数値計算でC++を触っていた程度で、フロントエンドの経験はありませんでした。

──研修を受けて印象に残ったこと、得たことは？

谷畑：チーム開発に必要な風土や文化が、トヨタ自動車には根付いていると感じました。学生時代にC++に触れてはいましたが、改めてティムさんの研修を受けたことで、ソフトウェア開発全般の基礎知識を深く学ぶことができました。その結果、興味が増し、競技プログラミングのAtCoderに挑戦するなど、プログラミングが私生活にも入ってきています。

前嶋：ソフトウェアの設計思想を勉強できたことが大きいです。特に、Clean Architectureの内容が印象に残っています。オブジェクト指向など、ソフトウェア開発の基礎から教えてもらったことで、パソコンの動作原理なども知ることができました。

小池：大規模組織で開発を担うのに必要な知識を得られたことが、まず大きいです。2人と同じく、設計思想やオブジェクト指向について学べたことで、私もAtCoderに挑戦したいと考えています。

──Clean Architectureのどこが具体的に参考になったのか

前嶋：2点あります。1つ目はDependency Injection。依存性の注入という考え方を教えてもらったことです。具体的には密な結合を避けて、それぞれの裁量制を高める概念です。実際、Flutterの研修では、GraphQLなどを使い、外からのリソースで信号をもらいます。その受信時、アプリ側にデータ信号受け取りの記述を直接せず、外側から受け取るような形にするべきだと学びました。

もうひとつは説明があったBLoCパターン、UIとロジックの部分を分離して扱う概念です。状態管理はすべてビジネスロジックに実装する。UIはできるだけ状態を持たない。ステートレス実装すると学びました。

実際、Flutterの研修前半では、UIとビジネスロジック両方を一緒くたに、ステートフルなウィジェットを使っていましたが、研修後半ではアプリケーションが複雑になり、そのときに状態管理がまとめてできるBLoCパターンを使うことで、状態管理のポイントを勉強することができました。

──学んだことが、現在の業務にどのように役立っているか

前嶋：依存性の注入に関しては、実際に開発しているアプリでは、外側から信号をもらってくることが多くあります。ベタ打ちのテスト、アプリを仮想的に作り、コントローラーで動かすときなどです。それぞれ信号の供給信号が異なる際、アプリを一つひとつ変更すると大変です。そこでインターフェイスを挟んで実装、外からデータを供給するようにしています。

BLoCパターンに関しては、現プロジェクトにおいて、ステートフルとBLoCパターンが混在している状況のため、再構成する業務を進めています。その新構成において、まさにBLoCパターン、UIとビジネスロジックを1対1で対応する設計としています。

──お客様のメリットにはどうつながるのか

前嶋：自動車は安全性の担保など、高い品質が求められています。UIとビジネスロジックを分離するなどのソフトウェアアップデートを行うことで、結果としてソフトウェアの品質向上につながると考えています。

──大規模組織で開発を担うのに必要な知識とは

小池：ティムさんが紹介したように、コーディングの心得、他の人が見ても読みやすいコーディング、GitHubによるコード管理など。組織、チームで開発を行う際に必要な知識を包括的に多く学ぶことができました。

──研修は現在の開発にどう活きているか

小池：私も含め、組織開発未経験者の受講が大半でした。しかし、基礎からアプリ開発まで、700以上の問題を解くなど6週間の間に、濃密な内容を受講できたため、実践的かつスピーディーにスキルを身につけることができました。その結果、デザイナーが用意する画面やアニメーションを、忠実にコーディングすることができています。

──現在抱えている課題はあるか

小池：より質の高いコーディングができるメンバーは限られているので、コーディングスキルはさらにレベルアップしたいと考えています。もうひとつ、複数人で並行して作業を行う際、お互いが影響し合うことがあるため、依存性の少ない設計を意識することで、開発スピードをさらに高めたいと考えています。

──コーディングスキル以外、レベルアップしようと考えていることはあるか

小池：2点考えています。1つ目はバックエンドとのやり取りも考えた上での設計スキルです。研修では、使いやすいバックエンドが用意されていたからです。もうひとつは音声認識・操作に関するスキルです。

現在所属しているチームでは音声操作も扱っていますが、研修では学びませんでした。今後は同領域のスキルを身につけ、音声と画面操作がシームレスで直感的に使えるアプリを開発したいと考えています。

──チーム開発に必要な風土や文化が根付いているとの内容を聞かせてほしい

谷畑：密にコミュニケーションを取って学び合う文化が当社には根付いており、そのことがチーム開発も含めた、ソフトウェア開発の強みになっていると感じています。ソフトウェア開発では分からないことが多く、一人で抱え込むとスピードが遅れる傾向にあり、場合によっては開発できないケースもあるからです。

──その文化はいつ実感したのか？

谷畑：ソフトウェア開発に限らず、先に紹介した工場でのプレス業務担当時にも、痛感しました。生産がストップするほどの大きなトラブルが生じた時が会った際に、現場の組長、皆から親父と慕われる方に相談すると、通常は厳しいのですが、親身になって相談に乗ってくれました。とても心強かったです。

──現在のメンバーの属性について

谷畑：プロパー、中途入社、外部の協力者など。キャリアもポジションもさまざまなメンバーが集まっています。開発フローはスクラムで進め、コミュニケーションはSlackで共有。Google Meetでコミュニケーションしたり、1on1をランダムに行うなど、アットホームな雰囲気の中、現在進行形で密にコミュニケーションを取り、学び合うとの文化が醸成し続けていると感じています。

──React Nativeと比べて、Flutterが優れている点はどこか

ティム：React Nativeは、あくまでネイティブレイヤーとやり取りします。一方、Flutterは先ほど説明したとおり、直接GPUとやり取りします。そのためゲームエンジンのようにレスポンスが速いのが大きな違いであり、面白みでもあります。もちろんReact Nativeも安定しており、クールでファインな開発環境だと言えます。

──ウィジェットツリーなどを共有する際のおすすめツールは？

前嶋：可視化、共有しやすいDevToolsがおすすめだと思います。

ティム：Flutter内のインスペクターが優れているので、通常の作業であれば、それだけで十分だと思います。

──UX/UI設計においてFlutterの深い理解、非同期プログラミングなどの知識は必要か

ティム：紹介したように、書いたコードが実際にどう動くかイメージするために必要な背景知識です。言い方を変えると、Flutterの根本的な概念を把握した上でコードを読んだり書いたりすることが必要であり、Flutterを利用する基礎と言えます。幸い、同内容を学べる丁寧で親切なドキュメントが豊富に用意されています。

──状態管理において、Flutterは公式ではProviderパターン推奨していることについて

谷畑：正直、どちらを採用するか迷いました。結論としては、BLoCパターンを開発しているメンバーにヒアリングを行い、弱点を改良した上で使用しています。

ティム：以前のBLoCパターンと比べ、現在のBLoCパターンは必要なファイル数やオブジェクト数が減るなど、すっきりしていて魅力的です。新しい内容を参照してもらえれば、BLoCパターンの方が魅力的に映ると思います。

---

トヨタ自動車株式会社
https://global.toyota/

トヨタ自動車株式会社の採用情報
https://www.toyota-recruit.com/career/