既存RailsプロダクトにVue3導入した話 / vue-introduction

Transcript

1. 既存RailsプロジェクトへVue3を導入
2. 自己紹介 ▪ 名前 まえかわ かずま（23歳） ▪ 所在地 → → → → → 兵庫 茨城 兵庫 福岡 東京 茨城（現在地） ▪ 業務 株式会社アサインナビに在籍する2年目エンジニア Rails、Javascript（Jquery, Vue.js）を主に触ってます ▪ 近況 週末は海辺でのんびり ゆる言語学/コンピュータ科学ラジオ（youtube）にハマってます 　 　 　 　 　 　 　 　 　 　 　 @kz2021_enginner
3. アジェンダ ・Vue導入のきっかけ ・導入にあたっての壁 ・コンポーネント化方針 ・コーディングスタイル方針 ・振り返り（自戒）
4. ・拡張性や可読性の低いコードが乱立 ・既存の同じUIを探すのが大変、統一がとれていない 影響範囲をカプセル化し、再利用しやすいフロント開発環境を 構築すべくVue導入を決定 しかし、Vue3系について社内で詳しいメンバーがいない状態... 勉強会を行い 基礎的な知見をチーム内で固めた上で導入する方針に 背景
5. ・Vueのコーディングルールがなく、 　 再利用性や保守性にかけるコンポーネントが乱立 ・webpackerに依存しており、パフォーマンスチューニングや 　 マイグレーションコストがネックに Vue3導入に合わせて ・webpackerではなくwebpackを選定 ・コンポーネント設計方針やスタイルガイドを検討 別プロジェクトで発生していた問題への対応
6. Vueの設計・コンポーネント化方針 ▪ 設計方針 Atomic Designの5階層に基づいて、ディレクトリを分割 i18n, routesはRubygemでエクスポートしたものを配置 ディレクトリ構造 引用元：Atomic Design Methodology
7. Atomic Designのつらいところも... ・atomやmoleculesなど、どの階層に配置しようか？ 　 の検討コストが思った以上に大きい 他社さんの事例も参考にしつつ ディレクトリ構造の見直しを検討していきたい... ・ユニークビジョン社: components コンポーネントは 以下にフラットに全部置くのが良い ・カカクコム社: Atomic Designをやめてディレクトリ構造を見直した話
8. コーディングスタイル方針 ESLintとPrettierを採用 eslint-plugin-vueが3系のスタイルガイドをサポートしてくれている！ 推奨設定で動かす インデントや折り返し行数など細かいルールのみカスタマイズ デフォルト設定がverUPで変更されることもあるので 明示的にルールを設定
9. ・webpack導入のバージョン差異エラーで時間とってしまった... 　 公式ドキュメントのマイグレーションガイドはきちんと読もう！ ・設計方針とか技術選定は机上の空論になりがちだった... 　 プチLTとかモブプロなど 　 アウトプットベースで議論すると道筋がみえてくる！ ・導入作業が落ち着いたけど、ここからが本番 　 技術に溺れずうまく使いこなす 　 つよつよエンジニアになりたい！（なる！） 振り返り（自戒を込めて...）