【2020年】Vue.js入門者向け本10選・入門サイト4選【現役エンジニアが厳選】

こんにちは。アプリエンジニア2年目に突入しました。

先日の【2020年】jQueryが学べる入門サイト5選・入門本12選【保存版】でも書きましたが、javascript(jQuery、Vue.js、react)勉強したいと日々思いながら半年がたちました。

今回は未来の自分の為に、Vue.jsの入門本10選、入門サイト4選をまとめておきたいと思います!

【Vue.js入門①】Vue.jsって何ができる?

Vue.jsとは
Vue.jsとは、JavaScriptのフレームワークの1種です。JavaScriptはほぼ全てのブラウザで動作するプログラミング言語で、フロントエンドアプリケーションの開発でも主として使用されています。

そのJavaScriptでより効率的な開発を行う目的で使用されているのがJavaScriptのフレームワークやライブラリです。なお、フレームワークもライブラリも「開発を支援する仕組みやツール群」といった意味では同等ですが、ライブラリと比較してフレームワークの方が、より規模が大きいニュアンスがあります。

JavaScriptのフレームワークやライブラリで最も有名なのは jQuery です。jQueryは導入もしやすく、多くのフロントエンドアプリケーションで使用されています。しかし jQuery は DOM操作を自分で行わなければならないなどの弱点があります(詳しくは後述します)。

この欠点は、これまでブラウザで動作するアプリケーションの開発主体がサーバー側だった時はあまり問題になりませんでした。ところが最近はWebページ自体を遷移させずに1つのページ内で処理を完結させる Single Page Application など、フロントエンド側に開発主体が移りつつあり、 jQuery の弱点がより顕著化する状況となっています。

そこで登場したのが、Vue.js や Angular、React などのJavaScriptのフレームワークです。これらフレームワークはDOM操作を自動化するなど、より効率よくフロントエンドの開発が行えるよう考慮されています。中でも Vue.js は比較的容易に使い始めることができるため、既存のアプリケーションへの組み込みなどにも向いています。(tech academy記事よりhttps://techacademy.jp/magazine/21456)

✔︎Vue.jsとは何かを現役エンジニアが解説【初心者向け】

【Vue.js入門②】Vue.jsって人気なの?

Vue.jsは多くのテックカンパニーで採用されています。

下記に例をあげます。

  • Facebook→ニュースフィードなど
  • Netflix→ストリーミング画面
  • Google→Google career platformなど
  • adobe→様々なプロジェクトで。Behanceなど
  • sansan
  • Retty
  • 弁護士.com

などなど非常に多くの有名Web企業で使われる人気のフレームワークです。

✔︎10 Enterprises You Didn’t Know Were Using Vue.js

【Vue.js入門③】Vue.jsエンジニアの年収

Vue.jsでの月収はフリーランスで平均80万円前後だそうです。

✔︎フリーランスでVue.js案件の平均単価はいくらなのか?

所属する会社や個人の実力にによって同じVue.jsエンジニアでも年収は全然異なるので、あくまでも参考程度の数字と考えてOkです。

【Vue.js入門④】入門本10選

Vue.jsの入門本を10冊まとめて紹介します。

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

内容
Vue.js(ビュージェイエス)は、Webアプリのビュー(見た目)の部分に特化したシンプルなフレームワークです。既存のアプリに後乗せで導入したり、徐々に適用範囲を拡大したりすることが手軽に行えます。シンプルな分、他のフレームワークと比べて学習コストが低く、HTMLとJavaScriptが一通りわかる人ならコードを理解するのも簡単です。本書では、Vue.jsの中核である、ページを構成するUI部品「コンポーネント」をしっかりと解説し、さらには本格的なアプリ開発で必要となる要素までを網羅的に取り扱います。丁寧な解説でよくわかる、入門書の決定版です!

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

2. 動かして学ぶ!Vue.js開発入門

内容
Vue.jsの基本機能を押さえたサンプルを元に、Webアプリ開発手法を学ぶことができます。
具体的には、ニーズの高い、データバインディング、イベント、ライブラリの利用、コンポーネントなど
開発の現場でニーズの高いトピックを中心に解説。
さらに現在、主流になりつつあるSPAの作成に役立つポイントも盛り込みます。

動かして学ぶ!Vue.js開発入門

3. これからはじめる人のJavaScript/Vue.jsの教科書

内容
「Chapter1 JavaScriptを学ぶための準備をしよう」では、JavaScriptを学ぶための環境構築を行います。といっても、Google Chrome(ウェブブラウザー)と、Visual Studio Code(エディター)をインストールするだけの簡単な準備です。

「Chapter2 JavaScriptの基本を学ぼう」では、JavaScriptを基本からみっちり学びます。四則演算、制御構造、変数、配列、関数といった基本的なところから、イベントリスナーの使い方、クラスの定義、モジュール、非同期通信、Cookieの使い方など、JavaScriptを実務で使う際には必須となるような実践的な内容まで学びます。EcmaScript2015の文法で学びますが、必要に応じて古い文法についても説明しています。

「Chapter3 TypeScriptの基本を学ぼう」では、TypeScriptについて知っておきたいことを一通り学びます。TypeScriptの基本的な使い方から、関数、さまざまな型、クラス宣言、インターフェイスの使い方などまで解説します。

「Chapter4 Vue.jsの基本を学ぼう」では、現在制作の現場でよく使われているライブラリであるVue.jsについて学びます。基本的なディレクティブの使い方を学んだあと、メソッドやコンポーネント、ミックスインの定義方法を学び、それらを使って実用的なプログラムを作ります。

「Chapter5 Vue CLIでアプリを作ろう」では、Vue CLIを使って、簡単なメモ管理のアプリケーションを作成します。プロジェクトの作成から始まり、ルーティングを設定し、新規追加・一覧・編集・削除の機能を作っていきます。Vuexを使って、データの保存も行います。最後にはコンポーネントを作って共通のパーツを追加するところまで行います。

これからはじめる人のJavaScript/Vue.jsの教科書

4. いちばんやさしい Vue.js 入門教室

内容
人気のJavaScriptフレームワーク「Vue.js」を初歩から学べる、いちばんやさしい入門書!

制御構造やイベント処理などの基本から、コンポーネントの利用、Web APIを使用したアプリ作成、
さらに大規模Vueアプリケーションを効率的に開発するためのVue CLI 3(Node.jsのモジュール)を使った開発まで網羅的に解説します!

【目次】
Chapter 1 Vue.jsってどんなフレームワーク?
Chapter 2 いろいろなデータバインディング
Chapter 3 条件分岐と繰り返し
Chapter 4 フォームのいろいろな要素の取り扱い
Chapter 5 フィルタ、アニメーション、コンポーネントを使う
Chapter 6 Web APIを使用したアプリの作成
Chapter 7 Vue CLI 3によるアプリケーション開発

いちばんやさしい Vue.js 入門教室

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

内容
Vue.jsを初歩から実践まで徹底的に解説。使いやすくかつ,プロダクションでも活躍するVue.jsをVue.jsコントリビューターの著者らが解説する一番わかりやすい入門書です。
小規模な適用例やjQueryからの移行サンプルに加え,大規模開発を想定したアプリケーション開発も体験できます。Vue.jsはGitHubで2017年最も人気のあったJavaScriptフレームワークに選ばれるなど大注目の技術です。
(こんな方におすすめ)

・Vue.jsに興味のあるWebエンジニア

・Vue.jsを本番で使いたいが課題があるエンジニア

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

6. Webデザインの現場で使えるVue.jsの教科書

内容
ノンエンジニアでもわかる! やさしいVue.jsの入門書
Web デザイナー・Web 担当者・初級のフロントエンジニアなど、「Web の見た目」を作る人に向けたVue.js の入門書です。
ノンエンジニアでもむりなく読み進められるように、難しいことは極力省いて、図を用いながらできるだけ平易に解説していきます。

Webデザインの現場で使えるVue.jsの教科書

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

内容
Vue.jsは、JavaScriptのフレームワークです。他のフレームワークと比べるとJavaScriptの経験者にはなじみやすく学習しやすいという利点があります。しかし、JavaScript初心者には学ぶことが多く、少し敷居が高いと感じてしまいます。本書は、はじめてJavaScriptを学習する人のために、Vue.jsの使い方を基礎から段階的に理解していく入門書です。初心者がつまづきやすいデータの流れについてもわかりやすく説明します。

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

8. 改訂新版 Vue.jsとFirebaseで作るミニWebサービス (技術の泉シリーズ

内容
【Vue.jsとFirebaseを使って、はじめてのシングルページアプリケーションを作る!ボリューム増の改訂新版】

本書は、簡単なWebサイトを作った事があるWebフロントエンド初心者がSPA(シングルページアプリケーションを)の基本を掴み、簡単なWebサービスが作れるようになることを目的としています。さらにこれを抑えた上で次の段階へステップアップするための足がかりになるような要素も掲載しています。
〈本書の対象読者〉
・HTML,CSS,Javascriptを利用して、簡単なWebサイトを作ったことがある人
・複数のページや状態管理をJavascript使って自力で行い、ごちゃついてしまい消耗している人
・普段デザイナーとしてマークアップしており、フロントエンドの新しめな環境でのサイト構築を経験してみたい人
・シングルページアプリーケーション、Vue.jsってものを触ってみたい、またはそれらの挫折経験がある人
・FirebaseのWeb版を使ってみたい人、どんな事が出来るのか知りたい人
・普段サーバーサイドやネイティブアプリを作っていて、Webフロントエンドをさらっと触ってみたい人
【目次】
第1章 はじめに
1.1 この本の目的・ターゲット
1.2 本書であまり触れない部分
1.3 本書の構成と対応環境について  他
第2章 サーバーレスシングルページアプリケーションの基本
2.1 SPAとフレームワーク(Vue.jsの紹介)
2.2 サーバーレスってなに?
2.3 Firebaseは何ができる?
2.4 そのままの構成で本格的なWebサービスで使える?
第3章 開発環境のセットアップとデプロイまでの流れ
3.1 vue-templesのダウンロードとセットアップ
3.2 SFCでのコンポーネントの内容について
3.3 Firebaseのセットアップとデプロイ
第4章 Googleアカウントでのユーザー登録と、ログイン状態の判別
4.1 componentsを作成し表示する
4.2 Firebaseでログインの設定
4.3 Googleログインの実装   他
第5章 エディターの作成:データベース作成とデータ保存
5.1 メモを編集できるマークダウンエディターを作る
5.2 メモを複数作成可能にする
5.3 メモの削除機能追加
5.4 Firebase Realtime DBのruleを設定する   他
第6章 見た目を整える
6.1 リセットCSSを導入する
6.2 CSSファイルの管理
6.3 プレビュー用CSSの追加   他

改訂新版 Vue.jsとFirebaseで作るミニWebサービス (技術の泉シリーズ(NextPublishing))

9. Vue.js&Nuxt.js超入門

内容
いま、Web開発の現場では「サーバ側の処理をするバックエンドよりも、実際にユーザーとやり取りするフロントエンドこそが重要」と意識が変わりつつあります。本書は、フロントエンドの開発において最も注目されているVue.jsと、それを更に拡張するフレームワークNuxt.jsの基本的な使い方を解説する入門書です。Vue.jsでのアプリ作成手順から、Nuxt.js利用によるデータ管理、axiosによる外部サイトへのアクセスまでを順番に解説します。

Vue.js & Nuxt.js超入門

10. Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発

内容
●CHAPTER 01 Nuxt.jsの概要
現代のフロントエンド開発の情勢を踏まえた上での、 Nuxt.jsの立ち位置から、実際にNuxt.jsがどういったツールであり、どのような魅力を備えているか。基本的な知識について紹介します。

●CHAPTER 02 Nuxt.jsによるシンプルなアプリケーション開発
実際にNuxt.jsで基本的なアプリケーションを構築します。Nux.jstの魅力を存分に体験することができる章となっています。

●CHAPTER 03 Nuxt.jsの機能の活用
CHAPTER 02で取り扱わなかったNuxt.jsの機能について深く掘り下げます。

●CHAPTER 04 中規模以上の開発を意識したNuxt.jsによるWebアプリケーション開発
CHAPTER 02とCHAPTER 03を踏まえて、実践的なアプリケーションを開発します。投稿型サイトを通じて、Nuxtの実際の開発での設計の勘所を紹介します。

●CHAPTER 05 Nuxt.jsアプリケーションのテスティング
アプリケーションを継続的に開発する際に必要なテスティング手法について解説します。また、フロントエンドにおけるテスト領域とそれぞれの必要性について紹介します。

●CHAPTER 06 アプリケーションのデプロイと運用
Nuxt.jsで開発したアプリケーションのデプロイと運用について解説します。サーバーサイドレンダリングの必然性などを課題として、パターンごとのベストマッチな運用方法をいくつか紹介します。この章では、クラウドごとの特性についての基本的な知識が少し必要となります。

●CHAPTER 07 プラグインとモジュール、エコシステムの開発・貢献
Nuxt.jsのエコシステムの活用方法と開発方法をご紹介します。複数プロジェクトにまたがる形でNuxt.jsを運用するときに役に立つ情報を紹介します。

●CHAPTER 08 最新情報のキャッチアップのすすめ
まだまだ珍しいNuxt.jsについて、その情報収集のノウハウを紹介します。

Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発

【Vue.js入門⑤】入門サイト4選

1. ドットインストール

月額980円の動画学習サイト。Vue.jsの基礎の基礎を勉強したい人におすすめ。

ドットインストール

2. Udemy

1コース1500円ほどの動画学習サイト。ドットインストールと比較すると、ハイクオリティで実践的なものが多い。

Udemy

3. Youtube

Youtubeはあまり知られていないが良いコンテンツが多い。Vue.jsで検索してみてください〜。

4. 公式サイト

Vue.js公式サイト