SchooでVue.js/Nuxtを技術選定している理由

フロントエンドでの技術選定 —— 「みんなで」語り尽くそう！発表資料

Transcript

1. Schooで Vue.js/Nuxtを 技術選定している理由 フロントエンドでの技術選定 ⸺ 「みんなで」語り尽くそう！ 株式会社Schoo 橋本拓海 / ⼤⼭奥⼈ 2026/02/10
2. 橋本 拓海 2024年10⽉からの半年のインターンを 経て、2025年4⽉に新卒で株式会社 Schooへ⼊社。 インターン時の開発⼯程の上流から下 流の経験をもとに現在はアプリ開発‧ 運⽤保守を担当。 2 発表者
3. ⼤⼭ 奥⼈ 2024年6⽉に株式会社Schooへ⼊社。 フロントエンド領域を中⼼としたアー キテクチャ設計‧技術⽀援‧社内外へ の技術啓蒙を担当。 2026年からはプロダクト開発チームへ 異動し、より事業に近い⽴場でプロダ クトづくりに携わる。 3 発表者
4. 01 株式会社Schoo について 4
5. 5 事業紹介 5
6. 事業紹介 6
7. • 技術ブログ（Qiita）にて定期的に記事として発信 • Qiita Advent Calendarに2024、2025年で参加 • 各種技術カンファレンス‧イベントでの発表 ◦ 【技術選定を突き詰める】Online Conferenc e 2025 ◦ Playwright Lightnings #1 ◦ Mita.ts #6 ◦ 4社が語るリプレイス‧リニューアル最前線 ◦ “伸びる”サービスの裏で起きているリアルな技術課題 Schooでの技術発信⽂化 7
8. Schooプロダクトにおける技術スタック 8 プロダクト バックエンド フロントエンドフレームワーク Schoo for Personal PHP、Golang Backbone.js、jQuery、Vue.js、Nuxt Schoo for Business Ruby jQuery、Vue.js Schoo Swing Golang Vue.js、Nuxt
9. 02 なぜSchooは Vue.js/Nuxtを 選ぶのか？ 9
10. • マトリクス組織への移⾏に伴いスクワッドチーム化での 機能開発への集中を考えてた組織構成への変更 (*) • サービスが分かれている中で各機能‧チームごとで 開発しやすいスタックに揃えていくのが肝要 • Schooエンジニアのスキルセットとして Vue.js/Nuxtで書くことに慣れている 組織‧開発体制 10 (*) 【開発組織】線を引き直して、同じ未来を⾒る ⸺マトリクスに切り替えた話
11. • Vue 2/Nuxt 2での破壊的変更を機に、 React/Next.jsへ技術スタックを移⾏するところもある • SchooはReact/Next.jsといった別の選択肢を選ばないのか？ Q. Reactや他の選択肢は使わないのか？ 11 A. SchooはVue.js/Nuxtを継続採⽤していく • Vue.js/Nuxtからそのままアップデートしても問題ない • むしろメリットは⼤きいと考える
12. 03 Vue.js/Nuxtの 優れている点 12
13. • 多様な開発スタイルを選択できる ◦ SFC（Single File Components）での開発 ◦ PHP/Railsのテンプレートエンジンとの共存も可能 ◦ Node.jsでのビルド不要で呼び出すことができる Vue.jsの利点：柔軟性と責務の分離 13
14. 14 Node.jsのビルド不要でVue.jsを扱う例 HTMLにちょい⾜しでできる！ Vue.jsでサクッと動きをつける⽅法 - ICS MEDIA
15. • SFCによる責務の分離 ◦ HTML / CSS / JavaScript (TypeScript) が明確に分かれている ◦ ブロックごとの分離により、変更箇所の特定が容易 ◦ JavaScript、TypeScriptの環境も選べる ▪ Vue3からのTypeScript連携強化 Vue.jsの利点：柔軟性と責務の分離 15
16. 16 カスタムブロックによるDSLとしての拡張 Vue のカスタムブロックで「気軽に」始める仕様駆動開発のススメ - ANDPAD Tech Blog
17. • 公式が提⽰するシンプルな状態管理 ◦ コンポーネント内でのUI状態：ref で完結 ◦ コンポーネント間を跨ぐ状態：useState や Pinia で管理 • 開発の参考となるモジュール集の存在 ◦ https://nuxt.com/modules ◦ Nuxt公式‧個⼈など開発の参考となるものが多い ◦ 注意：活⽤時はメンテナンス頻度も併せて確認 Nuxtの利点：開発体験と安定性 17
18. • アップデートへの追従容易性 ◦ compatibilityVersion 設定により、先⾏機能を安全に試⾏可能 • Nitro（サーバーサイドエンジン） ◦ 特定のクラウドベンダーにロックインされない • UnJS（Unified JavaScript Tools）で構成されている ◦ Nuxt内機能はさまざまなライブラリで分離‧透明性が⾼い Nuxtの利点：開発体験と安定性 18
19. • https://ja.vuejs.org/tutorial/ ◦ Vue公式のチュートリアル（⽇本語対応） • https://learn.nuxt.com/ja ◦ Nuxt公式のチュートリアル（⽇本語対応） ▪ コンテンツ⾃体はまだWIP • chibivue ◦ Vue.jsのコア部分を理解するために有⽤な教材 Vue.js/Nuxt：チュートリアルの存在 19
20. Vueエコシステムの 進化‧将来性 04 20
21. • VueエコシステムはEvan You個⼈の開発から コミュニティ全体で作り上げる体制になってきている • 主要な機能やライブラリは特定個⼈によって私物化されず 透明性のある開発が進められている • Volar.js、Vue Macros、alien-signalsなどの取り組みが Vue本体の開発に⼤きな影響を与えている コミュニティ主導のエコシステム 21
22. Ecosystem CI • 主要ライブラリの破壊的変更を監視し、安定性を担保 • このCIを元に徐々にリリースサイクルも改善されている ◦ Vue.js ▪ https://github.com/vuejs/ecosystem-ci ◦ Nuxt ▪ https://github.com/nuxt/ecosystem-ci コミュニティ主導のエコシステム 22
23. • VoidZeroはVue.js/Vite作者のEvan You⽒が⽴ち上げた企業 • 開発者の⽣産性向上とエコシステム貢献を掲げる 「Vue.jsファースト」なツール開発を進めていくと宣⾔ VoidZero社の動向 23 Announcing VoidZero - Next Generation Toolchain for JavaScript | VoidZero
24. • Rust製ツールチェイン (Oxc) の開発 ◦ oxlint、oxfmt 等による圧倒的な処理速度 ◦ CI待ち時間の短縮による開発者体験の向上 VoidZero社の動向 24
25. • Vite +とAIの未来 ◦ 超⾼速フロントエンドビルドツールであるViteの 統合開発ツールチェインの「Vite +」が現在開発中 ◦ Agent ModeでのAI協業による開発の加速 • 今後数年で開発スピードは劇的に向上する可能性に期待したい VoidZero社の動向 25
26. 国内の Vueコミュニティ 05 26
27. さまざまな企業がVue/Nuxt.jsを採⽤している実績があり、 Schooも「Vue.jsを採⽤している企業」として周知している ⽇本市場におけるVueの状況 27 • Vue.jsを採⽤している企業 - what we use • chibivue-land/japanese-companies-using-vuejs ⽇本で Vue.js を使っている企業⼀覧
28. • Vue Fes Japanといった年１のカンファレンスの開催 • Vue.js v-tokyo Meetupという勉強会も定期的に開催されている • ⽇本⼈でVueエコシステムにまつわるメンテナーや コアチームメンバーがいる強み ◦ 気軽に会話ができたり相談もできる距離感 ◦ VoidZero社員でも⽇本⼈メンバーが在籍している コミュニティ活動が活発‧開発者との近さ 28
29. Vueコミュニティへの登壇‧寄稿にて貢献 Schooのコミュニティへの貢献 29 • UV Study : Vue.js LT会 ~業務で活きる実践的なVue~ ◦ useIdでアクセシブルな汎⽤コンポーネントを作ってみよう 発表 • Vue.js v-tokyo Meetup #22 ◦ リアクティブシステムの変遷から理解するalien-signals 発表 • Vue Fes Japan 2025 ◦ ⽣成AI時代の Webアプリケーションアクセシビリティ改善 発表 • Zennコミュニティ ( https://zenn.dev/p/comm_vue_nuxt ) への記事寄稿
30. Schooの Vue.js/Nuxtとの 今後の付き合い⽅ 06 30
31. • ライブラリやフレームワークの選定⾃体を⽬的としない • あくまで「事業成⻑のためのツール」としてどうあるべきかを重視 • 今の時点でVue.js/Nuxtによって開発が劣化することはないと判断 • 社内状況的にもエコシステム的にも合理的かつ安⼼できる選択 Schooとしてのスタンス 31
32. • Vue.js/Nuxtの安定感だけに⽢えない ◦ 組織として習熟していく努⼒を継続する ◦ 内部勉強会、AIのガードレール整備など • 今回の勉強会を含めた外部発信を通じた採⽤プレゼンスの強化 「選んだ技術を、⾃分たちで正解にしていく」 という意志を持ち、みんなでフロントエンド開発を進めていきたい これからの組織としてのアクション 32
33. • 現在のVue.js/Nuxtは技術選定において強⼒な選択肢の１つ • エコシステムを含めてフロントエンド開発の安定性がある • コミュニティと⼀緒にVueエコシステムの発展へ貢献できる • SchooはVue.js/Nuxtの選択を正解としていけるようにする まとめ 33