Vue.jsで作るシングルページアプリケーション〜Vue.js, Nuxt.js, Vuetify〜

Vue.jsとNuxt.jsを使って、簡単なSPA（シングルページアプリケーション）を開発する勉強会で使用したスライドです。

Vue.jsでつくるシングルページアプリケーション開発講座
https://connpass.com/event/106613/

Transcript

1. Vue.jsでつくる シングルページアプリケーション Vue.js, Nuxt.js, Vuetify Masahiro Nishimi @ SonicGarden, Inc.
2. よくコードレビューについて記事を書 いたりお話したりします 開発現場に学ぶ、円滑なコードレビューに必要な 8つの手法 〜手段から準備、実施時期まで徹底解説〜 https://employment.en-japan.com/engineerhub/entry/2018/04/03/110000 Masahiro Nishimi @mah_lab みんなからはまーくんと呼ばれています 何か作るよりは作り方を考えるほうが好きです 東京在住 / Rails歴8年 / 3児の父 わたしのこと
3. Vue.jsでSPAを作るための 地図を獲得する 本日のゴール
4. UIをレンダリングす る UIをコンポーネント 化する クライアントサイド ルーティング 状態を管理する データの永続化 データバインディング（宣 言的レンダリング） Vue.jsのディレクティブへ の習熟 コンポーネント設計 （Atomic Designなど） 単一ファイルコンポーネン ト Vue Routerによるルー ティング Vuexによるデータフロー、 状態管理 クライアントサーバ通信、 Firebaseと言ったサーバレ スへの永続化 （※本日は扱いません）
5. 今日のアジェンダ ▪ 知っておきたいVue.jsの基礎知識 ▪ Nuxt.js入門 ▪ 便利なUIライブラリの紹介 ▪ Vueアプリケーションを作ってみよう
6. 知っておきたい Vue.jsの基礎知識 重要なところだけ！
7. Vue.jsはUIのレンダリングを 楽にしてくれるライブラリです とてもざっくりとしてますが...
8. 今どきデスクトップアプリのようなWeb アプリは珍しくないですよね
9. そもそもVue.jsによって 何が楽になるんでしょう？
10. チャットをつくることを考えてみよう 送信 Masahiro Nishimi 2018/08/31 11:21 やあ、こんにちは！
11. チャットをつくることを考えてみよう どうもどうも 送信 Masahiro Nishimi 2018/08/31 11:21 やあ、こんにちは！ click! テキストフィールドに チャットメッセージを入 力
12. チャットをつくることを考えてみよう 送信 Masahiro Nishimi 2018/08/31 11:21 やあ、こんにちは！ .message Masahiro Nishimi 2018/08/31 11:23 どうもどうも テキストフィールドの中 を消す メッセージの内容から チャットメッセージの HTMLを作成する 既存のdiv.messageの 下に新しいdiv.message を追加する HTML構造なんてすぐ変わる かもしれないし、そのたびに メッセージの追加ロジックを変 更するのは面倒だな...
13. データに従って勝手に書き換えて くれたら楽じゃない？
14. データに従って自動的に描画するとしたら・・・？ 送信 Masahiro Nishimi 2018/08/31 11:21 やあ、こんにちは！ { messages: [ { body: "やあ、こんにちは！", createdBy: { name: "Masahiro Nishimi", photoURL: "xxxx" } } ] } データを反映 配列にpushする データ
15. データに従って自動的に描画するとしたら・・・？ { messages: [ { body: "やあ、こんにちは！", createdBy: { name: "Masahiro Nishimi", photoURL: "xxxx" } }, { body: "どうもどうも", createdBy: { name: "Masahiro Nishimi", photoURL: "xxxx" } } ] } 送信 Masahiro Nishimi 2018/08/31 11:21 やあ、こんにちは！ Masahiro Nishimi 2018/08/31 11:23 どうもどうも データ 配列にpushする データを反映
16. メッセージの削除の実装も簡単 送信 Masahiro Nishimi 2018/08/31 11:21 やあ、こんにちは！ { messages: [ { body: "やあ、こんにちは！", createdBy: { name: "Masahiro Nishimi", photoURL: "xxxx" } } ] } データを反映 データ 配列から該当データを削除
17. これを 「データバインディング」 と言います
18. Vue.jsはデータバインディングでUI をレンダリングするためのライブラ リなんです
19. UIをレンダリングす る UIをコンポーネント 化する クライアントサイド ルーティング 状態を管理する データの永続化 データバインディング（宣 言的レンダリング） Vue.jsのディレクティブへ の習熟 コンポーネント設計 （Atomic Designなど） 単一ファイルコンポーネン ト Vue Routerによるルー ティング Vuexによるデータフロー、 状態管理 クライアントサーバ通信、 Firebaseと言ったサーバレ スへの永続化 （※本日は扱いません）
20. あらためて・・・Vue.jsとは？ <template> <div> {{ message }} </div> </template> <script> export default { data () { return { message: 'Hello, vue.js!' } } } </script> Hello, vue.js! レンダリング結果 テンプレート構文とデータを紐づけてDOMを描画できるようにしてくれるライブラリ テンプレート部 スクリプト部
21. 「リアクティブ」にレンダリング結果が変わる <template> <div> {{ message }} </div> </template> <script> export default { data () { return { message: 'Come here!' } } } </script> Come here! レンダリング結果 変更 即時反映 データと連動して（データバインディングで）表示結果が変わる
22. ディレクティブで多様な表現を実現できる <template> <div v-if=”show”> directive! </div> </template> <script> export default { data () { return { show: true } } } </script> directive! レンダリング結果 条件分岐（if文）や繰り返し（for文）をテンプレートに仕込むことができる showがtrueのときに レンダリングされる
23. イベントもタグに埋め込める <template> <button @click=”showAlert”> showAlert </button> </template> <script> export default { methods: { showAlert () { alert('hello, vue.js') } } } </script> レンダリング結果 clickイベントやkeyupイベントなどのイベントハンドリングも可能 showAlert クリック時に アラートを表示
24. UIをコンポーネントとして管理できる <template> <div> <my-component></my-component> </div> </template> <script> import MyComponent from '~/components/MyComponent' export default { components: { MyComponent } } </script> レンダリング結果 まとまった機能はコンポーネントとして切り出すと管理が楽になる MyComponentが レンダリングされる 外部から読み出し
25. UIをレンダリングす る UIをコンポーネント 化する クライアントサイド ルーティング 状態を管理する データの永続化 データバインディング（宣 言的レンダリング） Vue.jsのディレクティブへ の習熟 コンポーネント設計 （Atomic Designなど） 単一ファイルコンポーネン ト Vue Routerによるルー ティング Vuexによるデータフロー、 状態管理 クライアントサーバ通信、 Firebaseと言ったサーバレ スへの永続化 （※本日は扱いません）
26. コンポーネント指向 vue component vue component vue component vue component vue component ページ内の各要素をコンポーネントとして切り出すことで 保守性をアップさせることができます！ また、このようにコンポーネント指向でページを組み立てていく設計手法 の一つに「Atomic Design」という方法論があります。 http://atomicdesign.bradfrost.com/ 実装例はReactを利用したものになりますが、Atomic Designのやり方を 説明した日本語の書籍もあります。とても分かりやすく書かれているの で、オススメです！ https://www.amazon.co.jp/dp/477419705X
27. 参考：公式ドキュメントが優秀 https://jp.vuejs.org/
28. 参考：Vue.js入門 https://www.amazon.co.jp/dp/4297100916/
29. Nuxt.js入門 アプリケーションを作る
30. 次のステップへ ▪ ここまででVue.jsについては基本をおさえてきました。 ▪ データ構造がシンプルなUIについてはVue.jsのみの機能で開発ができま すが、一方で複雑なアプリケーションを開発するためには、Vue Routerや Vuexといったコンポーネントを活用して開発を進める必要があります。 ▪ ここからは次のステップとして、Vue.jsを活用したアプリケーションを開発す る土台としてのNuxt.jsについて紹介していきます。
31. Nuxt.jsとVue CLIという2つの選択肢について Nuxt.js Vue CLI ビルドプロセスを隠蔽 事前設定済みのwebpackを提供 アプリケーション開発に必要なmiddlewareや pluginsといった機能を独自に用意している （レールが用意されている） Vue Router & Vuexといったライブラリを追加 する機能はあるが、つなぎ合わせるための レールを用意しているわけではない プロジェクトの構成について細かなカスタマ イズが可能 細かなカスタマイズはできず、Nuxt.jsのレー ルに乗る必要がある 開発のレールに乗ることで価値を出す 開発のレールを開発者がつくる
32. Nuxt.jsを採用する理由 ▪ フルスタックフレームワークである ◦ Vuexストアの効率的な利用のためのオートローディング機能や、ディレクトリ構造を参 照して自動的にルーティングを生成する機能が標準で組み込まれている。 ◦ Nuxt.jsのレールに従うだけで便利な機能を利用することができる。 ▪ ビルドプロセスを隠蔽してくれる ◦ webpackの複雑な設定をメンテナンスする必要がない。 ◦ 慣れていない人にとってはwebpackのメンテナンスは非常に苦痛... ▪ アプリケーション開発に便利な独自レイヤが用意されている ◦ ルーティングをフックして特定の処理を行うことができるmiddleware機能や、Vueプラグ インを管理するための機能が標準で組み込まれている。
33. （補足） ▪ Nuxt.jsのそもそもの出自は、React.jsアプリケーションをサーバサイドレン ダリングするために生まれたNext.jsにインスパイアされてVue.js版のもの が開発された、という経緯になります。 ▪ そのためNuxt.jsの本質はサーバサイドレンダリングの機能が自然な形で 組み込まれている、というものになりますが、筆者はそこまでサーバサイド レンダリングの機能を利用したことがありません... ▪ ただしNuxt.jsのレール自体はよくできており、シングルページアプリケー ションを開発するレールとして使うだけでも有用なものだと筆者は考えて います。
34. UIをレンダリングす る UIをコンポーネント 化する クライアントサイド ルーティング 状態を管理する データの永続化 データバインディング（宣 言的レンダリング） Vue.jsのディレクティブへ の習熟 コンポーネント設計 （Atomic Designなど） 単一ファイルコンポーネン ト Vue Routerによるルー ティング Vuexによるデータフロー、 状態管理 クライアントサーバ通信、 Firebaseと言ったサーバレ スへの永続化 （※本日は扱いません）
35. サクッとはじめる $ npx create-nuxt-app <project-name> ( いくつかの設問に答える ) $ cd <project-name> $ yarn run dev これだけで http://localhost:3000/ でアプリが動きます create-nuxt-app内のUIプラグイン設定で例えばVuetifyを選択すれば、それだけでVuetifyを適 用したnuxt上で動くアプリケーションの骨組みが生成されます
36. ディレクトリ構造の詳細 assets webpackによる処理を入れるような画像ファイル、スタイルシートを配置する components Vue.jsコンポーネントを配置。Nuxt.jsの非同期データサポートは使えない layouts レイアウトファイルとして利用するVue.jsコンポーネントを配置する middleware ページをレンダリングする前に挟む処理を記述したJSファイルを配置する pages アプリケーションのページとなるVue.jsコンポーネントを配置（メインで使う） plugins Vue.jsアプリケーションをインスタンス化する前に実行したいJSファイルを配置 static robots.txtなどの静的ファイルを配置する store Vuexストアのファイルを配置する
37. ストア Route Middleware Page Components 設定ファイル グローバル ページ Layout Components ルーティング プラグイン パッケージングされる アセット そのまま配信されるア セット /nuxt.config.js /plugins /assets /static /store /middlewares /pages /layouts 生成される
38. ルーティングの自動生成 pages index.vue pages index.vue _id.vue pagesディレクトリ以下のファイル配置から自動的にルーティングを生成してくれます <nuxt-link to=”/”> で遷移できる <nuxt-link to=”/pages/index”> で遷移できる <nuxt-link to=”/pages/:id”> で遷移できる
39. ストア vue component vue component vue component ストアとして利用するvuexも既に用意されています
40. ちなみに：なぜストアを使うのか？ vue component vue component vue component vue component vue component vue component vue component vue component vue component vue component vue component コンポーネント指向で考えると、コンポーネントか らコンポーネントを呼び出す形のネスト構造にな る
41. ちなみに：なぜストアを使うのか？ vue component vue component vue component vue component vue component vue component vue component vue component vue component vue component vue component このコンポーネントからヘッダのコンポーネン トの内容を変更しようと思うと... まずルートのコンポーネントまで情 報を遡らせ... ※ このコンポーネントの情報を 変更したいとする
42. ちなみに：なぜストアを使うのか？ vue component vue component vue component vue component vue component vue component vue component vue component vue component vue component vue component このコンポーネントからヘッダのコンポーネン トの内容を変更しようと思うと... ルートのコンポーネントから目的 のコンポーネントに情報を渡す形 になる これは 面倒くさい...！
43. ちなみに：なぜストアを使うのか？ vue component vue component vue component vue component vue component vue component vue component vue component vue component vue component vue component 値を変更 値を反映 とてもシンプル
44. このような仕組みがVuexで提供されています vue components Actions State Mutations Vuex Dispatch Commit Mutate Render
45. 参考：公式ドキュメントが優秀 https://ja.nuxtjs.org/guide
46. 参考：Nuxt.jsビギナーズガイド https://www.amazon.co.jp/dp/4863542569/
47. 便利なUIライブラリのご 紹介 Vuetify, Buefy
48. Vuetify pros: Material DesignのUIがサクッと作れる cons: Material Designに乗れないとデザインがつらい Material Designのコンポーネントが機能として提供されている ので、それっぽいものをサクッと作るのには便利！
49. Buefy pros: BulmaをベースにしていてVue.jsから使いやすい！ cons: 元々Bulmaにないコンポーネントはサポートしていない Bulma自体がしっとりとしていて良いデザインですよね
50. Vueアプリケーションを 作ってみよう 実際にアプリをつくる
51. いろいろ便利なのはわかったけ ど、具体的にどう作るのか気にな りますよね
52. シンプルなタスク管理ツールを作ってみましょう
53. 画面設計 {{ リスト名 }} {{ タスク内容 }} {{ タスク内容 }} テキストフィールド 削除ボタン List Component Card Component NewCardForm Component テキストフィールド NewListForm Component
54. データモデル設計 List id: integer title: string Card id: integer title: string listId: integer 極めてシンプルなデータモデルです Vuexを利用してデータを管理します
55. 動画で解説 作ったものはこちら https://github.com/mahm/nuxt-trello 動画はこちら https://www.youtube.com/watch?v=3jZvGifJ6e0
56. まとめ おつかれさまでした！
57. まとめ ▪ はじめてVue.jsを触るならNuxt.jsからがオススメ ▪ 公式ドキュメントが充実しているので、読むべし ▪ VuetifyやBuefyを利用して、それっぽいものをサクッと 作ってみよう ▪ vue.js自体の機能はたくさんあるので、覚えるよりは 「使ってみる→こんな機能ないか？」を調べるのを繰り 返しながら学ぶのが良い