Vue.js おすすめ書籍

「vue3 フロントエンド開発の教科書」購入感想レビュー

最近私は、Webアプリケーション作成に取り組んでいます。
素のJavaScriptで作成していたのですが、やはりモダンな開発にこだわりたいと思い、Vue３を改めて勉強することにしました。
私が学習に使用したのが、「Vue3 フロントエンド開発の教科書」です。
ちなみにAmazonキンドルの電子書籍版（2022年9月2日 初版第1刷発行）を購入しました。

かなりオススメな内容だったので、ご紹介いたします。

Vue3 フロントエンド開発の教科書はこんな本

おすすめ

vue3おすすめ書籍

Vue3 フロントエンド開発の教科書
総合評価 ：

Vue３での新しいコンポーネント作成の記法である「Composition API」について学べます。
さらにTypeScriptや,create-vueを使用したプロジェクト作成、viteを使用した実行環境の作成、Piniaによるデータ管理など、最新のVue構成で学習ができます。
これほど、最新のVue3が学習できる本は他にないと思います。
値段は少し高いですが、むしろこれ以外にVue3の教材は必要ないので持ってて損はないと思います。

●Composition APIについて学べる
●最新のVue構成での作成方法が分かる
●TypeScriptを使用したVue3の書き方が分かる
●Webアプリケーション作成の一通りの知識が一冊で学べる

●第３章の一か所だけバージョンアップで書籍と違う動きをする箇所がある
●TypeScriptの知識は基礎的なことだけ
●コード部分は白黒なので少し見づらい

AMAZON

楽天

この本を購入した理由

「Composition API」中心に書かれている本はこれしかなかった（私調べ）

私は、数年前Vueの本を購入して、少し勉強していました。（途中で飽きて辞めました（笑））
ただ、今回Webアプリケーションを作成するにあたり、もう一度Vue.jsを学びなおそうと思い調べてみると...

ニャンコ
ニャンコ

あれ？　俺が勉強したものとなんか違う
なんやこれ！！

どうやらvue.jsは2020年9月にvue3にリリースされ、新機能や新たな記述方法が導入されたとのこと。
ただ、それでも従来のVue２が使用され続けていましたが、つい最近2022年にようやくVue３での開発が主流になったそうです。

私が混乱したのが新しいVueコンポーネント作成の記法である「Composition API」です。
従来のvueでは「Option API」という記法で書かれていましたが、Vue3では「Composition API」が主流となります。
それぞれの記述方は下記の通りですが、記述方が全く違います。

今まで、「Option API」に慣れ親しんだ人ほど混乱するのではないでしょうか？
でも、新しくVue3を勉強する人には今が良い時期なのかもしれませんね。

//Option API
<script>
export default {
  data() {
    return {
      width: 0,
      height: 10
    }
  },
  computed: {
    area() {
      return this.width * this.height;
    }
  },
  methods: {
    widthAdd() {
      this.width++;
    },
    heightAdd() {
      this.height++;
    }
  }
}
</script>
//Composition API
<script setup>

import {ref,computed} from "vue";

const width = ref(0);
const height = ref(10);

const area = computed(
  () => {
    return width.value * height.value;
  }
);

const widthAdd = () => {
    width.value++;
}
const heightAdd = () => {
    width.value++;
}
</script>

アマゾンで様々な本を探した結果

ニャンコ
ニャンコ

「Composition API」に変わった？
なら「Composition API」について書かれてる本を探そ！

ニャンコ
ニャンコ

なんか「Composition API」について書かれてる本ないんですけど～

私が調べた結果「Composition API」について書かれてる本は全くないわけではありません。
ただ、本のタイトルに「Vue3」と書かれている本でも、「Option API」で記述されており、一部の章で「Composition API」について紹介されているというものが多かったです。

今後「Composition API」が主流になるというのに、今更「Option API」を勉強してもなあ。
という時にこの本を見つけました。

この本は全編にわたって「Composition API」で学習できます。
色々調べましたが、「Composition API」についてガッツリ書かれてるのはこの本だけだと思います。
（2023年11月：私調べ）

vue3を使用したモダンな開発方法を学べる

学べるのは、「Composition API」だけではありません。
2023年現在の最新のVue構成について学べます。

一口にVue3といっても、プロジェクトの作成や、状態管理など様々なツールが日々新しいものに進化しています。
「Vue CLIがcreate-vue」へ「wecpack が Vite」 になったりなど、Web業界の技術は日進月歩ですね。

そんな移り変わりの激しい業界ですが、この本は最新のVue構成にこだわって書かれていると感じました。
さらに、TypeScriptを使用して書かれているのでよりモダンなVue3について学びたい方はオススメです。

「Vue3 フロントエンド開発の教科書」のついて

この本は全部で13章から構成されており、全ページ数は「索引、あとがき」等を含めて727P（電子書籍版）になります。
学習期間は、やったり、やらなかったりでなかなか進みませんでしたが、１か月程度でしょうか。

この本の学べる内容・目次

この本の目次は以下の通りです。

第1章　フロントエンド開発の潮流とVue

本のさわりの部分、JavaScriptの歴史やフロントエンド開発の潮流を解説しています。
私は、はやく学習を開始したかったのでササッと読みました。

第2章　ViteとVueプロジェクト

Vue開発を始めるにあたっての準備の章になります。
Node.jsのインストール方法、VSCodeに入れておいた方が良いプラグインの説明・「create-vue」を使用したVueプロジェクトの作成方法を学びます。

第3章　Vueプログラミングの基本

Vueの基本構文を学びます。
特にVueの最大の特徴といっても良いリアクティブシステムについて学びます。
ただ、後述しますが、多くの人が引っかかるポイントがあります。

第4章　データとイベントのディレクティブ

データバインディングについての章です。
属性とのバインディングやイベントとの連携などはこの章。

第5章　双方向データバインディングとその他のディレクティブ

ユーザーが入力したフォームと連携できる双方向データバインディングについての章。
また、その他のディレクティブについての解説もあります。

第6章　制御のディレクティブ

条件分岐の「v-if」、繰り返し処理の「v-for」など制御に関するディレクティブについての章。

第7章　スクリプトブロックのバリエーション

scriptブロックの様々なパターンの紹介。
従来の「Option API」記法の紹介もされています。

第8章　コンポーネント間連携

Vueは様々なコンポーネントを連携して作成することになると思いますが、データの受け渡しなどコンポーネントを連携する方法を学べます。

第9章　子コンポーネント利用のバリエーション

「slot」を使用した子コンポーネントの利用や動的にコンポーネントを切り替える、動的コンポーネントについての章。

第10章　Vue Router

「Vue Router」を使用した、シングルページアプリケーション（SPA）の作成方法を学べます。
最近は、SPAで作られてるWebアプリケーション多いですよね。
私もSPAで作りたかったので、早くこの章にたどり着きたくてワクワクしてました。

第11章　Pinia

Piniaを使用したデータの受け渡しについて学べます。
ここまで勉強して、Vueってデータの受け渡し面倒だな～と思っていたら、こんな便利なものがあるのかよと思いました。

第12章　非同期処理

Webアプリケーションの作成には、非同期処理は必須でしょう。
IndexDBを利用した、データベースとの連携やWebAPIの読込などについて学習できます。

第13章　ユニットテスト

関数やコンポーネントごとに、機能のテストができるユニットテストについての章。
私は、ここまで来たら早くアプリケーション開発に移りたくてうずうずしていたので、飛ばし飛ばしになりました。
開発が進んで必要になったらもう一度読んで試してみたいと思います。

実際購入して学んだレビュー

良かったところ

最新のVueについて学べる

繰り返しになりますが、「Composition API」やTypeScriptを使用した最新のVueについて学べます。
何よりここが最大のウリです。
学習教材も本も、探しましたがこれほど最新の技術にこだわって書かれたものはないと思います。

アプリケーションの作成に必要な一通り知識が学べる。

コンポーネント連携や「Vue Router」「非同期処理」など、Webアプリケーションの作成に必要な知識が１冊で学べます。
現在私はWebアプリケーションの作成に取り掛かっていますが、「あれ？ここどうしたらいいんだろ」と思った時にこの本をもう一度見てみると、だいたい解決方法が分かります。

解説が丁寧

一冊一通り読んで、良く分からかったり、これどゆこと？　みたいに引っかかることはなかったです。
また、途中途中に補足ポイントやコラムなどもあるので、私みたいにWeb技術の知識が乏しい人間でも分かりやすく読むことができました。

残念だったところ

TypeScriptについての解説は少し

TypeScriptだけで一冊の本が出来上がりますし、そもそもVue3についての本なので、ここは仕方ありませんが、TypeScriptについての説明は、基礎的なことだけでした。

ただ、最低限な知識は書かれてますし、TypeScript知らなくても、「なるほどこういうことね。」
みたいに、なんとなく分かりますので、先にTypeScript勉強しなくても大丈夫です。

プロジェクト作らせすぎ

本の中で何度もVueプロジェクトを作るよう指示がはいります。
１章に１度作るくらいならいいんですが、同じ章の中で何度もプロジェクトを作ることになります。
これ使いまわしたらいいんじゃないかな？　と思いますし、実際に私はプロジェクト作成の指示を無視して使いまわしていました。
一つのアプリケーション作成を通して、様々な知識が学べるみたいな構成だったらいいなとは感じました。

第３章のリアクティブシステムが最新バージョンで違う動きをする

第３章のリアクティブシステムの掲載内容がVueのバージョンアップにより、書籍と違う動きをします。
アマゾンのレビューを見ると多くの人がここで、混乱しているようです。
私もご多分に漏れず、ここで一度躓きました。
もっと分かりすく書籍ページにこの事を書いておいて欲しかったです。

これから版が新しくなったら修正されるとは思いますが、これからこの本で学習する方はご注意ください。

■書籍ページでの質問
https://wings.msn.to/index.php/-/A-06/978-4-297-13072-5/

結果：良書です。

以上、「vue3 フロントエンド開発の教科書」についてのレビューでした。
色々書きましたが、とても良書だと思います。

Vueの最新知識を学びたい方へはおススメです。
この本を読んで、Webアプリケーションの作成に取り組みましょう。

AMAZON

楽天

-Vue.js, おすすめ書籍
-, , , ,