Turing Tech Talk 第14回 「TypeScriptでつくる自動運転UI」

2025年3月18日、チューリングではTuring Tech Talk 第14回 「TypeScriptでつくる自動運転UI」と題したオンラインイベントを開催しました。

今回は、我々が自動運転をやるにあたって、フロントエンド技術・Webの技術がどういう風に自動運転に活用されてるか、またハードウェアとソフトウェアがどのように組み合わさっているかというテーマでお話ししました。当社のCTOである山口祐、ソフトウェアエンジニアの太田涼介が登壇し、現場とマネジメント双方の目線から解説を行いました。当日の模様を、イベントレポートとしてお届けいたします。

山口：皆さん、こんにちは。TuringTechTalk第14回「TypeScriptでつくる自動運転UI」を始めていきたいと思います。私はチューリングでCTO兼Director of AIを務めている山口です。

早速、チューリングのTechTalkについてご説明していきたいと考えております。TuringTechTalkは、チューリングの最新の研究開発内容を担当するエンジニアが直接解説するオンラインイベントです。冒頭でお話した通り、今回のテーマは「TypeScriptでつくる自動運転UI」です。これについて、深掘りしていきます。

スケジュールについてもご説明させてください。まずは私の方からこのオープニングのトーク、それから会社紹介を簡単にさせていただきます。

その後19時5分頃から「TypeScriptでつくる自動運転UI」について、太田を中心にディスカッション、それから皆様の質疑に回答していこうと考えております。

こちらのYouTube Liveをご覧の方は、コメント欄が解放されておりますので、ライブコメントをいただければ我々が拾って色々とお答えします。

技術的なことでも構いませんし、会社のことや自動運転のことなど何でもお気軽にコメント いただければと考えております。

大体19時45分から20時頃に終了を予定しておりますが、皆様のご質問が多い場合には延長 することもあるかと思います。

登壇者の紹介ですが、今日の担当エンジニアはDriving Softwareチーム ソフトウェアエンジニアの太田涼介です。改めてよろしくお願いします。簡単に自己紹介をお願いします。

太田：太田涼介と申します。Driving Softwareチームでソフトウェアエンジニアをしており、幅広く低レイヤーから高レイヤーまで様々な技術に触れています。最近はUI を作るためのWeb技術、以前はAIのモデルデプロイなどにも触れておりました。そのような幅広いソフトウェアエンジニアリングをやるチームがDriving Softwareチームになっています。

山口：太田は去年の4月入社なので、新卒1年目なんですよね。なので社内でも若い方のエンジニアになりますが、年齢はいくつですか？

太田：24歳になります。

山口：20代前半ということで、チューリングには若いエンジニアが多いですけれども、その中でもよりフレッシュなエンジニアの一人として本日は来てもらっています。

今日はフロントエンドがテーマなわけですが、元々フロントエンドの人なんですか？ 例えば学生時代とか。

太田：学生時代は割とハードウェア寄りというか、電子回路や半導体のこともやりつつ、趣味でフロントエンドも触っていました。

山口：なるほど、かなり違いますよね。半導体、例えばCPUとかのレイヤーとフロントエンドって、1番遠いイメージがあるんですけれど。

太田：そうですね。コンピューターのスタックで言うと、1番下と1番上のような感じがあります。とはいえプログラミングという点ではWebも同じようなものかなと思っています。

山口：なるほど。今日のテーマはフロントエンド技術と自動運転です。フロントエンド技術・Webの技術がどういう風に車の中で活用されてるか、ハードウェアとソフトウェアがどういう風に組み合わさっているか、といったところを色々と聞いていければと考えております。

チューリングは自社で色々構築したデータセットで自動運転AIを学習しているわけですが、それを実際に動かすには車載の計算機、スタンドアローンで動くEdgeの計算機で動かしていくことになります。そうなると、その車載の計算機で動かすためのソフトウェアを自分たちで作らなければいけなくなります。そこで太田が所属しているDriving Softwareチームは、主にそのアプリケーションを中心に開発をしているチームになっています。

その中でも自動運転がどういう風に動くのか、あるいはユーザーがここまで行きたいというナビゲーションのUIをどうするかというのは、車の中で凄く大事になっています。（スライドp5）右上の写真にもあります通り、車の中にはたくさんのディスプレイがあって、開発者がデバッグで見ることができます。左側に映っていますけれど、実際の車の推論、AIモデルがどういう風に動きたいかもリアルタイムで画面に出るようになっているので、この辺りのUIをどういう技術で開発しているかについて、今日はお話していこうと思っております。

では早速、本題の「TypeScriptでつくる自動運転UI」について太田の説明、それから私も随時いろいろと話を聴きながら進めていければと思っております。では、どうぞよろしくお願いします。

太田：よろしくお願いします。「TypeScriptでつくる自動運転UI」ということで、まず自動運転におけるUIって何だろう？というお話をしていきたいと思います。

チューリングで作っている自動運転のモデルというのは、End-to-endというモデルになっております。（スライドp7）こちらのスライドにあります通り、従来のアプローチと書かれているのがRule Basedと言われる機能ごとのモジュールを組み合わせたAIの作り方なのですが、これを一気通貫でやるEnd-to-endモデルというのが、我々チューリングのアプローチになっています。具体的に言うと、左側のカメラ画像を入力として、最終的に車が進むべき経路を1つのモデルで推論しようというものになっています。

このEnd-to-endには利点と欠点があるのですが、特に大きな問題は、理由付けができない・途中で何を考えているのかよく分からない、というものが挙げられます。それによってこのモデルは本当に安全なのか、という検査もかなり難しくなってきます。このモデルと人間の間の関係性は、End-to-endではより大事になってくるのかなと思っています。

山口：そのEnd-to-endですが、最近の生成AIやモデルがどんどん大きくなっている中で、まるでブラックボックスのようになってしまって、その意図がなかなか外から分からない部分があります。そこは自動運転において凄く安全性の面で重要になってくるので、そこをしっかりと見たいという感じです。

太田：そうですね。（スライドp8）ここの図のようにEnd-to-endはブラックボックスなので、経路がー発で出てきてしまいます。なので、エンジニアとしても「なんでこの経路を出したんだ」というのが分からないですし、実際にこの経路を元に運転させることはユーザーにとっても「勝手に動いて怖い」という感覚になるんですよね。

僕も最近、自分の車を自動運転改造して乗っていますが、突然動くと怖いわけですよ。さっきまで止まっていたのに突然動き出したら「おお何やってんだこいつ」となるんです。そういうのは体験として良くないよね、と日々思っています。そのため我々のアプローチは、このEnd-to-endのメインタスクと呼ばれる経路計画以外にも、サブタスクを出力させて、それを使ってUIを出力させています。

山口：このサブタスクは、いきなり聴いた人は分からないと思うんですけれども、メインタスクは経路計画、つまり車がどう動くかを示すものです。そしてサブタスクは何のためにやってるんですか？

太田：一般的にはAIの学習という文脈で言うと、メインタスクを補助するためのタスクです。学習データに物体認識や車線認識のデータも含めておき、それらもAIに教えるために存在するタスクなんです。そのためよく言われるのは、このメインタスクが本当に欲しいものだから、サブタスクは学習の時だけ使って実際の推論には使わないことがあります。

例えばメインタスクが数学の問題の答えだとしたら、サブタスクはそこに至るまでの途中式みたいなものです。なくても丸ではあるけど、人間が採点する時になぜこの答えになったんだ？というのが分からないので、メインタスクに対する補助的なものとして存在します。

山口：いわゆる補助線のような感じで、無かったとしてもEnd-to-endのモデルは作れるけれど、サブタスクを組み込むことによって、より精度が高くなるということですね。

太田：これは元々UIのために作っていたものではなく、そのAIの学習のために使っていたのですが、これをUIのところに転用しています。（スライドp9）UIと書いてある四角い、真ん中にアルファードが映ってる画像がありますが、このように周りの状況や車線などを認識した結果を、UIとして表示させています。

これによってユーザーも安心して運転を任せることができ、開発者も「ここの地図の認識は間違っているから、こっちに行ってしまったんだ」などの改善方針のために使うことができます。

（スライド10）こちらが実際に我々が使っているUIの画面です。複雑な画面になっているのですが、左側がバードアイビューと呼ばれる、上から見た時の視点になっています。モデルが周りの車線をどうやって認識しているか、また周りの物体をどうやって認識しているか、そしてそれに基づいてどういう経路を出しているのかを可視化しているものです。

真ん中に6つのカメラ画像がありますが、これは実際モデルの推論のための入力として与えられている画像です。その推論結果もカメラの上にオーバーレイしてやることによって、実際にどのオブジェクトを認識して、また認識漏れがあるのかもチェックすることができます。このようなものを開発用として作っています。こちらは実はWebを使っていません。

山口：そこが気になっていました。左上をよく見ると「ui.py」というのが見えているので、実はこれはPythonで書かれてるんじゃないかなという気がしていました。

太田：そうですね。こちらのUIは元々実験用に作ったというのもありまして、MatplotlibなどPythonのグラフ描画のコードをそのまま持って来ているので、Pythonで書かれています。

山口：この画面の見方を聞きたいのですが、まずカメラが6つついてますよね。この6つのカメラは実際に車についてるカメラなんですよね。車の前後、それから左右に死角がないようにカメラがついているわけですよね。その下に緑のバーがあって左右に赤白と変わっていますがこれは何ですか？

太田：これはステアリングの角度を、我々の世界では横制御と呼びますが、目標角と実際にどれだけ追従しているかを可視化してるものになります。

山口：となると、その右側にある赤い縦のバーは？

太田：いわゆる縦方向の制御です。アクセルをどれだけ踏むかというものになっています。

山口：車のコントロールの情報もここで見られるし、それと連動した車の自動運転AIの出力予測、あるいは物体認識、車の車線、マップの認識などをリアルタイムで確認することが実際にできます。車載のコンピューターでリアルタイムで表示することを今実現できているわけですね。

実際にAIモデルを作っているエンジニアが車で走行試験する時にも実はこのUIを見ていて、確認をしているということですね。

太田：ちなみにUIの下が緑色になっていますが、これは今自動運転していますよという意味です。なのでカーブも普通に曲がれている、というのがUIからすぐに分かります。

山口：結構直感的ですよね。この後もしかしたら話があるかもしれないですけども、やはりPythonでやるところの大変さもある。

太田：そうなんです。このUIですが、開発に掛かった時間は3ヶ月ぐらいですね。その後にちょっとした変更も加えていますが、その変更が結構大変でした。実験している時にこのデータが見たいという要望が飛んで来ますが、それを実装するのが大変です。

具体的に言うと、上にある緑のボタンなどは比較的すぐできますが、左側の速度メーターはリッチなものにしようとすると結構大変です。ブラウザだったら一瞬で作れるんだろうな……と思いながら書いていたんです。

山口：Pythonは、そもそも描画するためのプログラミング言語ではないので、どうしても限界があるみたいな話ですよね。

太田：はい。今作っているものがブラウザのUIになります。（スライドp11）こちらは開発中の画面になりますが、先ほど見ていたモデルの推論結果を表した図が左側です。さっきと明らかに違うのは車が3Dになっているところです。

WebGLと呼ばれるWeb上で3Dを描画するライブラリがあるのですが、これを使うことでこのようなリッチなUIを簡単に作ることができるので非常に助かっています。

山口：Webで使われているようなフロントエンドの技術を使えば、Pythonで苦労してUIを作らないといけなかったところが、非常にサクサク開発できて凄く嬉しいということですね。

ここが、まさに今日お話しする「TypeScriptでつくる自動運転UI」の部分になるかなと思います。

太田：はい、TypeScriptとReactとWebGLで作っています。この左側の画面は1週間ぐらいで作ることができました。元々Pythonで作っていた経験もありますが、それにしてもかなり早くリッチなUIが作れたかなと思います。

山口：我々の使用している自動運転車両であるアルファードがベースになっていますが、それもしっかり描画されているし、トラックとか見えていますよね？

太田：はい、トラックなども3Dモデルをインポートして描画していますし、人もいますね。

山口：もしかしたら後でさらに詳しく紹介してもらえるかと思いますが、右側のこれはナビゲーションシステムですか？ それと連動して表示もできるんですね。

太田：そうですね、今おっしゃっていた右側の画面がナビのシステムになっていますが、これはご存知の通りカーナビの機能を実装していて、今は車の自己位置をトレースして地図を動かしています。実際に目的地設定をしてナビを行うこともできるようになっていて、今作っているWebのUIはこのような感じになっております。

実際にWebUIが、自動運転のシステムとどのように連携して動いているのかを少しお話させて頂きたいと思います。我々の自動運転のシステムは比較的シンプルです。基本的にはカメラの入力を元にモデルが推論して、それを制御に渡して車を動かすようになっております。そしてここの中に入り込んで、Webの方にデータを送るサーバーがいくつか存在しています。

山口：カメラ等と連携しながら、実際に車の中で動かさないといけないところが、大変なところですかね。

太田：そうですね。これが実際にWebとの連携の部分を説明した図になります。カメラやモデル、制御のコンポーネントからデータを回収してきて、それをWebのブラウザの方に送ってあります。

この通信はリアルタイム性が必要なので、Websocketで送っている形になります。ブラウザ側ではWebsocketのクライアントを立てて、カメラ画像はイメージで、推論結果の描画は先ほど説明したWebGLの上にThree.jsというライブラリを使って描画しています。カーナビにはMapLibre GL JSというライブラリがあって、これにオープンスリートマップの地図を描画しています。

リソースの制約など特殊な条件はあるのですが、ここでは一般的なWebアプリとほとんど同じような技術を使っています。ブラウザもChromiumを動かしていますし、Websocketの通信もSocket.IOというライブラリでやっていますし、Web開発をしている方なら聴き馴染みがあるのではないかと思います。

山口：ありがとうございます。少し教えて欲しいのですが、基本的にはWebsocketのサーバーが車載システムで動いてるという話がありましたけど、これは車の中に車載のメインの計算機があって、ここの中でOSとしてはUbuntuベースのものが動いてる。その車載計算機の中にWebサーバーが立っていて、そこを起点としてブラウザ側で何かが見られるようになっているというイメージで合っていますか？

太田：そうですね。その通りで、まさに車載計算機の上でWebブラウザを動かしてます。

山口：Edge環境でWebサーバーを立ててそれをブラウザで可視化するということは、本格的にやっているところはあまり多くないのかなと思います。一般的なWeb界隈だと、データセンターにサーバーがあって、そこでWebサーバーとして機能して、それをクライアントが遠隔でインターネット経由で見るというのが多いかなと思います。

しかし今の説明だと、同じ車内でWebサーバーを立てて、それを別のブラウザ、例えばタブレットや同じネットワークにある別の機器でもこれを見ることができるということですよね。

太田：そうですね。組み込みでWebサーバーは相性が悪いというか、あまり一般的に聞かない話だと思うのですが、我々が使っている計算機が強い計算機でして普通にUbuntuが動きます。なのでリソースはちょっと少ないですが、世の中の一般的なサーバーと開発する環境としては同じ感覚かなと思っています。

山口：我々の計算機としては、GPUだとNVIDIAのOrinが載っていてCPUはARMだから、X86ほど普通ではないけれども、それなりによく知られたアーキテクチャなのでソフトウェア開発としてはやりやすいという形ですかね。

ちなみに、このReactについてそもそも何なのかを聞いても良いですか？

太田：Reactというのは、Webブラウザ上でWebサイトを作るために最近良く使われてる技術です。1つの特徴としてはコンポーネントベース、部品を沢山作ってそれを集めていくとサイトができるという作り方をするものになっています。

山口：つまり、フロントエンドを実装していく上で使うフレームワークとして機能するものですよね。そのうちでもかなり市民権があるメジャーなところを使っているわけですね。

実際に我々がカメラの画像をUIで表示したり、さっきのように車の3Dモデルをリアルタイムで表示したり、あるいはカーナビゲーション画面を出すことが、本当にWebの技術を使って実現できるということなんですね。

太田：そうですね。カーナビや地図を描画するのは前のPythonのUIではかなり厳しいので、Webであればライブラリを使ってすぐ作れるというのがありますね。

山口：あまり私は知らないので教えて欲しいのですが、カーナビ専用のアプリがあるんですか？ それともマップのライブラリがあるのでしょうか？

太田：そうですね。マップのライブラリがあって、それもReactとうまく協調するように作られたものがあるのでそれを使っています。

山口：先ほど、これはただ地図ではなくてナビ、いわゆる目的地を設定すると自動車の経路情報が出るという話もしていたと思いますが、そういったものもこのライブラリに含まれているんですか？

太田：ライブラリは描画だけをしていて、ルーティングサーバーがあるのでそこにAPIを叩いて経路を得るというものになっています。

山口：では普通のカーナビのような形で、Googleマップみたいなものをイメージしたら近いのかと思ってますけど、ある程度カーナビの経路情報に関してはインターネット越しに問い合わせて、そのレスポンスをもとに実際の画面で描画するところはブラウザ側のフロントエンドで実装して動くようなものを作ってるというとこですかね。

太田：実は弊社のモデルと協調するためのカーナビを別途作っていまして、そのために少し特殊な実装をしていますね。

山口：モデルと協調するとはどういうことでしょうか。

太田：カーナビのルートの結果をモデルに渡して、「次の信号は右折してください」等の情報をもとに自ら進んで行くように学習しようという風に進めています。そのために我々が独自でカーナビを作らないといけないという背景があります。

山口：今我々はEnd-to-endの自動運転でTokyo30というプロジェクトをやっています。これは東京の市街地を30分間自動運転で走るというものです。そこには当然交差点もあるし、信号もあるし、横断歩道もあって、路肩に止まっている車もありますが、目的地を設定してそこまでしっかり自動で行ってくれる体験が、最終的には求められているところです。地図と連携して自動運転で示されたルート通りに走るというところで、そのための学習にも使われているんですね。

車載システムでこういった開発を、表立ってこんな風にやっていますというところはあまりないと思います。さっき太田からもお伝えしたように、車載だからといって変わった技術を使っているというよりは、一般的なWeb技術をそのまま応用しているメージです。

太田：その通りですね。車の上でなくても、普通のパソコンの上でも動かせるようなUIになっており、実は先ほどのスクリーンショットも手元のパソコンのブラウザで表示しています。このように場所に囚われない、インターネット越しですぐに遠くへデータを転送できるという点も、Webで作っている利点かなと思っています。

具体的に言うと実際に車が今どこ走っているかを、オフィスにいながらリモートで確認することができます。そのような内容を想定して作っています。

山口：ありがとうございます。フロントエンドの技術をWebと共通化できる技術が車載でもできるということで、そういったスキルセットを持ったエンジニアの方って世の中に沢山います。チューリングでも活躍できそうですね。

太田：そうですね。今はWeb系を開発している人数が弊社には1~2人しかおらず、まさに仲間を募集しているところです。

山口：太田も特にフロントエンドの専門家ではなく新しく取り組んでいるところですけれども、フロントエンドが得意なエンジニアの方も世の中に沢山いますので、そういった人には面白い領域ですよね。

※以降では、参加者との質疑応答が展開されました。本イベントの全内容は、ぜひ以下のリンクからご覧ください。

【イベント概要】
Turing Tech Talk #14 TypeScriptでつくる自動運転UI
https://www.youtube.com/watch?v=ospcIUPPAVI