Webアプリ開発を学ぶために、UdemyでVue.js講座を２つ受講しました。
[st-mybox title=”” fontawesome=”” color=”#757575″ bordercolor=”#f3f3f3″ bgcolor=”#f3f3f3″ borderwidth=”0″ borderradius=”5″ titleweight=”bold” fontsize=”” myclass=”st-mybox-class” margin=”25px 0 25px 0″]
- 「Vue JS入門決定版！jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ」（ 中村祐太先生）
- 「Vue.js + Firebaseで作るシングルページアプリケーション
」（Kazuya Kojima先生）
[/st-mybox]
私はWeb開発は初めての経験ですが、プログラミングを理解する上でまず最初につまづいたのが「用語の意味」です。コンストラクタ？プロパティ？？インスタンス？？と当たり前のように講座で使われる用語がわからず、いちいち動画を止めて検索していました。非常に手間がかかります。
そこで、何度も検索しなくても良いように自分用に解説付き用語集をまとめました。都度更新していきます。
解説に間違いがあれば、ご指摘ください！！
Vue.jsのプログラミング学習でわからなかった用語まとめ【解説付き】
基礎編
まずはWEBプログラミングに入る前の基礎的な部分でもわからない用語が頻発です。「DOM」や「レンダリング」といった用語は”わかっている前提で進む”教材も多いので、知ったふりをせず序盤で理解してしまった方が無難ですね。
CDN（コンテンツデリバリーネットワーク）
Vue.jsのモジュールをPCにインストールすることなく、世界各地に配置されたサーバーにあるVueモジュールを読み込んで使用する方法。サーバの負荷を低減できると共に、設定により「いつでも最新のVue.jsを使える」というメリットがある。
CDNサーバがダウンすればモジュールが使えないというリスクもある。
DOM
プログラム上からHTML等を操作するための仕組み。HTMLの各タグ（正確には階層）に印をつけて、javascriptなどのプログラムからWEBページ上の情報を扱いやすくしている。
Vue.jsではこの仕組みを利用して、WEBページ上の文字や色などを取得したり更新したりしている。
マウント
元々のDOM要素をプログラムから上書くこと。Vue.jsのプログラムで生成したDOM要素でWEBページの文字サイズや文字色などのDOM要素を書き換えること。
レンダリング
データを元に表示すること。
ブラウザがソースコード（データ）を解析し、WEBページや画像を表示すること。
API
Application Programming Interfaceの略。
プログラムとアプリとの橋渡しをするもの。あるアプリケーションの機能を使いたいときに、外からのプログラムでは直接アクセスできない。そこで、APIを窓口としてプログラムからアプリケーションにアクセスする。
WEB API等で、APIが公開されていなければ使うことはできない。
Vueプログラミング編
Vue限定ではありませんが、オブジェクトを扱うプログラミング言語に共通して出てくる用語も多いです。プログラマーは１つの言語だけできれば良いという時代ではありませんので、言語を超えた共通認識としてそれぞれの言葉を覚えておけると良いですね。
Vueインスタンス
インスタンスとは日本語に訳すと「実体」という意味。VueインスタンスとはVueの実体＝Vueそのものということになりますね。
Vue.jsでは
[javascript]new Vue({
・・・
})
[/javascript]
などとしてVue.jsを生成するわけですが、newという宣言でVueを実体化しているんですね。もともとVueはクラスといわれる設計図にその仕様が書かれているのですが、その設計図からVueという実体を作り出すのがインスタンス化（実体化）です。そしてインスタンス化されたVueをVueインスタンスと呼びます。
[st-cmemo fontawesome=”fa-lightbulb-o” iconcolor=”#FFA726″ bgcolor=”#FFF3E0″ color=”#000000″ iconsize=”100″]Vue.jsでは通常、すでに定義されているクラスを使いプログラムを書いていくことが多いので、設計図といわれるクラスは自分で書くケースはほとんど無いようです。[/st-cmemo]
もうくじけそうですが、少しわかってきました。
Vueコンストラクタ
コンストラクタとは、上記の「new」でインスタンス化したときにすぐに実行されるメソッド（関数）のことです。日本語訳は「構築」・・・とかになるんでしょうか。
よく見るVueインスタンスの形としては、
[javascript]new Vue({
el: ‘#app’,
data: { message: ‘Hello, World!’ }
})[/javascript]
等ですよね。
上記のelやらdataやらはオプションといわれるもので、Vueインスタンスが生成されたときに実行されるコンストラクタ（メソッド）にオブジェクトの形で渡され処理されます。ここに書かれた内容をコンストラクタが受け取り、newされたタイミングで実行しているんですね。（メソッドの解説は以下）
ということで私の理解では、コンストラクタそのものは私たちが書くプログラム上では見えない（見なくても良い？）ものという認識です。教材の動画上見えていないものなのに説明が入るからパニックになるんですね。
自分でも何を言っているかわからなくなってきましたが、もうちょっと頑張ってみましょう。
メソッド
コンストラクタの説明で、メソッド＝関数としましたが、それは広義の意味のようです。正確には、メソッドはオブジェクト指向プログラミングで使われる用語で、処理などの操作を定義するもののことです。
vue.jsの場合は
[javascript]new Vue({
el: ‘#app’,
data: { message: ‘Hello, World!’ }
methods: {
・・・
}
})[/javascript]
等として、methodsの関数を書くのが慣例です。1点注意する点は、ただの関数のことを言うのではなく、オブジェクト（この場合はVueインスタンス内の）に関連づいた関数のこととなります。比較的わかりやすい用語ではありますね。
この辺は使って慣れるしかないのかなぁ。
プロパティ
Vue.jsなどのオブジェクト指向プログラミング言語で言われる「プロパティ」は属性と訳されます。
Vueインスタンス内のオブジェクトがもともと持っている値などの情報です。ですので、基本的には隠されていて、使用するときにプロパティ名を指定して情報を読み取ったり更新したりします。
よく操作されるのが、Chrome 検証ツールなどで、DOM情報から値を読み取ったり、書き換えたりするレクチャーがあるかと思います。冒頭紹介した「Vue.js + Firebaseで作るシングルページアプリケーション
」の動画講座でも、プロパティを直接編集するシーンが出てきました。
これも、頭で理解するより使って慣れるしかない用語の種類かと感じました。
Vueコンポーネント
コンポーネントを訳すと「部品」。処理やページを部品にしておくと、簡単なタグを書くだけでその機能を呼び出すことができます。WEBアプリケーションでは、比較的同じような描画、同じような処理を使いまわすことが多いため、機能を最小限の部品にまとめておくことで、再利用が可能になります。
使い方としては、WEBページを構成する要素（ヘッダー、フッター、サイドバー、メインコンテンツなど）を個々のUIパーツに分割し、必要な時に必要な要素を読み込むことで使用する。使用頻度の高いUIパーツは簡単に使い回せるので、WEBアプリの開発スピードは格段に上がります。
参考にした記事・サイト
「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典
今さら聞けないIT用語：やたらと耳にするけど「API」って何？
さいごに
用語の理解が進んでも、アプリを開発できるようにはなりません。
ただ、専門用パニックにならずに最低限基本の用語は頭に入れておくと、プログラミング学習時に用語検索の回数が減るかと思います。それにしても横文字が多くて目が回りますね。プログラミング言語は英語圏でほとんど開発されているので当然なのですが。。。
今回のまとめは殆どの情報をネットから拾っていますが、やはり書籍の方が安心です。Vue.jsの教科書ともいえる下記の本は目を通しておきたいですね。この本でわからなければ、違う説明がされているネット情報を探した方が効率は良いかと思いました。
コメント