nuxt meetup #2 presentation slide

1. NUXTJS My Friend
By Ryosuke Suzuki

2. Ryosuke Suzuki
• 明治大学 総合数理学部 現象数理学科 4年
• Plaid, incでインターン1年目
• 大学では Deep Learning
• 日常では Web Developer
• @GentleClarinet @RyosukeCla

3. 今日の話
• Showcases
• Nuxtで環境構築をしている話

4. Showcases

5. INFOGRAPHIC
Static Gen
開発期間は3週間
Developer 2
Designer 1

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 周りで気をつけて

9. サービスを開発するために
NUXTで環境構築をしている話

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. 終わりに

30. • Typescriptの環境構築はめんどくさい！
• Nuxtは公式docsを読めば詰まることは少ない！
しかも、直ぐにセッティングできるのは最高！

31. 👍