Vue.jsの全体像を理解してみよう！

Vue.jsは、創始者の Evan You が2014年にリリースされたJavaScriptのフレームワークです。

本教材は、Vue.jsの全体像を段階的に理解するための教材になります。

Vue.jsは、どのようなフレームワークなのか。昨今のWebフロントエンド開発の周辺知識/Webサイト/Webアプリでよく利用されているjQueryなどの類似技術との違いなどを理解していきます。

本教材が終えたらどのような状態になっているか

• Vue.jsとはどのようなフレームワークなのか理解できるようになる
• jQueryや他のフレームワークとの違いが理解できるようになる
• 昨今のWebフロントエンドの開発事情を理解できるようになる
• どのような場面でフレームワークを採用するかを判断できるようになる

受講における必要条件

• HTML / CSS の基礎知識
• JavaScriptの基礎知識

本教材の対象者

• Vue.jsを触り始めたが、どこから勉強を始めるかわからない方
• JavaScript/jQueryで簡単なプログラムなどは作ったことがあるが、Vue.jsはどのようなフレームワークなのか知りたい方
• Vue.jsのドキュメントやネットの情報が多いため、どこから進めてよいかわからない方
• Vue.jsの周辺ツールや開発環境を知りたい方

学ばないこと

本教材は、Vue.jsの全体像を把握することが目的なっているため、JavaScript / HTML / CSS の解説は詳しくしていません。

全体像を段階的に説明する教材になっているため、Vue.jsでWebアプリを作って学んでいく教材ではありません。

本教材の対応バージョン

• Vue: 3系
• Vuex: v4系
• Vue Router: v4系
• Vue CLI: 4系
• pinia: 2系

本教材はVue3をベースに解説しています。

Vue2の機能については、Vue3で廃止になった機能以外を行います。学習を進めるならVue3のバージョンで進めることをおすすめします。

本教材で質問対応可能なOSや環境

• macOS（筆者の確認環境）

Windowsユーザの方

筆者環境が macOS のため、本書では Windows の方向けの説明は省略しています。

動作保証はありませんが、以下の方法で学習自体は可能です。

• カリキュラム内のコマンドラインをWindows向けに読み替え実行
• Cloud9などの別環境を利用する

Windows に関しては私の方から十分な質問対応ができかねますので、ご了承ください。

執筆者について

札幌在住のフロントエンジニア。

Movable Typeを用いたサイトのテンプレート設計・実装を得意としている。

フロントエンド全般を担当し JavaScript を用いたWebサイト・Webアプリなどを Vue.js や Reactを利用した実装にも携わっている。

js workshop sapporo というJavaScriptにフォーカスしたハンズオン形式の勉強会を主催。

著書 : プロフェッショナルWebプログラミング Vue.js

教材を執筆する目的

本教材では、Vue.jsとはどのようなフレームワークの全体像を理解を目的した教材になります。

読者層としてはVue.jsは知っているが触ったことがない方や導入することで何が変わるか知りたい方が対象になります。

Vue.jsの日本コミュニティは活発であり、ドキュメントも日本語で情報も豊富です。

しかし、情報が多いとどこから進めればいいかわからないこともあります。この教材で段階的に全体像を段階的に学んでいきます。

目次

0章 はじめに

本教材を進める上での何を学ぶかを解説していきます。

1章 Vue.jsとは？

• Vue.jsの歴史
• Vue.jsのコードネームについて
• どのようなフレームワークなのか？
• Vue.jsの設計思想

2章 昨今のWebフロントエンド開発事情

• Webアプリケーション開発の複雑化
• WebサイトにおけるモダンなJavaScriptを取り入れた手法
• ES2015以前のJavaScriptの問題点と解決
• React:Vue.js:Angularなどのフレームワークが登場

3章 Vue.jsを採用される理由

• Vue.jsの特徴

4章 Vue.jsのエコシステム

• コアの概念と機能について
• Vue.jsの基本構文 - 前編
• Vue.jsの基本構文 - 後編
• Vue.jsの関連技術 - 前編
• Vue.jsの関連技術 - 中編
• Vue.jsの関連技術 - 後編

5章 類似技術との比較

• Vue.jsとjQueryとの比較
• Vue.jsとReactとの比較

6章 フロントエンド周辺知識の学習

• ECMAScriptを学ぶ
• APIについて学ぶ
• テストについて学ぶ

次の章では、Vue.jsとは？から解説します。