フロントエンドを学び始めてとりあえずJavaScriptの基礎は身につけた。
そろそろJavaScriptのモダンなフレームワークであるVue.jsを学ぼう。
そんな方に向けてVue.jsが学べるおすすめの本をご紹介します！
- JavaScriptの基礎をある程度身につけた方
- 次のステップとしてVue.jsを学びたい方
- 本を使ってVue.jsを体系的に学びたい方
本での学習はコスパ最強！
みなさんは何かの言語を学ぶときにはどうやって学んでいますか？
最近はWEBコンテンツやYoutubeの動画が充実してきているので、お金をかけずにネットで手軽にプログラミングを学ぶことができます。
が、やはり本で学ぶほうが学習効率が良いと私は感じています。
なぜかというと、本は基礎中の基礎から応用的な使い方までを体系的に学ぶことが出来るからですね。
ネット上で検索すると、大量に情報を入手することはできますが、体系的に解説されているコンテンツはなかなかありません。
学びたい内容を見つけられたとしても、応用的な内容までは解説されていないなど、かゆいところに手が届かないもどかしさを感じることが多いです。
その点、本だとその道のプロが学習効率を考えて構成されていますし、実践で使える応用的な内容まで解説されています。
書籍を購入するとお金がかかってしまいますが、その分学べることが多いということです。
プログラミングスクールなどに通うと何十万円も投資しなければいけませんが、1冊1500円～3000円程度の投資で学べる本は非常にコスパが良い学習方法です。
書籍代は自己投資と考えてどんどん本で学んでいきましょう！
Vue.jsが学べるおすすめ本6選
前置きはこれぐらいにしておいて、ここからはVue.jsが学べるおすすめの本をご紹介します。
基礎から学ぶ Vue.js
Vue.jsを基礎から学べる一冊です。Vue.jsを全く触ったことない人に向けては当然のことながら、Vue.jsを仕事で既に使っている人に向けても基礎を再理解するために使える内容です。
表紙のかわいい猫の雰囲気から分かる通り、文章表現もやわらかく、コード例も豊富に掲載されているので、実際に手を動かしながら学ぶことが出来るのでおすすめです。
私自身もある程度理解した後も辞書的に使えているので、購入しておいて損はないと思います。
本の内容だけでなく、書籍用サポートページが用意されているところもおすすめポイントです。
本で解説されている内容とは別に、コードの実例集や認証付き簡易チャットを作るチュートリアルが載っていたりなど、本で学んだ内容をさらに深く理解・応用する工夫がされています。
この本の購入に迷う方は一度サポートページを見てみて自分に合いそうな内容か確認してみるのもアリかと思います。
CHAPTER 1 Vue.jsとフレームワークの基礎知識
CHAPTER 2 データの登録と更新
CHAPTER 3 イベントとフォーム入力の受け取りCHAPTER 4 データの監視と加工
CHAPTER 5 コンポーネントでUI部品を作る
CHAPTER 6 トランジションとアニメーション
CHAPTER 7 より大規模なアプリケーション開発
CHAPTER 8 Vuexでアプリケーションの状態を管理する
CHAPTER 9 Vue RouterでSPAを構築する
Vue.jsのツボとコツがゼッタイにわかる本
Vue.jsを初めて学ぶ人に向いている本です。
内容を深堀りしすぎず、初学者に適切なレベルで内容が記載されています。
レビューでも、「難解な表現が少なく、とても分かりやすい」といった高評価が多く見られます。
本で学びながら自動見積フォームを作成しますので、手を動かして楽しみながら学習できます。
第1章 Vue.jsとフレームワークの基礎
1-1 Vue.jsとは？
1-2 Vue.jsを学ぶメリット
1-3 Vue.jsの概要
第2章 Vue.jsをはじめよう！
2-1 Vue.jsのインストール
2-2 基本のファイル構成
2-3 Vue.jsのオプション構成と役割
2-4 レンダリング（ページを描画する）
2-5 フィルター（描画用にデータを加工する）
2-6 算出プロパティ（再利用可能な加工済みデータ）
2-7 イベントハンドリング（ユーザーの操作を検知する）
2-8 ウォッチャ（データの変更を監視する）
2-9 フォーム入力バインディング（データと入力を同期する）
2-10 トランジション（表示の切り替えを滑らかにする）
第3章 Vue.jsで商品一覧を描画してみよう！
3-1 商品一覧ページの仕様
3-2 モックアップの作成
3-3 商品データをアプリケーションに結び付ける
3-4 商品データを描画する
3-5 ユーザーの入力に応じて表示を切り替える
第4章 Ajaxで商品データを外部ファイルから読み込もう！
4-1 AjaxとJSON形式
4-2 JavaScriptでAjaxを利用する
4-3 jQueryでAjaxを利用する
4-4 JSONPでクロスドメイン制約を回避する
4-5 Vue.jsアプリケーションでAjaxを利用する
第5章 Vue.jsで自動見積フォームを作ってみよう！
5-1 自動見積フォームの仕様
5-2 モックアップの作成
5-3 フォームのプログラムにVue.jsを適用する（JavaScript）
5-4 フォームのテンプレートにVue.jsを適用する（HTML）
第6章 Vue.jsのコンポーネントをモジュール化してみよう！
6-1 コンポーネントの基本
6-2 商品一覧をコンポーネント化する
6-3 単一ファイルコンポーネントとは？
6-4 開発環境「Vue CLI」を導入する
6-5 商品一覧を単一ファイルコンポーネントで再構築する
Vue.js & Nuxt.js 超入門
フロントエンドの開発において最も注目されているVue.jsと、それを更に拡張するフレームワークNuxt.jsの基本的な使い方を解説する入門書です。
Vue.jsでのアプリ作成手順から、Nuxt.js利用によるデータ管理、axiosによる外部サイトへのアクセスまでが順番に解説されています。
巻末にはJavaScriptの入門編がおまけで掲載されていますので、JavaScriptのおさらいも出来ますよ。
Chapter1 Vue.jsを使ってみよう
1-1 Vue.jsのセットアップ
1-2 より本格的なプロジェクト
1-3 プロジェクトを作ろう
Chapter2 Vue.jsの基本をマスターしよう
2-1 Vue.jsの基本的な仕組み
2-2 レンダリングをマスターする
2-3 テンプレート構文を覚えよう
Chapter3 コンポーネントを使おう
3-1 コンポーネントの基本をマスター！
3-2 v属性を使いこなす
3-3 プロジェクトによる開発
3-4 計算アプリを作ろう
Chapter4 コンポーネントを更に掘り下げる！
4-1 プロパティを強化する
4-2 イベントを掘り下げる
4-3 テンプレートを考える
4-4 トランジションとアニメーション
Chapter5 Nuxt.jsにアップグレード！
5-1 Nuxt.jsってなに？
5-2 Nuxt.jsプロジェクトの基本
5-3 Vuexによる状態管理
5-4 メモアプリを作ろう！
Chapter6 外部サービスを利用しよう！
6-1 axiosで外部サイトにアクセス！
6-2 FirebaseとREST API
6-3 Firebaseアクセスをマスターしよう
6-4 Firebase APIを活用しよう！
Addendum JavaScriptオブジェクト超入門
A-1 JavaScriptの基本を超簡単おさらい！
A-2 オブジェクトをマスターしよう
Vue.jsとFirebaseで作るミニWebサービス
こちらの本は中級者向けの本となります。
HTML、CSS、JavaScriptをある程度理解している人向けの本で、簡単なWebサービスが作れるようになることを目的としています。
初心者の場合でも、分からないところを自力で調べられる人にはおすすめの本となります。
本を読み終える頃には、Firebaseを使った簡易的な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の追加
たった1日で基本が身に付く! Vue.js 超入門
フロントエンドのJavaScriptフレームワークはVue.jsの他にもReact、Anglarなどさまざまありますが、その中でもVue.jsは学習コストが低いのが特徴です。
Vue.jsアプリケーションは、基本的にはHTMLを拡張したテンプレートと、JavaScriptのコードから構成されます。
そのため、HTMLとJavaScriptに馴染みがあれば、基本的な使い方はすぐに理解できるでしょう。
タイトル通り、「たった1日で基本が身に付く！」Vue.jsの入門書です。
CHAPTER1 Vue.jsを学ぶ準備をしよう
SECTION 01 Vue.jsについて理解しよう
SECTION 02 Vue.jsの開発環境を整えよう
SECTION 03 ひな形となるHTMLとJavaScriptファイルを作ろう
CHAPTER2 Vue.jsの基本を学ぼう
SECTION 01 Vueインスタンスを理解しよう
SECTION 02 データをWebブラウザに出力しよう
SECTION 03 バインディングを理解しよう
SECTION 04 レンダリングを理解しよう
Vue.js入門 基礎から実践アプリケーション開発まで
Vue.js入門書の定番です。Vue.jsを基本から実践まであますところなく解説しています。
Vue.jsの基礎から、Vue RouterやVuexといったライブラリの使い方までわかりやすく紹介されています。
フロントエンドの本格的な開発が初めての人でも確かな開発力が身につきます。
1. プログレッシブフレームワークVue.js
1.1 現代のWebフロントエンド開発の複雑化
1.2 Vue.jsの特徴
1.3 Vue.jsの設計思想
1.4 プログレッシブフレームワークの解決する段階的な領域
1.5 Vue.jsを支える技術
1.6 Vue.jsのエコシステム
1.7 Vue.jsのはじめの一歩
2. Vue.jsの基本
2.1 Vue.jsでUIを構築する際の考え方
2.2 Vue.jsの導入
2.3 Vueオブジェクト
2.4 Vueインスタンスのマウント
2.5 UIのデータ定義 (data)
2.6 テンプレート構文
2.7 フィルタ（filters）
2.8 算出プロパティ（computed）
2.9 ディレクティブ
2.10 ライフサイクルフック
2.11 メソッド（methods）
3. コンポーネントの基礎
3.1 コンポーネントとは何か
3.2 Vueコンポーネントの定義
3.3 コンポーネント間の通信
3.4 コンポーネントの設計
4. Vue Routerを活用したアプリケーション開発
4.1 Vue Routerによるシングルページアプリケーション
4.2 ルーティングの基礎
4.3 実践的なルーティングのための機能
4.4 サンプルアプリケーションの実装
4.5 Vue Routerの高度な機能
5. Vue.jsの高度な機能
5.1 トランジションアニメーション
5.2 スロット
5.3 カスタムディレクティブ
5.4 描画関数
5.5 ミックスイン
6. 単一ファイルコンポーネントによる開発
7. Vuexによるデータフローの設計・状態管理
8. 中規模・大規模向けのアプリケーション開発① 開発環境のセットアップ
9. 中規模・大規模向けのアプリケーション開発② 設計
10. 中規模・大規模向けのアプリケーション開発③ 実装
コメント