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.8k
なぜコピペで使うコンポーネント集を利用するのか?
mottox2
8
7.1k
UIコンポーネントライブラリをうまく使うためにできること / components-with-designer
mottox2
7
3.9k
Figma Plugin公開までの壁を乗り越える
mottox2
3
3.4k
Puppeteerでつくる画像と動画 / images and videos made with puppeteer
mottox2
0
680
手触りのよいウェブを考える / better-mobile-web
mottox2
3
1.8k
組織と権限とSlack App / slack-app-with-roles
mottox2
1
650
SSRを避けるためにやっていること / ssr-alternative
mottox2
9
3.2k
JSXでつくる宣言的UIなプレゼンテーション / jsx-presentation
mottox2
7
33k
Other Decks in Technology
See All in Technology
PHP開発者のためのSOLID原則再入門 #phpcon / PHP Conference Japan 2025
shogogg
4
660
ローカルLLMでファインチューニング
knishioka
0
150
MySQL5.6から8.4へ 戦いの記録
kyoshidaxx
1
180
LinkX_GitHubを基点にした_AI時代のプロジェクトマネジメント.pdf
iotcomjpadmin
0
170
地図も、未来も、オープンに。 〜OSGeo.JPとFOSS4Gのご紹介〜
wata909
0
110
BrainPadプログラミングコンテスト記念LT会2025_社内イベント&問題解説
brainpadpr
1
160
Witchcraft for Memory
pocke
1
220
~宇宙最速~2025年AWS Summit レポート
satodesu
1
1.8k
[TechNight #90-1] 本当に使える?ZDMの新機能を実践検証してみた
oracle4engineer
PRO
3
170
How Community Opened Global Doors
hiroramos4
PRO
1
110
生成AIでwebアプリケーションを作ってみた
tajimon
2
140
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
180
Featured
See All Featured
Embracing the Ebb and Flow
colly
86
4.7k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Gamification - CAS2011
davidbonilla
81
5.3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Why Our Code Smells
bkeepers
PRO
337
57k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
GraphQLとの向き合い方2022年版
quramy
47
14k
Product Roadmaps are Hard
iamctodd
PRO
53
11k
Statistics for Hackers
jakevdp
799
220k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
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Λ৮ͬͯΈ͍ͯͩ͘͞ɻ ·ͱΊ