Nuxt.jsで手軽に構築するモダン・フロントエンド開発環境

1. Nuxt.jsで手軽に構築する
モダン・フロントエンド開発環境
1

2. 土屋大輔（つっちー）
• フロントエンド@LIG
• ソーシャルゲーム運用開発: 3年
• Web制作: 1年半【←いまココ】
• 大好き：HTML / CSS / JS
• 最近：Netlify
2

3. 目次
1. Nuxt.jsとは？
2. Nuxt.jsが構築する開発環境
3. Nuxt.jsの使い方
4. まとめ
3

4. 1. Nuxt.jsとは？
4

5. 1. Nuxt.jsとは？
Vue.jsアプリケーションを静的に生成する
機能を持つフレームワーク
「静的に生成する」=
「JSによるDOM生成までが完了した状態を
出力する」
5

6. 1. Nuxt.jsとは？
• リクエストを待ち受けて、静的に生成する
→ SSRを実現するフレームワーク
• コマンド実行で、静的に生成する
→ ビルドツール・静的サイトジェネレーター
6

7. 1. Nuxt.jsとは？
→ フロントエンド開発の広範囲をカバー！
7

8. 2. Nuxt.jsが構築する開発環境
8

9. 2. Nuxt.jsが構築する開発環境
• JS
• ES 20XX
• import / export
• async / await
• class
• arrow function …
• Preprocessor
• TypeScript, CoffeeScript
9

10. 2. Nuxt.jsが構築する開発環境
• CSS
• scoped CSS
• automatic vendor prefixes
• PostCSS
• CSS variables
• nesting …
• Preprocessor
• Sass, Less, Stylus
10

11. 2. Nuxt.jsが構築する開発環境
• HTML
• preload
→ ページ読み込みを妨げずにリソースを早期取得
• prefetch
→ 遷移候補ページのリソースを事前取得
• Preprocessor
• Pug
11

12. 2. Nuxt.jsが構築する開発環境
• 画像
• Base64 Encode
12

13. 2. Nuxt.jsが構築する開発環境
• その他
• Local Server
• Hot Reloading
• Lint
• Source Map
• Bundling
• Minifying
13

14. 2. Nuxt.jsが構築する開発環境
→ モダン！全部入り！
14

15. 3. Nuxt.jsの使い方
15

16. 3. Nuxt.jsの使い方
• コマンド
• セットアップ
16
$ npm i -g vue-cli
$ vue init nuxt-community/starter-template <project-name>
$ cd <project-name>
$ npm i

17. 3. Nuxt.jsの使い方
• コマンド
• 開発サーバー起動
17
$ nuxt
$ nuxt build
$ nuxt start
• 待ち受け開始（本番サーバー起動）

18. 3. Nuxt.jsの使い方
• コマンド
• ファイル生成
18
$ nuxt generate

19. 3. Nuxt.jsの使い方
• 記法と仕組み
• 最低限知っておくべきこと
0. 日本語ドキュメントがある！
• https://ja.nuxtjs.org/
• 必須知識を4点ピックアップ →
19

20. 3. Nuxt.jsの使い方
• 記法と仕組み
• 最低限知っておくべきこと
1. Vueコンポーネントの記法
• template, style, script要素からなる
20

21. 21
<!-- *.vue -->
<template>
<!-- HTMLを記述。template要素直下の要素は兄弟要素を持てないことに注意 -->
</template>
<style scoped>
/* CSSを記述。scoped属性付与ででスコープがtemplate要素内に限定される */
</style>
<script>
// JSを記述
</script>

22. 3. Nuxt.jsの使い方
• 記法と仕組み
• 最低限知っておくべきこと
2. pages/**/*.vue
• ページを表すVueコンポーネント
• これらのファイルの配置で、ルーティングや
静的ファイルのディレクトリ構造が決まる
22

23. 23
# ページごとのコンポーネント
pages/index.vue
pages/about.vue
pages/service/business.vue
pages/service/consumer.vue
# ルーティング
/
/about
/service/business
/service/consumer
# nuxt generateで生成されるファイル
dist/index.html
dist/about/index.html
dist/service/business.html
dist/service/consumer.html

24. 3. Nuxt.jsの使い方
• 記法と仕組み
• 最低限知っておくべきこと
3. head要素の内容を設定する方法
• pages/**/*.vue のscript要素内で設定
24

25. 25
<!-- pages/**/*.vue -->
<script>
// headメソッドを持つオブジェクトをexportする
export default {
head () {
return {
title: 'News | LOREM IPSUM',
meta: [
{name: 'description', hid: 'description', content: 'Lorem ipsum.'},
{name: 'keywords', hid: 'keywords', content: 'lorem,ipsum,nuxt'},
]
}
}
}
</script>

26. 3. Nuxt.jsの使い方
• 記法と仕組み
• 最低限知っておくべきこと
4. nuxt-linkコンポーネント
• aタグ
• 全体更新。通常のページ遷移
• nuxt-linkコンポーネント
• 部分更新と、HistoryAPIによるURL変更
26

27. 27
<!-- *.vue -->
<template>
...
<a href=“/news”> <!-- 全体更新。通常の遷移 -->
News
</a>
<nuxt-link to=“/about”> <!-- 部分更新と、HistoryAPIによるURL変更 -->
About
</nuxt-link>
...
</template>

28. 3. Nuxt.jsの使い方
• 記法と仕組み
• 次に知っておきたいこと
• layouts/**/*.vue
• Vueコンポーネントの再利用
などなど
• あとは必要に応じて
28

29. 3. Nuxt.jsの使い方
→ らくらく構築！日本語ドキュメント！
29

30. 4. まとめ
30

31. 4. まとめ
• Nuxt.jsとは？
• 広汎なFE開発FW (SSR, 静的サイトジェネレーター)
• Nuxt.jsが構築する開発環境
• モダン！全部入り！
• Nuxt.jsの使い方
• 手軽に導入！日本語ドキュメント！
31

32. ありがとうございました。
32