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