Repro Tech Hands-on : Nuxt.js

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

Transcript

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