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

by Masahiro Nishimi

Slide 1

Slide 1 text

Vue.jsでつくるシングルページアプリケーション Vue.js, Nuxt.js, Vuetify Masahiro Nishimi @ SonicGarden, Inc.

Slide 2

Slide 2 text

よくコードレビューについて記事を書いたりお話したりします開発現場に学ぶ、円滑なコードレビューに必要な 8つの手法〜手段から準備、実施時期まで徹底解説〜 https://employment.en-japan.com/engineerhub/entry/2018/04/03/110000 Masahiro Nishimi @mah_lab みんなからはまーくんと呼ばれています何か作るよりは作り方を考えるほうが好きです東京在住 / Rails歴8年 / 3児の父わたしのこと

Slide 3

Slide 3 text

Vue.jsでSPAを作るための地図を獲得する本日のゴール

Slide 4

Slide 4 text

UIをレンダリングする UIをコンポーネント化するクライアントサイドルーティング状態を管理するデータの永続化データバインディング（宣言的レンダリング） Vue.jsのディレクティブへの習熟コンポーネント設計（Atomic Designなど）単一ファイルコンポーネント Vue Routerによるルーティング Vuexによるデータフロー、状態管理クライアントサーバ通信、 Firebaseと言ったサーバレスへの永続化（※本日は扱いません）

Slide 5

Slide 5 text

今日のアジェンダ ■ 知っておきたいVue.jsの基礎知識 ■ Nuxt.js入門 ■ 便利なUIライブラリの紹介 ■ Vueアプリケーションを作ってみよう

Slide 6

Slide 6 text

知っておきたい Vue.jsの基礎知識重要なところだけ！

Slide 7

Slide 7 text

Vue.jsはUIのレンダリングを楽にしてくれるライブラリですとてもざっくりとしてますが...

Slide 8

Slide 8 text

今どきデスクトップアプリのようなWeb アプリは珍しくないですよね

Slide 9

Slide 9 text

そもそもVue.jsによって何が楽になるんでしょう？

Slide 10

Slide 10 text

チャットをつくることを考えてみよう送信 Masahiro Nishimi 2018/08/31 11:21 やあ、こんにちは！

Slide 11

Slide 11 text

チャットをつくることを考えてみようどうもどうも送信 Masahiro Nishimi 2018/08/31 11:21 やあ、こんにちは！ click! テキストフィールドにチャットメッセージを入力

Slide 12

Slide 12 text

チャットをつくることを考えてみよう送信 Masahiro Nishimi 2018/08/31 11:21 やあ、こんにちは！ .message Masahiro Nishimi 2018/08/31 11:23 どうもどうもテキストフィールドの中を消すメッセージの内容からチャットメッセージの HTMLを作成する既存のdiv.messageの下に新しいdiv.message を追加する HTML構造なんてすぐ変わるかもしれないし、そのたびにメッセージの追加ロジックを変更するのは面倒だな...

Slide 13

Slide 13 text

データに従って勝手に書き換えてくれたら楽じゃない？

Slide 14

Slide 14 text

データに従って自動的に描画するとしたら・・・？送信 Masahiro Nishimi 2018/08/31 11:21 やあ、こんにちは！ { messages: [ { body: "やあ、こんにちは！", createdBy: { name: "Masahiro Nishimi", photoURL: "xxxx" } } ] } データを反映配列にpushするデータ

Slide 15

Slide 15 text

データに従って自動的に描画するとしたら・・・？ { 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するデータを反映

Slide 16

Slide 16 text

メッセージの削除の実装も簡単送信 Masahiro Nishimi 2018/08/31 11:21 やあ、こんにちは！ { messages: [ { body: "やあ、こんにちは！", createdBy: { name: "Masahiro Nishimi", photoURL: "xxxx" } } ] } データを反映データ配列から該当データを削除

Slide 17

Slide 17 text

これを「データバインディング」と言います

Slide 18

Slide 18 text

Vue.jsはデータバインディングでUI をレンダリングするためのライブラリなんです

Slide 19

Slide 19 text

Slide 20

Slide 20 text

あらためて・・・Vue.jsとは？

export default { data () { return { message: 'Hello, vue.js!' } } } Hello, vue.js! レンダリング結果テンプレート構文とデータを紐づけてDOMを描画できるようにしてくれるライブラリテンプレート部スクリプト部

Slide 21

Slide 21 text

「リアクティブ」にレンダリング結果が変わる

export default { data () { return { message: 'Come here!' } } } Come here! レンダリング結果変更即時反映データと連動して（データバインディングで）表示結果が変わる

Slide 22

Slide 22 text

ディレクティブで多様な表現を実現できる

directive!

export default { data () { return { show: true } } } directive! レンダリング結果条件分岐（if文）や繰り返し（for文）をテンプレートに仕込むことができる showがtrueのときにレンダリングされる

Slide 23

Slide 23 text

イベントもタグに埋め込める showAlert export default { methods: { showAlert () { alert('hello, vue.js') } } } レンダリング結果 clickイベントやkeyupイベントなどのイベントハンドリングも可能 showAlert クリック時にアラートを表示

Slide 24

Slide 24 text

UIをコンポーネントとして管理できる

import MyComponent from '~/components/MyComponent' export default { components: { MyComponent } } レンダリング結果まとまった機能はコンポーネントとして切り出すと管理が楽になる MyComponentがレンダリングされる外部から読み出し

Slide 25

Slide 25 text

Slide 26

Slide 26 text

コンポーネント指向 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

Slide 27

Slide 27 text

参考：公式ドキュメントが優秀 https://jp.vuejs.org/

Slide 28

Slide 28 text

参考：Vue.js入門 https://www.amazon.co.jp/dp/4297100916/

Slide 29

Slide 29 text

Nuxt.js入門アプリケーションを作る

Slide 30

Slide 30 text

次のステップへ ■ ここまででVue.jsについては基本をおさえてきました。 ■ データ構造がシンプルなUIについてはVue.jsのみの機能で開発ができますが、一方で複雑なアプリケーションを開発するためには、Vue Routerや Vuexといったコンポーネントを活用して開発を進める必要があります。 ■ ここからは次のステップとして、Vue.jsを活用したアプリケーションを開発する土台としてのNuxt.jsについて紹介していきます。

Slide 31

Slide 31 text

Nuxt.jsとVue CLIという2つの選択肢について Nuxt.js Vue CLI ビルドプロセスを隠蔽事前設定済みのwebpackを提供アプリケーション開発に必要なmiddlewareや pluginsといった機能を独自に用意している（レールが用意されている） Vue Router & Vuexといったライブラリを追加する機能はあるが、つなぎ合わせるためのレールを用意しているわけではないプロジェクトの構成について細かなカスタマイズが可能細かなカスタマイズはできず、Nuxt.jsのレールに乗る必要がある開発のレールに乗ることで価値を出す開発のレールを開発者がつくる

Slide 32

Slide 32 text

Nuxt.jsを採用する理由 ■ フルスタックフレームワークである ○ Vuexストアの効率的な利用のためのオートローディング機能や、ディレクトリ構造を参照して自動的にルーティングを生成する機能が標準で組み込まれている。 ○ Nuxt.jsのレールに従うだけで便利な機能を利用することができる。 ■ ビルドプロセスを隠蔽してくれる ○ webpackの複雑な設定をメンテナンスする必要がない。 ○ 慣れていない人にとってはwebpackのメンテナンスは非常に苦痛... ■ アプリケーション開発に便利な独自レイヤが用意されている ○ ルーティングをフックして特定の処理を行うことができるmiddleware機能や、Vueプラグインを管理するための機能が標準で組み込まれている。

Slide 33

Slide 33 text

（補足） ■ Nuxt.jsのそもそもの出自は、React.jsアプリケーションをサーバサイドレンダリングするために生まれたNext.jsにインスパイアされてVue.js版のものが開発された、という経緯になります。 ■ そのためNuxt.jsの本質はサーバサイドレンダリングの機能が自然な形で組み込まれている、というものになりますが、筆者はそこまでサーバサイドレンダリングの機能を利用したことがありません... ■ ただしNuxt.jsのレール自体はよくできており、シングルページアプリケーションを開発するレールとして使うだけでも有用なものだと筆者は考えています。

Slide 34

Slide 34 text

Slide 35

Slide 35 text

サクッとはじめる $ npx create-nuxt-app ( いくつかの設問に答える ) $ cd $ yarn run dev これだけで http://localhost:3000/ でアプリが動きます create-nuxt-app内のUIプラグイン設定で例えばVuetifyを選択すれば、それだけでVuetifyを適用したnuxt上で動くアプリケーションの骨組みが生成されます

Slide 36

Slide 36 text

ディレクトリ構造の詳細 assets webpackによる処理を入れるような画像ファイル、スタイルシートを配置する components Vue.jsコンポーネントを配置。Nuxt.jsの非同期データサポートは使えない layouts レイアウトファイルとして利用するVue.jsコンポーネントを配置する middleware ページをレンダリングする前に挟む処理を記述したJSファイルを配置する pages アプリケーションのページとなるVue.jsコンポーネントを配置（メインで使う） plugins Vue.jsアプリケーションをインスタンス化する前に実行したいJSファイルを配置 static robots.txtなどの静的ファイルを配置する store Vuexストアのファイルを配置する

Slide 37

Slide 37 text

ストア Route Middleware Page Components 設定ファイルグローバルページ Layout Components ルーティングプラグインパッケージングされるアセットそのまま配信されるアセット /nuxt.config.js /plugins /assets /static /store /middlewares /pages /layouts 生成される

Slide 38

Slide 38 text

ルーティングの自動生成 pages index.vue pages index.vue _id.vue pagesディレクトリ以下のファイル配置から自動的にルーティングを生成してくれますで遷移できるで遷移できるで遷移できる

Slide 39

Slide 39 text

ストア vue component vue component vue component ストアとして利用するvuexも既に用意されています

Slide 40

Slide 40 text

ちなみに：なぜストアを使うのか？ vue component vue component vue component vue component vue component vue component vue component vue component vue component vue component vue component コンポーネント指向で考えると、コンポーネントからコンポーネントを呼び出す形のネスト構造になる

Slide 41

Slide 41 text

ちなみに：なぜストアを使うのか？ vue component vue component vue component vue component vue component vue component vue component vue component vue component vue component vue component このコンポーネントからヘッダのコンポーネントの内容を変更しようと思うと... まずルートのコンポーネントまで情報を遡らせ... ※ このコンポーネントの情報を変更したいとする

Slide 42

Slide 42 text

ちなみに：なぜストアを使うのか？ vue component vue component vue component vue component vue component vue component vue component vue component vue component vue component vue component このコンポーネントからヘッダのコンポーネントの内容を変更しようと思うと... ルートのコンポーネントから目的のコンポーネントに情報を渡す形になるこれは面倒くさい...！

Slide 43

Slide 43 text

ちなみに：なぜストアを使うのか？ vue component vue component vue component vue component vue component vue component vue component vue component vue component vue component vue component 値を変更値を反映とてもシンプル

Slide 44

Slide 44 text

このような仕組みがVuexで提供されています vue components Actions State Mutations Vuex Dispatch Commit Mutate Render

Slide 45

Slide 45 text

参考：公式ドキュメントが優秀 https://ja.nuxtjs.org/guide

Slide 46

Slide 46 text

参考：Nuxt.jsビギナーズガイド https://www.amazon.co.jp/dp/4863542569/

Slide 47

Slide 47 text

便利なUIライブラリのご紹介 Vuetify, Buefy

Slide 48

Slide 48 text

Vuetify pros: Material DesignのUIがサクッと作れる cons: Material Designに乗れないとデザインがつらい Material Designのコンポーネントが機能として提供されているので、それっぽいものをサクッと作るのには便利！

Slide 49

Slide 49 text

Buefy pros: BulmaをベースにしていてVue.jsから使いやすい！ cons: 元々Bulmaにないコンポーネントはサポートしていない Bulma自体がしっとりとしていて良いデザインですよね

Slide 50

Slide 50 text

Vueアプリケーションを作ってみよう実際にアプリをつくる

Slide 51

Slide 51 text

いろいろ便利なのはわかったけど、具体的にどう作るのか気になりますよね

Slide 52

Slide 52 text

シンプルなタスク管理ツールを作ってみましょう

Slide 53

Slide 53 text

画面設計 {{ リスト名 }} {{ タスク内容 }} {{ タスク内容 }} テキストフィールド削除ボタン List Component Card Component NewCardForm Component テキストフィールド NewListForm Component

Slide 54

Slide 54 text

データモデル設計 List id: integer title: string Card id: integer title: string listId: integer 極めてシンプルなデータモデルです Vuexを利用してデータを管理します

Slide 55

Slide 55 text

動画で解説作ったものはこちら https://github.com/mahm/nuxt-trello 動画はこちら https://www.youtube.com/watch?v=3jZvGifJ6e0

Slide 56

Slide 56 text

まとめおつかれさまでした！

Slide 57

Slide 57 text

まとめ ■ はじめてVue.jsを触るならNuxt.jsからがオススメ ■ 公式ドキュメントが充実しているので、読むべし ■ VuetifyやBuefyを利用して、それっぽいものをサクッと作ってみよう ■ vue.js自体の機能はたくさんあるので、覚えるよりは「使ってみる→こんな機能ないか？」を調べるのを繰り返しながら学ぶのが良い