VueJS - テンプレート：入門者のガイド

こんにちは、未来のVue.jsスーパースター！このエキサイティングな旅にあなたを案内できることを嬉しく思っています。コンピュータサイエンスを教えてきた者として、Vue.jsは最も初心者向けのフレームワークの一つであると断言できます。では、シートベルトを締めて、一緒に潜りましょう！

Vue.jsのテンプレートとは？

コードを書き始める前に、Vue.jsのテンプレートとは何かを理解しましょう。これはあなたのウェブページの骨組みのようなものです。HTMLの構造を定義し、Vue.jsの魔法を加えて動的でインタラクティブにする場所です。

基本構造

以下は簡単なVue.jsのテンプレートです：

<div id="app">
{{ message }}
</div>

この例では、{{ message }}はVue.jsの特別なシンタックスである「インテレポレーション」です。これはプレースホルダーとして働き、Vue.jsが実際のデータで置き換えます。

以下に動作を見てみましょう：

<div id="app">
{{ message }}
</div>

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

このコードを実行すると、「Hello, Vue!」がページに表示されます。魔法のようですね？テンプレートの{{ message }}は、Vueインスタンスのデータのmessageの値に置き換えられます。

ディレクティブ：Vueの特別な指示

さて、ディレクティブについて話しましょう。ディレクティブはv-で始まる特別な属性で、Vue.jsにどのように振る舞うか指示します。これはまるでHTMLに魔法をかけるとても小さな魔法使いのようです！

v-bind: 動的属性

v-bindディレクティブは、属性を式動的にバインドするために使用されます。これは非常に一般的で、ショートカットもあります：:。

<div id="app">
<a v-bind:href="url">クリックしてね！</a>
<!-- ショートカット -->
<a :href="url">クリックしてね！</a>
</div>

<script>
new Vue({
el: '#app',
data: {
url: 'https://vuejs.org/'
}
})
</script>

この例では、<a>タグのhref属性は、Vueインスタンスのデータのurlの値動的に設定されます。

v-if, v-else-if, v-else: 条件レンダリング

これらのディレクティブを使用すると、式の真偽に基づいて要素を条件付きでレンダリングできます。

<div id="app">
<p v-if="seen">Now you see me</p>
<p v-else>Now you don't</p>
</div>

<script>
new Vue({
el: '#app',
data: {
seen: true
}
})
</script>

seenをfalseに変更すると、魔法が起きます！

v-for: リストレンダリング

v-forディレクティブは、配列に基づいてアイテムのリストをレンダリングするために使用されます。

<div id="app">
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
</div>

<script>
new Vue({
el: '#app',
data: {
todos: [
{ text: 'JavaScriptを学ぶ' },
{ text: 'Vueを学ぶ' },
{ text: '素晴らしいものを構築する' }
]
}
})
</script>

これにより、タスクのリストがレンダリングされます。<li>要素は、todos配列の各アイテムに対して作成されます。

イベント処理とv-on

v-onディレクティブは、DOMイベントをリスンし、それがトリガーされたときにJavaScriptを実行するために使用されます。これは非常に便利で、ショートカットもあります：@。

<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">メッセージを反転</button>
<!-- ショートカット -->
<button @click="reverseMessage">メッセージを反転</button>
</div>

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

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

双方向バインディングとv-model

v-modelディレクティブは、フォーム入力要素やコンポーネントに対して双方向バインディングを作成します。

<div id="app">
<input v-model="message">
<p>メッセージは: {{ message }}</p>
</div>

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

入力フィールドに文字を入力すると、メッセージがリアルタイムで更新されます。魔法のようですが、もっと良いです。それはVue.jsです！

計算プロパティとウォッチャー

計算プロパティ

計算プロパティは、他のプロパティに基づいて計算されるパワフルなデータプロパティです。

<div id="app">
<p>元のメッセージ: "{{ message }}"</p>
<p>計算された反転メッセージ: "{{ reversedMessage }}"</p>
</div>

<script>
new Vue({
el: '#app',
data: {
message: 'Hello'
},
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})
</script>

reversedMessageプロパティは常にmessageの反転であり、messageが変更されたときに自動的に更新されます！

ワッチャー

ウォッチャーは、データの変更を監視し、変更が発生したときにアクションを実行する Vigilant Guardians です。

<div id="app">
<p>
はい/いいえの質問をどうぞ：
<input v-model="question">
</p>
<p>{{ answer }}</p>
</div>

<script>
new Vue({
el: '#app',
data: {
question: '',
answer: '質問には通常、質問符が含まれています。;-)'
},
watch: {
question: function (newQuestion, oldQuestion) {
this.answer = 'タイプを止めるのを待っています...'
this.debouncedGetAnswer()
}
},
created: function () {
this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
},
methods: {
getAnswer: function () {
if (this.question.indexOf('?') === -1) {
this.answer = '質問には通常、質問符が含まれています。;-)'
return
}
this.answer = '考え中...'
var vm = this
axios.get('https://yesno.wtf/api')
.then(function (response) {
vm.answer = _.capitalize(response.data.answer)
})
.catch(function (error) {
vm.answer = 'エラー！APIに接続できません。' + error
})
}
}
})
</script>

この例では、questionプロパティを監視しています。変更があると、answerを更新し、APIから新しい回答を取得するメソッドを呼び出します。

メソッド表

以下に、私たちがカバーしたメソッドの表を示します：

メソッド	説明	例
v-bind	動的属性バインド	<a v-bind:href="url">
v-if	条件レンダリング	<p v-if="seen">Now you see me</p>
v-for	リストレンダリング	<li v-for="item in items">{{ item }}</li>
v-on	イベント処理	<button v-on:click="doSomething">
v-model	双方向データバインディング	<input v-model="message">

そして、これでVue.jsテンプレートの素晴らしい世界への初歩が踏み出されました。練習が完璧を生むことを忘れないでください。これらの概念を試してみましょう。間もなく、素晴らしいVue.jsアプリケーションを構築するでしょう。ハッピーコーディング！

Credits: Image by storyset