フロントエンドがもっと楽しくなる!Vue.js 学習メモ。

Vue.js は JavaScript のフレームワークです。 JavaScript のフレームワーク自体使うのがはじめてなので、超初心者視点で学習のメモを書いていきます。

Vue.jsはじめました

フレームワークとか使ったことがなかったので、ゼロから始める Vue 生活!……的な記事はもう既にあるので、Vueフレンズはじめたよ!わーい!たのしー!みたいな知能低い(普段どおりな)感じでやっていきたいと思います。

Vue?簡単に言うと、な、何もしてないのに DOM が勝手に変わった!みたいなあれです。序盤は本当に学習記録になると思います。追々内容は改善させていくつもりですが、間違いや勘違いした事を書いていたらご指摘やアドバイスをいただけるととても嬉しいです。

なおネイティブも多少は書けるけど普段は jQuery に頼りっぱなしみたいなレベルです(•ө•)ノ jQuery から一歩進みたい方一緒にがんばりましょう。

Vue.js について

リアクティブ(画面とデータの同期)を追求している JavaScript のフレームワークです。本体機能はとてもコンパクトでライブラリに近く、必要に応じて機能を拡張していく事ができるという。ここらへんは MODX にも通ずるものがありますね。

Vue.js(ビュージェイエス)は,インタラクティブなUIを構築するためのJavaScriptライブラリです。Webサイト内のウィジェットや管理画面のダッシュボードといったビュー(view)層に特化しています。設計の特徴としてMVVMパターンに影響を受けています。

Vue.js入門 ―最速で作るシンプルなWebアプリケーション

コミュニティの方に教えていただいた gihyo.jp の記事によると 2015年 から Laravel に標準搭載されているそうです。public のスクリプトを見ると確かに Vue の文字が!すごーい!

React、Angular など他にも有名な JavaScript のフレームワークがあるので一通り HelloWorld してみましたが一番覚えやすそうな印象を受けました。あと作者のエヴァン氏がグレンに似ていたので Vue.js を選択しました。

調べてみると、感じたとおり比較的覚えやすい初心者にもおすすめのフレームワークだそうです。でも評価は高く React や Angular に次ぐぐらいの人気があって日本のコミュニティも活発です。公式マニュアルも充実していて日本語化も進んでいるので必要な情報が手に入りやすいです。

コンポーネント指向の MVVM フレームワーク

PHP ではもう少し前からフレームワークを使い始めて今 Fuel を勉強しているので、MVC について多少かじり始めた所ですがまだちゃんと理解してません。それに全然勝手が違いますね(;'ω')

正確には Vue.js は MVVM (モデル/ビュー/ビューモデル)というらしいです。ビューはだいたい DOM で見た目的なもの、モデルはロジックで、ビューモデルはビューのためのロジックを管理するモデルで Fuel でいうプレゼンタと一緒みたいですね。フロント開発におけるモデルとビューモデルの切り分け方もよく分からないのでこの辺も後でちゃんと勉強していきます。

ちなみに私が JavaScript のフレームワークをどれかやってみたいと思った一番の理由が先にも言ったように DOM をリアルタイムで更新してくれるのが便利そうだったからです。今までは内容が変わったら更新が必要なところで自分で都度トリガーしていたわけですが、フレームワークで監視してくれると必要な所で更新がされていなかった!とか逆に無駄な処理をしていた!みたいな基本的なバグも起きにくくなるのではという期待があります。

今の所フレームワークが活躍するような大規模なアプリケーションを作る予定は特に無いのですが、今後のための勉強と、中途半端に導入しても毎回初期パースするコストが増えるだけなのでこのサイトも SPA にしたいなぁと思っています。それに新しい事勉強するのって面白いですよね!

Vue.js の学習メモ

Vue.js で遅延したフォーム処理をする

2017年3月20日
フロント開発がもっと楽しくなる!Vue.js 学習メモ。状態管理を少しかじりながらフォームのコンポーネントを作ります。

Vue.js を使って Electron でタイマーアプリを作った

2017年3月13日
IndexVue.jsはじめました Vue.js について コンポーネント指向の MVVM フレームワーク Vue.js の学習メモ 前回 Electron と Vue.js

Vue.js を使って Electron でアプリを作る

2017年3月6日
フロント開発がもっと楽しくなる!Vue.js 学習メモ。Electron でアプリを作るので折角なので Vue を使ってみます。

Vue.js で watch と nextTick を使ってみる。

2017年3月1日
ウィンドウのリサイズ処理について本家のフォーラムを調べていて、こちらの記事を見ていると $nextTick というのが使われていました。

Vue.js で画像ポップアップ

2017年2月23日
フロント開発がもっと楽しくなる!Vue.js 学習メモ。サイトで使う画像ポップアップ用のコンポーネントを作ります。

Vue.js の親子間以外でのデータのやり取り

2017年2月20日
フロント開発がもっと楽しくなる!Vue.js 学習メモ。親子間ではないコンポーネント同士でデータの操作を試す。

Vue.js の開発環境を強化する

2017年2月18日
フロント開発がもっと楽しくなる!Vue.js 学習メモ。Vue.js の単一コンポーネントファイル .vue が使えるように Gulp+Babel+Webpack をいろいろします。

Vue.js のコンポーネントを使う

2017年2月16日
フロント開発がもっと楽しくなる!Vue.js 学習メモ。コンポーネントを使ってサイトの部品を作っていきます。

Vue.js で条件で要素を操作する

2017年2月15日
フロント開発がもっと楽しくなる!Vue.js 学習メモ。v-if / v-show / 算出プロパティを使って条件によって要素や属性などの内容を切り替えます。

Vue.js で表示したデータを更新する

2017年2月12日
フロント開発がもっと楽しくなる!Vue.js 学習メモ。Vue.js を使って表示したデータをイベントを使って更新します。
Edited on 2017.02.18 Created on 2017.02.10 Vue.js JavaScript Webデザイン