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
290
既存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
140
Other Decks in Programming
See All in Programming
incrementalモデルの理解を深める
ikkimiyazaki
2
640
決断するための勇気、そのためのBacklog / Courage to make decisions, Backlog for that.
seike460
PRO
4
1.9k
WasmOS: Wasmを実行する自作Microkernel
riru
0
370
LPIXEL×CADDi_kaerururu
kaerururu
3
300
RubyVM を PHP で実装する 〜Hello World を出力するまで〜
memory1994
PRO
1
490
Crafting a Own PHP - ウキウキ手作りミニマリストPHP
uzulla
4
1.1k
phpunit/php-code-coverageって何をしてるんだ #phperkaigi
o0h
PRO
2
220
Compiling Python to WebAssembly with py2wasm
syrusakbary
0
130
Parallel Socket Communication in Swift
s_shimotori
0
220
設計の知識と技能で駆動するソフトウェア開発
masuda220
PRO
18
10k
品質が高いコードって何?Rev2.1
ickx
1
490
Swiftの型推論を学ぼう | Let's Learn About Type Inference in Swift
omochi
2
520
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
317
37k
Embracing the Ebb and Flow
colly
78
4.1k
What's new in Ruby 2.0
geeforr
335
31k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
19
1.6k
GitHub's CSS Performance
jonrohan
1023
450k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
28
5.9k
Into the Great Unknown - MozCon
thekraken
10
830
StorybookのUI Testing Handbookを読んだ
zakiyama
10
4.5k
In The Pink: A Labor of Love
frogandcode
137
21k
Why You Should Never Use an ORM
jnunemaker
PRO
50
8.6k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
101
6.6k
Side Projects
sachag
451
41k
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とかモブプロなど アウトプットベースで議論すると道筋がみえてくる! ・導入作業が落ち着いたけど、ここからが本番
技術に溺れずうまく使いこなす つよつよエンジニアになりたい!(なる!) 振り返り(自戒を込めて...)