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
Cline指示通りに動かない? AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
kamomeashizawa
1
580
Select API from Kotlin Coroutine
jmatsu
1
190
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
190
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
1
410
XP, Testing and ninja testing
m_seki
3
200
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
510
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
100
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
110
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
130
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
250
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1.1k
Featured
See All Featured
How GitHub (no longer) Works
holman
314
140k
Side Projects
sachag
455
42k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.8k
Navigating Team Friction
lara
187
15k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
What's in a price? How to price your products and services
michaelherold
246
12k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
930
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とかモブプロなど アウトプットベースで議論すると道筋がみえてくる! ・導入作業が落ち着いたけど、ここからが本番
技術に溺れずうまく使いこなす つよつよエンジニアになりたい!(なる!) 振り返り(自戒を込めて...)