はじめに
最近ではフロントエンドの技術としてReactやVueといったフレームワークを利用したアプリケーション開発が盛んに行われていますね。
その中でもVue.jsは 学習コストの低さ であったり 高パフォーマンス をウリにしたフレームワークです。
ここでは、なぜVueなのかは一旦置いておき、とりあえずアプリを作るためにどうやったら早く習得できるのかをメインに書いていきたいと思います。
対象となる方々
- Vueを効率よく勉強しようとしている方
- VuexやRouterなどの周辺知識も合わせて勉強したい方
- バックエンドとの通信や認証・認可を含めた実用的なアプリケーションサンプルを求めている方
- チュートリアルはやったけど次どうしようか悩んでいる方
効率のよい習得方法とは
これは個人によって様々ですが、ぼくの場合は とりあえずOSSのソースを読む です。
感覚としてはダッシュボード系のテンプレートが以下の要素を含んでいて非常に参考になるのでおすすめです。
- ログイン・ログアウト処理
- 各コンポーネントの切り方（構成）や、処理の書き方
- 各ページでのAPI通信
- 利用しているUIライブラリの使い方
- 利用しているグラフ系ライブラリの使い方
そこから作りたいものに対して必要なことを、逆引き的に公式サイトや検索を通して勉強することが多いです。
チュートリアル規模のアプリケーションだとなかなか効果を実感できない機能とかもありますが、そこそこの規模のアプリケーションを動かしながらここを変えたらこう変わるというのを試行錯誤しながら身につけていくのもひとつのやり方だと思います。
なぜvue-admin-templateか
やっと本題ですが、ぼくがVueを勉強しはじめたときはこちらのPanJiaChen氏が作られているOSSから入りました。
https://github.com/PanJiaChen/vue-admin-template
（起動方法はReadmeをご参照ください）
なぜこのOSSにしたかというところですが、 盛り盛りではなくシンプルなテンプレート と ログイン・ログアウトの処理がちゃんと書かれている が大きな理由です。
UIはElementUIを利用されていて、router-viewやvuexなど基本的な部分ももちろん入っていますが、APIとの通信込みで書かれているプロジェクトは少なく、カスタマイズ性が高いという意味でこちらを選びました。
（ちなみに全部盛りのプロジェクトは https://github.com/PanJiaChen/vue-element-admin で公開されています。）
学びになったポイントまとめ
- SPAプロジェクトのシンプルなテンプレート
- バックエンドのスタブAPI通信も込みで書かれているので参考になる
- ログイン判定をちゃんとやっている
- 未ログインならアクセストークンを取得してvuexにストアし、各ページで参照している
- ついでにaxiosの使い方もわかる
- interceptors便利やん
- エラーハンドリングもちゃんとやってる
- ログイン以外にもAPIから取得した一覧をテーブルに表示したりとかもやっている
- ログイン判定をちゃんとやっている
- ルーティングの書き方や、コンポーネントの遅延読み込みのやり方がわかる
- RouterのbeforeEach便利。ページ単位で権限制御したいときはこれを使えばいけそう、とか考えるきっかけになる
- router-viewをネストしている意味がわかる（https://router.vuejs.org/ja/guide/essentials/nested-routes.html）
- コンテンツ部分のみに絞って更新したいから使ってるんだというのがわかる
- コンポーネントの書き方がわかる
- 自作コンポーネントの使い方
- ディレクティブの作り方、使い方
- ファイル構成も参考になる
- vuexでの状態管理がわかる
- ElementUIに詳しくなる（https://element.eleme.io/#/en-US）
- 体系的なアプリケーションの組み立て方が想像できる
さいごに
今回は vue-admin-template を使っていますが、モチベーションは何でもよいと思います。
画面がきれいだからとかetc.
チュートリアル終わったけどいまいちピンと来てないなと思った方や、どう使っていけばいいか悩んでいる方はOSSのプロジェクトを眺めているのはいかがでしょうか？
ヒントはたくさんもらえると思います！