# Overview: LEARN VUEJS - absolute beginners - simply easy learning

# Vue.jsと私

Algoliaで働いていて、お客様とお話させていただく中で、フロント側はVue.jsで作っています、という方が多いので、典型的なバックエンド側のエンジニアだった私も、そっちの方に明るくなりたいな、と。

最近はこのヨシダレッドというブログサイトをVuePressではじめてから、Algoliaの検索を導入してみたりしているのですが、いかんせんコピペだけして何となく動いてるだけっていうのに物足りなくなってきて、ここらではじめから勉強してみたいな、と。

また、英語の文献でもDeepLの精度が凄いので、分からなそうなところが出てきてもやっていけるんじゃないかな、と。

というわけで👇の

VueJS Tutorial - Tutorialspointを何回かに分けてやっていきたいと思います。

# VueJS Tutorial

Vue.jsはプログレッシブなJSのフレームワークでインタラクティブなWebのインターフェースに使われています。フロントエンドのViewの部分にフォーカスしています。Vue.jsのインストールは簡単でビギナーでも簡単に理解できて自分でインターフェースを開発していくことができます。このチュートリアルは様々な章に分割されていて、それぞれシンプルで便利なサンプルも含まれています。

# Audience

ソフトウェアを開発するエンジニア用でVue.jsの基本を学ぶとともにそこでのプログラミングのコンセプトを学ぶ的な。これちゃんとやっときゃnext levelにイケるぜ、と。

# Prerequisites

進める前にHTMLとCSSとJavaScriptの基本的なことは理解しておきましょう。

# VueJS - Overview

最初のバージョンのVue.jsは2014年2月にリリースされて、それ以来6万以上のGibHub上でのスタートを獲得し、今ではとてもポピュラーなものになっている、と。Vue.jsは元GoogleのEvan Youさんによってはじめられたプロジェクト。

# Features

Vue.jsの機能は以下のように。

# Virtual DOM

ReactやEmberなどと同様に仮想DOMを使用している。変更は実際のDOMに対して行われるのではなく、DOMのレプリカに対して行われる。DOMのレプリカはJavaScriptのデータ構造の形になっている。つまり、JavaScriptのデータ構造に変更が行われて最終的には実際のDOMに適応されるという流れ。これによってコストがかからず変更をより迅速に行うことが出来るんだそうです。

# Data Binding

v-bindと呼ばれるバインディングの機構を使ってHTMLのアトリビュートへの値の操作やスタイルの変更といったことを行う。

# Components

ComponentはHTMLで再利用できるカスタム要素の作成のために使える大事な機能のうちの一つです。

# Event Handling

v-on はVue.jsで発生するイベントをListenするためにDOM要素に追加される属性です。

# Animation/Transition

Vue.jsにはHTML要素がDOMに追加、変更、削除される際にトランジションを適用するための様々なやり方が用意されています。Vue.jsにはトランジション用のコンポーネントがbuilt-inされていて、トランジションの効果のためには要素をラップする必要があります。3rdパーティーのアニメーションライブラリの追加も簡単で、インターフェースによりインタラクティブなものを追加することも出来ます。