VueJS - 導入

こんにちは、Web開発者の志望者たち！このエキサイティングな旅にあなた们を案内できることを嬉しく思います。10年以上のプログラミング指導経験がある者として言えますが、Vue.jsは最も初心者に優しいフレームワークの一つです。では、一緒にVue.jsが世界の開発者たちの好みを集める理由を探ってみましょう！

VueJS - Introduction

Vue.jsとは？

Vue.jsは、ユーザーインターフェースを構築するための進化的なJavaScriptフレームワークです。これはちょっと怖い響きがあるかもしれませんが、便利なガジェットが詰まったツールボックスと考えればいいでしょう。インタラクティブなウェブサイトの作成が簡単になります。

初めてVue.jsに遭遇したとき、レゴブロックを組み立てることを思い出しました。小さな、扱いやすいパーツから段々と素晴らしいものを組み立てていく。それがVue.jsの美しさです。親しみやすく、柔軟で、強力です。

Vue.jsを選ぶ理由は？

学びやすい：JavaScriptが言語であれば、Vue.jsはその親しみやすい方言であり、簡単に習得できます。
柔軟性：シンプルなウィジェットから複雑なアプリケーションまで、あなたのニーズに対応します。
パフォーマンス：軽量で高速、ウェブ開発におけるスポーツカーです。
サポートコミュニティ：困ったときにはいつも誰かが助けてくれます。

では、コードを書いてみましょう！

最初のVue.jsアプリケーション

例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>私の最初のVueアプリ</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>

<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
}
})
</script>
</body>
</html>

出力

このHTMLファイルをブラウザで開くと以下が表示されます：

Hello, Vue!

コンソールの詳細

ブラウザのコンソールを開いてもエラーは表示されません。これでまずは良し！

コードの解析

このコードを楽しみに解剖してみましょう：

HTML構造：基本的なHTMLドキュメントです。何も怖いものはありません！
Vue.jsスクリプト：
```
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
```
この行はVue.jsをパーティに招待するようなものです。CDNからVue.jsライブラリをロードします。
アプリケーションのコンテナ：
```
<div id="app">
{{ message }}
</div>
```
この<div>は私たちのVueアプリが存在する場所です。二重のカッコ{{ }}はVueが「ここに動的なコンテンツを入れます」と言う方法です。
Vueインスタンス：
```
var app = new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
}
})
```
ここで魔法が起きます！もう少し詳しく見てみましょう：

new Vue({...})は新しいVueインスタンスを作成します。
el: '#app'はVueにIDが'app'のDOM要素に接続するように指示します。
data: { message: 'Hello, Vue!' }はVueにデータのバックパックを持たせるようなものです。

インタラクティブにする

少しスパイスを加えましょう。アプリがユーザーの入力に応答するようにします。

例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>インタラクティブなVueアプリ</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input v-model="message">
<p>メッセージは：{{ message }}</p>
</div>

<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
}
})
</script>
</body>
</html>

出力

入力フィールドに「Hello, Vue!»が初期表示され、下に以下が表示されます：

メッセージは: Hello, Vue!

入力フィールドに文字を入力すると、下のメッセージがリアルタイムで更新されます！

コンソールの詳細

コンソールにはエラーが表示されません。コンソールにapp.messageと入力すると、メッセージの現在値が表示されます。

ここで何が起きている？

v-model：このVueディレクティブはフォーム入力に二方向のデータバインディングを生成します。入力フィールドと私たちのmessageデータが魔法の弦で繋がっているようなものです。
リアルタイム更新：Vueはデータが変更されたときに自動的にDOMを更新します。手動でのDOM操作は不要！

Vueのメソッド

アプリに一些の行動を追加してみましょう。

例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>メソッドを持つVue</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">メッセージを反転</button>
</div>

<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
},
methods: {
reverseMessage: function() {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>

出力

以下が表示されます：

Hello, Vue!
[メッセージを反転]

ボタンをクリックするとメッセージが反転します！

コンソールの詳細

コンソールにapp.reverseMessage()と入力すると、ボタンをクリックしたときと同じようにメッセージが反転します！

メソッドの理解

メソッドオブジェクト：アプリに行動を追加するための関数を定義します。
v-on:click：このディレクティブはボタンにイベントリスナーを追加します。クリックするとreverseMessageメソッドが呼び出されます。
this.message：Vueのメソッド内ではthisはVueインスタンスを指し示し、データにアクセスし変更することができます。

Vueの反応性が動作中

私たちが今見たのはVueの反応性システムが動作しているところです。データが変更されると、Vueは自動的にDOMを更新します。書類を変更したら即座にホワイトボードを更新してくれる勤勉なアシスタントがいるようなものです。

結論

おめでとうございます！あなたは素晴らしいVue.jsの世界への第一歩を踏み出しました。基本のVueインスタンスの作成、データの操作、メソッドを通じてのインタラクティブ性を学びました。

覚えるコードは料理を学ぶのと似ています。まずはシンプルなレシピ（私たちの例）から始まり、次第に複雑で素晴らしいアプリケーションを驚かせるまでになります！

次のレッスンでは、計算プロパティやライフサイクルフックなどのVueの機能を探求します。その間、学んだことを実験してみてください。メッセージを変更したり、新しいデータプロパティを追加したり、新しいメソッドを作成してみてください。遊ぶほど学びます！

未来のVueのマスター们、ハッピーコーディング！??‍??‍?

Credits: Image by storyset