VueJSチュートリアル: Vue.jsを始める

こんにちは、Web開発者を目指す皆さん！このエキサイティングな旅にご案内できることを嬉しく思います。コンピュータサイエンスを10年以上教えてきた者として、Vue.jsは最も初心者に優しいフレームワークの一つであると言えます。では、一緒に魔法を創りましょう！

VueJS - Home

Vue.jsとは？

Vue.jsは、ユーザーインターフェースを構築するための進化的なJavaScriptフレームワークです。では、これは普通の言葉でどうなるのでしょうか？家を建てることを考えてみてください。Vue.jsは、夢の家を簡単に組み立てられる pré-fabricatedの壁や部屋のセットのようなものです。複雑なWebアプリケーションの構築をLEGOブロックを組み立てるように簡単にします！

Vue.jsの理由

学びやすい
柔軟で拡張可能
素晴らしいパフォーマンス
すごいコミュニティサポート

前提条件

始める前に、必要なものを確認しましょう：

HTMLとCSSの基本理解
JavaScriptに親しんでいる（専門家でなくても大丈夫です！）
現代のWebブラウザ（ChromeやFirefoxをお勧めします）
テキストエディタ（VS Codeが個人的に好きです）

最初のVue.jsプロジェクトの設定

まずは簡単な「Hello, Vue!」アプリを作成しましょう。まず、プロジェクトにVue.jsを含めます。これには、HTMLファイルにscriptタグを追加するだけです。

<!DOCTYPE html>
<html lang="ja">
<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>
new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
}
})
</script>
</body>
</html>

これを分解すると：

Vue.jsライブラリをCDNリンクを使って含めます。
IDが「app」の<div>を作成します。これがVueアプリが存在する場所です。
{{ message }}を使ってデータを表示します。これはインテポレーションと呼ばれ、Vueでデータを表示する方法です。
<script>タグ内で新しいVueインスタンスを作成し、IDが「app」の要素をターゲットに指定します。
dataオブジェクトにmessageプロパティを定義します。これはVueがアプリで使用するデータです。

このファイルを保存してブラウザで開くと、「Hello, Vue!」が表示されます。おめでとうございます！あなたは刚刚Vue.jsアプリケーションを作成しました！

Vueディレクティブ: インタラクティブにする

基本を理解したので、アプリを少しインタラクティブにしてみましょう。Vueは、Vueにどのように振る舞うか指示する特別な属性であるディレクティブを提供します。いくつかの一般的なものを見てみましょう：

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>

今、インプットフィールドにタイプすると、メッセージがリアルタイムで更新されます。魔法のようですね？

v-ifとv-else: 条件付きレンダリング

時々、条件に基づいて要素を表示または非表示にしたいことがあります。その場合、v-ifとv-elseが役立ちます：

<div id="app">
<button @click="toggleVisibility">メッセージをトグル</button>
<p v-if="isVisible">今見えます！</p>
<p v-else>今見えません！</p>
</div>

<script>
new Vue({
el: '#app',
data: {
isVisible: true
},
methods: {
toggleVisibility() {
this.isVisible = !this.isVisible
}
}
})
</script>

この例では、v-ifとv-elseを使って2つのメッセージをトグルします。@clickディレクティブは、クリックイベントをリスンするv-on:clickの省略形です。

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

リスト項目を表示する必要があるときは、v-forが便利です：

<div id="app">
<ul>
<li v-for="fruit in fruits">{{ fruit }}</li>
</ul>
</div>

<script>
new Vue({
el: '#app',
data: {
fruits: ['りんご', 'バナナ', 'チェリー', 'ドリアン']
}
})
</script>

これで、果物のリストが表示されます。簡単ですね！

Vueのメソッド

メソッドは、Vueインスタンスに振る舞いを追加する関数です。シンプルなカウンターを作成してみましょう：

<div id="app">
<p>カウント: {{ count }}</p>
<button @click="increment">インクリメント</button>
<button @click="decrement">デクリメント</button>
</div>

<script>
new Vue({
el: '#app',
data: {
count: 0
},
methods: {
increment() {
this.count++
},
decrement() {
this.count--
}
}
})
</script>

ここで、incrementとdecrementという2つのメソッドを定義しています。これらのメソッドは、それぞれのボタンがクリックされたときに呼ばれ、countデータプロパティを更新します。

コンピュテッドプロパティ: スマートな計算

コンピュテッドプロパティは、依存関係に基づいてキャッシュされる複雑な計算を行うデータプロパティのスーパーチャージ版です。例を見てみましょう：

<div id="app">
<input v-model="firstName">
<input v-model="lastName">
<p>フルネーム: {{ fullName }}</p>
</div>

<script>
new Vue({
el: '#app',
data: {
firstName: '',
lastName: ''
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName
}
}
})
</script>

ここで、fullNameはfirstNameとlastNameを結合するコンピュテッドプロパティです。依存関係のいずれかが変わると、自動的に更新されます。

Vue.jsメソッドの摘要

ここで説明したVue.jsメソッドの摘要を以下に示します：

メソッド	説明	例
data	Vueインスタンスのデータを保持	`data: { message: 'Hello' }`
methods	行動を追加する関数を含む	`methods: { greet() { alert('Hi!') } }`
computed	依存関係に基づいてキャッシュされるプロパティ	`computed: { fullName() { return this.firstName + ' ' + this.lastName } }`
el	Vueインスタンスをマウントする要素を指定	`el: '#app'`

結論

おめでとうございます！Vue.jsの素晴らしい世界への第一歩を踏み出しました。Vueインスタンスの作成、ディレクティブの使用、メソッドとコンピュテッドプロパティを通じての行動追加についての基本をカバーしました。

コードを学ぶことは新しい言語を学ぶのと同じです。練習と忍耐が必要です。すぐにすべてが理解できるわけではありません。実験を続け、構築を続け、最も重要なのは、楽しむことです！

次のレッスンでは、コンポーネントについて深く掘り下げます。その間、ハッピーコーディングを！

Credits: Image by storyset

次のチュートリアル:

VueJS - 概要