【Amazon】人気の商品が日替わりで登場!
毎日お得なタイムセール!商品をみる

Vue.jsの学習におすすめの本と動画コンテンツの紹介

本記事では、JavaScriptの人気フレームワークの一つVue.jsの勉強におすすめの本と動画について紹介しています。

【月額980円で読み放題!】
Amazon Kindle Unlimited
先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!

全プログラマー必見!
変数名/関数名にもう悩まない!
リーダブルコード
総合評価
( 5 )
メリット
  • 美しいコードが書けるが自然と書けるようになる
  • 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 (2023/07/23 02:48時点 | Amazon調べ)
目次

おすすめ参考書

後輩ちゃん

先輩!Vue.jsの学習でおすすめの本を教えてください!

先輩くん

了解!僕がおすすめする本について紹介していくね!

Vue.js入門 基礎から実践アプリケーション開発まで

総合評価
( 5 )
出版社技術評論社
著者野田 陽平
発売日2018/9/22
ページ数480ページ
本書情報
本書の構成
  • プログレッシブフレームワークVue.js
  • Vue.jsの基本
  • コンポーネントの基礎
  • Vue Routerを活用したアプリケーション開発
  • Vue.jsの高度な機能
  • 単一ファイルコンポーネントによる開発
  • Vuexによるデータフローの設計・状態管理
  • 中規模・大規模向けのアプリケーション開発

Vue.js未経験者です。
Vue.jsの基礎を学びたくてこの本を買いました。
まだ読み終えていないのですが、この本でかなりVue.jsが書けるようになりました。ある程度Javascriptの基礎を身に付けている必要はありますが、逆に言えばJavascriptを知っている(ここでいう知ってるは初心者程度のこと)人からしたら無駄がなくてスラスラと読み進めていける本です。

引用元:Amazon

入門以上の内容となっていて、実践的な内容もたくさんあり、満足です。
vuex,atmoic design,Nuxt.jsなども盛り込まれているので、vue案件のお供になると思います。
本一冊でvue回りの知りたかったことすべて書かれているので満足です。

引用元:Amazon
著:川口 和也, 著:喜多 啓介, 著:野田 陽平, 著:手島 拓也, 著:片山 真也
¥3,532 (2023/07/16 00:44時点 | Amazon調べ)

これからはじめるVue.js実践入門

総合評価
( 4.5 )
出版社SBクリエイティブ
著者山田 祥寛
発売日2019/8/21
ページ数471ページ
本書情報
本書の構成
  • イントロダクション
  • Vue.jsの基本
  • ディレクティブ
  • コンポーネント(基本)
  • コンポーネント(応用)
  • 部品化技術
  • Vue CLI
  • ルーティング
  • Vuex
  • テスト
  • 応用アプリ

JSを一通りかじっている方であれば、すんなり受け入れられる内容です。

ハマりどころへの注釈があるのも親切で、一つ一つの解説も分かりやすいと感じました。

特に、独学で少しVueを触っている場合などは、補足内容に納得出来る部分が多いです。

ここ暫く出版されていた入門書等との違いとして、Vue.cli あたりの情報も親切に書かれており、この1冊で Vue.js 本来の能力を知ることが出来、学習がとても楽しくなると思います。

引用元:Amazon

Vueの本は色々読んでますがこの本は完璧。
Vueについてほぼ全てのことが網羅されています。
入門書を卒業したあとにはこの本でVueを完璧にマスターしましょう。

引用元:Amazon

Vue.js&Nuxt.js超入門

総合評価
( 4.5 )
出版社秀和システム
著者掌田 津耶乃
発売日2019/2/11
ページ数465ページ
本書情報
本書の構成
  • Vue.jsを使ってみよう
  • Vue.jsの基本をマスターしよう
  • コンポーネントを使おう
  • コンポーネントを更に掘り下げる!
  • Nuxt.jsにアップグレード!
  • 外部サービスを利用しよう!

業務で vue.js / nuxt.js を使用する必要があった為、自己学習の教材として購入。

プログラミング経験が浅く人でも理解できるように、記載されているサンプル・コードを実行しながら vue.js / nuxt.js を優しく解説しています。

難解な単語は使わず、わかりやすい言葉で丁寧に書かれている印象を受けました。
本の内容を読み解き、サンプル・コードを実際に動かしながら学習を進めることで、vue.js / nuxt.js の基本的な扱い方は理解が可能です。
「超入門」というタイトルの通り、入門書としては良いと思います。

引用元:Amazon

これからフロントエンドを始める人には、最適な本だと思います。

引用元:Amazon
著:掌田津耶乃
¥2,673 (2023/07/16 00:47時点 | Amazon調べ)

Vue.jsのツボとコツがゼッタイにわかる本

総合評価
( 4 )
出版社秀和システム
著者中田 亨
発売日2019/3/21
ページ数319ページ
本書情報
本書の構成
  • Vue.jsとフレームワークの基礎
  • Vue.jsをはじめよう!
  • Vue.jsで商品一覧を描画してみよう!
  • Ajaxで商品データを外部ファイルから読み込もう!
  • Vue.jsで自動見積もりフォームを作ってみよう!
  • Vue.jsのコンポーネントをモジュール化してみよう!

この本に向いているのは、「JavaScriptの知識がある程度あり、jQuery等から移行したばかりの初心者」だと思います。

反対に、すでにVue.jsについて慣れており知識を深めたいという人には向かないかもしれません。

簡単なECサイトの構築を例に、商品一覧の表示・取得やソートなど、具体的な実装場面を想定した作りになっています。

引用元:Amazon

Vueの初学者です。
他の教材でVuexの手前までひととおり勉強しましたが、いざ自分でコードを書くとなると、何をどうしていいかわからず。

この本では一つの機能をまずCDNを使って簡単に書き、次はモジュールに分けて書く。その次はVue CLIを使ってシングルファイルコンポーネントに書き直す、と3段階に分けて詳しく説明されていてとてもわかりやすかったです。買ってよかった!
この本で学んだ内容を足掛かりに、Vueを使った開発力を身につけていければと思います。

引用元:Amazon

おすすめ動画コンテンツ

私がおすすめする動画コンテンツはUdemyです。

実際にUdemyを利用して実感した魅力的なポイントは、以下の通りです。

Udemyのここが魅力
  • 新規学習者向けのセールで格安でコースを購入することができる
  • コース購入から30日以内であれば、返金することができる
  • 分からない箇所があれば、コメントで質問することができる
  • プロのエンジニアが教えてくれるため、実践的な講義を受けられる
後輩ちゃん

Udemyすごい。。

先輩くん

僕も新しい技術を学びたい時には、必ずと言っていいほど利用しているよ!

超Vue.js 2 完全パック (Vue Router, Vuex含む)

作成者よしぴー (Yoshipi)
学習時間17.5時間
動画情報
学習内容
  • Vue JSの基礎から、仮想DOM、リアクティブシステム、カスタムディレクティブやミックスインなどの応用的な機能
  • Vue Router、Vuexを使用した大規模なシングルページアプリケーション(SPA)の作成と、それらを世界中に公開する方法
  • Vue CLIを使った実務で使える実践的な開発方法、コンポーネントの詳細、アニメーション、http通信、ログイン認証
動画構成
  • はじめに
  • これがVue.jsの基礎、テンプレート構文だ
  • 「条件付きレンダリング」と「リストレンダリング」
  • Vueインスタンスとその内部構造はこうなっている
  • Vue CLIを使った実践的な開発をはじめる方法
  • ゼロから始めるコンポーネント
  • コンポーネント間でデータを受け渡す方法
  • コンポーネントの高度な機能はこう書く
  • こうすればVue.jsでフォームが簡単に作れる
  • カスタムディレクティブで自由にディレクティブを作る方法
  • 「フィルター」と「ミックスイン」
  • 「トランジション」と「アニメーション」
  • Vue Routerでルーティングできる仕組み
  • Vuexを使って大規模なプロジェクトに備える
  • 世界中に自分のアプリを公開する
  • このコースのまとめ
  • axiosを使ってサーバーにhttp通信をする方法
  • ログイン機能はこう実装する

とてもわかりやすいです。細かいところまで説明しているので、Vue.jsのことをよく理解しているなと思いました。ロードマップも載せているので、このコースを受講することで何が自分でできるようになるのかイメージしやすいです。

引用元:Udemy

基礎的なところはたっぷりと教えてもらえたので理解が深まりました。

気になっていたVueRouter、Vuex、SPAの作り方、firebaseを用いた実装は、結構複雑で難しく感じましたが、中身が知れたのは良かったです。

引用元:Udemy

Vue.js 3 入門決定版!jQuery を使わないウェブ開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ

作成者中村祐太 (Yuta Nakamura)
学習時間13.5時間
動画情報
学習内容
  • Vue JSを使うメリットがわかるようになります。
  • TODO管理アプリ開発を通して、Vue JSによるアプリ制作の一連の流れを理解できるようになります。
  • Vue JSの詳細な機能についても理解できるようになります。
  • Vue JSの基本的な使い方を速習パートにより短時間で理解できるようになります。
  • プログラミング関連記事検索APIを用いたリアルタイムサーチ開発を通して、実践的な開発ができるようになります。
動画構成
  • はじめに
  • Vue.jsの基本的な使い方を学ぼう
  • Visual Studio Codeを導入しよう
  • 実践演習:タスク管理アプリの開発をしよう
  • テンプレート構文を使えるようになろう
  • 算出プロパティを使えるようになろう
  • 監視プロパティ(ウォッチャ)を使えるようになろう
  • 実践演習:APIを用いたリアルタイムサーチ – 監視プロパティの理解を深めよう
  • クラスとスタイルのバインディングを使おう
  • 条件付きレンダリングを使おう
  • イベントハンドリングを使おう
  • フォーム入力バインディングを使おう
  • コンポーネントを使おう
  • トランジションの基本
  • [旧版:v2]実践演習:Bitcoin価格表示アプリの開発 – API連携
  • [旧版:v2]実践演習:APIを用いたリアルタイムサーチ – 監視プロパティの理解を深めよう
  • クロージング
  • ボーナスレクチャー

講師の方の声が落ち着いてて聞き取りやすいです。例題で動かしながら学べるのでやっていて飽きなく気に入っています。Vue.jsの入門の決定版かも知れません。少なくとも私はすごく気に入っています。

引用元:Udemy

説明が丁寧で分かり易く、独学者の自分でも挫折せずに最後までやりきれました。

お陰様で、自分のポートフォリオサイトでjQueryで実装していた部分をVue.jsに置き換え、SPAにする事もできました。

それに概要を理解出来た今なら、イマイチ取っ付きにくかった公式リファレンスも少しづつ活用出来るようになってきました。

引用元:Udemy

Vue.js + Firebaseで作るシングルページアプリケーション

作成者Kazuya Kojima
学習時間5時間
動画情報
学習内容
  • Vue jsを使用したアプリケーションの開発の基礎を学ぶことができます。
  • Vue jsのプラグインである、VuexやVue Routerを使用したシングルページアプリケーションの作成方法を学ぶことができます。
  • Firebase Authenticationを使った認証機能の実装方法を学ぶことができます。
  • Firebase Cloud Firestoreを使ったデータの保存方法を学ぶことができます。
  • Firebase Hostingを使用したアプリケーションのデプロイ(公開)方法を学ぶことができます。
動画構成
  • はじめに
  • Vue.jsの学習環境の準備
  • Vue.jsの基礎
  • Vueインスタンスのライフサイクル
  • コンポーネントの基礎
  • Vue CLIによる開発環境構築
  • エディターの紹介
  • Vue CLIで作成した開発環境の解説
  • 単一ファイルコンポーネントの解説
  • Vue Routerの解説
  • アドレス帳アプリケーションの作成
  • アプリケーションの公開

Vue.jsでSPAのアプリケーション作成の流れがわかってとても良かったです。このコースで一連の流れを理解できるので、実装のより詳細な箇所についてはVue.jsのサイトや書籍等で補完したいと思います。

コードもES6で書かれているところが良かったです。

引用元:Udemy

実践的な開発手法を学べる良い講座でした。

特に、Vueの書き方などある程度分かってきた段階でこの講座を見ると、今まで学んできた内容の点と点とが繋がる感覚になると思います。

引用元:Udemy

【Vue.js2&Vue.js3対応】基礎から【Vuetify】を使った応用まで! 超初心者から最短距離でレベルアップ

作成者世界のアオキ (Akihiro Aoki)
学習時間15.5時間
動画情報
学習内容
  • VueJsを基礎からわかりやすく
  • ES6の文法をメインに
  • ディレクティブ・オプションAPI・リアクティブの使い方
  • VueCLIやVueRouterを使ったモダン開発の方法
  • Vuetifyを使ったマテリアルデザインの構築方法
  • Vuexの考え方、よく使う記法
  • VueJs3の扱い方
  • CompositionAPIの扱い方
動画構成
  • Vue.jsの基本
  • トランジションなど
  • フォームと非同期通信(Ajax)
  • コンポーネント
  • Vuetify(CDN)
  • SFC(SingleFileComponent)
  • VueRouter SPA
  • サンプル6 SPA + GoogleBookAPI
  • Vuex
  • Vue.js3対応
  • 補足

説明が丁寧でスピード感があるので、密度が濃い学習をしている感覚になります。都度、公式マニュアルでの説明も補足されるので、正確な情報を得ることができ、公式マニュアルの読み方も習得できます。

引用元:Udemy

JavaScript講座もそうだったのですが、公式ドキュメントとスライドベースで解説してくださっているので、大変分かりやすいです。

公式ドキュメントは少し小難しく、読むのに抵抗があったのですが、アオキさんの講座のおかげで抵抗が少なくなりました。

他の講座は、単に作りながら解説している講座も多いのですが、ちゃんと理論部分も解説されておりとても良い講座だと思います。

引用元:Udemy

まとめ

今回は、Vue.jsの学習でおすすめの本と動画コンテンツについてご紹介しました。

Vue.jsを習得することで、SPAサイト・アプリの開発やコードの一部を再利用できるコンポーネント化によって非常に分かりやすく綺麗なコードを書くことができるようになるため、頑張って習得しましょう!

こちらの記事と同様に、Vue.jsのフレームワークである「Nuxt.js」についても紹介しているので、気になる人はぜひご覧ください!

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村 FC2 Blog Ranking

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次