読者です 読者をやめる 読者になる 読者になる

フロント開発初心者向け 〜 jQueryが何を提供してくれているのかを考えてみる 〜

こんにちは。TECH DRIVEの小笠原です。
自分がよく参加させていただいているもくもく会でフロント開発初心者の方から、jQueryについての質問をいただくことが多く、その中で↓の様な悩みを抱えてる方って多いのでは?と感じたので、フロント開発初心者の方に向けて、この記事を書くことにしました。

  1. JavaScriptとjQueryの違いが曖昧
  2. jQueryを独立した開発言語だと思っている(ライブラリと言われてもしっくりこない)
  3. jQueryを使うと何が嬉しいのかがいまいちわからない

jQueryを使用する上で、ライブラリが包含してくれている処理やメリット/デメリットを意識することは、開発効率にも影響を及ぼします。
この記事が少しても上記の様なお悩みを持っている方のお役に立てればと思います。

jQueryが提供してくれているもの

まずはじめにjQueryとは何者かをおさらいしたいと思います。 jQueryとはざっくり言うとJavaScriptが提供している機能をより扱いやすくしてくれるためのライブラリです。
jQueryを使用することにより、JavaScriptが提供してくれている一部の機能が簡潔に書ける様になります。

f:id:kabaneshi:20170105025307p:plain

ではjQueryはJavaScriptのどの様な処理を扱いやすくしてくれているのでしょうか?
jQueryが提供してくれる機能で頻繁に使用されるものを以下に記載していきたいと思います。

DOM操作

DOM(Document Object Model)とはHTMLやXML文書を取り扱うためのAPIです。 小難しく書きましたが、JavaScriptにおいてDOMとはHTMLで記載された文章を操作するためのインターフェース(仲介役)です。

例えば、以下の様にprofileというidを持ったHTML要素のテキスト情報を取得する場合を考えてみます。

HTML

<p id="profile">僕はエンジニア</p>

JavaScript

// ネイティブのJavaScriptで書いた場合
document.getElementById('profile').innerHTML; // "僕はエンジニア"

// jQueryで書いた場合
$('#profile').text(); // "僕はエンジニア"

上記はどちらともDOMを介して、HTMLの要素 id="profile" が持つテキスト情報を取得しています。 しかし、jQueryで書いたコードの方がより簡潔であることが分かるかと思います。

また、この手のDOM操作を行うメソッドをネイティブのJavaScriptで書く場合、古いブラウザ(IE8以下のMS製ブラウザ等)において、挙動がおかしかったり、そもそもHTML要素の取得を行うメソッド名が違っていたりするケースが存在します。
※ class名から要素を取得するgetElementByClassはIE8以下のブラウザでは実装されていなかったりします。

jQueryでは、この様な複数のブラウザ間における差異も吸収(クロスブラウザ対応)してくれるメリットもあります。

イベント処理

イベント処理とはブラウザ上で何かイベントが発生したタイミングで実行される処理を指します。

f:id:kabaneshi:20170105025629p:plain

例えば、Webページ読み込み時に発生するイベントで何かしらの処理を実行したい場合(※)のコードをJS/jQueryそれぞれで書くと以下の様になります。 ※ DOM構築完了時に処理を実行する場合

// ネイティブのJavaScriptで書いた場合
document.addEventListener('DOMContentLoaded', function() {
  実行したい処理
});

// jQueryで書いた場合
$(function(){
  実行したい処理
});

やはり、jQueryのコードの方が簡潔です。
またjQueryを使用する際、よく上記の様なコードを見ることはありませんか?
このコードの正体は、DOM構築が完了したら処理を実行してねという命令文だったんですね。

また、JavaScriptを書いているとブラウザ上で何かしらのユーザーイベントが発生したタイミングで処理を実行したいケースがあります。

例えば、サイト上のボタンがクリックされたら何か処理を実行した場合等です。

下記にWebサイト上のボタンクリック時にイベント処理を行うためのコード(※)を書いてみます。
※ 下記のコードは、JS/jQueryでユーザーイベント処理を設定する場合の一例です

HTML

<button id="event_btn">イベントボタン</button>

JavaScript

// ネイティブのJavaScriptで書いた場合
var btn = document.getElementById('event_btn'); // ボタン要素の取得
btn.addEventListener('click', function(){ // イベント処理登録
  実行したい処理
});

// jQueryで書いた場合
var btn = $('#event_btn'); // ボタン要素の取得
btn.on('click', function(){ // イベント処理登録
  実行したい処理
});

やはりjQueryを介して書かれたコードの方が簡潔に見えます。

先ほどの「DOM操作」の項でも記載しましたが、ここでもjQueryはクロスブラウザ対応をしてくれています。
ネイティブのJavaScriptの場合、IE8以下ではaddEventListenerが存在していないので、代わりにattachEventメソッドを使用し同等の処理をおこないます。

いかがでしょうか?ここまで読んだいただくとjQueryが何者でどの様なメリットを提供してくれているかが少し見えてきたのではないでしょうか。
また、既にご存知の方もいるかと思いますが、どのコードにもjQueryを使用する際に必ず$マークが存在しています。
実はこの$こそがjQueryの正体であり、jQueryの機能は全てこの$を通して提供されます。

jQueryのデメリット

ここまでjQueryのメリットばかりを記載してきましたが、デメリットについても少し紹介をさせていただきます。

1. 読み込みを行うファイルが増える

jQueryの機能を使用するためには、jQueryファイルを読み込む必要があります。読み込むファイルが増えるということはサーバとの通信が増えるということになり、その分Webページを表示するスピードは遅延します。
※ jQueryの読み込みだけでは、ユーザーに影響を及ぼす程の遅延は発生しませんが、HTML上から読み込むファイルが増えれば、それだけサーバとの通信が増えるということは意識しておくといいかもしれません。

2. 処理が遅くなる場合がある

上記で挙げたクロスブラウザ対応等をしてくれているため、jQuery内部では複雑なJavaScript処理が行われています。書き方や処理内容によってユーザーの体感速度を落としてしまう場合もあります。 for文等の繰り返し処理の中で、不要にjQueryメソッドを使用してしまっているケースなどが例として挙げられますが、この部分はコードが合ったほうがわかりやすいかと思いますので、そちらに関しては別途記事を書こうと思っています。

まとめ

昨今は、フロント環境の変化に伴い脱jQueryの傾向も強まってきています。
上記であげたデメリット以外でも最近のJSフレームワークとの相性問題やモダンブラウザにおいてクロスブラウザ対応をあまり気にする必要がなくなってきたということもあり、jQueryの導入に推敲が必要な時代になってきています。

しかし、僕個人の感想としては、やはりjQueryが提供してくれているインターフェースは素晴らしいもので、もうしばらくはjQueryをお世話になることが多い様に感じているため、この記事を書かせていただきました。
この記事が少してもフロント開発初心者の方のお役に立てたのなら幸いです。

初心者向けにできるだけ噛み砕いてみるオブジェクト指向 vol.0 プログラマーはどのようにソフトを作りたいのか

はじめに

TECH DRIVEの佐藤正志です。こんにちは。

この文章やそれに繋がる一連の連載は、プログラミングを少しやってみたけどまだこれからの人たちへ「オブジェクト指向ってこんなもの?」というのを伝えられないかと思って頑張って書いてみているものです。そのため専門的な言葉やニュアンスが多少実情と違っている可能性をご理解ください。

書いてる私としては、結構繊細な内容でもあるので多少の緊張もありますね。お手柔らかにお願いします。 最初はコードの話が出てきませんが、回を追うごとにだんだん出てくる想定で進めています。

そして今回は vol.0 ということで、まだオブジェクトの話は出てきません。期待してくださった方、vol.1 以降を楽しみにしていてください。

「新たな要望を短時間で実現する」という目標のために

物事を考える時に、目指している理想の姿や目標を知ることは理解する手助けになるはずです。そこでまずは「より良いソフトウェアを開発しようとする際にどんなことを目標にしているのか」について、意識を合わせさせてください。

ソフトウェアの世界にはオブジェクト指向に限らず多くの考え方・方法論がありますが、大きな目標としては「新たな要望を短時間で実現する」ということに集約されると考えて良いと思います。

要望は大きく分けると新規開発、追加開発、保守対応などあると思います。「短時間で実現」という言葉から新規開発でのリリースまでの時間をイメージした方がいるかもしれませんが、その後の追加や保守の時間も減らすべき目標になっていると理解してください(ぐちゃぐちゃなソフトをとっととリリースすると、その後の追加開発や保守がとても遅くなります。これでは目標を達成できません)。

f:id:ms2sato:20161128154456p:plain

そしてよく聞く「品質」という言葉はこの目標の達成しやすさの度合いを表していると思います。「品質の高いソフトウェア」は新規開発のみならず、追加や保守への要望に素早く対応できるものと言っても良いのではないでしょうか。

目標を達成するには何を心がけたら良いのか

目標を達成したい技術者の心の声を要望として分解して示してみます。私は下記のような感じです。おそらくある程度の技術者が賛同してくれるのではないかと思っています(性能等についても考えていますが、主題と外れるので外しました)。

f:id:ms2sato:20161128152142p:plain

これは要望をまとめたものですが、逆に考えると、広く受け入れられている方法論はこういう要望を実現しやすいもののはずです。今回話題にしたいオブジェクト指向も上記のような多くの要望を実現するための「道具の一つ」であると考えて良いでしょう。

実際にやるのは「わかりやすくまとめて分割する」だけ

前項で見たような様々な要望があるにもかかわらず、ソースコードの扱いという切り口から考えると「わかりやすくまとめて分割する」ということしかしていないように思います。例えば下記のようなまとめ方があったりします。

  • 関数を作る: ある処理に名前をつけてまとめてしまうことで、名前を呼ぶだけで一連の処理を呼べるようになります。呪文を作る、のような感じですね。
  • ファイルを分ける: 一つのファイルにたくさんのことが書いてあるとわかりにくくなっていきます。ある一定の単位でファイルを分けるということをします。長くなってしまった呪文の書を章ごとに複数の本に分けたりするようなイメージですね。
  • モジュール化する: 複数の関連するファイルをまとめて、コードの関連をわかりやすくします(言語や環境によってモジュールという言葉の指す意味が違ったりしますが、設計で広く知られていそうな表現で示しました)。呪文の書が増えてきた時に、「xx編」のようなまとまりを作るような感じでしょうか。

オブジェクト指向でよく出てくるクラスもこの「ソースコードのまとめ方」の一つです。また「何をどのようにまとめるか」の上手下手で、ソフトウェアの品質はかなり変わってしまいます。整理整頓が上手であれば、ソフトウェアは素早く変更に対応しやすくなる、というイメージが伝われば幸いです。

上手なまとめ方の強い武器であるオブジェクト指向について、これから少しずつお送りしていきたいと思います。 続きはこちら

TECH DRIVEについて

TECH DRIVEは「技術者の成長を加速させる」をキーワードに都内で活動をしているコミュニティです。
TwitterやFacebookにて技術ネタやイベント情報の発信を行っていますので、ご興味があれば、いいねやフォローをお願いいたします。