Upgrade to Pro — share decks privately, control downloads, hide ads and more …

新規に参画したプロジェクトでNuxtに移植しようとした話

 新規に参画したプロジェクトでNuxtに移植しようとした話

Oct.incで別プロジェクトに参画した時に、Rails+VueをNuxtに移植しようとした話です。

Yohei Fujii

May 07, 2019
Tweet

More Decks by Yohei Fujii

Other Decks in Programming

Transcript

  1. 2019/05/07

    新しく参画したプロジェクトでNuxtに置き換えよう
    として・・

    @yohei_fujii1127


    View full-size slide

  2. 1. 自己紹介・会社紹介


    View full-size slide

  3. ▼名前

    藤井 洋平(Fujii Yohei)


    ▼自己紹介

    1991年、大阪生まれ

    インドネシア現地企業にて4年ほど営業・管理部門職

    2019年1月 Oct.incにジョイン


    ▼好きなこと

    お寿司、K-pop、筋肉、JS、


    ▼スキル

    JavaScript(Vue.js, Nuxt.js)

    マルチリンガル()


    ▼その他

    自社エンジニア採用サイトでインタビュー記事載せて頂きました。良
    ければ読んでみて下さい

    自己紹介

    https://engineer.88oct.co.jp/

    View full-size slide

  4. 会社名    株式会社オクト

    社員     70名ほど

    (うちエンジニア  20人ほど)


    2016年3月にサービス開始。3周年を迎
    え、1600社以上の企業と数万人のユー
    ザーにお使い頂いています。


    2019年3月、シリーズBで20億円の資金
    調達を実施。“建築・建設産業の「働く」
    を「幸せ」にする”がミッション。

    会社紹介


    View full-size slide

  5. サービス構成

    施工管理
 引合粗利
 図面
 検査
 短工事
 チャット

    会社紹介


    View full-size slide

  6. 現在

    サービス構成

    会社紹介

    施工管理
 引合粗利
 図面
 検査
 短工事
 チャット

    フロントエンド

    2ヶ月半


    View full-size slide

  7. 2. Rails+VueからNuxtへの移行調査してみて


    View full-size slide

  8. ● Angular v1から脱却したい

    ● マイクロサービス化を進める方向性

    ● SPA化

    ● 今後参画したフロントエンドエンジニアにとって開発しやすい環境を作りたい

    ● 大きなプロジェクトの上に乗っており、変更時に影響範囲が大きい場合があ
    る

    ● 規約が欲しい

    ● Railsの上に乗ったVueを触りたくない(個人的な思い・・)

    ● etc...


    背景

    Nuxt化して、フロントとバックで役割・責務を分け、ここら辺を解決してい
    ける希望があるのでは?

    View full-size slide

  9. 新規プロジェクトでは、Nuxtでスタートしているからいい

    けど、既存のものを置き換えていくってどうやるんだろう


    View full-size slide

  10. 懸念点①

    工数&リソース

    ● 1〜2ヶ月フルコミットで形になるか?

    ● Nuxt化と既存機能開発と同時並行?

    ● 他の大きなプロジェクトがある中で、どこまでこちらに対応できるか

    ● 現状見積りも正確にできない(そのための作業が必要)

    ● リファクタするか、フルスクラッチか

    ○ 現在のものを捨てることになるのか (3月にリリースしたばかりなのに・・)


    View full-size slide

  11. 懸念点②

    ● ユーザー情報

    ○ ログイン状態の引き継ぎをどうするか?

    ● CORS

    ○ リクエスト元がRailsではなく、フロント専用サーバーからになる

    認証


    View full-size slide

  12. 幸いにも本体に入っているVueプロジェクトは、1
    ページだけだった。


    View full-size slide

  13. ひとまず移植やってみよう


    View full-size slide

  14. 1日検証


    View full-size slide

  15. やったこと

    1. Nuxtで新規プロジェクト立ち上げ

    2. 必要なプラグインのインストール

    3. RailsからVueに渡していた値や判定flagを決め打ち

    4. ユーザーのログインはRails側で決め打ち

    5. Railsの方で、CORSに対応

    6. SCSSファイルの整理etc..


    View full-size slide

  16. そううまく行かなかった


    View full-size slide

  17. ダメだったこと

    ● JSイベント発火が起きない

    ● スタイル崩れ

    ● CSSがうまく当たらない

    ● 画像読み込みない

    ● etc...

    致命的

    View full-size slide

  18. わかったこと

    ● styles/data/images/main/packsなど様々なディレクトリが存在

    ● 依存パッケージが多い・・(本当に使われているかわからん)

    ● 画像参照等が相対パス

    ● 書き方に一貫性がない

    ○ ストアの呼び出し方、DOM参照、非同期処理 

    ○ どこを見れば良いかわかりにくい 

    ● 複雑なスタイルシート構成

    ○ 影響範囲がわかりにくい 

    ○ FLOCSS依存

    ● インライン記述が多い


    View full-size slide

  19. 現状で移行しても、影響範囲(cssもjs)がわかりにくく、不具合が起きる可能性が
    高く、修正しにくい


    ひとまず今のプロジェクトで、機能開発を進めながらもNuxt移行に向けたリファク
    タを並行して進める

    結論

    移植はカオスな結果に終わった・・。続く

    View full-size slide

  20. 3. 今後の展開


    View full-size slide

  21. ● SFCを活かした設計・書き方を社内に浸透させる

    ● スタイルシートに依存した部分を剥ぎ落としていく

    ● CSSスタイルガイドの作成

    ● コンポーネント設計の見直し

    ● Lintの導入

    ● ストアの呼び出し方を統一する

    ● ディレクトリ構成をNuxtに似せていく

    ● ページ単位での機能追加があるところからNuxtに移行していく

    やること


    View full-size slide

  22. https://tech.88oct.co.jp/
    ● テックブログで進捗を更新していく

    ● 半年後にこの成果をまた報告したい
    今後の動き


    View full-size slide

  23. See you soon again!


    View full-size slide