mtmtkzm-nuxt-meetup6.pdf

NuxtMeetup#6 のLTスライドです。
https://nuxt-meetup.connpass.com/event/107759/

maner｜EXIFを同時に見ることができる写真ギャラリーサイト
https://maner.gallery

Transcript

1. Nuxt
   で写真ギャラリーを作った話 +
   α
   NuxtMeetUp#6 @mtmtkzm
   1 / 38
   

   View Slide

2. LIVE RELEASING
   2 / 38
   

   View Slide

3. event-stream
   flatmap-stream
   3 / 38
   

   View Slide

4. event-stream
   flatmap-stream
   npm ls event-stream flatmap-stream
   を実行して、
   └─(empty)
   と出力されれば依存なし！
   4 / 38
   

   View Slide

5. 5 / 38
   

   View Slide

6. 6 / 38
   

   View Slide

7. 7 / 38
   

   View Slide

8. 8 / 38
   

   View Slide

9. そう、彼が LIG の 凄腕ディレクター 北川パーヤン です。
   9 / 38
   

   View Slide

10. LIG
    も彼も、何も悪さはしてません
    10 / 38
    

    View Slide

11. 松本 和馬 / ライダー
    株式会社LIG Web事業部
    フロントエンドエンジニア
    https://mtmtkzm.com （Nuxt 製！）
    93年生 / 25才
    はじめまして、ライダーです
    11 / 38
    

    View Slide

12. はじめまして、ライダーです
    Nuxt/Docs
    のタイポや冠詞抜けを修正していたら、
    12 / 38
    

    View Slide

13. はじめまして、ライダーです
    Nuxt/Docs
    のタイポや冠詞抜けを修正していたら、
    13 / 38
    

    View Slide

14. Nuxt
    で写真ギャラリーを作った話
    14 / 38
    

    View Slide

15. 15 / 38
    

    View Slide

16. 動機
    技術の勉強の実験場として
    エンジニアとして「顔」がほしかった
    写真に興味があった（= 欲しいものだった）
    16 / 38
    

    View Slide

17. SSR（サーバサイドレンダリング）
    写真詳細ページのルーティング /_id/
    Flickr API 経由で人気写真を取得し、一覧
    人気写真のIDを返すAPIがある
    写真に紐づくEXIFを取得し、一覧
    IDに紐づいたEXIFを返すAPIがある
    EXIFの値によってフィルタリングしたり...
    17 / 38
    

    View Slide

18. 18 / 38
    

    View Slide

19. serverMiddleware
    便利かも！
    19 / 38
    

    View Slide

20. serverMiddleware
    便利かも！
    Nuxt に API（/api/
    ）を作成した
    それ用のサーバいらない
    環境変数とか使いまわせる
    BFFとして扱える
    module.exports = {
    serverMiddleware: ['~~/api/'],
    20 / 38
    

    View Slide

21. ディレクトリを分割した！
    /api/
    を作ったついでに、
    21 / 38
    

    View Slide

22. ディレクトリを分割した！
    /api/
    を作ったついでに、
    module.exports = {
    srcDir: 'client/',
    .
    ├── README.md
    ├── api
    ├── client
    ├── node_modules
    ├── nuxt.config.js
    ├── package-lock.json
    ├── package.json
    └── server
    22 / 38
    

    View Slide

23. ディレクトリを分割した！
    /api/
    を作ったついでに、
    module.exports = {
    srcDir: 'client/',
    .
    ├── README.md
    ├── api さっきの serverMiddleware
    ├── client 等が入る
    ├── node_modules
    ├── nuxt.config.js
    ├── package-lock.json
    ├── package.json
    └── server
    23 / 38
    

    View Slide

24. state
    は
    function
    を返しましょう
    ストアを有効にする
    サーバーサイドで不要な共有状態を避けるため、state の値
    は常に function でなければなりません。
    24 / 38
    

    View Slide

25. state
    は
    function
    を返しましょう
    ストアを有効にする
    サーバーサイドで不要な共有状態を避けるため、state の値
    は常に function でなければなりません。
    const state = { ... }
    ↓
    const state = () => {
    return { ... }
    }
    25 / 38
    

    View Slide

26. Heroku
    へデプロイ
    26 / 38
    

    View Slide

27. Heroku
    へデプロイ
    27 / 38
    

    View Slide

28. OK,
    全部やったぜ
    28 / 38
    

    View Slide

29. 君だけを残して...
    29 / 38
    

    View Slide

30. git push heroku master
    30 / 38
    

    View Slide

31. というわけで、
    31 / 38
    

    View Slide

32. LIVE RELEASING
    32 / 38
    

    View Slide

33. 　LIVE RELEASING
    　
    33 / 38
    

    View Slide

34. 　LIVE RELEASING
    　
    　 　 　 　
    　 　 　 　
    34 / 38
    

    View Slide

35. 35 / 38
    

    View Slide

36. maner.gallery
    36 / 38
    

    View Slide

37. ＼ ありがとうございました ／
    無事,リリース出来たのかな...
    NuxtMeetUp#6 @mtmtkzm
    37 / 38
    

    View Slide

38. もしよければ
    我が子 maner
    をシェアお願いします
    maner.gallery
    38 / 38
    

    View Slide