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
既存RailsプロダクトにVue3導入した話 / vue-introduction
Search
Kazuma Maekawa
June 15, 2022
Programming
1
370
既存RailsプロダクトにVue3導入した話 / vue-introduction
Kazuma Maekawa
June 15, 2022
Tweet
Share
More Decks by Kazuma Maekawa
See All by Kazuma Maekawa
Nuxt3 × microCMSでポートフォリオサイト構築
kazuma630
0
210
Other Decks in Programming
See All in Programming
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
18
9.2k
AIともっと楽するE2Eテスト
myohei
9
3.1k
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
150
コーディングエージェント概観(2025/07)
itsuki_t88
0
130
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
4
670
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
300
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
200
AIのメモリー
watany
11
950
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
640
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
180
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
560
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
240
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Building Applications with DynamoDB
mza
95
6.5k
Why Our Code Smells
bkeepers
PRO
337
57k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Side Projects
sachag
455
43k
Become a Pro
speakerdeck
PRO
29
5.4k
Transcript
既存RailsプロジェクトへVue3を導入
自己紹介 ▪ 名前 まえかわ かずま(23歳) ▪ 所在地 → → →
→ → 兵庫 茨城 兵庫 福岡 東京 茨城(現在地) ▪ 業務 株式会社アサインナビに在籍する2年目エンジニア Rails、Javascript(Jquery, Vue.js)を主に触ってます ▪ 近況 週末は海辺でのんびり ゆる言語学/コンピュータ科学ラジオ(youtube)にハマってます @kz2021_enginner
アジェンダ ・Vue導入のきっかけ ・導入にあたっての壁 ・コンポーネント化方針 ・コーディングスタイル方針 ・振り返り(自戒)
・拡張性や可読性の低いコードが乱立 ・既存の同じUIを探すのが大変、統一がとれていない 影響範囲をカプセル化し、再利用しやすいフロント開発環境を 構築すべくVue導入を決定 しかし、Vue3系について社内で詳しいメンバーがいない状態... 勉強会を行い 基礎的な知見をチーム内で固めた上で導入する方針に 背景
・Vueのコーディングルールがなく、 再利用性や保守性にかけるコンポーネントが乱立 ・webpackerに依存しており、パフォーマンスチューニングや マイグレーションコストがネックに Vue3導入に合わせて ・webpackerではなくwebpackを選定 ・コンポーネント設計方針やスタイルガイドを検討 別プロジェクトで発生していた問題への対応
Vueの設計・コンポーネント化方針 ▪ 設計方針 Atomic Designの5階層に基づいて、ディレクトリを分割 i18n, routesはRubygemでエクスポートしたものを配置 ディレクトリ構造 引用元:Atomic Design
Methodology
Atomic Designのつらいところも... ・atomやmoleculesなど、どの階層に配置しようか? の検討コストが思った以上に大きい 他社さんの事例も参考にしつつ ディレクトリ構造の見直しを検討していきたい... ・ユニークビジョン社: components コンポーネントは
以下にフラットに全部置くのが良い ・カカクコム社: Atomic Designをやめてディレクトリ構造を見直した話
コーディングスタイル方針 ESLintとPrettierを採用 eslint-plugin-vueが3系のスタイルガイドをサポートしてくれている! 推奨設定で動かす インデントや折り返し行数など細かいルールのみカスタマイズ デフォルト設定がverUPで変更されることもあるので 明示的にルールを設定
・webpack導入のバージョン差異エラーで時間とってしまった... 公式ドキュメントのマイグレーションガイドはきちんと読もう! ・設計方針とか技術選定は机上の空論になりがちだった... プチLTとかモブプロなど アウトプットベースで議論すると道筋がみえてくる! ・導入作業が落ち着いたけど、ここからが本番
技術に溺れずうまく使いこなす つよつよエンジニアになりたい!(なる!) 振り返り(自戒を込めて...)