v-if
v-if
v-ifで条件を指定することで、その条件がTrueの場合のみ、その要素が描画されます。
つまり、v-ifを使うことで、表示する要素を切り替えることができます。
v-ifは、v-elseやv-else-ifと組み合わせて使うことができます。
条件を満たしている場合はＡ、それ以外の場合はＢを表示するといったことが実現できます。
参考
v-ifを使ってみる
前回作ったカウンターに、v-ifで何かを表示してみます。
前回のカウンタは↓
カウンターの値が10以上のとき、「10以上!!」と表示してみます。
<div v-if="count >= 10"> 10以上!! </div>
<div>を追加して、その中に「10以上!!」と書きます。
この<div>にv-ifを使っています。
v-ifには、条件を渡します。
今回は、カウンターが10以上のとき、ということで、count >= 10としています。
これで、カウンターが10以上のとき、「10以上!!」と表示されるようになりました。
↓ ↓ ↓
終わり
Vue でカウンタをつくる
Vue でカウンタコンポーネントを作る
カウンタコンポーネントを作成していきます。
ファイルは、src/components/Counter.vueとします。
コンポーネントで使うデータを宣言
Vueのコンポーネント内で使うデータは、export default内で、data()メソッドの返り値とする必要があります。
ここでは、カウンタ用のcountを宣言します。
data() { return { count: 0 }; },
これで、テンプレートの中で、countを利用できるようになりました。
テンプレートで、countの値を表示するようにします。
<template> <h1> Counter </h1> <div> {{ count }} </div> </template>
コンポーネントで使うメソッドを宣言
続いて、コンポーネント内で利用するメソッドを宣言していきます。
コンポーネント内で使うメソッドは、export default内に、methods{}を書いてその中に記述していきます。
ここでは、カウンタを増減させるための、increment()とdecrement()を宣言します。
methods: { increment() { this.count++; }, decrement() { this.count--; if (this.count < 0) this.count = 0 } }
これで、テンプレート内で、increment()とdecrement()が利用できるようになりました。
テンプレートに、増減用のボタンを追加します。
<template>
<h1> Counter </h1>
<div>
<button @click="decrement"> - </button>
{{ count }}
<button @click="increment"> + </button>
</div>
</template>
カウンタ完成
モジュールのコード全体です。
<template>
<h1> Counter </h1>
<div>
<button @click="decrement"> - </button>
{{ count }}
<button @click="increment"> + </button>
</div>
</template>
<script>
export default {
name: "Counter",
data() {
return {
count: 0
};
},
methods: {
increment() {
this.count++;
},
decrement() {
this.count--;
if (this.count < 0) this.count = 0
}
}
};
</script>
↓のようにカウンタが表示されます。
終わり
Vue を触ってみる
Vue CLI で作ったプロジェクトのファイルを見てみよう
まずは、main.jsを見てみましょう。
import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app')
createApp() は、Vueのインスタンスを作成することで、Vueのアプリケーションが始まります。
App.vueをインポートして、mount()してますので、App.vueを見てみます。
<template> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> </template> <script> import HelloWorld from './components/HelloWorld.vue' export default { name: 'App', components: { HelloWorld } } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
<template> ~ </template>、 <script> ~ </script>、 <style> ~ </style>と分かれています。
それぞれ、テンプレート構文で要素のタグ等を書く部分、スクリプトを書く部分、スタイルを書く部分となっています。
コンポーネントとして、共通部分を別ファイルに書き出すこともできます。
その場合、<script> ~ </script> でインポートして、exports defaultの中で、componentsとしてエクスポートすることで、テンプレートの中で使えるようになります。
今回の例だと、HelloWorldコンポーネントがそれにあたります。
カスタマイズしてみる
まずは、コンポーネントを追加してみます。
src/components/HelloVue.vueを作成します。
<template>
<div>
<h1>HELLO VUE !!</h1>
<div>
{{msg}}
</div>
</div>
</template>
<script>
export default {
name: 'HelloVue',
props: {
msg: String
}
}
</script>
propsとは、タグの引数のことです。
この HelloVue コンポーネントは、msgという引数をとり、"HELLO VUE !!"という文字列とmsgの内容を表示するコンポーネントです。
App.vueでHelloVueコンポーネントを利用します。
<template> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> <HelloVue msg = "VueVueVueVueVueVue" /> </template> <script> import HelloWorld from './components/HelloWorld.vue' import HelloVue from './components/HelloVue.vue' export default { name: 'App', components: { HelloWorld, HelloVue } } </script>
これで画面は↓のようになります。
"HELLO VUE !!"という文字列とmsgの内容がページ下部に表示されました。
終わり
Vue を使ってみる
Vue CLI
Vue には、CLIツールが提供されており、それが Vue CLI です。
Vue CLI を使うことで、CLI で Vue プロジェクトの作成等の操作が可能です。
プロジェクト作成時には、Vue のバージョン、npm or yarn どちらを使うか、 Babel や Lintツール 等の設定もできます。
Vue CLI で Vue を始める
Vue CLI を使って、Vue プロジェクトを作成していきます。
Vue CLI インストール
まずは、npmを使って、Vue CLI をインストールします。
-gオプションを使うことで、グローバルにインストールします。
(プロジェクト外でも、コマンド利用可能)
$ npm install -g @vue/cli
Vue CLI でプロジェクト作成
Vue CLI を使ってプロジェクトを作成するのはとても簡単です。
作業ディレクトリに移動して、vue createコマンドを利用するだけです。
vue createコマンドは引数で、ディレクトリを指定できます。
$ vue create .
実行すると、いろいろな設定をしていきます。
質問が繰り返されるので適当に答えていけばOKです。
今回は、Default (Vue 3) としました。
パッケージマネージャーには、npmを選択しています。
Vue CLI v4.5.13 ? Generate project in current directory? Yes Vue CLI v4.5.13 ? Please pick a preset: Default (Vue 3) ([Vue 3] babel, eslint) ? Pick the package manager to use when installing dependencies: NPM Vue CLI v4.5.13 ✨ Creating project in /app. ⚙️ Installing CLI plugins. This might take a while...
プロジェクトの作成が完了すると、次のようなメッセージが表示されます。
🎉 Successfully created project app. 👉 Get started with the following commands: $ npm run serve http://localhost:8080/
ここまでで、プロジェクトの作成が完了しました。
ブラウザから、http://localhost:8080/にアクセスすると、↓のような画面が表示されます。
終わり
Vue.js
Vue.js
Vue.jsはシングルページアプリケーションを構築できるWebフレームワークです。
Vue.jsはオープンソースなフレームワークで、コミュニティ主体で開発が進められています。
Vue.jsを実行するには、Node.jsを必要とします。
Vue.jsのインストールは、Node.jsのパッケージマネージャーであるnpmを使ってインストールできます。
また、公式CLIツールが提供されており、それを利用することで簡単にプロジェクトの作成等が行えます。
Vue.jsの特徴
テンプレート構文
Vue.jsではHTMLベースのテンプレート構文を利用できます。
<template></template>タグで囲まれた中に、HTMLのように要素を配置していくことができます。
この<template>タグの中では、二重中括弧（{{ }}）を使うことで、Vueの変数を展開することができます。
また、この<template>タグの中では、Vueで用意されているディレクティブを利用できます。
リアクティブシステム
Vue.jsは、リアクティブシステムを有しています。
リアクティブとはどういうことかというと、リアクティブな変数が変化した場合、それに対応するViewも自動で更新されるということです。
例えば、状態（status）をViewで表示していて（{{status}}のように）、この状態が変化した場合、表示部分が自動で更新されるわけです。
終わり
シングルページアプリケーション (SPA)
シングルページアプリケーション (SPA) とは
シングルページアプリケーション (Single Page Application, SPA) とは、単一のページで動作するWebアプリケーションのアーキテクチャです。
単一のページで動作するため、ページ遷移がなく、UXを向上させることができます。
ページは一つですが、JavaScriptによってDOMを動的に書き換えることで、ページ遷移なく様々なコンテンツを表示することができます。
また、動的なWebページを作成するのも容易です。
SPAでは、初回リクエスト時に、最低限のHTMLやCSSと、SPAを動作させるためのJavaScriptが返ってきます。
その後は、更新リクエストで、差分が返ってきて、JavaScriptによってDOMが動的に書き換えられます。
SPAのWebフレームワークとして、React や Vue があります。
ReactやVueは、Node.js上で動作します。
終わり
Webサーバー
Webサーバー
Webサーバーは、ユーザー（クライアント）からのリクエストを受けて、処理を行い、結果を返します。
結果としては、HTML,CSS,JSなどのファイルが返されてます。
ブラウザからインターネット上のWebページにアクセスした場合、Webページがファイルを返します。
その返ってきたファイルをブラウザで表示することで画面に表示されています。
ユーザーからのリクエストでは、どのファイルが欲しいかを指定します。
するとWebサーバーはそのファイルを返します。
また、スクリプトを実行し、その結果を返すようにすることもできます。
サーバーサイドで処理が必要な場合は、このようなスクリプトを利用することになります。
終わり
