jquery

「jQuery」という言葉をあなたは聞いたことがあるでしょうか?

「これからjQueryを勉強したい!」「jQueryについて知りたい!」そんな方のために「jQueryとは何なのか」「jQueryをどのように使えばいいのか」「jQueryを使うメリット」「jQueryを使ってどんなことができるのか」など、基礎的なことを中心にお伝えします。

それでは、さっそく見ていきましょう。

 
運営者情報
ken logo 100x100 - jQueryでできることやメリットは?使い方の具体例を勉強したい初心者に徹底解説

WordPressなどのインターネットサービスを利用して、WEBメディア制作などを行っている、株式会社ドミニオン 代表取締役 河村健一です。

約10年くらいの経験と知識を用いて、おすすめできるサービスやWordPressの始め方をご紹介しています。

Twitterでは日々、SEOに関することや近況を発信していますので、是非こちらもチェックしてみてください!

Twitter:https://twitter.com/ken84620459

jQueryとは?

jQuery 1024x532 - jQueryでできることやメリットは?使い方の具体例を勉強したい初心者に徹底解説

出典:jQuery

jQueryは、2006年1月にリリースされた「JavaScript」のライブラリになります。

ライブラリとは、

ある特定の機能を持ったコンピュータプログラムを他のプログラムから呼び出せるように部品化して、そのようなプログラム部品を複数集めて一つのファイルに収納したもの(IT用語辞典 e-Wordsより)

jQueryは、あくまでもJavaScriptを拡張したものであり、jQuery=JavaScriptではありません。混同しないようにしてくださいね。

jQueryのロゴに「write less, do more.(より少ない書き方で、もっと多くこなす)」とあるように短いコードで機能を実現できます。また、jQueryのファイルを読み込むだけで使うことができます。

また、Web上で使われている技術や種類を調査、報告している「W3Techs」によると、Webサイトの70%以上にjQueryが使われているというデータもあります。

jQueryは、それだけ需要が高まっていると言えます。また、「Web業界の発展に最も大きく貢献している世界標準のJavaScriptライブラリ」とも言われています。

それだけ多くのWebサイトに使われているのは、ある大きなメリットが存在するからです。

そのメリットとは一体何なのでしょうか?

jQueryのメリットとは?

career 1019910 640 - jQueryでできることやメリットは?使い方の具体例を勉強したい初心者に徹底解説

1.どんなブラウザでも使える

これが70%以上のWebサイトでjQueryが使われる理由です。

ブラウザには、Googleの「Google chrome」やMacやiPhoneで使われる「Safari」、Windowsに標準搭載されている「Internet Explorer」や「Microsoft Edge」など様々なブラウザがあります。

ブラウザによって少し仕様が異なっています。これによって、同じJavaScriptのコードでも思った通りに動作しないなどの問題がありました。

ですが、jQueryはブラウザの違いを理解して、どのブラウザでも同じコードで同じように動作するようにしてくれます。

2.コードの量を減らせる

jQueryを使うことで少ないコードの量で1つの機能を実現することができます。

例えば、JavaScriptで1つの機能を実現するのに10行ほど使って書いていたとします。これと同じ機能を実現するためにjQueryを使うと1、2行で実現することもできます。

コードの量を減らすことによって、開発期間を短くして開発の効率を上げることができます。さらに、エラーを減らすことにもつながります。

また、シンプルでわかりやすいプログラムになっているのでデザイナーでも扱いやすいライブラリになっています。

3.プラグインが豊富

jQueryには便利なプラグインがたくさん用意されています。

プラグインとは、

アプリケーションソフトウェアの機能を拡張するために追加するプログラムの一種(Wikipediaより)

プラグインを使うことでより簡単に見た目がきれいなサイトにすることができたり、簡単に高度な機能を実装することができます。

例えば、下のようなプラグインが用意されています。プラグインのURLも載せてありますので、そちらを参考に見てみると良いでしょう。

・アニメーションのように動きをつけるプラグイン(http://animejs.com/

・画像やバナーなどをスライドして動かすようなプログラム(http://bxslider.com/

・ページの見た目を調整してくれるようなプラグイン(https://masonry.desandro.com/

・SNSと連携させるために用いるプラグイン(http://js-socials.com/

このほかにもたくさんのプラグインが用意されています。

jQueryでできることとは?

hands 545394 640 - jQueryでできることやメリットは?使い方の具体例を勉強したい初心者に徹底解説

jQueryでできることとしては以下のようなことが挙げられます。

  • アニメーションをつける
  • 時間によってページの色を変更する
  • ユーザの動作によってレイアウトを変えるなど

これによって、見た目がカッコいいWebサイトや目を引くWebサイトなどユーザの印象に残りやすいWebサイトにすることができます。

どうやってjQueryを書くの?

software 657188 1920 - jQueryでできることやメリットは?使い方の具体例を勉強したい初心者に徹底解説

jQueryの使い方としては2パターンの書き方があります。

1.HTMLファイルに直接書き込む

<script type="text/javascript">

・・・・・

</script>

2.別のファイルを読み込む方法

<script type="text/javascript" src="パス/ファイル名"></script>

このようにscriptタグの中に直接書いていく方法と別のファイルにjQueryのコードを書いてそれを読み込む2パターンがあります。

どちらの方法でも同じ実行結果になりますので、どちらで書いても問題ありません。

コピペで実装!jqueryでスライドショーを自作する方法

Webサイトの製作時に、スライドショーを導入しようと思うことがたまにあります。

しかし、「jquery スライドショー」のように検索をかけると、どれもライブラリの紹介の記事ばかり…正直、新しいライブラリを入れまくるのは苦手…できれば、新しい事を覚えずにスライドショーを作れればなあ…ということで、今回準備をしてみました。

細かな解説も加えているので、是非読んでみてくださいね。

jqueryのスライドショーのデモ

今回、CODEPENのコード埋め込み機能を使って準備しました。

「Result」のボタンのみをアクティブにして、スライドショーを確認してみてください。

See the Pen MopYBE by Kurosu Ryo (@ryokurosu) on CodePen.0

一工夫加えて、スライドショーの現在地や横ボタンで移動できるように実装しています。

スライドショーのコード(コピペOK!)

まず、理屈や仕組みは抜きにして、とにかくコピペで使えれば十分という方の為に、コードを下記にまとめておきます。

HTMLのコード

<html>
<body>
<div id="slider">
					<ul class="aviaslider" id="frontpage-slider">
						<li class="slider-image" id="slider1"><img src="https://www.rbbtoday.com/webcode/wp-content/uploads/2017/06/road-220058.jpg" alt="slider1"></li>
						<li class="slider-image" id="slider2"><img src="https://www.rbbtoday.com/webcode/wp-content/uploads/2017/06/field-533541_1920.jpg" alt="slider2"></li>
						<li class="slider-image" id="slider3"><img src="https://www.rbbtoday.com/webcode/wp-content/uploads/2017/06/horizon-768759_1920.jpg" alt="slider3"></li>
						<li class="slider-image" id="slider4"><img src="https://www.rbbtoday.com/webcode/wp-content/uploads/2017/06/dawn-190055_1280.jpg" alt="slider4"></li>
						<li class="slider-image" id="slider5"><img src="https://www.rbbtoday.com/webcode/wp-content/uploads/2017/06/mountains-1828596_1920-1.jpg" alt="slider5"></li>
					</ul>
<span id="prev">△</span>
<span id="next">△</span>
				</div>
				<ol class="flex-control-nav flex-control-paging">
					<li><a class="flex-active">1</a></li>
					<li><a>2</a></li>
					<li><a>3</a></li>
					<li><a>4</a></li>
					<li><a>5</a></li>
				</ol>
</body>
</html>

CSSのコード

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline;
}
ol,ul{
  list-style:none;
}
html,body{
  background:#000;
}
div#slider {
    border: 5px solid #111;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    width: 435px;
    height: 180px;
  margin:20px auto 5px;
}
ul#frontpage-slider {
    width: 1000%;
}
li.slider-image {
    float: left;
    -webkit-transition: all .7s ease;
    transition: all .7s ease;
    width: 435px;
}
li.slider-image img{
      max-width: 100%;
    height: auto;
    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;
}
.flex-control-paging{
    margin-bottom:10px;
    text-align:center;
}
.flex-control-paging li {
    display: inline;
    margin: 0 10px;
}
.flex-control-paging li a{
    display: inline-block;
    background: #ccc;
    height: 8px;
    width: 8px;
    text-indent: 200%;
    overflow: hidden;
    cursor: pointer;
    -moz-border-radius: 1px;
    -khtml-border-radius: 1px;
    -webkit-border-radius: 1px;
    border-radius: 50%;
}
.flex-control-paging li a:hover, .flex-control-paging li a.flex-active {
    background: #0485EF;
}
span#prev,span#next {
    position: absolute;
    width: 60px;
    height: 60px;
    color: #fff;
    line-height: 60px;
    background: #000;
    text-align: center;
    top: 0;
    bottom: 0;
    display: block;
    margin: auto 0;
    border-radius: 50%;
    opacity: 0.3;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    cursor:pointer;
}
span#prev{
    left: -20px;
    transform: rotate(-90deg);
}
span#next {
    right: -20px;
    transform: rotate(90deg);
}
span#prev:hover,span#next:hover {
    opacity: 0.8;
}

JavaScriptのコード

var size = 0;
var slideNum = 0;
var xwidth = $('div#slider').width();
var timerID;
$('.flex-control-nav.flex-control-paging li').on('click', function(){
	var index = $('.flex-control-nav.flex-control-paging li').index(this);
	$('.flex-control-nav.flex-control-paging').find('li a').removeClass('flex-active');
	$(this).find('a').addClass('flex-active');

	var slideX = xwidth * index;
	var traStr = 'translate3d(-'+slideX+'px,0,0)'

	$('.slider-image').css({
		'-webkit-transform':traStr,
	});

});
$(function(){
	size = $('.flex-control-nav.flex-control-paging li').length;
	    setTimeout('slide()'); //アニメーションを実行
	});

function slide() {
    if(slideNum == size){slideNum=0;}
	var slideX = xwidth * slideNum;
	var traStr = 'translate3d(-'+slideX+'px,0,0)'
	$('.flex-control-nav.flex-control-paging').find('li a').removeClass('flex-active');
	$('.flex-control-nav.flex-control-paging li a').eq(slideNum).addClass('flex-active');

	$('.slider-image').css({
		'-webkit-transform':traStr,
	});
	slideNum++;
    timerID = setTimeout('slide()', 6000); //アニメーションを繰り返す間隔
}

$('#next').on('click',function(){
window.clearTimeout(timerID);
 slide();
});
$('#prev').on('click',function(){
window.clearTimeout(timerID);
if(slideNum > 1){
slideNum = slideNum - 2;
}else{
slideNum = size - 1;
}
 slide();
});

スライドショーのポイント

それでは、今回のスライドショーのポイントをお伝えしていきます。このポイントが理解できれば、そのうち自分で実装することも可能でしょう。

ポイント1 CSSのulの設定

まず一つめのポイントは、スライドショーのul要素の幅の問題です。

ここをwidth:1000%と設定していますが、横幅を半端なくでかくすることが重要です。

ul#frontpage-slider {
    width: 1000%;
}

理論的には、ここの横幅は出かければいくつでも大丈夫です。10000%でもOKです。

ただ、気持ち悪いので、これくらいの数にしておきましょう。

ポイント2 jsのtranslate指定

2つめのポイントは、javascriptでtranslateを操作していることです。

実際、スライドショーの画像は、要素からはみ出てoverflow:hiddenによって消されているだけで、右側に存在しています。

そこで、translateの数値を変更することで、ズレて出現してくるのです。

var slideX = xwidth * index;
var traStr = 'translate3d(-'+slideX+'px,0,0)'

$('.slider-image').css({
	'-webkit-transform':traStr,
});

ポイント3 一番最初の画像に戻るjsコード

ほとんどポイント1,2で全て完結してしまうのですが、このコードが無いと真っ黒スライドショーになるので紹介します。

今回紹介したコードでは、liの要素を勝手に数えてくれて、スライドの数だけtranslateの値を変えるというJavaScriptのコードにしましたが

if(slideNum == size){slideNum=0;}

このコードが無ければ、延々と右にスライドされていきます。

すると、途中から画像がない場合は、真っ黒画面になってしまうのです。

jqueryでハンバーガーメニューを作る方法!レスポンシブ対応のスマホメニュー

laptop 593673 640 530x342 - jQueryでできることやメリットは?使い方の具体例を勉強したい初心者に徹底解説

続いて、Webデザインを行っていると、レスポンシブ対応を余儀なくされることが多いかと思います。レスポンシブ対応をする上で一番気になるのは、「メニューバー」という方も多いでしょう。

サイズが小さいにも関わらず、メニューとしての機能を持たせないといけないのです。しかし、あまり知識がないからといって、ダサいままにするわけにも…という声を多く頂いたので、今回jqueryでメニューを作成してみました。

スマホ対応メニューのコードサンプル

CODEPENで作成したので、そちらの埋め込みになります。

少しばかり重いですが、是非確認してみてください。

See the Pen nav-blur by Kurosu Ryo (@ryokurosu) on CodePen.0

お洒落に見えるように、背景にぼかしも入れておきました。

メニューバーに使うCSSのコツ

これから、細かくこのコードを解説していきます。まずはCSSのコツから。

今回のCSSでは、最初はメニューバーを画面からはみ出た右側に出現させています。それを、出現するタイミングでtranslateで移動させているのです。

細かくはこの部分のコードを見ていくと分かってきます。

#gnav-sp {
	background: #fff;
	position: fixed;
	display: block;
	z-index: 10;
	right: 0;
	top: 0;
	height: 100vh;
	width: 70vw;
	max-width: 320px;
	transform: translate3d(111%, 0%, 0px);
	transition: all 200ms cubic-bezier(0.61, 0.92, 0.68, 1.14) 0s;
	box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
}
#gnav-sp.open {
    transform: translate3d(40px, 0, 0);
}

重要になるのは、3ステップです。

positionをabsolute

まず、positionをabsoluteに指定します。これを指定しないと、他のHTML要素が邪魔をして適切に動きません。

もちろん、同時にrightとtopを指定してください。

transformで右側に移動

#gnav-spの方で、transformのプロパティを使って右側に隠してしまいましょう。

今回はtranslate3dを使っています。

細かくはここの部分です。

transform: translate3d(111%, 0%, 0px);

出現時に移動

最後に、出現するときのCSSを書きます。

今回では、classでopenが付くように設定しているので、その時はtransformの値が変わるようにしています。

#gnav-sp.open {
    transform: translate3d(40px, 0, 0);
}

jqueryでクラスを付ける

さて、ここからがjqueryの仕事になります。

jqueryで、イベントハンドラを設定(イベントを起こすように設定する)していきます。

今回、メニューバーの出現にともなってやりたいことが4つあります。

  • メニューバーを出現させる
  • 背景にぼかしをいれる
  • スクロールできなくする
  • 他の部分をタップすると戻れる

これらを実装していきます。

メニューバーを出現させる

これは、先程CSSで適応したようにclassを変更すればいいでしょう。

コードの中で見てみると、clickイベントを設定している部分にあたります。

$('#header-nav-btn a').click(function(){
	$('#gnav-sp').addClass('open');
	$('body').addClass('nav-open');
	$('body').append('<p class="dummy"></p>');
	no_scroll();
});

このようにaddclassを指定してclassを追加します。

背景にぼかしを入れる

次は、背景にぼかしを入れる方法です。

今回のコードでは、メニューバーの出現時にbodyにclassを追加して、その時にCSSを使ってfilterのプロパティが適用されるようにしています。

クラスが追加されるjqueryのコードは上に記載されているので、CSSの部分だけ載せておきます。

body.nav-open .content-area{
  filter:blur(3px);
}

スクロールできなくする

そして、スクロールできなくするためにはこれらのコードを利用しています。

function no_scroll(){
	var scroll_event = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
	$(document).on(scroll_event,function(e){e.preventDefault();});
	$(document).on('touchmove.noScroll', function(e) {e.preventDefault();});
}
function return_scroll(){
	var scroll_event = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
	$(document).off(scroll_event);
	$(document).off('.noScroll');
}

この関数を利用することで、スクロールを固定しています。

この関数はarakazeさんの記事を参考に使わせていただいたものになります。ありがとうございました。

【参考ページURL】

Javascriptでスクロールを一時的に禁止する方法(PC・スマホ対応)

他の部分をタップすると戻れる

これは、jqeuryでclassがdammyのp要素を追加し、そのp要素にイベントハンドラを設定しています。

別の表現をすれば、メニューバーが出現した時に、bodyの上から何かマスクのようなものをかぶせていて

そのマスクをタップすると戻るという仕様です。

今回のメニューバーの作成ポイントと注意点

これで、中身の説明は終わりなのですが、今回のポイントと注意点をまとめておきます。

z-indexは適切に

今回のコードでは、要素のz-indexを適切に設定する必要があります。

デモでは、出現するメニューバーにz-index:10を設定しています。

ぼかしを入れる要素に親要素を入れない

ぼかしはfilterというプロパティを使うのですが、これを設定する場所を間違えると、メニューバーまでぼやけてしまいます。

filterを入れた要素と、その子要素全てに適用されるので、メニューバーの親要素には指定しないようにしましょう。

Jqueryのメリットや主な使い方に関するまとめ

office 625892 640 530x352 - jQueryでできることやメリットは?使い方の具体例を勉強したい初心者に徹底解説

以上、いかがでしたか?

今回は「jQueryとは何なのか」「jQueryを使うメリット」「jQueryの使い方」などこれからjQueryについて勉強したいというあなたに向けて基礎的な内容を中心にお伝えしました。

最近のWebサイトは、アニメーションや動画をつけて動きのあるサイトが多くなっています。だからこそ、WebデザイナーにとってjQueryは今すぐにでも身につけておきたいものになります。いきなり、jQueryについて勉強するのはハードルが高いと思います。

なので、まずは実際のWebサイトでjQueryがどのように使われているのか調べてみると良いでしょう。また、本格的に学んでいきたいと思った方には、筆者も受講したデザインスクールの受講がおすすめです。

それでは最後まで読んでいただき、ありがとうございました。

おすすめの記事