JavaScript

Vue.js is a lightweight JavaScript framework that is easy to learn and use, designed for building reusable component-based user interfaces.

Vue.js

Vue.jsとは
CDNの Vue.jsを使用する
Sample
Index

Vue.jsとは

　Vue.js（ビュージェイエス）は、ユーザインターフェースの構築に使われるJavaScriptフレームワークです。

宣言的レンダリング: Vue.jsでは、テンプレートシンタックスを用いてHTMLを宣言的に記述できます。これにより、データとDOMの結びつけが簡単に行えます。
コンポーネントベースのアーキテクチャ: アプリケーションを再利用可能なコンポーネントに分割して構築できます。これにより、コードの管理と保守が容易になります。
リアクティブデータバインディング: Vue.jsはリアクティブシステムを採用しており、データの変更が自動的にビューに反映されます。
ディレクティブ: Vue.jsには、v-bindやv-forなどの特定のディレクティブを使用して、DOMの属性やイベントリスナをデータにバインドすることができます。
エコシステム: Vue RouterやVuexなど、公式のライブラリやツールが充実しており、単一ページアプリケーション（SPA）や状態管理を簡単に実現できます。
柔軟性: 小規模なプロジェクトから大規模なアプリケーションまで対応できる柔軟性があります。また、他のライブラリやプロジェクトと統合しやすい設計になっています。

　これらの特徴により、Vue.jsは開発者にとって学びやすく、効率的に使えるフレームワークとして広く利用されています。

CDNの Vue.jsを使用する

　CDNを利用することで、難しい環境設定をすることなく Vue.jsを試すことができます。とりあえず CDNで使ってみて本格的に開発する際に環境構築してもいいのかもしれません。

　CDNリンクは、ページ上部の <head>タグの中に <script>タグを使って読み込みます。CDNにはいくつかの種類がありますが、とりあえず２種類だけご紹介します。

HTML

<!-- 開発環境向け -->
<head>
	<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<!-- 本番環境向け -->
<head>
	<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
</head>

　この２つの主な違いは、開発環境向けと本番環境向けのビルドであることです。

vue.global.js (開発環境向け)

用途: 開発中に使用されるファイル。
デバッグ機能: デバッグのための追加の警告やエラーメッセージが含まれており、開発者が問題を特定しやすくなっています。
未圧縮: ソースコードが読みやすい形で提供されているため、デバッグやコードの理解がしやすいです。
ファイルサイズ: 通常、圧縮されていないため、ファイルサイズが大きくなります。

vue.global.prod.js (本番環境向け)

用途: 本番環境で使用されるファイル。
最適化: デバッグ用の警告やエラーメッセージが削除され、パフォーマンスが最適化されています。
圧縮: コードが圧縮されており、ファイルサイズが小さく、読み込み速度が速くなります。
パフォーマンス: より高速に動作するように最適化されており、本番環境での使用に適しています。

　開発中は vue.global.js を使用し、本番環境にデプロイする際には vue.prod.js を使用することが推奨されます。

Sample

HTML

<!-- 開発環境向け -->
<head>
	<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<!-- 本番環境向け -->
<head>
	<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
</head>

HTML

<div id="app">
	{{ message }}
</div>
<script>
	<!-- JavaScript code here -->
</script>

JavaScript

const { createApp } = Vue;

createApp({
	data() {
		return {
			message: 'Hello, Vue 3!'
		}
	}
}).mount('#app');

HTMLファイル

<div id="app">: ここに Vue.jsによって動的に表示されるメッセージが表示されます。
{{ message }}: これは Vueのテンプレートシンタックスで、データバインディングによって messageプロパティの内容が表示されます。

JavaScriptファイル

const { createApp } = Vue;: Vue 3の createApp関数をインポートします。
createApp({ ... }).mount('#app');: 新しいVueアプリケーションを作成し、#app（IDがappの要素）にマウントします。
data() { return { message: 'Hello, Vue 3!' } }: データ関数を定義し、messageというプロパティに 'Hello, Vue 3!' という文字列を設定します。

　このサンプルを実行するには、作成した index.htmlファイルをブラウザで開くだけです。ページが正しく表示されると、Hello, Vue 3!というメッセージが表示されます。