Vue.jsに関する用語集

Vue.jsにおける様々な用語ついて。

本を購入し、コードを打ってうまく実装できているとうれしいですね。でもコードを打つことに邁進しすぎて、所々出てくる専門用語についてあまり理解せずに進めてることってありません?初心者な私もあれ?この言葉ってどういう意味だっけ?とよく本に出てくるけど、うまく答えられない・・・。そんなことが多々出てきたので、一度用語の意味を学び直すため用語集でも作ってみようと思いました。
時々、見直してみたりして学べればいいかと。本から抜粋しただけなので、初めての方はよくわからないかと思います。実際、本では図や例題を用いていますので、大変わかりやすくなっています。ぜひ、購入してみてください。下記にリンクを貼っておきました。

Vue.jsとはウェブアプリケーションのUI(ユーザーインターフェース)を構築するための、オープンソースのJavaScriptのフレームワークです。

フレームワークとはアプリケーションの開発を効率化するために用意された枠組みです。

ブラウザ側をフロントエンド、サーバー側をバックエンドという。

DOMとはDocument Object Modelの略である。ブラウザが読み込んだHTMLをツリー状のデーター構造としてメモリ上に保持したもの。

ツリーの節に相当するHTML要素のことをノードという。

データー駆動とはデーターの更新がきっかけとなって表示や動作が変わるアプリケーション設計の考え方。

リアクティブシステムとはVue.jsのフレームワークが備えているデーターの変化が即座にDOMに反映されること。例えばこのようなこと。

リアクティブシステムの監視下に置かれたデーターのことをリアクティブデーターという。

{{ }}はVue.jsのテンプレート構文の1つで、マスタッシュと呼ぶ。(mustachu:口ひげ)

アプリケーションのデーターをDOMと結びつけることをデーターバインディングと呼ぶ。例えばこのようなこと。

リストバインディングはアプリケーションのデーターを一覧形式で表示する場面で役立つ。配列要素が増えてもHTMLタグの記述量は増えない。例えばこのようなこと。

「Vue.js」は開発バージョンでアプリケーションの実行中に発生するエラーや陥りやすい間違いに気づきやすいように、様々な警告をコンソールに出力してくれます。

「Vue.min.js」は本番バージョンで、警告出力機能がついてない代わりにファイルサイズが小さく、アプリケーションの実行パフォーマンスが最適化されます。

CDNとはコンテンツデリバリーネットワークの略でデジタルコンテンツをインターネット上で大量配信するためのネットワークのこと。

MVCモデルとはアプリケーションのプログラムを設計・実装する考え方の3つの役割の頭文字。データーの更新や計算処理を行う(Model)、ユーザーの入力を受け付けるインターフェースを提供するビュー(View)、ユーザーの入力に応じたモデルを呼び出して処理の実行を指示するコントローラー(Controller)

オブジェクト、プロパティ、メソッドを犬に例えると、、、物体、モノを表す犬がオブジェクト、モノの犬種や大きさなどを表すプロパティ、モノが行う動作(鳴く、食べる)がメソッド。

オブジェクトの設計図となる定義を「クラス」と呼びます。クラスを元に生成したオブジェクトを「インスタンス」、インスタンスを生成することを「インスタンス化」という。

Vue.jsでは単体のオブジェクトを「コンポーネント」と呼ぶ。

Vue.jsアプリケーションはnew Vue({ })でコンポーネントを生成することで始まる。

Vueのコンポーネントが持てる主なプロパティとして、el、data、methods、filters、computed、watchがある。これらのプロパティを「オプション」と呼ぶ

ライフサイクルハックは、コンポーネントがDOMと結びついた瞬間や、DOMからコンポーネントが削除された瞬間など、特殊なタイミングでVueが自動的にコンポーネントへ通知を送ってくれる仕組みのこと。ハック名はあらかじめ決まっており、beforeCreate、created、destroyedなどがあります。

ディレクティブについて。コンポーネントを結びつけたHTML要素はVueの監視下に置かれ、「v-」ではじまる独自の属性を併用することによって様々な機能が利用できる。これらをディレクティブと呼ぶ。

スコープとは、プログラム内で扱うデーター範囲のこと。関数の中でのみ有効なスコープをローカルスコープ、関数の外側のどこからでも参照できるスコープをグローバルスコープという。

キャメルケースとは、たとえばbackground-colorプロパティはbackgroundColorと記述すること。

フィルターとはマスタッシュ{{ }}でテンプレートにバインドしたデーターがテキストとして出力される前に何らかの加工を加える機能のこと。例えばこのようなこと。

算出プロパティとはアプリケーションのデーターに基づて何らかの加工を行った結果を返すプロパティです。例えばこのようなこと。

キャッシュとは記憶すること。

イベントとは、ボタンやリンクをクリックしたり、マウスのホイールを動かしてページをスクロールさせたり、主にユーザーの操作をきっかけとしてブラウザの中で発生する出来事のこと。またイベントの発生をプログラムで検知して何らかの処理を行うものをイベントハンドラという。例えばこのようなこと。

ウオッチャとは、データーの変更を監視してくれる機能です。ウオッチャは、watchオプションに登録します。例えばこのようなこと。

双方向データバインドとはコンポーネントが持つデーターと、ユーザーがフォームコントロール(テキストボックスなど)から入力する内容を双方向にバインドする機能です。例えばこのようなこと。

3つの修飾子。双方向データバインド、v-modelディレクティブにはフォーム入力バインディングをサポートする3つの修飾子がある。修飾子にはv-modelに続けて、v-model.lazyのように使います。 .lazy、.number、.trimがあります。

トランジション(transition)とは、要素がフワッと浮かび上がる表現効果を与えたり、色や大きさなどを連続的に変化させる機能です。例えばこのようなこと。

仮想DOMについて。VueはデーターとDOMを効率的に同期させるために、仮想DOMという仕組みを持っています。仮想DOMとは、Vueの監視下にあるリアクティブデーターに基づいてVueがメモリー上に構築する仮想的なDOMです。リアクティブデーターが変化すると、Vueは実際のDOMを変更する前に仮想DOMに対して操作を行います。このときVueは、本当に更新しなくてはいけない差分だけを仮想DOMから抽出して、それを元にして実際のDOMへノードの追加や削除を行います。差分だけを適用することによって、描画処理のパフォーマンスを向上させています。

フィルター(filter)は、そのフィルターを利用するコンポーネントよりも先に定義することに注意。

マスタッシュ{{・・}}で埋め込まれたデーターはVue.jsが必ずエスケープ処理を行う。v-htmlというディレクティブがあり、これを使ってバインドしたデーターは、そのままHTMLとして出力することができる。

「this」が何を指すかはスコープによって変わる。thisはクラス自身を指すキーワードですが、正確には、クラスのインスタンスが生成されたときに、そのインスタンス自身を指すキーワードとなる。よってスコープによってthisの内容は異なる。

Ajax(エイジャック)はAsynchronous JavaScript + XMLの略でウェブアプリケーションにある種の機能を実装するためのアプローチ方法の名前です。

非同期通信は外部との通信と、アプリケーションのメインロジックを実行するプログラムを並行して実行する通信方法です。

XMLはW3Cによって仕様が策定されたマークアップ言語で、柔軟性を備えたフォーマットです。そのためアプリケーション側で解析しやすく、DOMとの照合も容易です。

JSONとJavaScript Object Notationの略で、その名の通りJavaScriptのオブジェクト表記を使ってデーター構造を定義できるフォーマットです。

CORS(Cross-Origin Resourse Sharing)とは、ブラウザがオリジン(HTMLを読み込んだサーバー)以外の場所からデーターを取得する仕組みのこと。

オリジンとは通信方法を表す「プロトコルスキーム」、サーバーを表す「ホスト名」、通信の窓口となる番号を表す「ポート番号」の組み合わせ。

http://www.xxx.com:80なら「http://」がプロトコルスキーム、「www.xxx.com」がホスト名、「80」がポート番号。

クロスドメイン制約とは、異なるオリジンからのアクセスを認めない、セキュリティ上の制約のこと。

JSONPは、クロスドメイン制約を回避できる方法です。

JSONPとは「JSON形式のデータを引数で受け取る関数」を実行するJavaScriptのコードのこと。

JSONはデーターの形式につけられた名前であって、JSONPは関数を実行するプログラムであり、データーの形式ではない。

JSONは単なるテキスト形式のデータなので、<script>タグで読み込んでも実行できません。そこでXMLHttpRequestオブジェクトを使って読み込むわけですが、XMLHttpRequestはクロスドメイン制約があるので、同じサーバーの同じドメイン内に置かなければ読み込むことはできません。しかしJSONPは関数を実行するJavaScriptのプログラムなので、異なるサーバー、異なるドメインにおいても<script>タグで読み込むことができる。

v-cloakディレクティブは、その要素が属するコンポーネントのインスタンス生成とデータバインディングが完了するとDOMから消去される特殊な性質を持つディレクティブ。この性質を利用して、v-cloakがついている間だけ要素を非表示にするCSSを用意しておけば、テンプレートのマスタッシュが一瞬だけそのまま見えてしまうことを隠すことができる。、

実際の開発ではアプリケーションの構成部品をコンポーネント化(どんなページにも簡単に組み込める部品)して、独立したコンポーネントに分け、再利用しやすくし、保守性を高めている。例えばこのようなこと。

コンポーネントの定義の書式:Vue.component(‘コンポーネントの名前’, {コンポーネントのオプション}); 第一引数に指定したコンポーネントの名前は、コンポーネントを利用するときに使う「カスタムタグ」の名前になる。例えば’show’なら<show></show>というカスタムタグを記述する。例えばこのようなこと。

例えば$emit(‘child-cpck’)、ここで子の$emit()メソッドを実行して、子にchild-cpckイベントを発生させます。child-cpckはブラウザの標準イベントではなく、開発者が自由に決めるカスタムイベントです。このカスタムイベントは、親のテンプレートを通じて親のイベントハンドラを呼び出すための仲介役です。例えば

単一ファイルコンポーネントとは、コンポーネントのHTMLとCSSとJavaScriptを一つのファイルに記述して、「.Vue」という独自の拡張子をつけたものです。Single File componentの頭文字をとってSFCとも呼ばれる。SFCは開発環境でのみ使える特殊なフォーマットなので、ブラウザでそのまま実行することはできない。開発現場「Vue Cp」をインストールして実行可能な形式(HTML,CSS,JavaScriptファイル)に変換する必要がある

この本を参考に学び、完成させることができました。しかし、プログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません(ToT) その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^) 身に付けて消えないスキルがこの値段。買っておいてよかったです。

わからないことはプロフェッショナルから学ぶのが一番

キャリアアップに必要なスキルを取得しよう。

オンラインで受講ができるスクールですので、全国どこからでも。