TechTrain しくじり先生 - Nuxt.js, Vue.js -

TechTrain しくじり先生 - Nuxt.js, Vue.jsにおけるしくじり -

自己紹介新卒: EC系 2社目: TechBowl Now! 株式会社TechBowl 好きな Color Scheme
は One Dark Twitter: @gurusu_program

TechTrain とは。

対象 • スタートアップに所属している • これからVue.jsのプロジェクトにアサインされる • 新しい環境だから大丈夫っしょ！と思ってる

油断するとこうなるよ・・・？

TechTrain 2019.4 Refactor Release! 2019.6 TypeScript, SSR 2019.10 Start! Start!

TechTrain 2019.4 Refactor Release! 2019.6 TypeScript, SSR 2019.10 Start! Start!
ここのリファクタが必要になった。

ワイルドだろうぉ〜。

まずは起こったしくじりから。 • 意味のないページをまたがるグローバルなストアが混沌としている • 関係ないページ用のストアの冗長なロードが起きパフォーマンスが悪い • SEO が重要にも関わらずサーバーサイドレンダリングを導入できていない • ページ遷移時の
UI チラツキが頻発

リリースして2ヶ月のプロダクト・・・

グローバルなストアが混沌としているこういう処理がたくさんある • ログイン • ログアウト • Firebase以外の処理も etc...

グローバルなストアが混沌としているこういう処理がたくさんある • ログイン • ログアウト • Firebase以外の処理も etc... ちなみにこれ
pages です。

関係ないページ用のストアの冗長なロードが起きパフォーマンスが悪い原因 • 行数の多いdata()の定義(数百行。。。) • APIとの通信がN+1となっているメソッド • templateにたくさん書かれている式

SEO が重要にも関わらずサーバーサイドレンダリングを導入できていない • SPAで作成していた ◦ metaタグなし ◦ リッチカードの対応などももちろんしてない

対策一覧だけ共有 • ページをまたがるグローバルなストアが混沌としている ◦ 状態管理をNuxtとTypeScriptを導入し、Actionから必ず状態を触る • 関係ないページ用のストアの冗長なロードが起きパフォーマンスが悪い ◦ 余計なロード部分を削りまくる。 •
SEO が重要にも関わらずサーバーサイドレンダリングを導入できていない ◦ 導入。一部書き換え (clientタグなど)が必要 • ページ遷移時の UI チラツキが頻発 ◦ v-cloakやloadingIndicatorの導入など • ~永遠にログインできない致命的なバグの発生 ◦ そもそもロジックのミスなので修正

TechTrain - U30 で楽しく開発したい方 -

TechTrain しくじり先生 - Nuxt.js, Vue.js -

TechTrain しくじり先生 - Nuxt.js, Vue.js -

Suguru Ohki

More Decks by Suguru Ohki

Other Decks in Programming

Featured

Transcript