スポンサーリンク

[JavaScript]JQueryとdocument、どっちを使う?【HTML5】

インターネット小話プログラミング

インターネットの情報の特徴として、新しい情報も過去の情報も混在しています。過去の情報を元にした新しい記事もあるため、「何が最新なのか」わかりにくい面があります。

JavaScriptでウェブページの要素にアクセスしようと、インターネットで検索すると、「JQueryを使った方法」と「document」を使った方法が出てきます。

そこで悩むのが、いったい どっちを使う方がよいのか、ということです。

スポンサーリンク

JQueryとgetElementBy〜

例えば、idセレクタからDOM要素にアクセスする方法を検索すると、

var element = $('#message');
element.text("Hello world!");
var element = document.getElementById('message');
element.innerHTML="Hello world!";

の2通りの方法が出てきます。

それぞれの方法で返すオブジェクトが異なるので、操作メソッドは違いますが、これでHTML内の要素から文字列を取り出したり、変更したりができます。

スムーズにいけばどちらでもよいのですが、特にElectronでjqueryを利用しようとしてrequireで失敗したりして、どちらを使うか迷いました。

まだブラウザが機能を拡張していた時代

そんな疑問に対して腑に落ちたのが、「JQueryの人気が落ちてきているのはなぜですか? – Quora」の回答です。

html5が受け入れられるようになり、dom操作が簡単になったからです。

html5より前はdom操作が難しくて、凄く描きづらかったです。jqueryはこの難点を埋める方法として使われているに過ぎません。今でもie対応を考えるなら必須です。

しかし、html5になりjqueryのような形式で書く事が出来るようになりました。このためjqueryは要らないようになりました。

JQueryの人気が落ちてきているのはなぜですか? – Quora

今でこそ、ブラウザ間の違いが小さくなりましたが、ここに至るまでにブラウザが機能を拡張していく時期がありました。それぞれのブラウザで機能の対応状況が異なるため、「コードを書き分ける」必要があったのです。

Document – Web API | MDN

特に Internet Explorerは、シェアが大きな割に独自色が強く、ブラウザによってうまくいかない「互換性」の問題が多くありました。

JQueryはブラウザ間の違いを埋めていた

JQueryは、そういったブラウザ間の違いを埋めるためのライブラリだった、ということで、すごく納得しました。

JQueryの「Query:クエリ(問合せ)」は、データベースなどの用語で、キーワードを元にパッと探してきてくれる、という意味合いがあります。

以前は、ブラウザごとに長々と条件を付けてコードを書かないとアクセスできなかったわけです。短く書けることはコードのメンテナンスにも役立ちました。

その後、今では標準のDocumentインターフェイスでも、「パッと探してきてくれる」ようになったので、JQueryの必要性は低下することになります。

ということで、特に必要がなければ、標準のDocumentインターフェイスを利用して、DOM操作をしようと思いました。

こちらもどうぞ

どうして Windows XP でインターネットに接続できないの?【JWordプラグインが破損】(Let's note CF-W7の場合)
家のパソコンをインターネットにつなごうとしたら、「プラグインが破損」というメッセージが表示されて進まないの。どうしてなのかな?よく、「古いパソコンはセキュリティの問題があって、インターネットにつないではいけない」と言われますが...
SBI証券の指値注文で価格が入力できない【パスワード管理とinputのtype属性】
ネットで株を購入しようとして 価格を入力しようとすると、「次のアカウントで続行」という画面が表示されるんだけど、どうしたらいい?スマホのChromeブラウザで、SBI証券にログインしたところ、指値注文の価格の入力で、うまく進み...
「ARで動く年賀状」のしくみ? 【ARとかQRとか】
「AR動く年賀状……?」近江印刷株式会社さま(omi-in.co.jp)の近江タイムス(第1248号、令和2年11月5日(木)発行)に掲載された広告が目に留まりました。「ARで動く年賀状」、なにやらワクワクする内容...
MacにNode.jsをインストールした
MacでローカルにJavaScriptを使うために、Node.jsをインストールしました。手順をメモしておきます。「Node.js」からMac用インストーラをダウンロードして、インストールします。LTS...
QRコードを読み込むと、関連記事を確認できます。
[JavaScript]JQueryとdocument、どっちを使う?【HTML5】
タイトルとURLをコピーしました