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

Javascript
プログラミング言語

公開日時: 2019-11-15 　更新日時: 2022-06-08

この記事でわかること

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

システム エンジニア: jQueryにはサンプルコードがあるのですね。サンプルコードを利用するメリットとデメリットはなんでしょうか？

プロジェクト リーダー: jQueryはたくさんのサンプルコードが公開されています。メリットとデメリット、使えるサンプルを一緒に確認しましょう。

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

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

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

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

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

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

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

表示/非表示切り替え

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

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
    function change() {
        $('#target').toggle();
    }
</script>
</head>
<body>
<div id="target">表示非表示</div>
<input type="button" onclick="change()" value="切り替え">
</body>

<head>

function change() {

$('#target').toggle();

}

</script>

</head>

<body>

<div id="target">表示非表示</div>

</body>

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

<div id="target">表示非表示</div>

10	<div id="target">表示非表示</div>

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

<input type="button" onclick="change()" value="切り替え">

11	<input type="button" onclick="change()" value="切り替え">

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

$('#target').toggle('slow');

5	$('#target').toggle('slow');

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

実際の画面は以下の通りです。

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

表示する/非表示にする

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

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div id="target1">文言1</div>
<div id="target2">文言2</div>
<div id="target3">文言3</div>
<input type="button" id="btn1" value="文言1のみ表示">
<input type="button" id="btn2" value="文言2のみ表示">
<input type="button" id="btn3" value="文言3のみ表示">
<input type="button" id="btn4" value="全部表示">
<input type="button" id="btn5" value="全部非表示">
<script>
    $('#btn1').on('click', function() {
        $('#target1').show();
        $('#target2').hide();
        $('#target3').hide();
    });    
    $('#btn2').on('click', function() {
        $('#target1').hide();
        $('#target2').show();
        $('#target3').hide();
    });    
    $('#btn3').on('click', function() {
        $('#target1').hide();
        $('#target2').hide();
        $('#target3').show();
    });    
    $('#btn4').on('click', function() {
        $('#target1').show();
        $('#target2').show();
        $('#target3').show();
    });    
    $('#btn5').on('click', function() {
        $('#target1').hide();
        $('#target2').hide();
        $('#target3').hide();
    });    
</script>
</body>

<head>

</head>

<body>

$('#btn1').on('click', function() {

$('#target1').show();

$('#target2').hide();

$('#target3').hide();

});

$('#btn2').on('click', function() {

$('#target1').hide();

$('#target2').show();

$('#target3').hide();

});

$('#btn3').on('click', function() {

$('#target1').hide();

$('#target2').hide();

$('#target3').show();

});

$('#btn4').on('click', function() {

$('#target1').show();

$('#target2').show();

$('#target3').show();

});

$('#btn5').on('click', function() {

$('#target1').hide();

$('#target2').hide();

$('#target3').hide();

});

</script>

</body>

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

$('#target1').show();

15	$('#target1').show();

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

$('#target2').hide();

16	$('#target2').hide();

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

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

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

システム エンジニア: サンプルコードを使用することで、簡単に処理が実装できますね。コードを把握することが大事なことも分かりました。

プロジェクト リーダー: サンプルコードをうまく利用して、より簡単に高機能なWebサイトを作っていきたいですね。

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

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

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

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

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

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

表示/非表示切り替え

表示する/非表示にする

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

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

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

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

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

表示/非表示切り替え

表示する/非表示にする

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

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

関連記事Related Posts

jQueryの使い方とは？覚えておきたい基本事項やサンプルを紹介

【jQuery入門編】jQueryの読み込み・要素の追加方法

手軽にWebページにアニメーションを導入できるCDNのjQueryとは

jQueryで使えるメソッドの一覧とよく使うメソッドの紹介

jQueryでAjaxを実装してサイトの非同期通信処理を行う