Nuxt.jsとNetlifyではじめるJAMstack

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とは 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は静的ホスティングサービスで動かせる。

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

Goodbye, FTP 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

Chiaki Uehira

More Decks by Chiaki Uehira

Featured

Transcript