.net column

.NET開発者のためのブログメディア
webデザイン

jQueryのサンプル利用のメリットとデメリット&使えるサンプル3選

2019年11月15日

「jQuery」はJavaScriptのライブラリ群で、多くの機能が用意されているため、非常に便利なライブラリです。
jQueryを利用しているWebサイトも多いため、サンプルコードを公開しているサイトも多いです。
サンプルコードを利用することで、実装の手間も省くことができます。

SE
jQueryにはサンプルコードがあるのですね。サンプルコードを利用するメリットとデメリットはなんでしょうか?
PL
jQueryはたくさんのサンプルコードが公開されています。メリットとデメリット、使えるサンプルを一緒に確認しましょう。

jQueryのサンプルコードを利用するメリットとデメリット

サンプルコードを利用するメリットは、実装に掛かる時間が短縮できることです。
jQueryは多くの機能がありますが、汎用的に使える部分も多く、サンプルとして公開されているコードそのままでも利用できるくらい、実装のハードルは低くなります。

そして、jQueryを利用しているWebサイトも多いため、公開されているサンプルの数が豊富であることもメリットです。

逆にデメリットは、そのまま利用できる分、コードの内容が分からなくても実装できてしまうという点です。
サンプルとして公開されているコードと全く同じ機能を実現したいということであれば、コードの内容を詳細まで理解していなくても大丈夫かもしれません。しかし、少しカスタマイズしたい場合などは、コード内容を把握する必要があり、理解していないと難易度が上がります。

ただ、デメリットを鑑みてもメリットの方が大きいので、利用しない手はありません。

jQueryの使えるサンプルコード

使えるサンプルコードを紹介します。

表示/非表示切り替え

ボタンをクリックすると、表示されている文言の表示/非表示が切り替わる機能です。
以下に例を記載します。

idがtargetというdivタグを用意します。
ここに表示/非表示を切り替える文言が記載されています。

切り替えボタンをクリックした際に、changeメソッドを呼び出します。

切り替えしているのが、下記の部分です。

#targetという要素を指定して、toggleというメソッドを呼び出します。
toggleというメソッドが表示/非表示を切り替えるメソッドです。

実際の画面は以下の通りです。
表示と非表示の切り替え

切り替えボタンをクリックすると、以下のように非表示になります。
切り替えボタン

表示する/非表示にする

先ほどのメソッドは表示/非表示の切り替えでした。
次は、それぞれ表示する処理と非表示にする処理です。

まず、表示はshowというメソッドを使用します。
指定した要素に対して、showメソッドを使用することで対象の要素が表示されます。

対して非表示はhideというメソッドを使用します。
表示と同様に、指定した要素に対してhideメソッドを使用することで対象の要素が非表示となります。

実際の画面は以下の通りです。
・初期状態
表示と非表示の初期状態

・文言1のみ表示するボタンをクリックした状態
文言1のみ表示

showやhideは、いくつかの要素の中から指定した要素だけ表示する、というような場合に使用します。

SE
サンプルコードを使用することで、簡単に処理が実装できますね。コードを把握することが大事なことも分かりました。
PL
サンプルコードをうまく利用して、より簡単に高機能なWebサイトを作っていきたいですね。

jQueryのサンプルコードを利用すれば、実装に掛かる時間が短縮できる

jQueryのサンプルコードを利用することには、メリットとデメリットがありますが、メリットが大きいため利用をおすすめします。
jQueryのサンプルコードからスキルや知識を習得しながら、機能が簡単に実装できるので、jQuery のサンプルコードを利用してみてはいかがでしょうか。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

求人一覧

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)