Tweet
Tweet

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

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

「リアクティブ」にレンダリング結果が変わる
{{ message }}
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

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

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

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

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自体の機能はたくさんあるので、覚えるよりは 「使ってみる→こんな機能ないか？」を調べるのを繰り 返しながら学ぶのが良い