Nuxtjs my friend
- 1. NUXTJS My Friend By Ryosuke Suzuki
- 2. Ryosuke Suzuki • 明治大学 総合数理学部 現象数理学科 4年 • Plaid, incでインターン1年目 • 大学では Deep Learning • 日常では Web Developer • @GentleClarinet @RyosukeCla
- 4. Showcases
- 6. HELLO! KARTE Static Gen 開発期間は2週間 Developer 1 Designer 1
- 7. なぜ、NUXTか • Static gen できる • Webpack 書く必要無し • 一瞬で開発環境が整うので、Nuxt を選んだ • しかも、Service Worker まで生成してくれる • 神 • Nuxtのおかげで数週間で開発できた Thanks Nuxt!
- 8. つまずいたところ • CSS Preprocessor のコンパイル時にエラーが起きた時 => PostCSSの設定が怪しい • 数百枚の大量の画像の読み込みが上手く行かない時 => Css sprite で複数の画像を一つに • Cloudfront にアップロードする時 => Invalidation 周りで気をつけて
- 10. しっかりと開発したい • Netflix, Twitter, Youtube, Facebook, Medium, Dev.to, etc. • はどれも universal web application だ • サービスを開発するなら、ssr したい
- 11. なぜ、SSRか
- 12. SSRのメリット • Better User Experience • SEOがうんたら
- 13. ggrと出てくる、SSR不要説 • OGPしっかししてれば、SSRする必要ないのでは • コンピュータリソースも使うし • 初期表示が速くなるとはいうけど、SSRしなくても今のブ ラウザとデバイスなら直ぐレンダリングできるじゃん • 環境構築がめんどそうだし、SSRを意識してコーディング するのは大変そう
- 14. 確かに！
- 15. でも、SSRしたい
- 16. なぜ、SSRか • グローバル水準 • エンジニアの知的好奇心を満たす • どやりたい • 常に先端にいたい
- 17. – John Doe “ SSR は必要か不要かではない。やるかやらないかだ。 ”
- 18. いいから、NUXTやろうよ
- 19. どういう構成にしたか • Typescript • Nuxt • Express Proxy SSR API
- 20. Dir Structure • client -> Nuxt Server • server -> API Server • universal -> 共通で使うもの • Monorepoっぽく
- 21. なぜ、Typescriptか • jsの自由度を残しつつ、硬く書ける • 中/大規模アプリケーションを開発するのに向いてる • 補完が強い • Decoratorが強い
- 22. Decorator
- 23. Decorator
- 24. つまづいたところ
- 25. ts-loader • Nuxt 1.4.0 は webpack 3 を使用しているので、 • Ts-loader は 3.5.0 でないと動かない
- 26. d.ts • コンパイラに怒られる • this.$routerが存在しない • this.$storeが存在しない • process.clientが（ry
- 27. Tsconfig • 複数のtsconfigがある場合、vscodeの補完のため root に もtsconfigを置く必要がある • tsconfig の paths (alias) はコンパイルされたコードに影響 を及ぼさない => webpack にも alias を追加する必要有り
- 28. Test • jest, vue-jest, ts-jest をインストールすれば、 jest を使えるようになる • alias も個別に設定する必要 有り
- 29. 終わりに
- 31. 👍