Lookerは可視化だけじゃない！ UIコンポーネントもあるんだ！ 1

今日話すこと ● 自己紹介 ● React戦闘力（ReactというよりWeb開発の知識） ● Lookerとは（概要だけ） ● Looker UIコンポーネントとは ● 実際にどんな感じ ● まとめ 2

山田顕人（Kento.Yamada） @ymd65536 自己紹介 仕事：MSP向け内製システムの開発、マルチクラウドエンジニア/デベロッパー 活動：.NETラボ勉強会運営、Azure PoC部 Google Cloud Partner Top Engineer 2025 DataAnalytics（2024年〜） Google Cloud Partner Tech Blog Challenge 2023 Cloud AI/ML 部門 LINE API Expert（2024年〜） Microsoft MVP for Developer Technologies（2024年〜） LAPRAS OUTPUT AWARD 2024 01 最近のトピック 自分に対して毎年思う「コイツ、毎年執筆してんな。」 3

で、あんたはどこまでReactわかるのサ！ React戦闘力（ReactというよりWeb開発の知識） ナンモワカラン 完全に理解した！ React読める React書ける このあたり React実務 読めるし、書けるけど実務経験はない。書籍をN+1冊読んだくらい （補足：周辺の知識は網羅できてるかも？） ● HTML4、HTML5の知識アリ、実務経験アリ ● Vanilla JSの知識アリ、実務経験アリ ● TypeScriptの知識アリ、実務経験アリ ● Chrome拡張機能の開発経験アリ 4

Google Cloudが提供するデータ可視化プラットフォーム ：SaaS（簡単に説明） 公式サイト https://cloud.google.com/looker?hl=ja Looker Studioではありません。 Lookerとは（概要だけ） Lookerのアイコン https://about.google/brand-resource-center/logos-list/ 5

● Lookerの拡張機能で使うUI ○ 実はLookerの画面に自作のアプリケーションをReactで埋め込める ● Lookerのライセンス契約をしなくても利用できる（OSSで提供） Looker UIコンポーネントとは 引用：Looker コンポーネントの概要 ：https://cloud.google.com/looker/docs/components-overview?hl=ja 6

実際にどんな感じ（プレイグラウンドがあります） 引用 Home - Docs ⋅ Storybook：https://looker-open-source.github.io/components/latest 7

関連のOSS Lookerの拡張機能で主に使われており、実際に本番プロダクトで採用されています。 ● looker-explore-assistant ○ LookerのExplorerという機能にGeminiを導入 UI コンポーネントは使われていないけども、参考になるOSS ● dashboard-summarization ○ ダッシュボードの要約機能 8

looker-explore-assistant 9

● Lookerでは拡張機能が提供されており、UIはReactのコンポーネントでできている ● コンポーネントのプレイグラウンドとドキュメントはまとまっているよ ● Looker UI コンポーネントはさまざまなOSSで使われている まとめ 10