前提

Webフロントエンジニア。動的なWebページを作りたいと思っている人。jQueryとJavascriptの違いが分かっていない人。javascriptが苦手な人など。

自分はWebのエンジニアだ！と胸を張る人でも、「ああ、じゃあjavascriptまわり全般お願いしますね」というと、途端に背筋が丸くなってしまう人が多い。実際のところ、デザイナーが通信回り以外のjavascriptを組んでしまうことも少なくない。datepickerやlightboxのようなメジャーなUIがお手軽に組めるようになったことや、紹介コンテンツが充実してきたことも背景にあると思う。

結果として、javascriptが得意ではないエンジニアがコードを書くと、JQueryとjavascriptが混在したカオス状態の納品物が仕上がってしまう。このケースのほとんどが、どこかのサイトからコピペしてきたスクリプトの寄せ集めでできたものが原因。まさにキマイラ状態だ。

動くからいいだろ？

いやいや、そんなことはない。サーバーサイドのプログラムであれば、あなたのコードは隠蔽されている。ユーザーからはうかがい知ることはできない。しかし、javascriptは単なるスクリプト、ブラウザの機能で見放題なのだ。例えば、大手メーカーのイカシタWebサイトがあったとして、そのjavascriptがキマイラ状態だったらどう思われるだろう？もちろん、それを書いた人は何とも思わない。でも、スクリプトに理解のある人だったらどうだろう？

ちなみに、自分だったら「ここはないな」と線を引く。フロントの目につく箇所の作りが粗雑ということは、目につかないところはカオスになってるのでは？と考えてしまうからだ。これは当然、htmlにも言えること。ループしていてインデントが崩れているところ、あえて難読化しているところは無視するとして、見た目が汚かったりstyle属性を使ってデザインが直接制御されている個所だらけだったら？

いわば、フロントっていうのはそのサイトの「顔」なのだ。

で、違いは何なの？

■javascript

まずはjavascriptとは何なのか、から。言わずと知れたインタプリタだ。実行しているのはブラウザ。ブラウザには描画用のエンジンが組み込まれていて、ブラウザごとに似て非なるものになっている。昨年そうそう(2020年)に、EdgeがChromeのエンジンを使用するという方向転換が発表されて、フロントエンジニアの間で騒ぎになった。IEという巨大な壁に苦い思いをしたエンジニアはなおのこと。衝撃的なニュースだった。

「他では動くのに、IEだけダメです！」

「IEだけデザインが崩れるんです！」

みたいな話がたびたび聞かれたからだ。Microsoftは、自分たちの作ったエンジンで標準化を行いたかったのかもしれないが、そうはならなかった。パソコン全盛期であればまだ芽があったかもしれないが、今は完全に尻すぼみ状態。日常的にパソコンを使っている人よりも、スマートフォンやタブレットを使う人のほうが多くなってしまった。

しかも、スマフォは一人一台の時代だ。一昔前に「パソコンは一人一台の時代だ」なんていわれたこともあったが、あまりにも短命すぎた。Microsoftがgoogleへの歩み寄りを発表した瞬間、私の中で「ああ、パソコンの時代は終わったんだな」ってしみじみ思ったものだ。

余談はこれくらいにして、、、このくらいブラウザごとに描画や動きが異なる、ということだ。なるべく同じようにしようね、というルールはあるものの、イコールではない。つまるところ、javascriptの動作も完全に一致するかというと、そこはグレーの状態なのだ。エンジンに依存することになる。

■jQuery

こちらは、javascript言語で書かれたライブラリを指す。便利機能がいっぱいあって、直感的にコードを書けるのも魅力的だ。毎年春にバージョンアップも行われているし、年々進化を遂げている。何より魅力的なのが、ブラウザ間の挙動の違いをライブラリ側でラップしてくれているところだ。ajax、の単語一つでサーバーへの通信をしてくれると知ったときは、本当に衝撃的だった。それまでは、IE系だったらこっちのxmlhttprequest投げて、mozillaだったらこっち、みたいなif文を書いて～というのが定番だったからだ。

まさにマルチプラットフォーム！と感動したものだ。

と、ここまで書けば、javascriptとjQueryの違いって何なのか、わかっていただけると思う。

ブラウザのエンジンに依存するのがjavascript。依存はしているが、挙動を「なるべく」統一してくれているのがjQuery。その二つが、同じメソッドの中に混在していたらどうだろうか？

まとめ

たまに、びっくりするようなバグが検出されることがある。こっちのブラウザでは動いたけど、このブラウザだったら動かないよ、という指摘が飛んでくることもある。その逃げ道として、「このサイトの推奨環境はこちらです」なんて記載しているところもあるけど、ユーザー側から見れば知ったととではない。「使えないサイトだ」と3秒たたずに離脱していく。

フロントエンジニアは、こういった細かい点も気を配る必要があるのだ。。。なので、もうちょっと優しくしてね？