Nuxt.jsとNetlifyではじめるJAMstack

Slide 1

Slide 1 text

Nuxt.jsとNetlifyではじめるJAMstack Nuxt.jsとNetlifyではじめるJAMstack Chiaki Uehira

Slide 2

Slide 2 text

#ゆるっとstudy Nuxt.jsとNetlifyではじめるJAMstack

Slide 3

Slide 3 text

Chiaki Uehira Programmer / Designer 1996年⽣まれ。ピクセルグラム代表。プログラマーであり、ウェブの技術を使ったコンテンツの制作をしている。最近では技術顧問としても活動しており多数の企業に在籍している。フリーランスで集まったクリエイティブチームを運営しており「フェアな組織」と「やさしい仕組み」について研究中。 @_uhck Nuxt.jsとNetlifyではじめるJAMstack

Slide 4

Slide 4 text

Nuxt.jsとNetlifyではじめるJAMstack

Slide 5

Slide 5 text

Nuxt.jsとは Nuxt.jsとNetlifyではじめるJAMstack どんなもの？ Vue.jsでのウェブ制作に必要な設定やモジュールをあらかじめ⽤意したものです。静的なランディングページから複雑な企業向け web アプリケーションの作成に使⽤できます。

Slide 6

Slide 6 text

Nuxt.jsとは Nuxt.jsとNetlifyではじめるJAMstack どんなモジュールがある？ Vue / Vue-Router / Vuex / Vue Server Renderer / vue-meta

Slide 7

Slide 7 text

Nuxt.jsとは Nuxt.jsとNetlifyではじめるJAMstack どんな機能がある？ Vue ファイルで記述できること（*.vue）サーバーサイドレンダリング静的ファイルの⽣成 ES2015+ のトランスパイレーション JS と CSS のバンドル及びミニファイ化開発モードにおけるホットリローディング

Slide 8

Slide 8 text

Nuxt.jsとは Nuxt.jsとNetlifyではじめるJAMstack 静的ファイルの⽣成 Nuxt.jsアプリケーションをビルドしてHTMLを⽣成する。

Slide 9

Slide 9 text

Nuxt.jsとは Nuxt.jsとNetlifyではじめるJAMstack ということは⽣成されたHTMLは静的ホスティングサービスで動かせる。

Slide 10

Slide 10 text

Nuxt.jsとNetlifyではじめるJAMstack

Slide 11

Slide 11 text

Netlifyとは Nuxt.jsとNetlifyではじめるJAMstack どんなもの？ Netlifyは静的なサイトを超⾼速で提供できるサービスです。

Slide 12

Slide 12 text

Nuxt.jsとNetlifyではじめるJAMstack

Slide 13

Slide 13 text

Nuxt.jsとNetlifyではじめるJAMstack

Slide 14

Slide 14 text

Nuxt.jsとNetlifyではじめるJAMstack

Slide 15

Slide 15 text

Goodbye, FTP Nuxt.jsとNetlifyではじめるJAMstack

Slide 16

Slide 16 text

Nuxt.jsとNetlifyではじめるJAMstack

Slide 17

Slide 17 text

Nuxt.jsとNetlifyではじめるJAMstack

Slide 18

Slide 18 text

JAMstackとは Nuxt.jsとNetlifyではじめるJAMstack JavaScript, API, Markup JavaScriptとAPIとMarkupを組み合わせたWebアプリケーションアーキテクチャです。

Slide 19

Slide 19 text

JAMstackとは Nuxt.jsとNetlifyではじめるJAMstack つまりはどういうこと？ WordPressみたいにリクエストごとにHTMLを⽣成するのではなく、事前にビルドして全て静的コンテンツとしてホスティングしようみたいな考え⽅です。

Slide 20

Slide 20 text

Nuxt.jsとNetlifyではじめるJAMstack

Slide 21

Slide 21 text

Nuxt.jsとNetlifyではじめるJAMstack

Slide 22

Slide 22 text

Nuxt.jsとNetlifyではじめるJAMstack

Slide 23

Slide 23 text

Nuxt.jsとNetlifyではじめるJAMstack

Slide 24

Slide 24 text

まとめ Nuxt.jsとNetlifyではじめるJAMstack なにがうれしいのかパフォーマンスがいい / 構成費⽤が安い / モダンな開発環境

Slide 25

Slide 25 text

Nuxt.jsとNetlifyではじめるJAMstack