Slide 1
Slide 1 text
Nuxt
で写真ギャラリーを作った話 +
α
NuxtMeetUp#6 @mtmtkzm
1 / 38
Slide 2
Slide 2 text
LIVE RELEASING
2 / 38
Slide 3
Slide 3 text
event-stream
flatmap-stream
3 / 38
Slide 4
Slide 4 text
event-stream
flatmap-stream
npm ls event-stream flatmap-stream
を実行して、
└─(empty)
と出力されれば依存なし！
4 / 38
Slide 5
Slide 5 text
5 / 38
Slide 6
Slide 6 text
6 / 38
Slide 7
Slide 7 text
7 / 38
Slide 8
Slide 8 text
8 / 38
Slide 9
Slide 9 text
そう、彼が LIG の 凄腕ディレクター 北川パーヤン です。
9 / 38
Slide 10
Slide 10 text
LIG
も彼も、何も悪さはしてません
10 / 38
Slide 11
Slide 11 text
松本 和馬 / ライダー
株式会社LIG Web事業部
フロントエンドエンジニア
https://mtmtkzm.com （Nuxt 製！）
93年生 / 25才
はじめまして、ライダーです
11 / 38
Slide 12
Slide 12 text
はじめまして、ライダーです
Nuxt/Docs
のタイポや冠詞抜けを修正していたら、
12 / 38
Slide 13
Slide 13 text
はじめまして、ライダーです
Nuxt/Docs
のタイポや冠詞抜けを修正していたら、
13 / 38
Slide 14
Slide 14 text
Nuxt
で写真ギャラリーを作った話
14 / 38
Slide 15
Slide 15 text
15 / 38
Slide 16
Slide 16 text
動機
技術の勉強の実験場として
エンジニアとして「顔」がほしかった
写真に興味があった（= 欲しいものだった）
16 / 38
Slide 17
Slide 17 text
SSR（サーバサイドレンダリング）
写真詳細ページのルーティング /_id/
Flickr API 経由で人気写真を取得し、一覧
人気写真のIDを返すAPIがある
写真に紐づくEXIFを取得し、一覧
IDに紐づいたEXIFを返すAPIがある
EXIFの値によってフィルタリングしたり...
17 / 38
Slide 18
Slide 18 text
18 / 38
Slide 19
Slide 19 text
serverMiddleware
便利かも！
19 / 38
Slide 20
Slide 20 text
serverMiddleware
便利かも！
Nuxt に API（/api/
）を作成した
それ用のサーバいらない
環境変数とか使いまわせる
BFFとして扱える
module.exports = {
serverMiddleware: ['~~/api/'],
20 / 38
Slide 21
Slide 21 text
ディレクトリを分割した！
/api/
を作ったついでに、
21 / 38
Slide 22
Slide 22 text
ディレクトリを分割した！
/api/
を作ったついでに、
module.exports = {
srcDir: 'client/',
.
├── README.md
├── api
├── client
├── node_modules
├── nuxt.config.js
├── package-lock.json
├── package.json
└── server
22 / 38
Slide 23
Slide 23 text
ディレクトリを分割した！
/api/
を作ったついでに、
module.exports = {
srcDir: 'client/',
.
├── README.md
├── api <--------
さっきの serverMiddleware
├── client <-------- pages, assets...
等が入る
├── node_modules
├── nuxt.config.js
├── package-lock.json
├── package.json
└── server
23 / 38
Slide 24
Slide 24 text
state
は
function
を返しましょう
ストアを有効にする
サーバーサイドで不要な共有状態を避けるため、state の値
は常に function でなければなりません。
24 / 38
Slide 25
Slide 25 text
state
は
function
を返しましょう
ストアを有効にする
サーバーサイドで不要な共有状態を避けるため、state の値
は常に function でなければなりません。
const state = { ... }
↓
const state = () => {
return { ... }
}
25 / 38
Slide 26
Slide 26 text
Heroku
へデプロイ
26 / 38
Slide 27
Slide 27 text
Heroku
へデプロイ
27 / 38
Slide 28
Slide 28 text
OK,
全部やったぜ
28 / 38
Slide 29
Slide 29 text
君だけを残して...
29 / 38
Slide 30
Slide 30 text
git push heroku master
30 / 38
Slide 31
Slide 31 text
というわけで、
31 / 38
Slide 32
Slide 32 text
LIVE RELEASING
32 / 38
Slide 33
Slide 33 text
LIVE RELEASING
33 / 38
Slide 34
Slide 34 text
LIVE RELEASING
34 / 38
Slide 35
Slide 35 text
35 / 38
Slide 36
Slide 36 text
maner.gallery
36 / 38
Slide 37
Slide 37 text
＼ ありがとうございました ／
無事,リリース出来たのかな...
NuxtMeetUp#6 @mtmtkzm
37 / 38
Slide 38
Slide 38 text
もしよければ
我が子 maner
をシェアお願いします
maner.gallery
38 / 38