むかーしにvue.jsの勉強を試みた記事があったんですが、それを見返したら何もやらずに終わってました（驚愕）
リベンジ編ということで必要な範囲を最速で勉強して、業務に取り入れていきたいと思います。
こんな感じで、勉強して咀嚼してブログに投稿するというのが、最速の技術習得方法だと思っています。
そのノウハウについても、そのうち記事にしようかな。
やりたいのはjQueryをVue.jsに置き換えること。
jQueryって依然として使用率高いと思うんです。
だって使いやすいし、簡単だし、普通の仕事の範囲だったら全然事足りてるし・・・ある程度複雑なプログラムだって組めちゃうし・・・と特に現状に不満がないスーパー有能なライブラリだと思うのです。
しかし、先進的な人たちからは嫌われており、変えろ使うな古い遅いなどと罵られているのです。
かわいそうに・・・。
多分まだまだ生き残るし、10ページとかのサイト規模であれば変える必要なんてさらさらないんでしょうが、だからと言って新しいものを学ばなくても良いということにはならないと思いますので、Web業界でいきぬく為にも、ちゃんと学んでおきましょうねvue.js（jqueryが死なないという予測なら次の流行りを待ってもいいかもしれんけどね）
jQueryの嫌われている理由
2006年からあるツールですので、設計思想が古く、またレガシーなブラウザに対応する為に肥大化しているということも問題の一つにあげられるのだそうです。
当時はWebアプリケーションという考え方はなく、HTMLはただの「文書ファイル」。
データベースとのやり取りをする大規模アプリケーションにはjQueryでは辛いものがあるのだそうです。
Jqueryは直接要素を書き換えますが、最近は仮想DOMという考え方が主流だそうです。
書き換え処理をするのは仮想DOMの方で、表示にはそれを反映するだけ、という考え方みたいです。
それにより、高速化や設計しやすいなどいろいろメリットがあるみたいですね。（まだ勉強前なのでイメージで言ってる）
やりたいのはjQueryの置き換え
最初に書きましたが、複雑なことはやろうと思っていません。
現在jQueryで行なっていることがjQueryでおきかえられればいい・・・ただそれだけなのです。
それでは以下に具体的にどんなことがしたいか記載していきます。
- クリックでプログラムを起動する 済
- クリックで要素にclassを追加する 済
- スクロールで要素にclassを追加する(パララックス) 済
- ウインドウリサイズでプログラムを実行する 未
- スクロールアニメーション 未
プラグインで行なっていることの代替
- スライドショー 未
- スマホメニュー 未
- lightbox 未
この程度だと思います。
アニメーションに関してはCSSをできるだけ使えば問題ないと思います。
これから調べて記載していきたいと思います。
やってみよう
使い始めてみる
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
vue.jsをCDNで読み込むだけで使い始められます。簡単ですね。
Vueオブジェクトを作る
jQueryと違い、「vueオブジェクト」を最初に作ります
new Vue({
el: "#app",
data: {
count:0
},
methods: {
countUp: function() {
this.count++;
}
}
})
el → スクリプトの影響範囲の指定
data → 情報元の変数の指定(データベース)
methods → 実際に動かすスクリプトの名前を指定し、スクリプトを書く
クリックで起動する
jqueryの考え方とかなり違いますので頭を切り替える必要があります。
①vue オブジェクトで「影響範囲」「データの変数」「実際に動かす関数」を定めます
②HTMLの方では「影響範囲に指定したID」「実際にデータを表示する場所」「起動の条件(今回はクリック)と関数名」を指定する必要があります。
クリックでクラスをtoggle切り替え
メソッドのifで値をみて切り替えを行なっています。
「data」で作成した変数を操作するときは頭に「this.」をくっつける必要があるみたいです。
覚えておきましょう。
「v-if」でhtmlの方に書いてtoggleを実現する方法もあるみたいですが、自分が理解しやすいやり方で実装しています。そっちの方も試して、メリットがありそうなら追記します。
スクロールでメソッドを実行
https://jp.vuejs.org/v2/cookbook/creating-custom-scroll-directives.html
カスタムディレクティブといってディレクティブを作ることができるみたいですね。
試行錯誤の上こんな感じになりました。(カスタムディレクティブをつける要素がどこが適切なのかよくわかりません)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js sample</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<style>
.aaa {
background: red;
}
.bbb {
background: blue;
}
.scValue {
position: fixed;
top: 0;
left: 0;
}
</style>
<script>
window.onload = function () {
Vue.directive('scroll', {
inserted: function (el, binding) {
let f = function (evt) {
if (binding.value(evt, el)) {
window.removeEventListener('scroll', f)
}
}
window.addEventListener('scroll', f)
}
})
// main app
new Vue({
el: '#app',
data: {
actives: "bbb",
scPos: window.scrollY
},
methods: {
handleScroll: function (evt, el) {
this.actives = "aaa";
this.scPos = window.scrollY;
if (window.scrollY > 50) {
this.actives = "aaa";
} else {
this.actives = "bbb";
}
}
}
})
};
</script>
</head>
<body>
<div id="app" v-scroll="handleScroll">
<p class="scValue">{{scPos}}</p>
<h1 class="centered">Scroll me</h1>
<div>
<p>ダミーテキスト ダミーテキスト ダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキスト
ダミーテキスト ダミーテキスト ダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキスト.
</p>
<p v-bind:class="actives">
ダミーテキスト ダミーテキスト ダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキスト
ダミーテキスト ダミーテキスト ダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキスト
ダミーテキスト ダミーテキスト ダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキストダミーテキスト ダミーテキスト.
</p>
</div>
</div>
</body>
</html>
やはり得意なところはjsonのようなデータの出力とinputからの書き換えな気がする
いろいろ見てきましたが、上記の内容はjqueryに任せてしまった方が早いんじゃないか？と個人的に感じました。
inputでデータを書き換えたり、入力した内容を即HTMLに反映したり、サーバーで出力したjsonデータを表示したり・・・というところがやはりvue.jsの得意とするところなのだと思います。
webアプリ作るなら取り入れた方がいいけど、小規模な静的サイトなら特に入れる必要はないというのが自分の中の結論です。
次回は、jQueryとVue.jsの共存というテーマで調べて記事を書いてみたいと思います。
その方が現実に即していて、すぐに仕事に使えそうな気がする。
置き換えるのではなくて、共存しながら追加していく・・・という考えでいきます。このブログは。
