B-Teck!

お仕事からゲームまで幅広く

【JavaScript/jQuery】We don't need jQuery?

昔書いてたメモが出てきたので、今更ですが供養。
正直今でも作り捨てとか、とりあえず作るならjQuery使ってもいいんじゃないかな?って思ってる。

jQueryとはなんだったのか

  • ブラウザ間でJavaScriptの実装が大きく異なっていた時代に、共通の実装が行えるように差異を吸収していたライブラリ。
    • ぶっちゃけ今でも差異はあるけど頑張れる範囲になってきた
  • 簡潔な実装からWebFront界隈で広く利用されており、jQueryに依存するライブラリも多数存在した。

なぜjQueryをやめるのか

不要なライブラリを読み込むことによる動作遅延

  • ただし70〜100KB前後なので、現在の通信環境ではほぼ問題なさそう

動作が遅い

  • jQueryはブラウザ間の差異を吸収するようにできているため、現代のブラウザには不要な分岐がある。
  • jQueryオブジェクト等の生成のコストもあり、現在の環境では不必要な処理が多い。
    • ついでにDOMを直接触るため、最近の仮想DOMを用いるフレームワークとの親和性が低い

jQueryでできていたことが、ES自体の仕様として取り込まれつつある

この辺参考
- jQueryのfindなどをquerySelectorで書く - Qiita
- You Don't Need jQuery - Qiita

jQueryで指定していたアニメーションがCSSで実現できるようになった

Pros/Cons

Pros

  • 不要なファイル(jQuery本体)を読み込まなくて良くなる
  • 本来必要ではない処理コストを削減できる
    • 標準APIに移行することでjQueryへのロックインがなくなり、他のフレームワークなどと組み合わせやすい
    • 近年流行っている仮想DOMとjQueryはだいぶ相性が悪い
  • スクリプトで行うべきこと、CSSで行うべきことの責務が明確になる

Cons

  • なんだかんだいってもjQueryの互換性担保は魅力
    • 現状、IE対応でPolyfillやBabelによるトランスパイルが必要となるケースはまだある
  • jQueryの方が記述が簡潔になるケースも多い
  • 長い間使われてきているプラグインにはjQuery必須のものもある
  • 小規模の開発ではjQuery使ってさっくり作るほうが良いこともある
    • VueやReactを入れるほどではない開発規模とか、標準APIだとまだ冗長になる部分とか

【JavaScript/Vue.js】Vue.jsとVuetifyを使ってTodoリストを作ってみた

f:id:beatdjam:20190629195739p:plain

ちょっと会社でVueを触る機会があったので、勉強がてらTodoリストを作ってみました。
リポジトリと動作サンプルは下記
GitHub - beatdjam/training_vue-cli-todo
サンプルページ

やったこと

vue-cliインストール

$ npm install -g @vue/cli

プロジェクト作成

$ vue create my-project

Vuetify導入

$ vue add vuetify

ファイル整理

Todoを作り始めるにあたっていらないファイルを削除
[remove]Unnecessary files removed · beatdjam/training_vue-cli-todo@3fb851f · GitHub

完成イメージを考える

適当にUIイメージをメモに書き出すなど

必要なComponentをVuetifyのサイトで検索して配置

とりあえず今回はこの辺のドキュメントをサラッと眺めました

  • v-toolbar
  • v-form
  • v-text-field
  • v-btn
  • v-date-picker
  • v-list
  • v-checkbox
  • v-icon

Quick Start — Vuetify.js

追加・削除の処理などを実装

コンポーネントに頼ったので、ロジック的には追加・削除しか書かずに実装できました。

Github Pagesに公開

下記のページを参考に設定
https://www.shookuro.com/entry/2019/02/02/174655

感想

Vue.jsの機能とVuetifyのコンポーネント群を利用することで、
曖昧な理解でも簡単にそれなりのアプリケーションを構築することができてしまいました。
小さめのプロダクトをスモールスタートするときに使うには良いと思います。
ただ、jQuery等と同様に、裏側の処理等を知らないまま負債を積み上げてしまうような気がしました。
最近 Vue.js入門 基礎から実践アプリケーション開発まで を購入したので、
読み進めながらもっと勉強していきたいと思います。

Vue.js入門 基礎から実践アプリケーション開発まで

Vue.js入門 基礎から実践アプリケーション開発まで

  • 作者: 川口和也,喜多啓介,野田陽平,手島拓也,片山真也
  • 出版社/メーカー: 技術評論社
  • 発売日: 2018/09/22
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログを見る

【JavaScript/jQuery】後から生成されたDOMからイベントを発火させる

jQueryの場合

昔こういう事するときはjQueryのlive()を利用していたんだけど、1.9で死んでた。

$("p").live("click", function(){
    $(this).after("<p>これもクリックできる</p>");
});

1.9以降で同じ挙動させるならonを使う

$(document).on('click', 'p', function() {
    $(this).after("<p>これもクリックできる</p>");
});

documentの部分を別のjQueryオブジェクトにすると、
そのオブジェクト配下だけで動的にイベントが付与される。

// hoge配下にp要素ができたときだけイベントを付与
$("#hoge").on('click', 'p', function() {
    $(this).after("<p>これもクリックできる</p>");
});

jQueryの場合のサンプル

See the Pen EOwjbB by beatdjam (@beatdjam) on CodePen.

pure JSの場合

pure JSの場合は、親要素にイベントを仕込んで、eventのtargetの属性を見ることで対応するっぽい。
対象のelementの条件がidか、classか、tagNameかによって挙動が変わって分かりづらい。
正直jQueryのほうがきれいだと思う。

document.addEventListener('click', function (e) {
    // idの場合はこう
    // if (e.target.id === 'hoge') {
    // class名指定の場合はこう
    // if (e.target.classList.contains('hoge')) {
    // タグ名指定の場合はこう(大文字で取れるのでtoLowerCaseしている)
    if (e.target.tagName.toLowerCase() === 'p') {
        e.target.insertAdjacentHTML('afterend', "<p>これもクリックできる</p>")
    } 
});

JSでもaddEventListenerするelementを絞ってやることができる。

document.querySelector("#hoge").addEventListener('click', function (e) {
    if (e.target.tagName.toLowerCase() === 'p') {
        e.target.insertAdjacentHTML('afterend', "<p>これもクリックできる</p>")
    } 
});

JavaScriptの場合のサンプル

See the Pen WYZvOd by beatdjam (@beatdjam) on CodePen.

insertAdjacentHTMLについては下記参照。便利。
innerHTML より insertAdjacentHTML を使う - Qiita