私はフリーランスのWEBエンジニアをしていて、サーバーサイド(rails/golang)とフロントエンド(Vue.js/React)を中心の案件を受けています。
Vue.js/Vuex歴は4年程あり、今回は私が学習するときに役立った教材とネットで見つけた優良な教材を紹介したいと思います。
目次
ポイント
まずはVueのみを学習したあとにVuexを学ぶのがオススメ!!
Vue/Vuexがセットになった教材が多いですが、Vuexはどんなものか学ぶ程度にしておき、必要になったら詳しく学び直すってのもアリ!
※ Vuexを導入せずVueのみで作られたサービスも多くあります
Vue.js/Vuexとは?
Vue.jsとは、SPA(シングルページアプリケーション)を作りやすくしてくれるJavaScriptフレームワークです。SPAは、ページ遷移することなく単一ページで構成されているアプリケーションのこと。
Vue.jsは多くの企業で使われていて、Reactと同じかそれ以上の人気・需要があります。
Vue.jsを使えばリアルタイムプレビュー付きのエディタのような機能を簡単に作ることができます!
Vuexとは、Vue.jsに特化した状態管理をしてくれるライブラリです。サーバーからAPIで取得したデータを保存しておいたり、ユーザーが操作した内容を保存しておいたりできます。
ざっくり説明するのが難しいので、この後紹介するUdemy講座で学んで欲しいのですが、UIの状態を管理できるものと思っておいてください。
1. Vue.js/Vuexの公式ガイド
Vue.js/Vuexの公式ガイドは完全日本語対応されているので英語が苦手な人でも大丈夫です。非常に良くできています。
既にJavaScriptの知識があるフロントエンドエンジニアの方は公式ガイドだけで十分だと思います。
公式ガイドを読んで試しにサンプルアプリケーションを作ってみるって感じでかなり身に付くでしょう。
まだまだ経験不足の人でも何かわからないことがあれば、まずは公式ガイドを読んで見ることをオススメします。
公式の情報から学ぶというのはエンジニアとして重要なスキルです。知らない人がまとめた記事ではなく、公式の情報を見る癖をつけるためにもね。
動かして学ぶ!Vue.js開発入門
プログラミング歴が浅い方が1冊目に読むのにオススメの書籍です。
内容はそこまで深くないのですが、Vue.jsがどんなもので、何ができ、どうやって使うのかを理解できる入門書になっています。
いきなり内容の濃い書籍から入ると挫折してしまうので、まずは「動かして学ぶ!Vue.js開発入門」でVue.jsがどんなものなのか概要を学ぶと良いでしょう!
フロントエンドエンジニアとして経験がある方の1冊目、初学者の2冊目は次に紹介する「Vue.js入門 基礎から実践アプリケーション開発まで」がオススメ
2. Vue.js入門 基礎から実践アプリケーション開発まで
Vue.jsを初歩から実践まで徹底的に解説してくれるVue.js入門書の決定版です!!Vue.jsのコミッターがメインで執筆している書籍ですので、入門書ですがしっかりとした内容になっています。
プログラミング歴自体が浅い人は2冊目に読むと良いでしょう。(飲み込みの早い人は1冊目でも良い!!)
重要なトピックについてもれなく解説してくれているのでこれ一冊あれば十分です。
「Vue.js入門 基礎から実践アプリケーション開発まで」を読んだ後は、自力で開発できて、わからないことはネット調べて解決できるレベルになります。
- 開発環境構築
- Vue.jsの設計思想
- Vue.jsの基礎
- コンポーネントとは?コンポーネント設計について
- Vue Routerを使ったSPA開発
- 単一ファイルコンポーネント
- Vuex
- Atomic Design
- 単体テスト・E2Eテスト
- Nuxt.js
- TypeScript
3. 超Vue.js 完全パック - もう他の教材は買わなくてOK! (Vue Router, Vuex含む)
最後はUdemyの「超Vue.js 2 完全パック - もう他の教材は買わなくてOK! (Vue Router, Vuex含む)」
Vue.jsの基礎から、仮想DOM、リアクティブシステム、カスタムディレクティブやミックスインなどの応用的な機能まで解説してくれ、さらにVue Router、Vuexを使用した大規模なシングルページアプリケーション(SPA)の作成方法も学べる講座です。
動画なので講師の方の資料やPCの画面をみながら学習でき、つまずきにくいというメリットがあります。また、Udemyは30日以内であれば返金申請可能ですし、講師への質問もできるので試しに購入してみると良いでしょう。
Udemyにはたくさんの優良コースがあります!!↓↓↓もチェック