Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vueで静的サイトを作るGridsome / gridsome
Search
mottox2
November 19, 2018
Technology
3
1.5k
Vueで静的サイトを作るGridsome / gridsome
Roppongi.js #7で話したGridsomeのLTです。
Gridsome
https://gridsome.org/
mottox2
November 19, 2018
Tweet
Share
More Decks by mottox2
See All by mottox2
もう一歩進めたい OG画像の動的生成
mottox2
7
1.6k
なぜコピペで使うコンポーネント集を利用するのか?
mottox2
8
6.9k
UIコンポーネントライブラリをうまく使うためにできること / components-with-designer
mottox2
7
3.8k
Figma Plugin公開までの壁を乗り越える
mottox2
2
3k
Puppeteerでつくる画像と動画 / images and videos made with puppeteer
mottox2
0
640
手触りのよいウェブを考える / better-mobile-web
mottox2
3
1.8k
組織と権限とSlack App / slack-app-with-roles
mottox2
1
620
SSRを避けるためにやっていること / ssr-alternative
mottox2
9
3.1k
JSXでつくる宣言的UIなプレゼンテーション / jsx-presentation
mottox2
7
33k
Other Decks in Technology
See All in Technology
目の前の仕事と向き合うことで成長できる - 仕事とスキルを広げる / Every little bit counts
soudai
26
7.4k
利用終了したドメイン名の最強終活〜観測環境を育てて、分析・供養している件〜 / The Ultimate End-of-Life Preparation for Discontinued Domain Names
nttcom
2
240
君も受託系GISエンジニアにならないか
sudataka
2
450
【Developers Summit 2025】プロダクトエンジニアから学ぶ、 ユーザーにより高い価値を届ける技術
niwatakeru
2
1.4k
SA Night #2 FinatextのSA思想/SA Night #2 Finatext session
satoshiimai
1
150
抽象化をするということ - 具体と抽象の往復を身につける / Abstraction and concretization
soudai
22
11k
依存パッケージの更新はコツコツが勝つコツ! / phpcon_nagoya2025
blue_goheimochi
3
140
(機械学習システムでも) SLO から始める信頼性構築 - ゆる SRE#9 2025/02/21
daigo0927
0
160
Building Products in the LLM Era
ymatsuwitter
10
5.6k
OpenID BizDay#17 KYC WG活動報告(法人) / 20250219-BizDay17-KYC-legalidentity
oidfj
0
260
エンジニアの育成を支える爆速フィードバック文化
sansantech
PRO
3
1.1k
Swiftの “private” を テストする / Testing Swift "private"
yutailang0119
0
130
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
How to Think Like a Performance Engineer
csswizardry
22
1.4k
RailsConf 2023
tenderlove
29
1k
Rails Girls Zürich Keynote
gr2m
94
13k
Navigating Team Friction
lara
183
15k
The Invisible Side of Design
smashingmag
299
50k
How STYLIGHT went responsive
nonsquared
98
5.4k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Documentation Writing (for coders)
carmenintech
67
4.6k
Transcript
Vue.jsͰ੩తαΠτΛͭ͘Δ @mottox2 / 2018.11.19 Roppongi.js #7
Work: React, Gatsby.js, Next.js, RoR… OSS: Gatsby.js, Nuxt.js, ReactNative, netlify-lambda…
Comunity: #engineers_lt mottox2 @ 8FCϑϩϯτΤϯυͱ6*ܥͷϑϦʔϥϯε Who am I?
ࠓ੩తαΠτͷ͓
Real WorldͰٻΊΒΕΔ੩తαΠτ • MarkdownΛݩʹϖʔδΛੜ͚ͩͩͱɺػೳෆɻ • ϦϙδτϦ֎ͷσʔλιʔεར༻͢Δɻ • ຊ൪ڥͰɺ֎෦APIʹΞΫηε͠ͳ͍ɻ • APIͷϨεϙϯεΛ੩తԽ͓ͯ͘͠ඞཁ͕͋Δɻ
• ʢಡΈࠐΜͩޙSPAͱͯ͠ಈ͘ͱخ͍͠ɻʣ
GatsbyͳΒ࣮ݱͰ͖Δ ॏཁ Reactͷ੩తαΠτδΣωϨʔλʔɻ ֎෦ͷιʔεΛ؆୯ʹѻ͑ɺϏϧυޙ֎෦APIʹΞΫηε͕Βͳ͍ɻ
ͨͩ͠ReactΛॻ͘ඞཁ͕͋ͬͨ mottox2 @ 8FCϑϩϯτΤϯυͱ6*ܥͷϑϦʔϥϯε Who am I? ͰReactͰ͠ΐʁ mottox2 @
8FCϑϩϯτΤϯυͱ6*ܥͷϑϦʔϥϯε Who am I? ͦ͏͚ͩͲɺศརͩΑ Vue͕͖ͳਓ Θͨ͠
Vuejsެࣜͷ੩తαΠτδΣωϨʔλʔɻ ϦϙδτϦͷmdϑΝΠϧΛݩʹαΠτΛߏஙɻ ੩తϑΝΠϧΛग़ྗ͢Δgenerateػೳ͕͋Δɻ SPAͷ2ϖʔδҎ߱asyncData͕࣮ߦ͞ΕɺAPIʹϦΫΤετ͕Δɻ ɹɹଞͷબࢶͳ͔ͬͨͷ͔ʁ ิ VuePress Nuxt.js
Gridsomeͷొ Gatsby.jsʹӨڹΛड͚ͯ࡞ΒΕͨ੩తαΠτδΣωϨʔλʔ A new sta)c site generator baby is born.
It's highly inspired by Gatsby.js (React based) but built on top of Vue.js. https://gridsome.org/blog/2018/10/10/say-hello-to-gridsome
Gridsomeͷొ Gatsby.jsʹӨڹΛड͚ͯ࡞ΒΕͨ੩తαΠτδΣωϨʔλʔ
͍ํ WordPressΛιʔεʹͨ͠Ϗϧυྫ
σʔλͷऔಘ ֤CMSͷσʔλΛऔಘ͢ΔͨΊͷϓϥάΠϯ͕ଘࡏ͢ΔͷͰಋೖɻ configͷϑΝΠϧʹPluginΛొ͢Δ͚ͩͰσʔλΛ༻ҙͯ͘͠ΕΔɻ gridsome.config.js
σʔλͷར༻ औಘͨ͠σʔλSFCͷpage-queryλάʹؚ·ΕΔGraphQLʹΑͬͯ औಘ͠ɺ$page͔Βར༻Ͱ͖Δɻ src/pages/index.js
ৄࡉϖʔδ࡞ΕΔ src/templatesҎԼʹsourceͷnodeͷTypeʹରԠ໊ͨ͠લͷVueϑΝΠϧ Λஔ͘ͱϏϧυͯ͘͠ΕΔɻ src/templates/WordPressPost.vue
JSONͱͯ͠ॻ͖ग़͞ΕΔ ϏϧυͰύεຖͷσʔλॻ͖ग़͢ɻ͜ΕҰཡϖʔδͷσʔλ
·ͩ·ͩൃల్্ Gridsome·ͩv0.3ܥɻൃల్্ͷϑϨʔϜϫʔΫɻ ͨͩɺίʔυ͕ബ͍ͷͰඇৗʹಡΈ͘͢ษڧʹͳΔɻ
VueͰReal WorldͰ͑Δ੩తαΠτ͕࡞ΕΔʂ ReactͥͻGatsbyΛ৮ͬͯΈ͍ͯͩ͘͞ɻ ·ͱΊ