Nuxt.js + FastAPIを使ったデータエンジニアリングなデモ作り - 社内勉強会でデブサミのデモをしました

（今更ですが）新年あけましておめでとうございます！

JX通信社でシニア・エンジニアをしています, @shinyorke（しんよーく）と申します.

最近は週に2, 3回, ジムで10kmちょい走っています.*1

JX通信社のエンジニアチームでは, 月に一度みんなが集まる月次勉強会というイベントがあります（基本的に第2金曜日開催）*2.

tech.jxpress.net

※過去の開催レポです

2020年初（かつ, 飯田橋オフィス最後*3）の勉強会は,

「普及したいことや年末年始に勉強したことなどを発表するLT大会」

ということで, 私は

• デブサミ2020登壇時に披露するデモアプリを披露
• 弊社プロダクトでも使っているFastAPI僕もやりました&Nuxt Core UI ええやで！っていう布教
• （ちょっとだけ）野球選手の評価指標を紹介

という発表をさせてもらいました.

このエントリーではそんな発表内容のサマリーおよび, 勉強会の様子をちょびっと紹介したいと思います.

Nuxt.js + FastAPIを使ったデータエンジニアリングなデモ + 月次勉強会レポート

というわけで自分の発表内容を（デブサミ本番に支障をきたさない程度に）紹介します.

なぜデモを作ったのか

いきなり宣伝で恐縮ですが, 「Developers Summit 2020」の2日目, 2/14にこちらのテーマでお話させてもらうことになりました.

event.shoeisha.jp

カテゴリーが「エンジニアの生き方」で, 話す内容も細かい技術内容よりも私自身のキャリアの話なので一見するとデモなんていらないのでは？という感じなのですが,

• 私のキャリアの話にうまくセイバーメトリクス*4の話を絡めてデータサイエンス&エンジニアリングな味付けが欲しい
• 自分はエンジニアであり, デブサミは名前の通り「開発者の会議・お祭り」なので開発者らしい振る舞いをしたい
• それより何より, 年末年始という時間もあったしガッツリとゼロベースで（小さくても）プロダクト作りたい！

という自分の趣味モチベーションでエイヤッと作って当日披露するまでに至りました.

デモの技術選定&構成

デモの技術選定ですが,

• デモはローカル（Docker Machine）上でやるにしても, AWSなりGCPなりにローンチすることに備えてサーバレスでイケるような構成
• 可能な限り, 「自分がまだ未経験」もしくは「チームメンバーにオススメしたい」Framework・ライブラリを使う
• 「Done is better than perfect.（完璧を目指すよりまず終わらせろ）」少なくとも最初のデモは要件をきっちり実装&見せられるような質とスピードが出せるものを重視

ということで, 以下のような構成で作りました.

マイクロサービスというほどの物ではありませんが, Containerベースでフロント・バックエンド・分析の各レイヤーで必要以上に相互依存をしないことを目指しやりきりました.

Nuxt Core UIによる管理画面テンプレ（からのデータ表示アプリ開発）

JX通信社では, iViewと呼ばれる管理画面フレームワークを使って管理画面を作ることが多いです.

tech.jxpress.net

が, 「選択肢としてこんなのもあるよー」ということで以前私がPyCon JP 2018で紹介させてもらったNuxt Core UI という, Nuxt.jsベースの管理画面フレームワークを紹介ということでこちらを使いました.*5

shinyorke.hatenablog.com

今回は以前作ったものをベースに,

• Nuxt.jsのバージョンをUpgrade
• 状態保持・保存をちゃんとVuexで実装
• 作り的にイケてなかった細かい所をブラッシュアップ

という感じで約1年半ぶりに更新して望みました.

発表したときもグラフが動いた時にオッていうリアクションが小さいながらもあったりよくやったなって思いました（自画自賛）.

FastAPIによるザクッとAPI構築

バックエンドのAPIはホントはGolangで作る予定でしたが,

• Golang自体は初めてではないが3, 4年近いブランクがあり「Done is better than perfect.」が守れるかあやしい
• 作ってる途中で仕様がゴリゴリ変わる可能性が高いデモなので一旦は慣れてるPythonで書いたほうが効率は良さそう
• Python版は「動くアプリそのものだけど設計図」扱いにしてどっかのタイミングで丸っとGolangに！

ってことで急遽Pythonによる開発にシフトしました.

最初はresponderを使うつもりでしたが, 年末年始に有志メンバーでもくもく会していた時に,

今, 社内ではFastAPIアツいですよ！

と言われたので試しにFastAPIを使ってみることにしました.

これは選択肢として大正解で, 紹介してもらったその日の内にAPIの実装が8割ほど終わりました.

shinyorke.hatenablog.com

機能拡張もブラッシュアップもいい感じになった&目論見も達成し, Nuxt Core UIによるフロントエンド開発に終始できたのはホント良かったです.

類似性スコアで似ている選手のリコメンド

実はキモな機能である「似ている選手リコメンド」については「類似性スコア」というスポーツ界隈で使われているモデルを使いました.

shinyorke.hatenablog.com

上記のエントリー作ったものを元に,

• データを2019シーズンのモノに差し替え
• ç´„19,000人の選手のスコア計算のためDocker化してGCE + GCS上でゴリッと計算

しました.

年をまたぐぐらいのタイミングで半日ほどかけてやりました.

当日の成果

というデモを踏まえて話した内容がこちらになります.

約5分の発表と同じくらいの質疑応答がありました.

• 野球の指標や類似性スコアに対する質問
• そもそもデータはどこにある*6
• Web系の他のリコメンドとかにも似ていて面白い

などなど色々フィードバックがあってよかったです.

おかげさまでデモの披露も最初の素振りもいい感じでした.

その他の発表&次回に向けて

なお, この会はLT会でいろんなメンバーのいろんな発表がありました.

• Amplifyを使ったアプリ開発の勘どころ
• 既存プロダクトを使いたい技術でゼロベースで作り直す
• 認定スクラムマスター研修レポート
• 過去にいたチームのアーキテクチャ話
• GISデータの扱い方
• エンジニアによく効く作文技術のはなし

全てが面白く, 中にはお腹を抱えて笑える（もちろん学びも深い）モノもあり,すべてを紹介したいのですが大人の事情で字数が足りないのでやめておきます苦笑

全体としては, それぞれの技術的な議論や興味関心で盛り上がり和気あいあいとした会でした, 個人的には2, 3ヶ月に一度こういうLT会があってもいいかなと...

また, 今回は社員のみの発表でしたがインターン生の成果やドヤる姿もみたいな！って思ったのでこちらもいい感じにジョインできるような感じにしていきたいですね.

さいごに - デブサミで会いましょう！

ということで簡単ではありましたが, 月次勉強会のレポを通じてJX通信社のエンジニア文化を紹介させてもらいました.

中途採用およびインターンも募集していますので, 今回のレポでご興味を持った方はぜひカジュアル面談等で来てもらえると嬉しいです.

jobs.jxpress.net

また私個人としては, 「Developers Summit 2020」で登場するのでこちらもよろしくおねがいします（大切なので二度言う）

最後までお読みいただきありがとうございました&次のエントリーは（来週から稼働する）新オフィスからお届けいたします！

*1:ちなみに走ってる理由は, 個人OKRのKR3にあります.

*2:ちなみに私は入社直後にPySparkを交えたデータ基盤入門みたいな話をしました&その成果の一部はアドベントカレンダーでも紹介させてもらいました（元々は勉強会ネタだったのです）.

*3:今月中（というより今週末）に新オフィスにお引越しします

*4:書籍・映画「マネーボール」で有名になった野球の統計学的分析の概念と手法で昨今は「ピープル・アナリティクス」という人事版データサイエンスの元祖・教科書になっている分野でもあります.

*5:本当はiViewでゼロから作りたいお気持ちもありましたが時間足りないなってことで断腸の思いで断念orz

*6:念の為断っておくと今回の分析はメジャーリーグのオープンデータを使っています.