Vue.js3とは？特徴・環境構築のやり方を解説 │ TechMania

1. Vue.js3とは？
- 1.1. Vue.jsの歴史
- 1.2. フレームワークとは
  - 1.2.1. フロントエンドフレームワークとは
2. Vue.js3の特徴
3. VSCodeの拡張機能
- 3.1. 推奨エディタ
- 3.2. Vue Language Features (Volar) for JavaScript
  - 3.2.1. シンタックスハイライト
  - 3.2.2. インテリセンス補完
4. 開発環境構築
5. 開発用サーバの起動
- 5.1. Webブラウザでアクセス
6. まとめ

Vue.js3とは？

Vue.js3とは2020年9月にリリースされたVue.jsのバージョンです。従来のバージョンよりも軽量になったことで処理速度向上しました。また、従来で抱えていたJavaScriptとTypeScriptの互換性の問題を解消したことで保守性も向上しました。また、Composition APIなどの新機能も実装され性能が格段に向上しました。

Vue.jsの歴史

Vue.jsはEvan You（エヴァンヨー）氏によって作成されたJavaScriptフレームワークです。2014年に別のJavaScriptフレームワークAngularJSを元により軽量なフレームワークとして作られました。また2020年9月にVue.js 3がリリースされ、Vue.js 2から使用されていたTypeScriptがより軽快に使用できるようになりました。

プログラミングの基礎からサイト制作まで
↓実践力が身につくプログラミングスクール↓

≫モニター割引キャンペーン実施中！≪

フレームワークとは

フレームワークとは特定の機能を実行するためのライブラリと違い、アプリケーション全体の骨組みと言われていて、事前に必要な定型コードが記述されています。そのため開発するアプリケーションに必要な機能のみプログラムを書くことによって、大幅な開発労力を削減でき開発効率が上がります。

フロントエンドフレームワークとは

フロントエンドは直接ユーザーが触れる部分です。つまりVue.jsはWeb開発において画面を開発をするためのフレームワークです。その他のフレームワークはバックエンドフレームワーク、CSSフレームワークなどがあります。フレームワークの詳細についてはこちらのサイトも参考にしてみて下さい。

【2023年版】JavaScriptフレームワーク徹底比較！おすすめ7選

そもそもユーザ登録一つにしてもどのような流れで登録されているのか、疑問に持つ方もいるかと思います。

まず、UIアーキテクチャと呼ばれるWebアプリケーション構造の基本はMVC(Model,View,Controller)+データベースで構成されています。

下記はショッピングサイトなどのユーザ登録を例にしてプログラム処理の流れをView→Controller→Model→データベースの順番でご説明します。

View(V) (Vue.jsの開発部分)

Viewはユーザー登録などユーザーが操作する画面のことであり、今回のテーマであるVue.jsはこのView部分を担います。(ややこしいですがViewとVueの読み方は同じです。)

まず、ユーザーの新規登録画面で名前やメールアドレスなどの情報を入力して登録ボタンを押します。

Controller(C)

ControllerはViewと後ほどご説明するModelの間にいるデータの受け渡しや指示を伝えるポジションとなります。

先ほどViewでユーザーが入力したユーザーのデータをViewからControllerが受け取り、Modelにデータを渡します。

Model(M)

Modelはデータベースとのデータの受け渡しをすることができます。

ControllerからModelへ”データベースにデータを保存しておいて”と指示を受け、受けとったユーザーのデータを、データベースに保存することによってユーザーの登録が行われています。

MVCの詳細についてはこちらのサイトも参考にしてみて下さい。

MVCモデルとは？【3分でわかる】基礎知識、メリット、デメリット

また、その他のUIアーキテクチャを下記に紹介しておきます、興味がある方は調べてみて下さい。

MVP(Model-View-Presenter)
MVVM（Model-View-ViewModel）
Flux(フラックス)

Vue.js3の特徴

これからVue.js3の特徴についていくつかご紹介させて頂きます。

SPA（シングルページアプリケーション）

従来のウェブアプリケーションではMPA(マルチページアプリケーション)と呼ばれる、画面上のボタンやリンクを押下後、サーバーに要求する度に新しいHTMLページを画面に表示させていました。

SPAはHTMLページを読み込むのは初回のみで、その代わりJavascriptで必要なデータをサーバーから非同期で取得します。

その結果画面の動作は早くなりユーザーは快適に画面操作をすることが可能になります。

双方向データバインディング

データとDOMを結びつけることをデータバインディングと呼び、この二つの要素がお互いに更新しあうことを双方向データバインディングと呼びます。

例）フォームの入力欄で入力した文字を、別の場所で同タイミングで表示させる事ができたりします。

こちらのVue.jsの公式サイトで確認できます。

コンポーネント管理

コンポーネントとは

一度記述した処理(ボタン、文章、機能)を複数のページで再利用できます。そのため使用したいコンポーネントファイルをその都度呼び出す事ができ、記述量を減らすことができます。再利用されるコンポーネントを子コンポーネントと呼び、呼び出し元のファイルを親コンポーネントと呼びます。

コンポーネントファイル

従来はHTML, CSS, JavaScriptを別々のファイルで管理していました。Vue.jsでは下記に記載したように一つのファイルでHTML, CSS, JavaScriptを管理することができるため単一コンポーネントと呼びます。

App.vue 拡張子は"ファイル名.vue"となります。

<script setup lang=”ts”>
	//JavaScript記述
	function clickButton(){
	  alert(”test”)
	}
</script>

<template>
	//HTML記述
	<div class="text">html</div>
	<div>
		<button v-on:click=”clickButton”>click!!</button>
	</div>
</template>

<style>
	//CSS記述
	.text{
		color: blue;
		font-size: 90px;
	}
</style>

その他の特徴に関しては、こちらのVue.jsの公式サイトを参考にして下さい。

VSCodeの拡張機能

推奨エディタ

Vue.jsではVisual Studio Code(VsCode)が推奨されています。推奨の詳細に関してはこちらVue.jsの公式サイト”IDEのサポート”を参考にして下さい。

Vue Language Features (Volar) for JavaScript

シンタックスハイライト

ソースコードの変数、文字列、コメントごとに異なる色やフォントで表示してコードが読みやすくなり可読性が上がります。

インテリセンス補完

変数、関数、メソッドなどのコードを入力した際に関連する文字の候補を表示してくれる機能です。そのため全てのコードを記入せず候補から選択することができ、タイプミスも減らし素早く記入できます。また、TypeScript Vue Plugin (Volar)を使用すれば、TypeScript構文のチェックにも対応できます。

開発環境構築

Node.jsのインストール

サーバーサイド側で動くJavascriptの開発環境の構築

公式サイトから、LTS推奨版(長期のサポートが保証されている)をダウンロードしましょう。ダウンロードされて起動したら、次へのボタンを押すだけで大丈夫です。

インストール確認

ターミナルでnode -vでバージョン確認できたら、インストール成功です。また、Node.jsのパッケージを管理するnpm(Node Package Manager)もnpm -vでインストール確認ができます。

プロジェクト作成

Vue.jsのインストール

npm init vue@latest を親フォルダ上で実行してインストールしますか？と質問されるので「y」を押して実行しましょう。

プロジェクト名の決定と必要な機能のインストール

プロジェクト名の決定と必要な機能のインストールをしましょう。各質問の詳細に関してはVue.jsの公式サイトを参考にして下さい。

Project name: …（プロジェクト名を決めましょう。）
Add TypeScript? … No / Yes（詳細）
Add JSX Support? … No / Yes（詳細）
Add Vue Router for Single Page Application development? … No / Yes（詳細）
Add Pinia for state management? … No / Yes（詳細）
Add Vitest for Unit Testing? … No / Yes（詳細）
Add an End-to-End Testing Solution? › No（詳細）
Add ESLint for code quality? … No / Yes（詳細）

これでインストールが完了しました。

プロジェクトの動作に必要なパッケージのインストール

ターミナル上で先ほど作成したプロジェクト名のフォルダに移動しましょう。(cd プロジェクト名でフォルダ移動できます。)フォルダへ移動後、npm install を実行して下さい。

開発用サーバの起動

Webブラウザでアクセス

npm run devコマンドでサーバ起動後、ターミナルに Local: http://localhost3000/ (3000の部分は違う数字の場合もあります。)と表示され、ブラウザでアクセスできたら成功です！

まとめ

Vue.jsはSPA、双方向データバインディング、コンポーネント管理などを利用して効率的に少ない記述量で開発することができます。また既存のアプリケーションに部分的に導入することも可能なため、ぜひ機会があれば導入してみて下さい。

2023.12.15
Other

Vue.js3とは？特徴・環境構築のやり方を解説