2019.07.10最終更新日2019.12.03えぬおVue.jsとは?SPAに適したjavascriptフレームワーク!開発8600はじめまして!えぬおです!javascriptを使った効率的なWEBアプリケーション開発には欠かせないフレームワーク。実際に導入するとなれば、複数あるjavascriptフレームワークの中から選ぶ必要があり、どれを選べば良いかわからないという方も多いのではないでしょうか?そこでオススメのフレームワークが「Vue.js」です。このページでは、Vue.jsとは?といったプログラミング初心者ならおさえておきたい基本知識はもちろんのこと、具体的なメリットや実際の始め方・使い方までご紹介します。もくじVue.jsとは?メリットはざっくり3つ!Vue.jsはSPA(シングルページアプリケーション)を学びたい人にピッタリ!Vue.jsの具体的な始め方・使い方Vue.jsのまとめVue.jsとは?メリットはざっくり3つ!Vue.jsとは、WEBアプリケーションにおけるUI(ユーザーインターフェース)を構築するためのjavascriptフレームワークです。フレームワークとは、開発を楽に行うための機能やひな形のことで、通常は独自の規格やルールが多くあります。Vue.jsはそれが少ないことから、他のフレームワークよりも自分の好きなやり方で開発を進めていくことが可能です。Vue.jsのメリットから見ていきましょう!シンプルかつ自由度の高いフレームワークVue.jsは、dataやelといったHTMLベースの簡潔なVueテンプレート構文を使用することや他のライブラリとも自由に組み合わせを選べるため、シンプルかつ自由度の高いことが大きなメリットです。Vue.jsでWEBアプリケーションを開発する際、HTMLやCSSを中心として書けることから、javascriptの深い知識が無くともDOM操作などを少ないコード量で簡潔に記述できます。「SFC(単一ファイルコンポーネント)」というものを使うと、別のファイルで管理するはずのHTML/JavaScript/CSSを1つの「.vue」ファイル内で区別して管理することも可能。このように、Vue.jsは自分好みのやり方でWEBアプリを構築できます。”Angular.js”や”React.js”など、いろいろな種類がありますが、中でもVue.jsは学習コストが低く、上記の2つよりも比較的開発に取り掛かりやすいという特徴を持っています。フレークワークとしての人気も非常に高く、日本語での技術ブログや記事も多くあることから、わからない部分があってもすぐに調べることができます。開発を早く行い、生産性をあげるという目的に叶ったオススメのフレームワークと言えるでしょう。コンポーネントでプログラムを部品化できる出典|Vue.jsコンポーネントとは、ヘッダーやメインコンテンツ、フッターといったプログラムを部品として扱うことです。プログラムを部品化することで、1つのプログラムを使いまわしたり、同じ処理をまとめて利用することができます。記述するコード量を減らして、生産性・開発スピードを上げることに繋がるのです。Application)とは、単一のWEBページでアプリケーションを構成する設計構造を意味します。要は、ブラウザによるページ遷移を行わずにコンテンツを切り替えられるWEBページです。かの有名なgoogleMapやfacebookなどもSPAを用いた事例の1つになります。基本的にWEBページは、以下の順番でページ遷移を行います。ユーザーがクリックや更新などのアクションを起こすアクションを受け、ページ全体のデータをサーバーに要求(リクエスト)サーバー側でHTMLを作って、ブラウザに返す(レスポンス)HTMLに描画しかし、この仕組みだと、再描画する必要のない部分(ヘッダーやフッターなど)までサーバー側で作り直すことになってしまいますよね?そこで極力無駄を減らして処理速度を上げようというのがSPAです。SPAは以下の仕組みでページ遷移を行います。ユーザーがクリックや更新などのアクションを起こすアクションを受け、必要な部分のデータだけをサーバーに要求。処理後にHTMLへ描画この仕組みであれば、必要な部分だけを再描画するため、基本的なWEBページの遷移よりも早く描画できます。ユーザーの待ち時間を短くすることで、UX(ユーザーエクスペリエンス)向上に繋がるのです。SPAを実現するためには、javascriptを大量に書く必要がありますが、Vue.jsを使えば簡潔に実現できます。そのため、Vue.jsはSPAを学びたい方はもちろん、javascriptフレームワークが多くてどれにしようか迷っている方にはピッタリのフレームワークだと言えるでしょう。実際にVue.jsを使うためには一体何をすれば良いのでしょうか?次は、Vue.jsの始め方・使い方をご紹介します。Vue.jsの具体的な始め方・使い方まず、Vue.jsを始めるにあたって押さえておいた方が良いツールが3つほどあります。CDNを用いて、Vue.jsの始め方・使い方をご紹介します。Vue-CDNで気軽に始めるまずは、自身のPCにフォルダを作って以下のファイルを作成してみましょう。index.htmlindex.js作成後、index.htmlのheadタグ内に以下の記述をすることで特別なインストールも必要無く、Vue.jsを使い始めることが可能です。src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body></body></html>次に、きちんとVue.jsが動作するのか?実際に簡単なコーディングをして見ましょう。divタグで入力フォームを作成し、v-model=”message”と記述し、その下にpタグで{{message}}を囲みます。divを閉じたらscriptタグで読み込むjsファイル名を記述、今回の場合はindex.jsですね。//vueインスタンスを生成。これがないとVueが起動しない。//Vue内で使用するデータを入れる。//vueインスタンスを生成。これがないとVueが起動しない。//Vue内で使用するデータを入れる。Vueと書き、中にelとdata、messageを入れます。VueはVueインスタンスの生成を表しますが、ここでは”この記述が無ければVueが起動しないんだ”と思っていただければ大丈夫です。ちなみに、elは生成したインスタンスの効果が及ぶ範囲を指定し、dataはその際に使用するデータをいれておくところのようなものです。v-modelは、ユーザーがフォームなどに入力した際、データを更新するためのテンプレート構文で、js側のmessageとHTML側のmessageには同じ値が入り続けます。保存し、index.htmlを開いてみるとHTMLで記述した入力フォームのみ描画されているはず。ここに「こんにちは」と入力してみると入力した文字がリアルタイムで描画されます。Vue」によりVueインスタンスを生成し、「el」でVueを使用するhtmlの範囲をidで指定。「v-model」を使ってHTMLとjavascriptの両方で値を更新し続けることができるようになりました。当たり前ですが、もう”人気フレームワークのVue.jsを始められた!”ということになりますね!Vue.jsのまとめVue.jsでSPAをつくり上げるには、今回始めるにあたってとりあえず使用したCDNではなく、CLIとNPMなどを使う必要があります。実際どのようにインストールするかは、Qiita(キータ)やVue.js公式サイトに詳しく乗っていますが、自分にきいて頂いてもお答えできます!通信制限やWifiの不調などから来るページ遷移のストレスは、現代を生きる人間であれば誰もが感じたことのあるものです。その問題を解決するために生み出されたSPAを自身の手で作り上げ、コンテンツが滑らかに切り替わる瞬間を見れば、大きな感動を味わえるでしょう。拙い文章ですが、最後まで読んでいただき、誠にありがとうございました!!作者情報えぬお伊豆大島出身のゲーム大好き人間。研修内容アクセスお問い合わせ。