BlogVue.jsのことをもっと知ろう技術2019.11.29Webアプリやサイトの開発手法は、HTMLやCSSのみで構築された単純なものやAngularやBackbone.js、React、Vue.jsなどのライブラリやフレームワークを使うという手段もあります。社内ではVue.jsを使ってみようという声があり、自分でもまだ使ったことのないフレームワークだったので、Vue.jsを身につけてWebサイトを開発したい!と思い、今回はVue.jsを調査しました。その結果、なんだか良さそうだったので、経過報告とBitBeansではどういったWebアプリやコンテンツの作成に向いているのかを紹介したいと思います。くじなぜVue.jsで作るのかどんなサイトにVue.jsは使われているのかどういうコンテンツを作るのに適しているのかみておくべきサイト・ブログおわりにVue.jsとはVue.jsとは、JavaScriptのフレームワークの1種です。JavaScriptはほぼ全てのブラウザで動作するプログラミング言語で、フロントエンドアプリケーションの開発でも主として使用されています。比較的容易に使い始めることができるため、既存のアプリケーションへの組み込みなどにも向いています。日本ではVue.js大人気React、Angular、Vue.jsの3つのフレームワークの中で一番使われているのはどれ何だろう?と気になる人もいると思います。その結果、日本ではVue.jsが一番検索されていました。他の中国や韓国などのアジア圏でも人気がある反面、欧米では知られてもいないくらい検索されていないのがわかります。これは日本でこれらのフレームワークを使う時、Vue.jsを選択する一番の理由になるのかもしれません。多くの人が使う時、書籍やブログなどで知識を得れる機会が多くなるといえるからです。学習コストが低い?以前どこかのサイトかブログでVue.jsは「学習コストは低い」と書かれていたことを目にしたことがあります。本当にそうなのでしょうか。確かに、たった数行追加するだけですぐにVue.jsの恩恵が受けられるというのは本当らしく、双方向データバインディング※1なんて簡単すぎるくらい早く導入できます。それ以上のことをやるときはそれなりに学習が必要だといえます。v-model、v-bind、v-on、v-ifとcomponentの仕組みを覚えたあとはライフサイクル※2、Router、Vuex、Nuxt.js...といった具合になるのではないでしょうか。難しいと言いたいわけではなく、少しReactの経験がある私からすると、学習コストは同じくらいなのかなと感じました。これから実装・調査していく中でどれくらいの難易度なのかも知れるとは思いますが。コードの記述量は少なくすむということと、前述下通り数行で始められることもあり、導入コストは低いとは思うので入りやすいのかもしれません。ReactとAngularのいいとこどりVue.jsは、可読性や保守性と楽しさとのバランスが絶妙です。1のちょうど中間に位置しているものです。Vue.jsはHTMLに関してもJSに関しても非常に扱いやすいものです。ビジネスタスクから気をそらせることなしに複雑なテンプレートを扱えるし、サイズが大きくなってもテンプレートの可読性は落ちません。私たちはなぜReactではなくVue.jsを選んだのかとあるように、コンポーネントの考え方やpropとステート管理、単方向のデータフロー、仮想レンダリングをReactから取り入れ、Angularからは構文テンプレートを導入し、どちらからもメリットを取り入れたとっつきやすいもののようです。例えるならカツカレーのようなの存在なのかもしれませんね。ReactとはFacebookによって開発されているJavaScriptベースのユーザインタフェース構築のライブラリ。AngularとはAngularは、Googleによって開発されているTypeScriptベースのフロントエンドフレームワークです。TypeScriptベースなので覚えてない人は学習する必要がありますが、最新のJavaScriptが書けます。どんなサイトにVue.jsは使われているのかメリットがわかったところで、このVue.jsというフレームワークを使うと、どのようなWebアプリケーションやWebサイトを作ることができるのか気になりました。実際に制作されたサイトを調べてみることにしました。DSOChttps://sansan-dsoc.com/Webアプリケーションばかりかと思いきや、Webサイトにも使用されているようです。複雑なサイトではないものの、ページの切り替えがスムーズで読み込みを意識させないくらい早いものや、ローディング後のページ表示時に、コンテンツごとにアニメーションを使って現れるようになっているものもあり、アプリを使っているようなリッチな表現を取り入れているなぁと感じました。Vue.jsで構築すると比較的こういったWebサイトを実装しやすいのでしょうか。いうコンテンツを作るのに適しているのか弊社で制作したWebサイトでも多く使われるアプローチとして、検索結果をカテゴリー毎にページで分けて、そのカテゴリーに属する各ユニットを表示するというロジックがあるとします。このようなアプローチをVue.jsで表現するとどうなるか、少しだけサンプルを作成してみました。CodePen1このようにちょっとしたコードを書くだけで、カテゴリー分けコンテンツが作成できます。みておくべきサイト・ブログ勝手ながらVue.jsを勉強する上で、サイトや書籍など役に立つ文献をまとめてみました。公式ドキュメント(Webサイト)基本的な使い方はこれで覚えられるくらい充実してます。無料の動画コースもあるようです(英語ですが)。チームラボオンラインスキルアップ(Webサイト)公式ドキュメントよりシンプルで見やすいドキュメントサイト。Vue.js(書籍)実例集や動作デモなど多数のページ数からなる「書籍用サポートページ」というサイトもあるようです。本を買わなくてもある程度勉強できそうなくらい。VueJS入門講座(Youtube)Youtubeでも初心者講座がいっぱいあります。有料のudemy版はこんな感じ。Application)の基本おわりに日本ではVue.jsがもっとも使われいるフレームワークのようですし、求人もたくさん載ってますし、色んな意味で習得してもいいかもしれません(笑)最近ではSvelteとかというフレームワークも出てきて気になるところですが、まだSPAやSSRに慣れてない方はVue.jsで基本を学習してもいいかもしれません。今後はサンプルを作成しつつ調査できればと思っていますでの、検証報告は当記事の第二弾でお会いしましょう。