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.9k
なぜコピペで使うコンポーネント集を利用するのか?
mottox2
8
7.2k
UIコンポーネントライブラリをうまく使うためにできること / components-with-designer
mottox2
7
3.9k
Figma Plugin公開までの壁を乗り越える
mottox2
3
3.5k
Puppeteerでつくる画像と動画 / images and videos made with puppeteer
mottox2
0
700
手触りのよいウェブを考える / better-mobile-web
mottox2
3
1.8k
組織と権限とSlack App / slack-app-with-roles
mottox2
1
670
SSRを避けるためにやっていること / ssr-alternative
mottox2
9
3.2k
JSXでつくる宣言的UIなプレゼンテーション / jsx-presentation
mottox2
7
33k
Other Decks in Technology
See All in Technology
Microsoft Fabric のネットワーク保護のアップデートについて
ryomaru0825
1
120
Kubernetes における cgroup v2 でのOut-Of-Memory 問題の解決
pfn
PRO
0
400
Goでマークダウンの独自記法を実装する
lag129
0
230
スプリントレトロスペクティブはチーム観察の宝庫? 〜チームの衝突レベルに合わせたアプローチ仮説!〜
electricsatie
1
130
AIエージェント就活入門 - MCPが履歴書になる未来
eltociear
0
670
『FailNet~やらかし共有SNS~』エレベーターピッチ
yokomachi
1
180
Yahoo!ニュースにおけるソフトウェア開発
lycorptech_jp
PRO
0
570
エキサイトブログの トップページを 段階的にリプレイスする
zsp2088dev
0
140
攻撃と防御で実践するプロダクトセキュリティ演習~導入パート~
recruitengineers
PRO
3
1.6k
認知戦の理解と、市民としての対抗策
hogehuga
0
420
「魔法少女まどか☆マギカ Magia Exedra」での負荷試験の実践と学び
gree_tech
PRO
0
250
そのコンポーネント、サーバー?クライアント?App Router開発のモヤモヤを可視化する補助輪
makotot
4
770
Featured
See All Featured
It's Worth the Effort
3n
187
28k
KATA
mclloyd
32
14k
Balancing Empowerment & Direction
lara
3
600
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Building Adaptive Systems
keathley
43
2.7k
Practical Orchestrator
shlominoach
190
11k
How to Ace a Technical Interview
jacobian
279
23k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
Navigating Team Friction
lara
189
15k
Writing Fast Ruby
sferik
628
62k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
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Λ৮ͬͯΈ͍ͯͩ͘͞ɻ ·ͱΊ