Vue.jsでWebアプリケーションプログラマーになろうツイートシェアはてブLINEPocket未経験者イマドキなWebアプリケーションを作れるプログラマーになりたいです。Vue.jsは学習コストが低いってよく聞くのですが、本当のところはどうなのでしょう?この記事を書いている私もこれまで、HTMLにちょっとしたJavaScriptを組み合わせ、動きのあるWebサイトを作ってきた経験はありました。最近スマホなどで人気のあるサービスを使っていると、Webサイトとはとても思えないほど快適に使えるものがたくさんあります。そんなイマドキなWebアプリケーションを作りたいと思ったときに、「学習コストが低い」という評判をみて、Vue.jsというJavaScriptフレームワークにたどりつきました。今回は、そんな筆者が実際にVue.jsでWebアプリケーションを開発した経験をふりかえり、未経験者にもオススメできる理由を説明していきます。サポートツールの充実Vue.jsの将来性はどうなのか?Googleトレンドで調べてみたVue.jsの今後まとめJavaScriptフレームワークって?フレームワークとは何か?一言でフレームワークといっても世の中にはたくさんありますが、主にアプリケーションを開発したり、動かしたりするための機能を提供してくれるソフトウェアです。フレームワークを使うと、アプリケーションを開発するための環境を簡単に用意することができたり、必要な機能だけプログラミングすればアプリケーションとして動くようにしてくれるなど、開発がとても楽になります。自分が「実現したい!」と思っている機能により集中できるようにしてくれるのです。JavaScriptフレームワークにもいろいろあるJavaScriptを使う人たちに向けて作られたフレームワークも世の中にはたくさんあり、その目的も様々です。知られているJavaScriptフレームワークとしては次のようなものがあります。人気のJavaScriptフレームワークAngularReactVue.jsEmber.jsMeteorMithrilNode.jsPolymerAureliaBackbone.jsVue.jsは、Webブラウザ上で動くアプリケーションを作るために開発されたJavaScriptフレームワークであり、みなさんが普段パソコンやスマホのブラウザで見ている「画面機能」を対象にしています。Vue.jsそのものとVue.jsを使ってつくられたWebアプリケーションも、実際にはあなたの目の前にあるブラウザ上で動作します。いった意味では、ユーザーに一番近いところで動くということを意味する「フロントエンド」というキーワードとともに、フロントエンドフレームワークなどと呼ばれることもあります。先ほど挙げたJavaScriptフレームワークの中で、AngularやReactとよく比較されるのもそこに理由があります。Vue.jsとは?Vue.jsが生まれた背景Vue.jsは、もともとGoogle在籍中にAngularを利用するプロジェクト深く関わっていたエヴァン・ヨーさんによって開発が始められました。Angularがあったのになぜ?と思われた方もいらっしゃるかもしれませんが、私は次のような背景があったからと理解しています。Angularが多機能すぎだったAngularはGoogleが開発しオープンソースで提供しているWebアプリケーション開発のためのフレームワークです。Googleが自社で提供しているサービスなどにも使われているため、歴史もあり採用実績も非常に豊富です。Webアプリケーションを開発するために学ぶのなら良さそうに見えるのですが、いくつか初心者には高いハードルがあるのです。大規模開発にも耐えうる、非常にたくさんの機能をもつフルスタックフレームワークであること開発言語がTypeScript(JavaScriptの方言のようなもの)であることつまり、簡単に何かを作ってみようと思ってもJavaScriptだけの知識だけではアプリケーションを動かすこともできず、初心者には学習コストが高すぎるのです。非常に多機能なフレームワークであるため、どうしても動作が重くなってしまう点もデメリットの一つです。(最新のバージョンではだいぶ改善されていると聞いていますが)Reactの爆発的な普及Facebookが開発し、オープンソースで提供しているWebアプリケーション開発のためのフレームワークですが、ブラウザ上で動く「画面機能」部分だけを対象にしているため、非常に軽量に動作します。Facebookのサービスが提供する画面機能がサクサク動くその印象と、開発者寄りの使い勝手になっていることもあって、爆発的に人気を得て一気に拡がりました。こちらも初心者にはいくつか高いハードルがあります。JSXという言語を学ぶ必要がある単体では動かせず、Node.jsという環境で開発する必要があるJavaScriptでWebサービスをバリバリ開発してきた人にとっては、同じような感覚でモダンなWebアプリケーションも作れるぞ、となるのかもしれません。逆にReactから入ろうと思うとむずかしく感じるのでは?と思います。実際、私もReact学ばなきゃと思った時期がありましたが、プログラミングに慣れていないとJSXがわかりにくく、学習コストが高そうという印象をもちました。Vue.jsの特徴Vue.jsの特徴を一言でいうと、AngularやReactが持っている素晴らしい部分を取り込みつつ、自分のレベルに合わせて学習しながら使いこなせることではないかと思います。ここまでVue.jsをフレームワークといってきましたが、中心となる機能はReactに近い「画面機能」部分だけのシンプルなライブラリから使い始めることができるようになっています。そのほかの特徴としては次のようなものがあります。シンプルであるVue.jsを使ったアプリケーションをプログラミングするとき、Webの一般的な技術である、HTML・CSS・JavaScriptそれぞれの書き方に近いイメージで書くことができます。そのまま使えるというわけではありませんが、まったく新しい書き方を覚えるよりは、サンプルアプリケーションなどの理解も早いと思います。高速に動作するVue.jsの基本機能となるライブラリは一番小さいタイプでわずか20キロバイトほどしかありません。Vue.jsの中身の動作にまでは触れませんが、ライブラリが小さいことは、ダウンロードも短くなりますし、動作するときの処理もコンパクトになっていることを意味します。拡張性が高いVue.jsのアプリケーションの基本的な構造は、HTMLの部分、JavaScriptの部分、CSSの部分、の3つをまとめた「コンポーネント」というものになっています。このコンポーネントをいくつか組み合わせて一つの画面を作ったりすることもできますし、Webサイトの左にあるメニュー部分やブログにあるコメント機能のように、いつでも表示されるような共通的なコンポーネントを作って使い回すこともできます。このような拡張性が考えられている部分も、使い続けてみようと思う私たちからすると心強い特徴と言えるでしょう。画面機能だけならjQueryでもよいのでは?Vue.jsが画面機能部分のライブラリだ、というのであれば、jQueryをこれまで使っていたプログラマはこう思うかもしれません。jQuery経験者jQueryも同じような機能をサポートしてくれるし・・・HTMLとCSSの知識があれば直感的に使えるし・・・。乗り換える必要あるのかな?私が冒頭で書いた「HTMLにちょっとしたJavaScriptを組み合わせ、動きのあるWebサイト」という説明ですが、作ろうとするものがそんなに複雑でなければ無理に乗り換える必要もないですし、実際jQueryの方が向いていることもあるでしょう。Vue.jsのようなJavaScriptフレームワークが必要とされてきた背景にはもう一つ、次の理由があります。Webアプリケーションが高度化されてきたここでは先の疑問に答えるため、jQueryで問題になる部分だけ説明します。jQueryはブラウザがHTML/CSSを読み込んだ結果を格納している「DOM」というメモリ領域を操作しています。「セレクタ」と呼ばれる機能を使い、DOMに読み込まれた画面部品(例えばボタンなど)の状態を書き換え、その変更をブラウザがDOMから読みだして書き換え表示する、といった動きをしています。このDOMの中のデータ構造は、ツリー構造と呼ばれる形になっており、セレクタで指定された部品を探すには、このツリー構造をたどって見つけていく必要があります。ひとつふたつならともかく何百個も<div>タグがあるような画面を扱うと処理が重くなってしまい、最悪の場合いつまでも処理が終わらないかもしれません。一つ例を考えてみます。Googleのサービスであるスプレッドシートの画面を開いてみましょう。データを入れるセルもそうですが、たくさんの機能ボタンがあり、どこかのセルで右クリックすればメニューも出てきます。「jQueryで作ってくれ!」と言われたら、私にはこの操作感を実現できるのか、まったく見当もつきません。Vue.jsのようなJavaScriptフレームワークは、「仮想DOM」と呼ばれる仕組みを使って、DOMで扱っていた画面部品の状態やデータをJavaScriptだけの世界に構築します。本当にブラウザ上の表示を書き換えなければならないときだけ、DOMを操作するようにしてくれます。することで、重い処理が最小限になるように工夫されています。「コンポーネント」の仕組みも、Googleスプレッドシートのような複雑なアプリケーションを実現するのに一役買っています。jQueryでは扱いきれないほど、複雑な機能をサクサク動かす必要が出てきたのです。逆に言うと、Webアプリケーションにそこまでの必要性がなければ、あえて乗り換える必要がない、と判断することもできます。「プログレッシブフレームワーク」という設計思想Vue.jsの設計思想には、フレームワークはどんなときにでも、どんな規模でも、段階的に柔軟に使えるべきである、という考え方があります。そのように段階的に拡張していけるように設計されているため、開発者のエヴァン・ヨーさんはプログレッシブフレームワークと呼んでいます。そのため、使う人の習熟度があがったとき、アプリケーションに必要な機能が足りなかったときなど、そのときにVue.jsが提供するさまざまな機能を組み込んで使うことができるようになっています。自分の成長に応じて使いこなしていくことができるフレームワークと言えると思います。日本人にも易しい公式サイトのガイドやチュートリアルを含め、Vue.jsはリリース当初から日本語を積極的にサポートしています。公式サイトが提供している内容も非常に充実しており、基本的なところは他のサイトに頼る必要がないくらい、説明されていると思います。JavaScriptフレームワークは進歩も速く、知りたい情報が海外が発信元となることも多く、本家サイトよりも掲示板などを見ないとわからない部分も多いのが実情です。その点Vue.jsは、公式サイトの情報を読んでおけばよほどのことがないと困ることがないとも言われており、日本人がイチから学習するのにも向いていると思います。自分の習熟度があがって、より高度な開発に移っていく場合においても、Vue.jsはフレームワークとしてさまざまな手助けをしてくれます。アプリケーションに問題があってWeb画面が表示されなくなってしまった!という場合があったとします。その場合、問題がどこで発生しているのか調べたいことがあるでしょう。Vue.jsではブラウザの拡張機能として、アプリケーションの動作を一つ一つ止めながら確認できるデバッグツールが提供されているので、そのようなトラブルにも対応できる環境がすぐに用意できます。開発を始める人に対して開発環境を準備してくれるコマンドなども用意されていて、自分の開発スタイルに合わせたサポートツールをすぐに使える環境が提供されています。Vue.jsの将来性はどうなのか?段階的に学習できるといっても、学んでいるうちに世の中から取り残されている・・・そんな心配はあると思います。Googleトレンドで調べてみたよく比較されるAngular・Reactと検索されている状況について、Googleトレンドでグラフを作ってみた結果はこちらになります。Vue.jsは過去に、2大巨塔であるAngularとReactを抜いてトレンドに、といったニュースがありましたが、今もその傾向は続いていると言えるでしょう。Vue.jsの今後Vue.jsはオープンソースとして公開されているので、プログラムはGitHubというサービスで公開されています。リリースノートはこちら。リリースが滞っていないGitHubのスター数(お気に入りのようなもの)、がReactよりも多いフレームワークの改修とリリースはGitHub上で頻繁におこなわれており、セキュリティなどの問題についても対応される安心感はあると思います。Reactをもしのぐ大変人気のあるプロジェクトでもあるため、今後も継続的にメンテナンスされていくものと思います。まとめ実際にアプリケーションを作ってみると、Vue.jsが「プログレッシブフレームワークである」と言われる意味がわかってきて、使いこなすためのコツなどもだんだんと実感できてくるのでは?と思います。実際に私も、小規模な情報共有ツールからWindowsのアプリケーションとして動くツールまで作ってみて、Vue.jsは単純にWebアプリケーションの範囲にとどまらず、いろんな場面に応用できるJavaScriptフレームワークであると実感しています。これからステキなWebアプリケーションを開発していきたい!と思われるエンジニアにとって、本記事が少しでもお役に立てるのであれば幸いです。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。必要なプログラム言語は?(これからAndroid開発を行ってみたい方向け)お問い合わせフォームエラー修正RECOMMENDこちらの記事も人気です。編集部員(プログラマー)現役プログラマーの編集部員です。このブログは複数の編集部員によって運営されています。おすすめの勉強法は?未経験からプログラマーに就職2020.2.18『今』プログラミング学習をおすすめする3つの理由JavaScript2020.2.11【初心者向け】TypeScriptって何?JavaScriptと何が違うの?職業訓練校2020.2.9未経験者が職業訓練でJAVAを学ぶプロフィールごま塩シンジ(編集長)30代後半、未経験からweb系企業に就職しました。底辺高校→Fランク大学→営業→PHPエンジニア→フリーランス※当サイトはリンクフリーです※当サイトは複数のプログラマーによって運営されています※広告募集中です。ご希望の方はお問い合わせからご連絡ください。Java有償化とは?無償で利用できない?いや、できます。最近のコメント初心者におすすめのプログラミング言語は何か。初心者におすすめのプログラミング言語は何か。初心者におすすめのプログラミング言語は何か。