Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
新規に参画したプロジェクトでNuxtに移植しようとした話
Search
Yohei Fujii
May 07, 2019
Programming
3
4k
新規に参画したプロジェクトでNuxtに移植しようとした話
Oct.incで別プロジェクトに参画した時に、Rails+VueをNuxtに移植しようとした話です。
Yohei Fujii
May 07, 2019
Tweet
Share
More Decks by Yohei Fujii
See All by Yohei Fujii
体験をシェアしよう!
yohei1127
0
1.3k
1人1人が楽しくより成長するために
yohei1127
2
1.4k
今日のお題である「Webを感じる!楽しむ!」 その前に、そのために!
yohei1127
0
390
Other Decks in Programming
See All in Programming
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
7
1.6k
Back to the Future: Let me tell you about the ACP protocol
terhechte
0
130
止められない医療アプリ、そっと Swift 6 へ
medley
1
120
育てるアーキテクチャ:戦い抜くPythonマイクロサービスの設計と進化戦略
fujidomoe
1
150
どの様にAIエージェントと 協業すべきだったのか?
takefumiyoshii
2
600
Swift Concurrency - 状態監視の罠
objectiveaudio
2
450
Web技術を最大限活用してRAW画像を現像する / Developing RAW Images on the Web
ssssota
2
1.2k
Django Ninja による API 開発効率化とリプレースの実践
kashewnuts
0
920
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
580
フロントエンド開発に役立つクライアントプログラム共通のノウハウ / Universal client-side programming best practices for frontend development
nrslib
7
3.9k
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
220
開発生産性を上げるための生成AI活用術
starfish719
1
170
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Unsuck your backbone
ammeep
671
58k
Automating Front-end Workflow
addyosmani
1371
200k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Gamification - CAS2011
davidbonilla
81
5.5k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Visualization
eitanlees
148
16k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
GraphQLとの向き合い方2022年版
quramy
49
14k
Transcript
2019/05/07 新しく参画したプロジェクトでNuxtに置き換えよう として・・ @yohei_fujii1127
1. 自己紹介・会社紹介
▼名前 藤井 洋平(Fujii Yohei) ▼自己紹介 1991年、大阪生まれ インドネシア現地企業にて4年ほど営業・管理部門職 2019年1月 Oct.incにジョイン
▼好きなこと お寿司、K-pop、筋肉、JS、 ▼スキル JavaScript(Vue.js, Nuxt.js) マルチリンガル() ▼その他 自社エンジニア採用サイトでインタビュー記事載せて頂きました。良 ければ読んでみて下さい 自己紹介 https://engineer.88oct.co.jp/
会社名 株式会社オクト 社員 70名ほど (うちエンジニア 20人ほど) 2016年3月にサービス開始。3周年を迎 え、1600社以上の企業と数万人のユー ザーにお使い頂いています。 2019年3月、シリーズBで20億円の資金 調達を実施。“建築・建設産業の「働く」
を「幸せ」にする”がミッション。 会社紹介
サービス構成 施工管理 引合粗利 図面 検査 短工事 チャット 会社紹介
現在 サービス構成 会社紹介 施工管理 引合粗利 図面 検査 短工事 チャット フロントエンド
2ヶ月半
2. Rails+VueからNuxtへの移行調査してみて
• Angular v1から脱却したい • マイクロサービス化を進める方向性 • SPA化 • 今後参画したフロントエンドエンジニアにとって開発しやすい環境を作りたい •
大きなプロジェクトの上に乗っており、変更時に影響範囲が大きい場合があ る • 規約が欲しい • Railsの上に乗ったVueを触りたくない(個人的な思い・・) • etc... 背景 Nuxt化して、フロントとバックで役割・責務を分け、ここら辺を解決してい ける希望があるのでは?
新規プロジェクトでは、Nuxtでスタートしているからいい けど、既存のものを置き換えていくってどうやるんだろう
懸念点① 工数&リソース • 1〜2ヶ月フルコミットで形になるか? • Nuxt化と既存機能開発と同時並行? • 他の大きなプロジェクトがある中で、どこまでこちらに対応できるか • 現状見積りも正確にできない(そのための作業が必要)
• リファクタするか、フルスクラッチか ◦ 現在のものを捨てることになるのか (3月にリリースしたばかりなのに・・)
懸念点② • ユーザー情報 ◦ ログイン状態の引き継ぎをどうするか? • CORS ◦ リクエスト元がRailsではなく、フロント専用サーバーからになる 認証
幸いにも本体に入っているVueプロジェクトは、1 ページだけだった。
ひとまず移植やってみよう
1日検証
やったこと 1. Nuxtで新規プロジェクト立ち上げ 2. 必要なプラグインのインストール 3. RailsからVueに渡していた値や判定flagを決め打ち 4. ユーザーのログインはRails側で決め打ち 5.
Railsの方で、CORSに対応 6. SCSSファイルの整理etc..
そううまく行かなかった
ダメだったこと • JSイベント発火が起きない • スタイル崩れ • CSSがうまく当たらない • 画像読み込みない •
etc... 致命的
わかったこと • styles/data/images/main/packsなど様々なディレクトリが存在 • 依存パッケージが多い・・(本当に使われているかわからん) • 画像参照等が相対パス • 書き方に一貫性がない ◦
ストアの呼び出し方、DOM参照、非同期処理 ◦ どこを見れば良いかわかりにくい • 複雑なスタイルシート構成 ◦ 影響範囲がわかりにくい ◦ FLOCSS依存 • インライン記述が多い
現状で移行しても、影響範囲(cssもjs)がわかりにくく、不具合が起きる可能性が 高く、修正しにくい ひとまず今のプロジェクトで、機能開発を進めながらもNuxt移行に向けたリファク タを並行して進める 結論 移植はカオスな結果に終わった・・。続く
3. 今後の展開
• SFCを活かした設計・書き方を社内に浸透させる • スタイルシートに依存した部分を剥ぎ落としていく • CSSスタイルガイドの作成 • コンポーネント設計の見直し • Lintの導入
• ストアの呼び出し方を統一する • ディレクトリ構成をNuxtに似せていく • ページ単位での機能追加があるところからNuxtに移行していく やること
https://tech.88oct.co.jp/ • テックブログで進捗を更新していく • 半年後にこの成果をまた報告したい 今後の動き
See you soon again!