Repro Tech Hands-on : Nuxt.js (2018-12-16) での解説資料。ハンズオンに使用したリポジトリはこちら ( https://github.com/mqtsuo02/nuxt-handson )

2. 自己紹介
- 大武松生（ mqtsuo02 ）
- フリーランスのWebエンジニア
- 最近の仕事：React, React Native, Nuxt.jsなど
- 技術書典５：「もってけ！PWA」頒布

3. スケジュール
１３：００ イベント開始
前置き ＆ 解説（３０分くらい）
ハンズオン
１６：００ 懇親会
１７：００ 解散
※ 一時間毎に休憩時間をとります。

4. アンケート (1)
普段どの分野で仕事をされていますか？
- マネジメント
- 要件定義（SE）
- デザイン
- フロントエンド（Web）
- フロントエンド（アプリ）
- バックエンド
- インフラ
- その他

5. アンケート (2)
どれに該当しますか？
- Nuxt.jsで一通りWebアプリを実装した
- Nuxt.jsをちょっと触った
- Nuxt.jsは触っていないが、Vue.jsはある程度触った
- Nuxt.jsもVue.jsも触っていないが、他のモダンフレームワークは触った
- 色々初めて

6. ハンズオンで使用するリポジトリ
https://github.com/mqtsuo02/nuxt-handson
Twitter「 #reprotech 」にURL貼りました。
Connpassのイベントページにも貼りました。

7. 本日のゴール
Nuxt.jsでシンプルなWebアプリケーションの実装
- ゼロからNuxt.jsをインストールして「Hello, Nuxt !!」
- ルーティングの実装
- axiosを使ってWebAPIの繋ぎこみ
- Vuetify.jsを使って良い感じの見た目にする

8. 動作確認をお願いします
参照：nuxt-handson/00-setup

9. 解説コンテンツ

10. 解説コンテンツ
- Vue.jsはUIライブラリ、Nuxt.jsはフレームワーク
- Nuxt.jsでアプリを作る際に従うルール
- .vueファイルについて
- <template>について
- <script>について
- Nuxt.jsのファイル構成について

11. Vue.jsはUIライブラリ、Nuxt.jsはフレームワーク
Vue.js
＋ Vue Router, Vuex, Vue Server Renderer, vue-meta, …
＋ Webpack, Vue Loader, ...
＋ 独自のカスタマイズ
＝ Nuxt.js
- SPA、サーバーサイドレンダリング、静的サイト生成がすぐできる
- ビルドプロセスに悩まなくて済む

12. Nuxt.jsでアプリを作る際に従うルール
実装時に色々なドキュメントを参照する必要がある
- Vue.jsのルール
- Nuxt.jsのルール
- Vue Routerのルール
- Vuexのルール

13. .vueファイルについて
単一ファイルコンポーネント (Single File Components)
- Webpack と Vue Loaderによって解析される
- <template> と <script> と <style>
- <script>でデータを処理して、<template>に渡して表示する

14. <template>について
- HTMLのタグをそのまま使用することができる
- <script>のdataを表示するときは、{{ hoge }} ( マスタッシュ記法 )
- ディレクティブで様々なDOM操作を行うことができる
（ v-for, v-if, v-bind, v-on, v-model ）
- タグの属性に対してdataを使う場合は v-bind という機能を使う
- ライブラリのタグを埋め込んだりする。<router-link>とか<nuxt />
- 自分で作ったコンポーネントを埋め込んだりする。<hoge-list />

15. <script>について
- JavaScriptで処理を書く
- export default { … } の中にdataや関数を書いていく
- Vue.jsのライフライクルイベントとNuxt.jsのライフライクルイベントに応じた処理をか
ける。( beforeMount とか asyncData とか )
- 外部モジュールを使用するときはimportして使う
- コンポーネントを使うときは、importしてcomponentsで指定すると<template>で使
用可能となる

16. Nuxt.jsプロジェクトの構造について
今回のハンズオンで使用するもの
- pagesディレクトリ ... ルーティング単位でvueファイルを作成する
- layoutsディレクトリ ... 全体に適用するレイアウトを入れる
- componentsディレクトリ ... 部品化したコンポーネントを入れる
- nuxt.config.js ... アプリ全体の設定を行う

17. ハンズオン

18. ハンズオンのコンテンツ
- ゼロからNuxt.jsをインストールして「Hello, Nuxt !!」
- ルーティングの実装
- axiosを使ってWebAPIの繋ぎこみ
- Vuetify.jsを使って良い感じの見た目にする

19. ハンズオンの進め方
- GitHubのREADMEにそって進めていきます。
- 随所で作業時間をとります。
- 作業時間中にメンターが歩き回ったりするので、先に進めないときは質問
してください。
- ハンズオンの内容以外の質問は、休憩時間や懇親会のときにお願いしま
す。