Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Nuxt.jsとNetlifyで はじめるJAMstack

8b38f3ce5887a232ac4442a9a4d2253c?s=47 Chiaki Uehira
December 18, 2018
690

Nuxt.jsとNetlifyで はじめるJAMstack

8b38f3ce5887a232ac4442a9a4d2253c?s=128

Chiaki Uehira

December 18, 2018
Tweet

Transcript

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

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

  3. Chiaki Uehira Programmer / Designer 1996年⽣まれ。ピクセルグラム代表。プログラマー であり、ウェブの技術を使ったコンテンツの制作を している。最近では技術顧問としても活動しており 多数の企業に在籍している。フリーランスで集まっ たクリエイティブチームを運営しており「フェアな

    組織」と「やさしい仕組み」について研究中。 @_uhck Nuxt.jsとNetlifyではじめるJAMstack
  4. Nuxt.jsとNetlifyではじめるJAMstack

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

  6. Nuxt.jsとは Nuxt.jsとNetlifyではじめるJAMstack どんなモジュールがある? Vue / Vue-Router / Vuex / Vue

    Server Renderer / vue-meta
  7. Nuxt.jsとは Nuxt.jsとNetlifyではじめるJAMstack どんな機能がある? Vue ファイルで記述できること(*.vue) サーバーサイドレンダリング 静的ファイルの⽣成 ES2015+ のトランスパイレーション JS

    と CSS のバンドル及びミニファイ化 開発モードにおけるホットリローディング
  8. Nuxt.jsとは Nuxt.jsとNetlifyではじめるJAMstack 静的ファイルの⽣成 Nuxt.jsアプリケーションをビルドしてHTMLを⽣成する。

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

  10. Nuxt.jsとNetlifyではじめるJAMstack

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

  12. Nuxt.jsとNetlifyではじめるJAMstack

  13. Nuxt.jsとNetlifyではじめるJAMstack

  14. Nuxt.jsとNetlifyではじめるJAMstack

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

  16. Nuxt.jsとNetlifyではじめるJAMstack

  17. Nuxt.jsとNetlifyではじめるJAMstack

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

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

  20. Nuxt.jsとNetlifyではじめるJAMstack

  21. Nuxt.jsとNetlifyではじめるJAMstack

  22. Nuxt.jsとNetlifyではじめるJAMstack

  23. Nuxt.jsとNetlifyではじめるJAMstack

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

  25. Nuxt.jsとNetlifyではじめるJAMstack