NuxtMeetup#2
2018.05.15
@miyaoka
Static site generatorにおけるデータ調達の話
いいですよね
話すまでもない
![](https://s3.amazonaws.com/media-p.slid.es/uploads/848715/images/4911154/nuxt.png)
Gatsbyの話をします
![](https://s3.amazonaws.com/media-p.slid.es/uploads/848715/images/4911153/gatsby.png)
なので
![](https://s3.amazonaws.com/media-p.slid.es/uploads/848715/images/4914629/Screenshot-2018-5-15_gatsbyに関する14件の投稿_-_Qiita.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/848715/images/4914630/Screenshot-2018-5-15_nuxt_jsに関する121件の投稿_-_Qiita.png)
Qiita
Static Site Generators
for
JAMstack Sites
![](https://s3.amazonaws.com/media-p.slid.es/uploads/848715/images/4911094/198px-Ruby_logo.svg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/848715/images/4911097/512px-Unofficial_JavaScript_logo_2.svg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/848715/images/4911097/512px-Unofficial_JavaScript_logo_2.svg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/848715/images/4911097/512px-Unofficial_JavaScript_logo_2.svg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/848715/images/4911097/512px-Unofficial_JavaScript_logo_2.svg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/848715/images/4911097/512px-Unofficial_JavaScript_logo_2.svg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/848715/images/4911097/512px-Unofficial_JavaScript_logo_2.svg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/848715/images/4911097/512px-Unofficial_JavaScript_logo_2.svg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/848715/images/4911097/512px-Unofficial_JavaScript_logo_2.svg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/848715/images/4911098/200px-Python-logo-notext.svg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/848715/images/4911102/Vue.js_Logo.svg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/848715/images/4911103/320px-React-icon.svg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/848715/images/4911103/320px-React-icon.svg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/848715/images/4911102/Vue.js_Logo.svg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/848715/images/4912192/Go-Logo_Aqua.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/848715/images/4911051/StaticGen.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/848715/images/4911196/jamstack.png)
JAMstack
要は nuxt generate
gatsby
Blazing-fast static site generator for React
![](https://s3.amazonaws.com/media-p.slid.es/uploads/848715/images/4911151/nextjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/848715/images/4911153/gatsby.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/848715/images/4911154/nuxt.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/848715/images/4911157/vuepress.png)
next.js
nuxt.js
vuepress
lightweight framework for
static and server-rendered applications
Universal Vue.js Applications /
The Vue.js Developers Framework
Minimalistic Vue-powered static site generator
![](https://s3.amazonaws.com/media-p.slid.es/uploads/848715/images/4911103/320px-React-icon.svg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/848715/images/4911102/Vue.js_Logo.svg.png)
Data Source
![](https://s3.amazonaws.com/media-p.slid.es/uploads/848715/images/4911157/vuepress.png)
Data
(docs)
Config
Templates
(theme)
VuePress
components
$page
$site
.js
.md
Content server
Data
Plugin
$content.get()
.md
.json
Templates
- webpack dev server
- express
- hosting server
components
emit assets
axios
![](https://s3.amazonaws.com/media-p.slid.es/uploads/848715/images/4911154/nuxt.png)
Nuxt + Nuxtent
Nuxtentについては NuxtMeetup#1 参照
Gatsby
![](https://s3.amazonaws.com/media-p.slid.es/uploads/848715/images/4911153/gatsby.png)
Data
File
API
CMS
Source Plugin
Content Server
Templates
nodes
(Gatsby’s data system)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/848715/images/4911533/GraphQL_Logo.svg.png)
components
GraphQL
import React from "react";
export default ({ data }) =>
<div>
<h1>
{data.site.siteMetadata.title}
</h1>
</div>
export const query = graphql`
query TitleQuery {
site {
siteMetadata {
title
}
}
}
`
module.exports = {
siteMetadata: {
title: `Site Title`,
},
plugins: [
...
],
};
./gatsby-config.js
./src/pages/index.js
nodes
![](https://s3.amazonaws.com/media-p.slid.es/uploads/848715/images/4911533/GraphQL_Logo.svg.png)
パフォーマンス
リンク先リソースの先読み
![](https://s3.amazonaws.com/media-p.slid.es/uploads/848715/images/4916021/gatsby.gif)
-
データソースの一元化
-
統一化されたクエリ
-
超速に懸ける意気込み
要はこのへんがすごい
Guess.js
![](https://s3.amazonaws.com/media-p.slid.es/uploads/848715/images/4916002/guess__1_.png)
Support Vue.js?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/848715/images/4916008/スクリーンショット_2018-05-15_17.48.47.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/848715/images/4911151/nextjs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/848715/images/4911153/gatsby.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/848715/images/4911154/nuxt.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/848715/images/4911157/vuepress.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/848715/images/4911103/320px-React-icon.svg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/848715/images/4911102/Vue.js_Logo.svg.png)
未来へ・・・
誰だったのか
@miyaoka
![](https://s3.amazonaws.com/media-p.slid.es/uploads/848715/images/4916079/miyaoka2018.jpg)
宣伝
soussune
(そうっすね) というポッドキャスト やってます
![](https://s3.amazonaws.com/media-p.slid.es/uploads/848715/images/4749821/ogp-artwork.jpg)
Static site generatorにおけるデータ調達の話
By Masaya Kazama
Static site generatorにおけるデータ調達の話
- 5,188