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.7k
組織と権限と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
CZII - CryoET Object Identification 参加振り返り・解法共有
tattaka
0
210
君も受託系GISエンジニアにならないか
sudataka
1
350
開発者が自律的に AWS Security Hub findings に 対応する仕組みと AWS re:Invent 2024 登壇体験談 / Developers autonomously report AWS Security Hub findings Corresponding mechanism and AWS re:Invent 2024 presentation experience
kaminashi
0
180
Classmethod AI Talks(CATs) #15 司会進行スライド(2025.02.06) / classmethod-ai-talks-aka-cats_moderator-slides_vol15_2025-02-06
shinyaa31
0
160
Kubernetesでメールの大量配信をしている話/k8sjp-20250205
hfukamachi
0
390
技術負債の「予兆検知」と「状況異変」のススメ / Technology Dept
i35_267
1
990
データの品質が低いと何が困るのか
kzykmyzw
6
1k
リアルタイム分析データベースで実現する SQLベースのオブザーバビリティ
mikimatsumoto
0
720
AWSでRAGを実現する上で感じた3つの大事なこと
ymae
3
1k
バックエンドエンジニアのためのフロントエンド入門 #devsumiC
panda_program
16
6.2k
Larkご案内資料
customercloud
PRO
0
600
家電アプリ共通PF "Linova" のAPI利用とPostman活用事例ご紹介
yukiogawa
0
120
Featured
See All Featured
Optimizing for Happiness
mojombo
376
70k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
A better future with KSS
kneath
238
17k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
Producing Creativity
orderedlist
PRO
343
39k
Building an army of robots
kneath
302
45k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Code Review Best Practice
trishagee
66
17k
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Λ৮ͬͯΈ͍ͯͩ͘͞ɻ ·ͱΊ