「jQuery」に見るJavaScriptの動向

#エンジニアブログ

 Web開発の分野で利用されることが多いプログラミング言語の「JavaScript」はその汎用性から人気のプログラミング言語の一つと言えます。主にWeb開発のクライアントサイドの動作を実装する際に利用され、コンピューター、スマートフォンはもちろんですが、今となっては最新の家電や車まで多くの製品・サービスに使われています。これまでも多くのWeb開発に使われてきた言語である一方で、その汎用的であるという強みが反対の意味で、つまり「専用ではない」ことがSEやプログラマーに多くの時間を使わせてしまってきた経緯がありました。それらを解消させることの一端を担っていたのが、開発で必要な枠組みや部品をセットにしたフレームワークやライブラリというものです。

今回は、多くのプロジェクトで採用されてきたJavascriptライブラリの一つである「jQuery」に焦点を当てようと思います。

 

 

jQueryの特徴

 jQueryとは、Javascriptをより簡単に記述できるように設計されたライブラリです。公式ページからフリーでダウンロードすることが可能で、多くのプロジェクトで採用されJavascriptの発展に貢献してきたライブラリであるため、学習コストが非常に低いということも特徴として挙げられます。ネット上にjQueryのサンプルソースがたくさんありますし、書籍も多数出版されています。

そして、最大の特徴はjQueryのコンセプトである「Write less, do more」と言えるでしょう。この言葉は「少ないコーディングで多くの機能を実装する」という意味で、jQueryはこの方針で開発されてきたからこそ、これまでJavascriptの発展を支えてくることができたと言えるでしょう。

 

「Write less, do more.(少ないコーディングで多くの機能を実装する)」ことの意義

 ではなぜ、少ないコーディングで多くの機能を実装できることが、Javascriptの発展に貢献してきたことにつながるのでしょうか?主な理由として、以下の2点が挙げられます。

 

・保守性が上がる

・開発コストが下がる

 

システム開発ではコードの量が多ければ多いほど、メンテナンスが大変になります。100行のソースコードと、1000行のソースコードを読むのとでは、そのコード理解するためにかかる時間が大きく違います。また、仕様変更や機能追加でコードに手を入れる際も、コードが少ないほうが時間もかかりませんしミスも軽減できます。結果、「少ないコードで書ける」ということは、システム改修がしやすくなりそれに伴い開発コストも下がるということになり、システム開発の規模が大きくなればなるほど、そのメリットも大きくなります。

 

では、jQueryで機能を実装してみると実際どれぐらいのコーディング量になるのか見てみましょう。

 

【1】マウスをクリックしたときの動作例

 例えば、「ユーザーが文字やテキストボックスなど何かの要素をクリックしたときにメッセージを表示する」という機能をjQueryで実装してみると以下のたった3行のコードを書くだけで実装できます。Idが「sampleId」となっている要素がクリックされた時、「クリックされました」というメッセージが表示されます。

 

$(‘#sampleId’).click(function() {

           alert(‘クリックされました’);

});

 

 

【2】背景色の設定例(cssの操作)

 特定の要素の背景色の設定は以下のように実装できます。css(スタイルを指定するための言語。フォント、文字の色、大きさなどを設定できる。)を操作しています。

 

$(“#sampleId”).css(“background-color”, “yellow”);

 

 

 

【3】アニメーションの実装例

 jQueryはアニメーションの実装も可能です。以下のコードで、idが「sampleId」の要素が左端から250ピクセルの位置に移動するというアニメーションを実装できます。

 

$(“#sampleId”).animate({left: ‘250px’});

 

 

このように、jQueryは非常に短いコードで機能を実装することができます。

 

まとめ

 jQueryは「少ないコードで実装する」の考え方を持つ有名なライブラリなので、知識を得ることで様々な課題を解決できるようになります。Javascriptのライブラリとして多くのシェアを占めてきたjQueryですが、最近では技術環境やユーザー環境の著しい変化により、利用は減少傾向にあるようです。jQueryと同じ考え方が一般通念化されてきたことにより、他のライブラリ・フレームワークが登場してきたことも一つの理由かもしれません。とりわけフロントエンド開発を取り巻く状況は常に変化をしていると言えます。開発言語の動向をウォッチし、その周辺情報をキャッチアップしていくことはSEやプログラマーにとって有益になっていくことでしょう。

 

関連する記事