フロントエンドエンジニアのいない組織でVue.jsを導入するまで｜Vue Fes Japan 2024

ペイクラウドグループのひとつであるアララ株式会社の藤田が2024年10月19日に開催された「Vue Fes Japan 2024」のランチセッションに登壇しました。

登壇時の資料をご覧いただけます。

内容：
アララ（株）ではいくつかの自社プロダクトを開発おり、その多くがWebアプリケーションとして提供されています。しかしながら、現状フロントエンドを専門とするプログラマーがいない状況が続いています。そんな中で、アララ（株）ではいくつかのプロダクトや社内ツールでフレームワークとしてVue.jsを採用しています。本セッションでは、そのような状況下でなぜVue.jsを採用したのか、どのようにフロントエンドの開発を進めているのかをお話します。

Transcript

1. Copyright arara inc. All Rights Reserved. フロントエンドエンジニアが いない組織でVue.jsを導入するまで Vue Fes Japan 2024 Special Lunch Session 2024/10/19
2. Copyright arara inc. All Rights Reserved. 自己紹介 1 藤田 悠平 / Yuhei FUJITA アララ株式会社 クリエイティブプランニング部 AI技術推進チーム 新卒で入社してもうすぐ6年を迎えます。 業務では、PHP、Python、TypeScript、Kotlinなどを使用しており、 最近は生成AIを活用した業務改善やプロダクションへの導入に 取り組んでいます。
3. Copyright arara inc. All Rights Reserved. アララ株式会社について
4. 企業概要 株式会社バリューデザイン 代表取締役社長 林 秀治 2006年7月 東京都中央区京橋3-1-1 東京スクエアガーデン14F 100百万円（2024年8月末時点） キャッシュレスサービス事業 株式会社クラウドポイント 代表取締役 三浦 嚴嗣 1990年10月 東京都渋谷区渋谷2-16-1 Daiwa渋谷宮益坂ビル8F 230百万円（2024年8月末時点） デジタルサイネージ関連事業 ペイクラウドホールディングス 株式会社 代表取締役社長 尾上 徹 2006年8月 東京都港区南青山2-24-15 青山タワービル 1,021百万円（2024年8月末時点） ペイクラウドグループ各社の 経営管理事業等 東証グロース（4015） 社名 代表者 設立年月日 住所 資本金 事業内容 上場区分 ※株式会社バリューデザイン、株式会社クラウドポイント、アララ株式会社は、ペイクラウドホールディングス株式会社の100％子会社です。 アララ株式会社 代表取締役社長 門倉 紀明 2023年10月 東京都港区南青山2-24-15 青山タワービル 5百万円（2024年8月末時点） メッセージングサービス等を含む ソリューション事業
5. Copyright arara inc. All Rights Reserved. アララ株式会社 | ソリューション事業 4 アララは、大量・高速配信が可能なメッセージングサービスをはじめ、PCやファイルサーバに散在する個人情報デー タを検出するデータセキュリティーサービス、プロモーションに活用されるフィルターを制作するARサービスなどを 提供しています。 高機能・低コストのメール配信サービスで企業を支援
6. Copyright arara inc. All Rights Reserved. アララの技術スタック 5 Infrastructure Server Side App Frontend Database Other
7. Copyright arara inc. All Rights Reserved. v-tokyo Meetup #16では会場提供させていただきました（2023/02/17） 6
8. Copyright arara inc. All Rights Reserved. フロントエンド開発における課題
9. Copyright arara inc. All Rights Reserved. ⚫ 「◯◯エンジニア」のような区別はない ⚫ フロントエンドに詳しい人がいない ⚫ どちらかというと「サーバーサイド」 フロントエンド開発の現状 8 フロントエンドのナレッジが無い プログラマーの現状 運用 4人 デザイナー 開発 10人 3人
10. Copyright arara inc. All Rights Reserved. フロントエンドに関してはデザイナーもコーディングを担当している 9 HTML CSS JavaScript TypeScript プログラマー デザイナー
11. Copyright arara inc. All Rights Reserved. Vue.jsを採用しているプロダクトと抱える問題 10 ⚫ 初のAWS利用で試行錯誤の中実装された ⚫ 昔ながらのMPA構成 ⚫ 当時（2018年頃）まだVue.js v2だった （現在はv3） ⚫ そもそもTypeScript書ける人がいなかった ⚫ 詳細な設計思想なども不明 ⚫ PHP/Laravelに詳しい人も、もういない フロントエンドとサーバーサイドが密結合 JavaScriptで書かれている 開発当時のメンバーがいない
12. Copyright arara inc. All Rights Reserved. 11 社内ツールの Webアプリケーション開発
13. Copyright arara inc. All Rights Reserved. 社内向けに開発したWebアプリケーション 12 ⚫ 社内で作成されたGPTsを登録・検索できる ⚫ 社員のみが利用できる ⚫ デスクトップ・スマホから利用できる 今後の技術選定の材料としても 活かしたい 要件
14. Copyright arara inc. All Rights Reserved. 技術選定で考慮したポイント 13 社内用のWebアプリケーション ⚫ なるべくランニングコストがかからない構成 学習コストが高くないこと ⚫ デザイナーがコーディングに参加することが前提（Next.jsはレベル的に厳しい） Full Stack TypeScript ⚫ せっかくなら全部TypeScriptにしたい TypeScriptによる型安全な開発体験ができること ⚫ 今まで社内では動的型付け言語が主流だったので、静的型付け言語の文化を 取り入れたい 1 2 3 4
15. Copyright arara inc. All Rights Reserved. Cloudflare PagesでNuxtアプリをホストし、 極力ランニングコストを抑える構成。 最終的な構成 14 Cloudflare Pages 認証基盤 Vuetify Supabase D1 Supabase client Nuxt.js Prisma
16. Copyright arara inc. All Rights Reserved. Nuxt3を採用した5つの理由 15 front/serverを分割しつつ型は共有できる Composition APIとcomposableによるロジックの分離がしやすい Nuxt Modulesが豊富 型安全な開発ができる Vue3対応ももう落ち着いた
17. Copyright arara inc. All Rights Reserved. Nuxt3を採用した5つの理由 16 front/serverを分割しつつ型は共有できる Composition APIとcomposableによるロジックの分離がしやすい Nuxt Modulesが豊富 型安全な開発ができる Vue3対応ももう落ち着いた
18. Copyright arara inc. All Rights Reserved. フロントエンドとサーバーサイドが密結合 17 サーバーサイドのコードを読まないとわからない… Laravelの値？ サーバーサイドと密結合…
19. Copyright arara inc. All Rights Reserved. サーバーサイドを見てもよくわからない 18 読んでみたけと結局わからない… .vueファイルからコードジャンプもできない… Laravel/PHPも熟知してないと何もわからない…
20. Copyright arara inc. All Rights Reserved. サーバーサイドとコードを分割しつつ型はしっかり行き届いてくれる 19
21. Copyright arara inc. All Rights Reserved. Nuxt3を採用した5つの理由 20 Composition APIとcomposableによるロジックの分離がしやすい Nuxt Modulesが豊富 型安全な開発ができる Vue3対応ももう落ち着いた front/serverを分割しつつ型は共有できる
22. Copyright arara inc. All Rights Reserved. 超巨大な<script>、大量のthis 21 1,000行超え…？ あなたのthisはどこから…？
23. Copyright arara inc. All Rights Reserved. ロジックをcomposableに寄せて分離しやすい 22
24. Copyright arara inc. All Rights Reserved. コードの見通しもよくなる 23 プログラマーがコーディング デザイナー＋プログラマーがコーディング ⚫ 通常のHTML / CSSとほぼ同じなので ⚫ 違和感なくコーディング可能 ⚫ JSX/TSXはデザイナーには難しい ⚫ ロジックが分離されているので分業しやすい
25. Copyright arara inc. All Rights Reserved. Nuxt3を採用した5つの理由 24 front/serverを分割しつつ型は共有できる Composition APIとcomposableによるロジックの分離がしやすい Nuxt Modulesが豊富 型安全な開発ができる Vue3対応ももう落ち着いた
26. Copyright arara inc. All Rights Reserved. 豊富なNuxt Modulesで開発効率を向上できる 25 JS/TSでよく使うライブラリなどは簡単に導入できる
27. Copyright arara inc. All Rights Reserved. Supabase 最終的な構成 Cloudflare Pages 認証基盤 D1 Nuxt.js 赤枠はNuxt Modulesが提供されている部分 26 Vuetify Supabase client Prisma
28. Copyright arara inc. All Rights Reserved. Nuxt3を採用した5つの理由 27 front/serverを分割しつつ型は共有できる 型安全な開発ができる Nuxt Modulesが豊富 Composition APIとcomposableによるロジックの分離がしやすい Vue3対応ももう落ち着いた
29. Copyright arara inc. All Rights Reserved. 蔓延るany、蔓延するmixins 28
30. Copyright arara inc. All Rights Reserved. 蔓延るany、蔓延するmixins 29 mixinsだらけ… 80/96コンポーネントにmixins
31. Copyright arara inc. All Rights Reserved. しっかり型付け（外界との境界にはzodによる型付けとバリデーション） 30 Schemaを定義 バリデーション
32. Copyright arara inc. All Rights Reserved. Responseも自動で型付けされるが…… 31 TypeScriptとしては間違っていないのでエラーとして検出されない セキュアな情報が流出 セキュアな情報 カラムを指定していない
33. Copyright arara inc. All Rights Reserved. 返り値にもZodのSchemaを通すことで意図しない値の流出を防止 32 ZodのsafeParse()を使うことでSchemaに定義していない項目をふるい落とす Schemaを定義 バリデーション
34. Copyright arara inc. All Rights Reserved. Nuxt3を採用した理由 33 front/serverを分割しつつ型は共有できる Vue3対応ももう落ち着いた Nuxt Modulesが豊富 Composition APIとcomposableによるロジックの分離がしやすい 型安全な開発ができる
35. Copyright arara inc. All Rights Reserved. Nuxt 3もリリースされて気づけばもう2年、周辺ライブラリの対応も落ち着いた 34
36. Copyright arara inc. All Rights Reserved. やってみてどうだったか
37. Copyright arara inc. All Rights Reserved. 得られた成果 36 開発体験の向上 コーディング自体に集中できる 比較検証サイクルの高速化 導入のしやすさから「とりあえず試してみる」がしやすい 開発工数の削減 エンジニア1人、デザイナー2人で約1ヶ月でリリースできた
38. Copyright arara inc. All Rights Reserved. うまくいった点 37 フロントエンド / サーバーサイドの密結合が解決された ⚫ 分業もテストもしやすくなった ⚫ コードの視認性もよくなった 開発体験がかなり改善された ⚫ 「動かしてみないとわからない」からの開放 ⚫ エディターなどによる支援も受けやすくなった Full Stack TypeScriptにすることでスキルの再利用性が向上 ⚫ 今までは同じプロダクト内でもスキルの分散が多かった ⚫ 3つ以上の言語を同時並行にコーディングするのは結構大変だった 1 2 3
39. Copyright arara inc. All Rights Reserved. 今後改善したい点 38 auto-importなど、便利だが初見では理解が難しい部分もある ⚫ とはいえ許容範囲内、フレームワークを使う以上通る道 ⚫ Nuxt3を社内に浸透させることで解決させる フレームワークやコンポーネントの考え方がデザイナーにとって負担が大きい ⚫ 今までデザイナー・エンジニア間でのコミュニケーションが不足していた ⚫ これを機会にフロントエンドエンジニアを育てたい もう少し規模が大きくなるとサーバーサイドは別のフレームワークを使いたい ⚫ 社内ツール規模であればNuxt3で十分 ⚫ 最近話題のHonoなどとの組み合わせも試していきたい（Full Stack TypeScriptで） 1 2 3
40. Copyright arara inc. All Rights Reserved. 活用方法について寄稿してます 【余談】SFCはGitHub Copilotなどの生成AIと相性がよさそう 39 コンテキストとしての凝集度がちょうどよい TypeScript HTML CSS
41. Copyright arara inc. All Rights Reserved. 今後のクルクルマネージャーの展望 40 Nuxt / TypeScriptの導入 ⚫ より型安全で動作の保証された開発体験の実現 言語・スキルセットの統一 ⚫ 開発コストの削減 フロントエンド / サーバーサイドの分離 ⚫ モノリシックな構成からの脱却 1 2 3
42. Copyright arara inc. All Rights Reserved. 採用情報 41 https://www.arara.com/recruit/
43. Copyright arara inc. All Rights Reserved. 42