有名なJavaScriptフレームワークの一つに、Vue.jsというものがあります。
JavaScriptフレームワークは、SPA（シングルページアプリケーション）と呼ばれる形式のWebサービスを作成できるとして、近年非常に話題になっていますね。
フロントエンドエンジニアの求人などにおいても、
「このフレームワークの経験が何年以上」
という風に、JavaScriptフレームワークの使用経験がないと門前払いを食らってしまう可能性すらあります。
そのJavaScriptフレームワークにおいて、「３大フレームワーク」と呼ばれているのが、Angular、React、そしてVue.jsです。
その中でもVue.jsは、導入も非常に容易で、最もとっつきやすいフレームワークですので、SPA（シングルページアプリケーション）初学者には、持って来いのフレームワークと言えるでしょう。
本日は、JavaScriptフレームワークの非常に基本的な概念を確認した後、Vue.jsを用いる上での分かりやすい利点である、「双方向バインディング」という機能について、見ていきましょう。
JavaScriptに限らず、フレームワークとは、誰かがあらかじめ作ってくれてある、プログラムの部品のことです。
似た言葉に、ライブラリーというものがあります。
区別としては、フレームワークは、
「機能の大部分を既に作ってくれてあるので、自分でプログラムを書く必要があるのは一部のみ」
それに対してライブラリーは、
「小さな部品をたくさん用意してくれてあり、自分のプログラムに部分的に組み込むことができる」
といったイメージです。
フレームワークは既に、システム作成のための大枠を作ってくれてあるため、そのフレームワークのルールに従って、オリジナルの部分をプログラミングすることになります。
SPA（シングルページアプリケーション）とはその名の通り、
「単一ページで実現されているWebアプリケーション」
のことです。
皆さんが普段閲覧されているWebサイトなどは、別のページに移る際に、ページのローディングを行いますよね？
画面全体を読み込み直すため、画面全体が一回白くなって、動きが止まります。
そういった、読み込みによって画面が一度止まるようなことがないように設計されたWebサイトやWebサービスが、SPA（シングルページアプリケーション）と呼ばれるものです。
なぜページ読み込みのローディングが発生しないのかと言うと、そもそも1ページしかないので、別のページを読み込む必要がないからです。
では、ページの内容を変えたいときはどうするのかと言うと、部分的に内容の更新をします。
それによって、ページ全体を一から読み込みなおす必要がなく、ローディングのために画面が止まることを防げるのです。
そしてその部分的に内容を更新する為に用いられるのが、JavaScriptです。
このAjaxを用いると、画面全体の動きを一切止めることなく、Webサーバーと通信を行うことができるのです。
Google Maps等の地図アプリケーションにおいて地図の位置をずらしたときに、画面全体の再読み込みが行われず、地図の新たに表示される部分のみが読み込まれるような動きも、このAjaxによって実現されています。
では、JavaScriptとAjaxを用いて、自力でSPA（シングルページアプリケーション）を作ってしまえば良いではないか、と思われるかもしれませんが、それは中々難しいです。（不可能ではないですが）
少なくとも実務でそれを行うのは、開発効率が低すぎて、開発プロジェクトがうまく回らなくなってしまうでしょう。
なぜなら、SPA（シングルページアプリケーション）を一からJavaScriptを用いて作成するためには、膨大な量のJavaScriptのソースコードを記述する必要があるからです。
そのため、SPA（シングルページアプリケーション）の構築に必要な一通りの機能を既に作ってくれてあるフレームワークを用いて、開発を行う必要があるのです。
Vue.jsとは、そうったSPA（シングルページアプリケーション）の開発において用いられるJavaScriptフレームワークの一つです。
数あるフレームワークの中でも、最もシンプルかつ柔軟で、学習コストが低いフレームワークのため、非常にオススメのJavaScriptフレームワークです。
導入も非常に用意のため、JavaScriptフレームワークの導入を検討されている方は、ぜひVue.jsの導入を検討されてはいかがでしょうか。
Vue.jsの導入は、HTML内にたった1行のコードを追加するだけで完了してしまいます。
具体的には以下のようなコードです。
このたった1行のソースコードをHTML内に埋め込むだけで、Vue.jsを使い始めることが可能になります。
このソースコードを埋め込む場所としては、bodyタグを閉じる直前、すなわち、「</body>」の直前が一般的です。
そして、この
「<script src="https://cdn.jsdelivr.net/npm/vue"></script>」
という記述の直後から、Vue.jsを用いたJavaScriptの記述を行っていきます。
このVue.jsを導入することによって、どういった利点が得られるのでしょうか？
一言で言うと、ソースコードを記述する量を減らすことができます。
Vue.jsには多くの実用的な機能が備わっているのですが、分かりやすい例に
「双方向バインディング」
という機能があります。
たとえば、以下のような例を見てみましょう。
{{text}}
上記の例では、入力用テキストボックスに入力されている値に応じて、表示されるラベルの文字が変わっています。
試しにテキストボックス内の文字を変更してみてください。
リアルタイムで下部のラベルの文字も変更されますよね？
純粋にJavaScriptでこれを実現しようとすると、入力ボックスに値が入力された時のイベントを拾って、JavaScriptの関数を呼び出し、その関数内でHTML側のラベルの値を変更する必要があります。
しかし、これをVue.jsで実現するには、以下のように記述するだけです。
フレームワークとは
JavaScriptに限らず、フレームワークとは、誰かがあらかじめ作ってくれてある、プログラムの部品のことです。
似た言葉に、ライブラリーというものがあります。
区別としては、フレームワークは、
「機能の大部分を既に作ってくれてあるので、自分でプログラムを書く必要があるのは一部のみ」
それに対してライブラリーは、
「小さな部品をたくさん用意してくれてあり、自分のプログラムに部分的に組み込むことができる」
といったイメージです。
フレームワークは既に、システム作成のための大枠を作ってくれてあるため、そのフレームワークのルールに従って、オリジナルの部分をプログラミングすることになります。
SPA（シングルページアプリケーション）とは
SPA（シングルページアプリケーション）とはその名の通り、
「単一ページで実現されているWebアプリケーション」
のことです。
皆さんが普段閲覧されているWebサイトなどは、別のページに移る際に、ページのローディングを行いますよね？
画面全体を読み込み直すため、画面全体が一回白くなって、動きが止まります。
そういった、読み込みによって画面が一度止まるようなことがないように設計されたWebサイトやWebサービスが、SPA（シングルページアプリケーション）と呼ばれるものです。
なぜページ読み込みのローディングが発生しないのかと言うと、そもそも1ページしかないので、別のページを読み込む必要がないからです。
では、ページの内容を変えたいときはどうするのかと言うと、部分的に内容の更新をします。
それによって、ページ全体を一から読み込みなおす必要がなく、ローディングのために画面が止まることを防げるのです。
そしてその部分的に内容を更新する為に用いられるのが、JavaScriptです。
Ajax
JavaScriptの技術の一つにAjaxと呼ばれるものがあります。このAjaxを用いると、画面全体の動きを一切止めることなく、Webサーバーと通信を行うことができるのです。
Google Maps等の地図アプリケーションにおいて地図の位置をずらしたときに、画面全体の再読み込みが行われず、地図の新たに表示される部分のみが読み込まれるような動きも、このAjaxによって実現されています。
SPA（シングルページアプリケーション）の構築にJavaScriptフレームワークが必要な理由
では、JavaScriptとAjaxを用いて、自力でSPA（シングルページアプリケーション）を作ってしまえば良いではないか、と思われるかもしれませんが、それは中々難しいです。（不可能ではないですが）
少なくとも実務でそれを行うのは、開発効率が低すぎて、開発プロジェクトがうまく回らなくなってしまうでしょう。
なぜなら、SPA（シングルページアプリケーション）を一からJavaScriptを用いて作成するためには、膨大な量のJavaScriptのソースコードを記述する必要があるからです。
そのため、SPA（シングルページアプリケーション）の構築に必要な一通りの機能を既に作ってくれてあるフレームワークを用いて、開発を行う必要があるのです。
Vue.jsとは
Vue.jsとは、そうったSPA（シングルページアプリケーション）の開発において用いられるJavaScriptフレームワークの一つです。
数あるフレームワークの中でも、最もシンプルかつ柔軟で、学習コストが低いフレームワークのため、非常にオススメのJavaScriptフレームワークです。
導入も非常に用意のため、JavaScriptフレームワークの導入を検討されている方は、ぜひVue.jsの導入を検討されてはいかがでしょうか。
Vue.jsの導入
Vue.jsの導入は、HTML内にたった1行のコードを追加するだけで完了してしまいます。
具体的には以下のようなコードです。
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
このたった1行のソースコードをHTML内に埋め込むだけで、Vue.jsを使い始めることが可能になります。
このソースコードを埋め込む場所としては、bodyタグを閉じる直前、すなわち、「</body>」の直前が一般的です。
そして、この
「<script src="https://cdn.jsdelivr.net/npm/vue"></script>」
という記述の直後から、Vue.jsを用いたJavaScriptの記述を行っていきます。
双方向バインディング
このVue.jsを導入することによって、どういった利点が得られるのでしょうか？
一言で言うと、ソースコードを記述する量を減らすことができます。
Vue.jsには多くの実用的な機能が備わっているのですが、分かりやすい例に
「双方向バインディング」
という機能があります。
たとえば、以下のような例を見てみましょう。
{{text}}
上記の例では、入力用テキストボックスに入力されている値に応じて、表示されるラベルの文字が変わっています。
試しにテキストボックス内の文字を変更してみてください。
リアルタイムで下部のラベルの文字も変更されますよね？
純粋にJavaScriptでこれを実現しようとすると、入力ボックスに値が入力された時のイベントを拾って、JavaScriptの関数を呼び出し、その関数内でHTML側のラベルの値を変更する必要があります。
しかし、これをVue.jsで実現するには、以下のように記述するだけです。
<!--HTML部分-->
<div id="bindingExample">
<input v-model="text" /><br />
{{text}}
</div>
<!--Vue.jsの読み込み-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!--JavaScript部分-->
<script>
//バインディング
var bindingExample = new Vue(
{
el : "#bindingExample",
data: {
text : "ここに文字を打ち込んで下さい"
}
}
)
</script>
<div id="bindingExample">
<input v-model="text" /><br />
{{text}}
</div>
<!--Vue.jsの読み込み-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!--JavaScript部分-->
<script>
//バインディング
var bindingExample = new Vue(
{
el : "#bindingExample",
data: {
text : "ここに文字を打ち込んで下さい"
}
}
)
</script>
ここでは詳しく中身を理解する必要はありませんが、上記の赤字で記載されている箇所のような、Vueのインスタンスを生成するだけで、自動でHTMLとの紐づけを行うことができるのです。
このように、入力用テキストボックスに値が入力された際などは、HTML要素に対して行われたイベント毎にJavaScriptを特別記述することなく、自動でJavaScript側で管理している値に反映されます。
逆に、JavaScriptソースコードからのHTML要素への操作も特に記述することなく、JavaScript側の状態が自動でHTMLに反映されます。
このように、HTML側とJavaScript側が双方向に紐づけられているような仕組みのことを、双方向バインディングと呼んでいます。
この機能を用いることによって、JavaScriptの記述を大幅に減らせる上に、JavaScript側の処理と、HTMLの状態を別々に考える必要がなくなり、シンプルな思考でWebアプリケーションを開発することができます。
まとめ：
SPA（シングルページアプリケーション）開発の為に、まずはVue.jsを導入してみよう！
如何でしたでしょうか？
高機能なSPA（シングルページアプリケーション）を開発することは、きっと皆様がユーザーに対して素晴らしい体験を与えることに直結するでしょう。
上述の通り、Vue.jsは、非常に簡単に導入することができます。
この記事が、少しでも皆様の技術学習の助けになれば幸いです。
最後まで読んで下さり、ありがとうございました！
0 件のコメント:
コメントを投稿