Web制作・プログラミング関連のおすすめレビュー記事はこちら

【入門者向け】Vue.jsの学習法を具体的に紹介

Vue.js

Vue.jsの学習を始めたいけど何から手を付けていいかわからない。

こんな悩みを抱えている人はいませんか?

闇雲に学習を始めても途中で挫折したり、せっかく勉強をしたのに、

これで何ができるんだろう...?状態で終わってしまうかも知れません。

そんな人のために、今回は再現性の高いVue.jsの学習方法についてご紹介します。

僕自身の体験談も交えてるのでぜひ参考にしてください。

簡単な教材でなにか作ってみよう

いきなりですが、おすすめは「まずは簡単な教材で何か作ること」です。

まずは入門書で全体像を掴むほうがいいのでは...?」と考えるかも知れませんが、それは間違いです。

入門書は知識が網羅的に書かれていることが多く、逆にどこが重要なのか理解しづらいこともよくあります。

初心者のうちは、

「教材を使って成果物を作る」→「書籍などで復習」

の流れが最も効率が良いと断言できます。

初めのうちは、どうしてもインプットに偏りがちなので、ステップにそって成果物を作り上げていく動画教材を強くおすすめします。

Vue.jsの初心者向けおすすめ教材

教材って言ってもなにをやればいいかわからない・・・」という方も居るかも知れません。

Vue.jsの学習にはUdemyの動画教材がオススメです。

とはいえ、多くの教材があるので僕自身の体験談からおすすめの教材を紹介します。

Vue.js おすすめ教材その1

超Vue.js 2 完全パック - もう他の教材は買わなくてOK! (Vue Router, Vuex含む)

おすすめ度 5.0

こちらはUdemyの中でもベストセラーになっている教材です。

”もう他の教材は買わなくてOK!”と謳っているだけあって、Vue RouterやVuexなどの発展的な内容まで詳しく扱っています。

僕自身、実際に受講しましたが、かなりの情報が分かりやすくまとまっている印象でした。

初心者の方はまずはここから始めてみるのがオススメです。

追記:axiosを使ったhttp通信やfirebaseと連携したログイン機能の実装など、実践的な内容も追加されていました。

Vue.js おすすめ教材その2

Vue JS入門決定版!jQuery を使わない Web 開発 - 導入からアプリケーション開発まで体系的に動画で学ぶ

おすすめ度 4.0

こちらもUdemyでかなり人気の教材です。

”jQueryを使わないWeb開発”とあるように、jQueryとの違いやVue.jsの面白さも初めに解説してくれています。

そのため、一度jQueryなどでWebサイト制作の経験がある方などはスムーズに違いやメリットを理解できると感じました。

初心者〜中級者の方はこの教材も検討してみてください。

足りない知識をインプットする

一度教材で何か成果物を作成することでイメージが掴めたら、次は体系的な知識をインプットすることがオススメです。

「手を動かして何か作る」→「知識をインプット」この順番が本当に重要です!

ここでは簡単なインプットの方法を紹介します。

Vue.jsの公式ドキュメントを読んでみる

Vue.jsはプログラミング言語の中では珍しく、日本語の公式ドキュメントが充実しています。

はじめに — Vue.js
Vue.js - The Progressive JavaScript Framework

すべてを理解する必要はまったくないので、サクッと流し読みしてみてください。

一度教材で使った知識をなんとなく思い出しながら読むと効率的にインプットできるでしょう。

Vue.jsを書籍を1冊見てみよう

このステップでは書籍を紹介していますが、公式ドキュメントで十分だという人は飛ばしてOKです。

先程の公式ドキュメントと同じようにサクッと読んで全体を掴みましょう。

あえて書籍をオススメする理由としては、

  • 網羅的に知識をインプットできる
  • 終わった後も手引書・辞書代わりに使える

などが挙げられます。

この後のステップに進んだときにも書籍を一冊持っておけば役立つことも多いはずです。

僕が学習に使った書籍は以下の2冊です。

前者の書籍はいわゆる「猫本」と呼ばれる書籍で、Vueに関して網羅的な知識をインプットするのに最適です。

後者の書籍はかなり初心者向けで、JavaScriptの基礎から学ぶことができるようにまとまっています。

オリジナルの成果物を作ってみる

既存の成果物に機能追加するのがおすすめ

オリジナルと書きましたが完全オリジナルである必要はありません。

既存の教材に機能を追加していくやり方が最も挫折しにくくおすすめです!

正直この段階が一番挫折しやすいかも知れません。

適宜書籍や教材を参考にしつつ、オリジナルの機能を追加できるようになれば十分なスキルアップが期待できます。

ブログで言語化するのもかなり効果的

教材や書籍から離れ、自分で学習していくと必ずエラーで躓くことになります。

そこでエラーを解決した時に得た知識や解決法をブログなどでアウトプットすることで飛躍的に学習効率が伸びるでしょう。

以下の記事でアウトプットの重要性に触れているので気になる方はチェックしてみてください。

最後に

今回はVue.jsの学習方法について解説しました。

新しい技術を身につける際は挫折しないステップを踏んで、確実に学習を進めていくことが重要です。

ぜひ今回紹介した教材や書籍を使ってVue.jsの基礎を身に着けましょう。

当ブログではVue.jsの解説記事も投稿していますので、アウトプットの参考にしてみてください。

タイトルとURLをコピーしました