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
Nuxt.jsとNetlifyで はじめるJAMstack
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Chiaki Uehira
December 18, 2018
1
1.1k
Nuxt.jsとNetlifyで はじめるJAMstack
Chiaki Uehira
December 18, 2018
Tweet
Share
More Decks by Chiaki Uehira
See All by Chiaki Uehira
個人と組織から考える自由な働き方について
uhck
0
160
ToDoリストを作ってる話
uhck
0
120
Nuxt.js + Firebaseで (最高の)ToDoリストを作った話
uhck
1
940
揮発性の高いコンポーネントを作る話
uhck
0
4.3k
LaravelでGraphQLやってみた
uhck
0
1.7k
Vueコンポーネントについて考えてみた
uhck
0
2.1k
「PWA」とこれからのウェブ
uhck
0
180
Featured
See All Featured
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
uxyall
0
170
Git: the NoSQL Database
bkeepers
PRO
432
66k
Joys of Absence: A Defence of Solitary Play
codingconduct
1
290
Writing Fast Ruby
sferik
630
62k
Embracing the Ebb and Flow
colly
88
5k
The Cult of Friendly URLs
andyhume
79
6.8k
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
davidcarrasco
1
53
The Hidden Cost of Media on the Web [PixelPalooza 2025]
tammyeverts
2
190
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
49
9.9k
We Have a Design System, Now What?
morganepeng
54
8k
[SF Ruby Conf 2025] Rails X
palkan
1
750
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
17k
Transcript
Nuxt.jsとNetlifyではじめるJAMstack Nuxt.jsとNetlifyで はじめるJAMstack Chiaki Uehira
#ゆるっとstudy Nuxt.jsとNetlifyではじめるJAMstack
Chiaki Uehira Programmer / Designer 1996年⽣まれ。ピクセルグラム代表。プログラマー であり、ウェブの技術を使ったコンテンツの制作を している。最近では技術顧問としても活動しており 多数の企業に在籍している。フリーランスで集まっ たクリエイティブチームを運営しており「フェアな
組織」と「やさしい仕組み」について研究中。 @_uhck Nuxt.jsとNetlifyではじめるJAMstack
Nuxt.jsとNetlifyではじめるJAMstack
Nuxt.jsとは Nuxt.jsとNetlifyではじめるJAMstack どんなもの? Vue.jsでのウェブ制作に必要な設定やモジュールをあらかじめ⽤意したもので す。静的なランディングページから複雑な企業向け web アプリケーションの 作成に使⽤できます。
Nuxt.jsとは Nuxt.jsとNetlifyではじめるJAMstack どんなモジュールがある? Vue / Vue-Router / Vuex / Vue
Server Renderer / vue-meta
Nuxt.jsとは Nuxt.jsとNetlifyではじめるJAMstack どんな機能がある? Vue ファイルで記述できること(*.vue) サーバーサイドレンダリング 静的ファイルの⽣成 ES2015+ のトランスパイレーション JS
と CSS のバンドル及びミニファイ化 開発モードにおけるホットリローディング
Nuxt.jsとは Nuxt.jsとNetlifyではじめるJAMstack 静的ファイルの⽣成 Nuxt.jsアプリケーションをビルドしてHTMLを⽣成する。
Nuxt.jsとは Nuxt.jsとNetlifyではじめるJAMstack ということは ⽣成されたHTMLは静的ホスティングサービスで動かせる。
Nuxt.jsとNetlifyではじめるJAMstack
Netlifyとは Nuxt.jsとNetlifyではじめるJAMstack どんなもの? Netlifyは静的なサイトを超⾼速で提供できるサービスです。
Nuxt.jsとNetlifyではじめるJAMstack
Nuxt.jsとNetlifyではじめるJAMstack
Nuxt.jsとNetlifyではじめるJAMstack
Goodbye, FTP Nuxt.jsとNetlifyではじめるJAMstack
Nuxt.jsとNetlifyではじめるJAMstack
Nuxt.jsとNetlifyではじめるJAMstack
JAMstackとは Nuxt.jsとNetlifyではじめるJAMstack JavaScript, API, Markup JavaScriptとAPIとMarkupを組み合わせたWebアプリケーションアーキテ クチャです。
JAMstackとは Nuxt.jsとNetlifyではじめるJAMstack つまりはどういうこと? WordPressみたいにリクエストごとにHTMLを⽣成するのではなく、事前に ビルドして全て静的コンテンツとしてホスティングしようみたいな考え⽅で す。
Nuxt.jsとNetlifyではじめるJAMstack
Nuxt.jsとNetlifyではじめるJAMstack
Nuxt.jsとNetlifyではじめるJAMstack
Nuxt.jsとNetlifyではじめるJAMstack
まとめ Nuxt.jsとNetlifyではじめるJAMstack なにがうれしいのか パフォーマンスがいい / 構成費⽤が安い / モダンな開発環境
Nuxt.jsとNetlifyではじめるJAMstack