Ne:Code道場~Vue.js 事始めの巻~



Ne:Code道場~Vue.js 事始めの巻~

プログラミング学習で、漫画など視覚的なものと併用すると楽しく継続的に学んでゆける人も多いと思います。そこでこの連載では、猫の漫画を交えつつ、JavaScriptのフレームワーク、Vue.jsのはじめの一歩における学習ポイントについて紹介します。

目次
  1. はじめに
  2. Vue.jsって何ニャ?
  3. フレームワークって何ニャ?
  4. CDNって何ニャ?
  5. 最後に

はじめに

image この記事ではVue.js事始めとして、どういうポジションなのかや簡単な基本文法について、概要について取り上げつつ、躓きポイント を補足しています。 各節ごとに、Ne:Code道場(猫de道場)の弟子猫がポイントをまとめ、最後に師匠猫がそれらを総括して3ポイントでまとめています。 それらのポイントを中心に、Vue.jsのはじめの一歩的内容について理解を深めてゆきましょう。

Vue.jsって何ニャ?

前回の記事までは、JavaScriptについて取り上げていました。特に、直近はDOMの操作やイベントの実行などについて見てゆきましたね。DOM関連の処理を記載する際に、JavaScriptから直接HTMLの要素を見つけ出したり、追加したり、削除したりとベーシックな一連の記載を見てゆきました。JavaScript(処理)の中にHTML(見た目)が入り組みながらDOMの操作が行われていたことを体感できたと思います。
 
そして、ここで登場するVue.jsはJavaScriptのフレームワークの1つになります。
Vue.jsを用いてゆくと、入り組んでいた見た目と処理を分けて、見た目と処理の間にデータを挟み、そのデータがを処理で更新したら連動して見た目も変わってゆくというような、そういうシンプルな作り方が可能になります。
言葉だけだとイメージしにくいですよね。今回以降のVue.jsの記事を通じて、具体的な例に触れながら、理解を深めてゆきましょう。
image

フレームワークって何ニャ?

難しい話はおいておいて、Vue.jsが登場してきた経緯をざっと見てゆくことで補足します。
JavaScriptで見た目の操作を組み込む場合、今までの記事で見てきたようにJavaScriptだけでも可能です。でも、その結果、記載するコードが冗長になってしまったりと問題を抱えていました。
そんな問題を解決するために、古株として登場していたのはjQueryでした。
jQueryはフレームワークではなく、JavaScriptのDOM操作のライブラリです。ライブラリは便利な機能群で、jQueryを活用することでDOMの処理をシンプルに記載してゆくことができましたが、ライブラリの場合は、あえてそれを使わなくても処理を記載してゆくことも可能になります。
なので、jQueryで記載したり、そのままのJavaScriptでDOM処理を記載したりできます(あまりそうするメリットはありませんが、そういうことも可能だという比較で取り上げています)
便利な機能(ライブラリ)は、使う、使わないの判断をしてゆくことができるというのがポイントですね。
 
それに対して、フレームワーク。JavaScriptでは、DOMの処理はしばらくライブラリとして登場したjQueryがメジャーでした。そこからいくつかのフレームワークが登場し、Vue.jsはその中でも後発のフレームワークになります。
使う、使わないの判断が可能なライブラリとはことなり、フレームワークを用いる場合は、そのフレームワークのルールに則り、その土台の上にシステムを作成してゆくというイメージになります。
それを用いることで、上記でも取り上げたようなシンプルに見た目の操作を作ってゆくことが可能ですが、フレームワークは土台になるため、まずはそのルールを把握するための学習コストがかかります。
ですが、このVue.jsは既存のHTMLでの記載に近いイメージで書くことができ、且つ、小さく始めてゆくことができるので、jQueryを用いていたときと同じ様に、CDNの一行を足すだけで、お手軽に取り入れてゆくことが可能だというのが特徴になります。
image

CDNって何ニャ?

ざっと説明しますと、HTMLに文字として追加することで、簡単に外部機能を利用できるようになる仕組みです。
外部機能はネットワーク上に公開されていて、「どうぞ使って良いですよ」となっています。なので、Vue.jsに限らず、「(使いたい外部機能名) CDN」で検索すると、お手軽にその外部機能を組み込んでゆくことが可能になります。
では、Vue.jsのCDNを読み込んだHTMLファイルを見てみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>お試しHTMLニャ</title>
</head>
<body>
  <!-- これがCDNを読み込んでいる1行ニャ →
  <!-- ・・・。ただのscriptタグだニャ?!src属性にURLが書いてあるニャ →
  <!-- 試しにこのURL(https://cdn.jsdelivr.net/npm/vue@2.6.0)をブラウザのアドレスバーに貼り付けてみるとそのファイルの中身を見れるニャ! →
  <!-- それを読み込んでいるんだニャ~ -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
  <!-- 自分のJavaScriptの記載は、CDNの後にニャ →
  <!-- そうすることで読み込まれたCDN(ここではVue.js)の機能を自分のJavaScript内で用いることができるニャ -->
  <script src="script.js"></script>
</body>
</html>

コメントにもありますが、CDNの読み込みは自分の記載するJavaScriptのコードよりも前である必要があります。今回のVue.jsの例では、たった1行を書き足すだけでVue.jsを利用する準備は整いました。とてもお手軽ですね。
紙面の都合上、中途半端になりますから、今回はVue.jsの利用開始にあたっての上記の設定までで、次回からVue.jsの具体的な書き方を見てゆきたいと思います。
image

最後に

Vue.js事始めについて、猫弟子がいくつか上げたポイントを、猫師匠が厳選3ポイントでまとめたのがこちらです。

  1. JavaScriptで行っていたベーシックなDOM関連の処理の特徴を把握してゆくニャ
    1. 処理側から見た目(HTML)を直接操作することでこの2つの境界がなくなっていたニャ
    2. また、「document.getElementById」や「document.querySelector」などのように操作する際には長めな処理を記載していたのでコードが冗長になりがちという特徴もあったニャ
  2. フレームワークを用いることでシンプルに見た目を作れるニャ
    1. フレームワークを用いて作る際のお約束を学んでゆく必要があるニャ
    2. だた、Vue.jsは後発なフレームワークであるというだけあって、初期の学習コストを抑えるように設計されているニャ
  3. CDNで利用するとお手軽に外部機能を利用してゆくことができるニャ
    1. HTMLにCDNとして公開されている外部ファイルを読み込む用の記載を書き足すことで活用してゆくことができるニャ
    2. Vue.jsはこのCDN読み込みによって小さく利用し始めることが可能だニャ。小さく始めつつも、そこからの拡張(スケールアップ)を可能にしている作りも、Vue.jsの魅力になるニャ
    3. CDNでJavaScriptファイル(この場合は、vue.jsファイル)を読み込む場合は、自分のJavaScriptファイルよりも前に読み込んでおく必要があるニャ

Vue.jsの記事最初の1つ目として、Vue.jsについての概要とそれの利用方法について学びました。見た目のフレームワークとしてVue.jsを学ぶことで、JavaScriptとしてできることがぐっと高まってゆくと思います。
するとコードへの理解も深まり、プログラミングが更に楽しくなってくるでしょう。
Vue.js導入に関連する知識をしっかり身につけつつ、今後の学習に繋げてゆきましょう。
image

小泉七菜
この記事を書いた人
小泉七菜
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp