Vue.jsしか知らなかった人が、いきなりNext.jsの チーム開発に飛び込んだお話。

-- Views

November 11, 26

#チーム開発

スライド概要

https://cyberagent.connpass.com/event/410697/
上記のイベントにて、サイバーエージェントで角川ドワンゴ学園 生徒LTの登壇枠で発表したスライドです。

Vue.jsを中心に開発していた私が、React・Next.js未経験のまま、Next.jsスタックでの磁石祭2026のWebアプリ開発に参加した経験を紹介しています。

初めてのチーム開発を通じて経験したことを主に綴っています。

profile-image
スライド一覧

エンジニアリングでは Vue.js / Nuxt を中心に、UI設計や認証・認可、UIライブラリ作りに関心があります。 研究では、教派神道を中心に、近代日本の宗教思想・教義について調べています（神道学）。 S高等学校5期生 (2026: 2年生)

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

ダウンロード

関連スライド

slide-thumbnail

猫でも分かるUnreal Engineの学び方 - 超初心者向け編 - 2023 v1.0
ue4 ue5 ue-beginner
user-img エピック ゲームズ ジャパン 1.7M
slide-thumbnail

Unreal Engine5 Lumenの仕組みと肝心なところ
ue5 ue-rendering ue-lumen
user-img エピック ゲームズ ジャパン 1.5M
slide-thumbnail

UE5レンダリングフロー総おさらい(2024) 基礎編！[CEDEC+KYUSHU 2024]
ue5 unreal engine ue-rendering
user-img エピック ゲームズ ジャパン 1.4M
slide-thumbnail

Meta XR SDK(V66-74)でQuestアプリを開発
spatial anchor unity quest pro shaperecognizeractivatestate oculus integration transformfeaturestateprovider building blocks transformrecognizeractivestate ovrsemanticclassification jointdeltaprovider ovrscenemanager jointvelocityactivestate オクルージョン sequenceactivestate scene manager ambisonic depth api metaxraudiosource playerlocomotor meta xr sdk quest3 ovrplayercontroller マルチモーダル meta haptics studio direct touch ui meta xr haptics sdk ovrspatialanchor ovrtrackedkeyboard hapticclipplayer fingerfeaturestateprovider hapticclip ワイドモーションモード wmm mruk mr utility kit voice sdk jointrotationactivestate meta horizon os ui set asw application spacewarp ovr metrics tool unityscene manager colocation discovery コロケーション mx ink passthrough camera api hand tracking microgestures webcamtexturemanager passthroughcamerautils cameraviewermanager hand pose selector recorder
user-img あうぜん 1.2M
slide-thumbnail

猫でも分かる UE5.0, 5.1 におけるアニメーションの新機能について【CEDEC+KYUSHU 2022】
ue5 cedec+kyushu ue-animation ue-optimize ue-bp ue-physics ue-sequencer
user-img エピック ゲームズ ジャパン 1.1M
slide-thumbnail

【DeNA】新卒エンジニア向け 会社説明資料
user-img DeNA新卒採用 1M
各ページのテキスト
1.

角川ドワンゴ学園 ／ サイバーエージェント 合同LT会 Vue.jsしか知らなかった人が、いきなりNext.jsの チーム開発に飛び込んだお話。 小林 栄太 1

2.

自己紹介 小林 栄太 (こばやし えいた) S高等学校 ２年次生 ２００９年１１月１１日 最近は、LismCSSをベースとしたVue.jsのUIフレー ムワークを開発中。 ● 趣味： 神道学の研究／DTP（卓上出版） ● CSSが好き！そして得意！ 草を撮っています。 2

3.

前提： 当時の経験値 ● Vue.jsの経験は１年ほどあったが、React・Next.jsは皆無！ ○ HTML、CSSは、２年半ぐらいずっとやっていた(補足) ● Nuxt + Better Auth スタックをよく使っている！ ● チーム開発の経験は皆無！ 3

4.

1．磁石祭2026の企画で開発に参加！ 私が担当した、だいたいの内容 ペットの写真を募集し、チャリティー物販につなげる企画のWebアプリを作る ● ペットの写真を、投稿（CRUD+管理）・投票、ログイン機能があるWebアプリ ● 残り開発期間： 1ヶ月未満 ● 技術スタック： Next.js / MUI / Better Auth / Prisma ● 担当メンバー人数： 約3人 (メイン：私とPM) 4

5.

しかし、開発状況は…… ● 当時、十分に開発が進められていない状況だった ● 私のReact・Next.jsの経験はゼロ ● それでも、公開までに、せめてRCリリースぐらいまで開発を進める必要があった ○ しかも、一ヶ月もしないうちに仮リリースもする必要があった やばい！！！ 5

6.

まずは超入門からスタート（OJTあり） 1. まず、JSX(TSX)構文に慣れるところからスタート！ 2. その次に簡単なReact・Next.jsのお作法やコードを学ぶ！ 3. Next.jsのApp Routerについて軽く触れる！ 4. そして、実践投入 ←！？ → 十分に学習してからではなく、実践型で覚えてゆく... 6

7.

PR・Issue管理・コミュニケーションを通じた連携の話 ● 難易度、優先度、種類ごとにラベルが付いていた ○ なので、それらに沿って自分でもPR・Issueを立てやすかった ● 互いの認識をすり合わせながら話し合い、方針を共有した ○ Slack上でのレスポンスがお互い爆速だったため、すり合わせが容易だった タスクが整理されていたことで、だんだん自分で学び深めてゆき、積極的に開発へ関わ りやすい環境だった。 7

8.

PRレビュー・相互協力の話 ● レビューは単なるコードを指摘する場ではなかった ○ よりよい実装方法や、UX・仕様についても意見交換 ● レビューする側にも、される側にもなった （相互レビュー） ○ Better Auth, Prismaなど、自分が持つ知識も生かせた 互いの立場、経験に関係なく意見を対等に交換し、レビューを通じて一緒に改善してい ける関係が印象的だった。 8

9.

仕様を一緒に考えた話 ● 決められた仕様を実装するだけではなかった ○ 既存の仕様にも、互いに改善案を出していた ● 意思決定が爆速だった ○ 実質2人の開発体制だったこともあり、相談から方針決定までが速かった PMから一方的に指示を受けるのではなく、互いに意見を出し合いながら、仕様を意思 決定する 9

10.

心理的安全性が高かった話 ● ミスを責めるのではなく、改善(Action)につなげる ○ 実装上の指摘などはもちろんあったが、 失敗しても萎縮せず、改善に向けて取り組めた ● 気軽に相談し、意見を言い合えた ○ PMに遠慮なくカジュアルに質問や提案ができ、非常に話しやすかった 初めてだったので、安心して相談し、失敗を恐れずに挑戦できる環境は非常にありがた かった。 10

11.

案外いけた！！！ まとめ その後、無事RCをリリース！ ● 勝因 ○ 限られたリソースの中、(リソース)マネジメントができていた ■ トリアージしまくった ○ PDCAを効率よく回せた いろいろ未経験だったが、飛び込んでみたら、案外いけた。 そして、良い経験になった。 ● おまけ： 磁石祭会場で、コンクリート製の硬い床に座りながら、物販ブースの横でノートPCを使いhotfixを出してました 11

12.

ご清聴ありがとうございました！ 私が戦った痕跡 ● アサインしたPR 12