Vue.jsとNuxt.jsを使って、簡単なSPA（シングルページアプリケーション）を開発する勉強会で使用したスライドです。
Vue.jsでつくるシングルページアプリケーション開発講座 https://connpass.com/event/106613/
Vue.jsでつくるシングルページアプリケーションVue.js, Nuxt.js, VuetifyMasahiro Nishimi @ SonicGarden, Inc.
View Slide
よくコードレビューについて記事を書いたりお話したりします開発現場に学ぶ、円滑なコードレビューに必要な 8つの手法 〜手段から準備、実施時期まで徹底解説〜https://employment.en-japan.com/engineerhub/entry/2018/04/03/110000Masahiro Nishimi @mah_labみんなからはまーくんと呼ばれています何か作るよりは作り方を考えるほうが好きです東京在住 / Rails歴8年 / 3児の父わたしのこと
Vue.jsでSPAを作るための地図を獲得する本日のゴール
UIをレンダリングするUIをコンポーネント化するクライアントサイドルーティング状態を管理するデータの永続化データバインディング（宣言的レンダリング）Vue.jsのディレクティブへの習熟コンポーネント設計（Atomic Designなど）単一ファイルコンポーネントVue RouterによるルーティングVuexによるデータフロー、状態管理クライアントサーバ通信、Firebaseと言ったサーバレスへの永続化（※本日は扱いません）
今日のアジェンダ■ 知っておきたいVue.jsの基礎知識■ Nuxt.js入門■ 便利なUIライブラリの紹介■ Vueアプリケーションを作ってみよう
知っておきたいVue.jsの基礎知識重要なところだけ！
Vue.jsはUIのレンダリングを楽にしてくれるライブラリですとてもざっくりとしてますが...
今どきデスクトップアプリのようなWebアプリは珍しくないですよね
そもそもVue.jsによって何が楽になるんでしょう？
チャットをつくることを考えてみよう送信Masahiro Nishimi 2018/08/31 11:21やあ、こんにちは！
チャットをつくることを考えてみようどうもどうも 送信Masahiro Nishimi 2018/08/31 11:21やあ、こんにちは！click!テキストフィールドにチャットメッセージを入力
チャットをつくることを考えてみよう送信Masahiro Nishimi 2018/08/31 11:21やあ、こんにちは！.messageMasahiro Nishimi 2018/08/31 11:23どうもどうもテキストフィールドの中を消すメッセージの内容からチャットメッセージのHTMLを作成する既存のdiv.messageの下に新しいdiv.messageを追加するHTML構造なんてすぐ変わるかもしれないし、そのたびにメッセージの追加ロジックを変更するのは面倒だな...
データに従って勝手に書き換えてくれたら楽じゃない？
データに従って自動的に描画するとしたら・・・？送信Masahiro Nishimi 2018/08/31 11:21やあ、こんにちは！{messages: [{body: "やあ、こんにちは！",createdBy: {name: "Masahiro Nishimi",photoURL: "xxxx"}}]}データを反映配列にpushするデータ
データに従って自動的に描画するとしたら・・・？{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するデータを反映
メッセージの削除の実装も簡単送信Masahiro Nishimi 2018/08/31 11:21やあ、こんにちは！{messages: [{body: "やあ、こんにちは！",createdBy: {name: "Masahiro Nishimi",photoURL: "xxxx"}}]}データを反映データ配列から該当データを削除
これを「データバインディング」と言います
Vue.jsはデータバインディングでUIをレンダリングするためのライブラリなんです
あらためて・・・Vue.jsとは？{{ message }}<br/>export default {<br/>data () {<br/>return {<br/>message: 'Hello, vue.js!'<br/>}<br/>}<br/>}<br/>Hello, vue.js!レンダリング結果テンプレート構文とデータを紐づけてDOMを描画できるようにしてくれるライブラリテンプレート部 スクリプト部
「リアクティブ」にレンダリング結果が変わる{{ message }}<br/>export default {<br/>data () {<br/>return {<br/>message: 'Come here!'<br/>}<br/>}<br/>}<br/>Come here!レンダリング結果変更即時反映データと連動して（データバインディングで）表示結果が変わる
ディレクティブで多様な表現を実現できるdirective!<br/>export default {<br/>data () {<br/>return {<br/>show: true<br/>}<br/>}<br/>}<br/>directive!レンダリング結果条件分岐（if文）や繰り返し（for文）をテンプレートに仕込むことができるshowがtrueのときにレンダリングされる
イベントもタグに埋め込めるshowAlert<br/>export default {<br/>methods: {<br/>showAlert () {<br/>alert('hello, vue.js')<br/>}<br/>}<br/>}<br/>レンダリング結果clickイベントやkeyupイベントなどのイベントハンドリングも可能showAlertクリック時にアラートを表示
UIをコンポーネントとして管理できる<br/>import MyComponent from<br/>'~/components/MyComponent'<br/>export default {<br/>components: {<br/>MyComponent<br/>}<br/>}<br/>レンダリング結果まとまった機能はコンポーネントとして切り出すと管理が楽になるMyComponentがレンダリングされる外部から読み出し
コンポーネント指向vue componentvue componentvue componentvue componentvue componentページ内の各要素をコンポーネントとして切り出すことで保守性をアップさせることができます！また、このようにコンポーネント指向でページを組み立てていく設計手法の一つに「Atomic Design」という方法論があります。http://atomicdesign.bradfrost.com/実装例はReactを利用したものになりますが、Atomic Designのやり方を説明した日本語の書籍もあります。とても分かりやすく書かれているので、オススメです！https://www.amazon.co.jp/dp/477419705X
参考：公式ドキュメントが優秀https://jp.vuejs.org/
参考：Vue.js入門https://www.amazon.co.jp/dp/4297100916/
Nuxt.js入門アプリケーションを作る
次のステップへ■ ここまででVue.jsについては基本をおさえてきました。■ データ構造がシンプルなUIについてはVue.jsのみの機能で開発ができますが、一方で複雑なアプリケーションを開発するためには、Vue RouterやVuexといったコンポーネントを活用して開発を進める必要があります。■ ここからは次のステップとして、Vue.jsを活用したアプリケーションを開発する土台としてのNuxt.jsについて紹介していきます。
Nuxt.jsとVue CLIという2つの選択肢についてNuxt.js Vue CLIビルドプロセスを隠蔽 事前設定済みのwebpackを提供アプリケーション開発に必要なmiddlewareやpluginsといった機能を独自に用意している（レールが用意されている）Vue Router & Vuexといったライブラリを追加する機能はあるが、つなぎ合わせるためのレールを用意しているわけではないプロジェクトの構成について細かなカスタマイズが可能細かなカスタマイズはできず、Nuxt.jsのレールに乗る必要がある開発のレールに乗ることで価値を出す 開発のレールを開発者がつくる
Nuxt.jsを採用する理由■ フルスタックフレームワークである○ Vuexストアの効率的な利用のためのオートローディング機能や、ディレクトリ構造を参照して自動的にルーティングを生成する機能が標準で組み込まれている。○ Nuxt.jsのレールに従うだけで便利な機能を利用することができる。■ ビルドプロセスを隠蔽してくれる○ webpackの複雑な設定をメンテナンスする必要がない。○ 慣れていない人にとってはwebpackのメンテナンスは非常に苦痛...■ アプリケーション開発に便利な独自レイヤが用意されている○ ルーティングをフックして特定の処理を行うことができるmiddleware機能や、Vueプラグインを管理するための機能が標準で組み込まれている。
（補足）■ Nuxt.jsのそもそもの出自は、React.jsアプリケーションをサーバサイドレンダリングするために生まれたNext.jsにインスパイアされてVue.js版のものが開発された、という経緯になります。■ そのためNuxt.jsの本質はサーバサイドレンダリングの機能が自然な形で組み込まれている、というものになりますが、筆者はそこまでサーバサイドレンダリングの機能を利用したことがありません...■ ただしNuxt.jsのレール自体はよくできており、シングルページアプリケーションを開発するレールとして使うだけでも有用なものだと筆者は考えています。
サクッとはじめる$ npx create-nuxt-app ( いくつかの設問に答える )$ cd $ yarn run devこれだけで http://localhost:3000/ でアプリが動きますcreate-nuxt-app内のUIプラグイン設定で例えばVuetifyを選択すれば、それだけでVuetifyを適用したnuxt上で動くアプリケーションの骨組みが生成されます
ディレクトリ構造の詳細assets webpackによる処理を入れるような画像ファイル、スタイルシートを配置するcomponents Vue.jsコンポーネントを配置。Nuxt.jsの非同期データサポートは使えないlayouts レイアウトファイルとして利用するVue.jsコンポーネントを配置するmiddleware ページをレンダリングする前に挟む処理を記述したJSファイルを配置するpages アプリケーションのページとなるVue.jsコンポーネントを配置（メインで使う）plugins Vue.jsアプリケーションをインスタンス化する前に実行したいJSファイルを配置static robots.txtなどの静的ファイルを配置するstore Vuexストアのファイルを配置する
ストアRouteMiddlewarePageComponents設定ファイルグローバル ページLayoutComponentsルーティングプラグインパッケージングされるアセットそのまま配信されるアセット/nuxt.config.js/plugins/assets/static/store/middlewares/pages /layouts生成される
ルーティングの自動生成pagesindex.vuepagesindex.vue_id.vuepagesディレクトリ以下のファイル配置から自動的にルーティングを生成してくれます で遷移できる で遷移できる で遷移できる
ストアvuecomponentvuecomponentvuecomponentストアとして利用するvuexも既に用意されています
ちなみに：なぜストアを使うのか？vuecomponentvuecomponentvuecomponentvue componentvue componentvue componentvue componentvue componentvuecomponentvuecomponentvuecomponentコンポーネント指向で考えると、コンポーネントからコンポーネントを呼び出す形のネスト構造になる
ちなみに：なぜストアを使うのか？vuecomponentvuecomponentvuecomponentvue componentvue componentvue componentvue componentvue componentvuecomponentvuecomponentvuecomponentこのコンポーネントからヘッダのコンポーネントの内容を変更しようと思うと...まずルートのコンポーネントまで情報を遡らせ...※ このコンポーネントの情報を変更したいとする
ちなみに：なぜストアを使うのか？vuecomponentvuecomponentvuecomponentvue componentvue componentvue componentvue componentvue componentvuecomponentvuecomponentvuecomponentこのコンポーネントからヘッダのコンポーネントの内容を変更しようと思うと...ルートのコンポーネントから目的のコンポーネントに情報を渡す形になるこれは面倒くさい...！
ちなみに：なぜストアを使うのか？vuecomponentvuecomponentvuecomponentvue componentvue componentvue componentvue componentvue componentvuecomponentvuecomponentvuecomponent値を変更値を反映 とてもシンプル
このような仕組みがVuexで提供されていますvuecomponentsActionsStateMutationsVuexDispatch CommitMutateRender
参考：公式ドキュメントが優秀https://ja.nuxtjs.org/guide
参考：Nuxt.jsビギナーズガイドhttps://www.amazon.co.jp/dp/4863542569/
便利なUIライブラリのご紹介Vuetify, Buefy
Vuetifypros: Material DesignのUIがサクッと作れるcons: Material Designに乗れないとデザインがつらいMaterial Designのコンポーネントが機能として提供されているので、それっぽいものをサクッと作るのには便利！
Buefypros: BulmaをベースにしていてVue.jsから使いやすい！cons: 元々BulmaにないコンポーネントはサポートしていないBulma自体がしっとりとしていて良いデザインですよね
Vueアプリケーションを作ってみよう実際にアプリをつくる
いろいろ便利なのはわかったけど、具体的にどう作るのか気になりますよね
シンプルなタスク管理ツールを作ってみましょう
画面設計{{ リスト名 }}{{ タスク内容 }}{{ タスク内容 }}テキストフィールド削除ボタンListComponentCardComponentNewCardFormComponentテキストフィールドNewListFormComponent
データモデル設計Listid: integertitle: stringCardid: integertitle: stringlistId: integer極めてシンプルなデータモデルですVuexを利用してデータを管理します
動画で解説作ったものはこちらhttps://github.com/mahm/nuxt-trello動画はこちらhttps://www.youtube.com/watch?v=3jZvGifJ6e0
まとめおつかれさまでした！
まとめ■ はじめてVue.jsを触るならNuxt.jsからがオススメ■ 公式ドキュメントが充実しているので、読むべし■ VuetifyやBuefyを利用して、それっぽいものをサクッと作ってみよう■ vue.js自体の機能はたくさんあるので、覚えるよりは「使ってみる→こんな機能ないか？」を調べるのを繰り返しながら学ぶのが良い
masahiro_nishimi
ymotongpoo
totokit4
hirotokirimaru
hagatake
ufoo68
ivargrimstad
akitotsukahara
treastrain
os1ma
prof18
77web
koba04
eileencodes
ddemaree
myddelton
eitanlees
jeffersonlam
destraynor
deanohume
matthewcrist
addyosmani
jonyablonski
shpigford
paulrobertlloyd