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
Chiaki Uehira
December 18, 2018
1
910
Nuxt.jsとNetlifyで はじめるJAMstack
Chiaki Uehira
December 18, 2018
Tweet
Share
More Decks by Chiaki Uehira
See All by Chiaki Uehira
個人と組織から考える自由な働き方について
uhck
0
90
ToDoリストを作ってる話
uhck
0
68
Nuxt.js + Firebaseで (最高の)ToDoリストを作った話
uhck
1
800
揮発性の高いコンポーネントを作る話
uhck
0
4.1k
LaravelでGraphQLやってみた
uhck
0
1.5k
Vueコンポーネントについて考えてみた
uhck
0
1.9k
「PWA」とこれからのウェブ
uhck
0
120
Featured
See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
121
18k
Agile that works and the tools we love
rasmusluckow
325
20k
The Cult of Friendly URLs
andyhume
75
5.9k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
Scaling GitHub
holman
458
140k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
325
21k
Done Done
chrislema
179
15k
Writing Fast Ruby
sferik
623
60k
Unsuck your backbone
ammeep
666
57k
Building Effective Engineering Teams - LeadDev
addyosmani
47
2.2k
GraphQLとの向き合い方2022年版
quramy
36
13k
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