• WebCamp_インタビュー
    【WebCamp卒業生インタビュー】1ヶ月でRubyをゼロから学び、Webエンジニアとして転職!
    2018.01.15
  • WebCampPro_インタビュー
    自分で稼ぐ力をつけるため、新卒5年目の営業マンがエンジニアに転職!【WebCampPro転職者インタビュー】
    2018.02.02
  • WebCamp_インタビュー
    【卒業生インタビュー】台湾で月間100万UUの訪日旅行メディアを手掛けるCEOが、プログラミングを学んで得たものとは?
    2018.01.15
  • WebCamp_インタビュー
    「1カ月頑張ればこの先が見えてくる」地元メディアを立ち上げたママさん
    2017.07.20
  • WebCampPro_インタビュー
    未経験でも寿司職人からWebデザイナーになった!ホスピタリティでスクールを支える宮脇トレーナー
    2017.05.26
  • WebCamp_インタビュー
    【WebCamp受講生インタビュー】起業準備中にCEOが気がついたプログラミングスキルの重要性とは?
    2017.12.25
  • WebCamp_インタビュー
    “未経験”でもたった1ヶ月で営業からエンジニアとして転職!『WebCamp』受講者インタビュー
    2017.10.04
  • WebCampPro_インタビュー
    未経験31歳からエンジニア転職を実現【実際に聞いてみた】
    2017.04.01
  • WebCamp_インタビュー
    時間や場所にとらわれず自由に働くために必要なスキルとは?【WebCamp卒業生インタビュー】
    2018.01.26
  • WebCamp_インタビュー
    「自信の持てるスキルを得たい!」内定辞退した女子大生がプログラミングを学習したワケ。
    2018.04.28
  • WebCampPro_インタビュー
    未経験から上京し、エンジニアとしてチームラボグループに転職!【WebCampPro卒業生インタビュー】
    2018.03.10

◆当サイトで人気のプログラミング教室のおすすめランキングはこちら!
プログラミングは独学では非効率で、時間を無駄にするリスクがあります。効率的なカリキュラムで学べるスクールを受講しましょう。

WEBCAMP【マンツーマンサポート】1ヶ月短期集中でプログラミングを学ぶスクール
1ヶ月通い放題・メンター常駐の教室環境でプログラミングを学びたい方!
TechAcademyオンラインで開講しているプログラミングスクール
オンラインでどこでも学べる!/教室に行くのが忙しい人でも安心!
Tech Camp教養としてのITスキルを学べるスクール
Webデザイン/AI(人工知能)/IOS/Androidアプリ制作/VRを学びたい方!
WEBCAMP PRO転職保証付き!エンジニアとして転職したい人におすすめ!
未経験からプロのエンジニアへ3ヶ月で転職する為のスクールです!
12月生募集中!当社人気の転職保証コース
プログラミング学習から転職成功まで導く、当社人気のWebCamp Proコース。
11月生は満員となっております。12月生募集に向け、お早めの申込みをオススメします。
プログラミング未経験でもエンジニア転職を絶対成功させたい
スキルを身に着けて人生を自ら切り開きたい
上記にあてはまる方は、ぜひご検討ください!

こんにちは、WebCamp(ウェブキャンプ)です。

今回のブログでは、JavaScriptのライブラリであるjQueryについて説明していきます。

jQueryとは?

Webサイトに動きをつけたりするJavascriptという言語のライブラリ(特定の動きに対して簡単にしてくれるもの)です。
Javascriptはコードをたくさん書く必要があり、初心者の方には難易度が高いですが、
jQueryを使用することで、少ない行数で動きのあるWebサイトにすることができます。

jQueryとJavaSciptの違いは?

jQueryでできることはJavaScriptでもできますが、JavaScriptで書くと複雑なコードをたくさん書く必要があります。
毎回書くのは大変ですし、初心者の方でもデザイン性の高いWebサイトを作るれるようになるために、よく使われる機能はjQueryで使えるようになりました。これをライブラリと呼びます。
 jQueryのロゴにもある「write less, do more」から、少なくより多く書くことを目的として作られたことがわかります。

実際のソースのサンプルと使用画面

ここで、実際にjQueryのコードを見ていきしょう。

赤色の箱を黄色に変える

マウスをかざすと黄色に変わります。

青い箱を徐々に消す

マウスをかざすと徐々に箱が消えていきます。

下から上にスライドして消す

 マウスをかざすと下から上に徐々に箱が消えていきます。

赤い箱を徐々に出す

黄色い箱にマウスをかざすと徐々に赤い箱が出現します

四角い箱を丸くする

青い箱にマウスをかざすと丸くなります

jQueryを使ったサイト紹介

ここで、WebCamp卒業生の方が作ったjQueryを使用したサイトを見て見ましょう。

DAJAART | ダジャレでアート

稲沼さんのインタンビューはこちらから

プログラミング未経験からWebサイトオーナーに。ダジャレ×アートの世界とは?

[茨城県石岡市にあるフランス料理店]Chezやなぎさわ

04

柳沢さんのインタビューはこちらから

「コードへの苦手意識がなくなりました」Web業界で長年働く広報担当者。

オススメの初心者向けの勉強法

jQueryを勉強するのは、JavaScriptを勉強をするよりも簡単ではあります。

基本的な書き方のルールさえ覚えてしまえば、あとは実際に使っていくだけです。

そこで、勉強の仕方を簡単にまとめてみたいと思います。

まずはjQueryを使用できる環境を整える

まずは、jQueryを導入しましょう。

jQueryを導入するには、ダウンロードする方法と、CDNの2種類があります。

ダウンロードする方法

以下のjQuery公式サイトからダウンロードします。
【jQuery公式サイト】(https://jquery.com/download/)

読み込み方法

ダウンロードしたファイルを以下のように読み込みます。

<body>
  ・
  ・
  ・
    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
</body>

 

注意点としては、<body>の最後に記述しましょう。機会がコードを読み込む時は上から順番に読み込まれていくので、HTMLの記述の後に動きをつけていくからです。

CDNの場合

こちらの方法は、jQueryのファイルをダウンロードするのではなく、ネット上にあるものを習得していく方法です。

インターネット環境がないと使えませんが、ダウンロードする方法に比べて読み込み速度が早いです

読み込み方

https://developers.google.com/speed/libraries/にアクセスします。

このサイトの右側にある、「jQuery」と書いてある部分をクリックします。

開いた画面の、

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

をコピーし貼り付けましょう。

&lt;body>
  ・
  ・
  ・
    &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js&quot;>&lt;/script> 
&lt;/body>

基本的な書き方のルールを覚える

jQueryの書き方のルールはJavaScriptに比べて簡単なので、無料学習サイトなどを使って覚えてしまうのがオススメです。

基本のメソッドを覚える

よく使うメソッドは覚えていきましょう。メソッドを覚えることで、Webサイトを操作できるようになります。「色を変える」「大きさを変える」「徐々に隠す」などの操作を行うことができます。

単に覚えるのではなく、実際に書きながら「どういう風な変更を加えることができるのか?」を覚えていきましょう。

基本のイベントを覚える

これもよく使うものに絞って大丈夫です。単に「箱の色を変える」だけでなく、「マウスが乗った時に」「クリックをした時に」というような条件をここで加えることができます。

CodePenで実際に書いてみる

ここでおすすめなのが、CodePenというサービスです。

一画面でhtml/css/jQのエディターを開くことができるので、メソッドやイベントを覚えるに最適です。

上で5つ例に出したコードもCodePenで簡単に作成しました。

あのコードをコピーアンドペーストして、ご自分なりにいろいろ変更してみるのがオススメです。

http://codepen.io/

プラグインを使ってみる

難しい機能を簡単に実装できる「プラグイン」を使ってよりダイナミックな動きのあるサイトにしていきましょう。

スライドショーを簡単に作れる「Skippr」というプラグインや、画像をクリックすると拡大されて表示することのできる「Lightbox」などが有名です。

6.まとめ

jQueryについて解説していきましたが、いかがでしょうか?

入門編ではまずは仕組みを理解し、実際に書いてみて、どう動くのかを体感していくことが大事です。

実際にサイトを作る際も、訪問者にわかりやすい体験を提供するために、jQueryやJavaScriptなどを使用したデザイン性の高いサイトづくりは必須ですので、

学習サイトでの学習だけでなくご自分でサイトを作ってみるのをお勧めします。

12月枠も残りわずか当社人気の転職保証コース
プログラミング学習から転職成功まで導く、当社人気のWebCamp Proコース。
11月受入枠は満員となっております。12月枠に向け、お早めの申込みをオススメします。
プログラミング未経験でもエンジニア転職を絶対成功させたい
スキルを身に着けて人生を自ら切り開きたい
上記にあてはまる方は、ぜひご検討ください!

▼未経験から1ヶ月でWebデザイン・プログラミングを学びたい方はこちら!

▼ついに開講!オンラインでWebデザインを学びたい方はこちら!

関連キーワード
学習の関連記事
  • 【誰でもわかる!】エンジニアの仕事内容を徹底解説
  • 初心者でも一瞬でわかるプログラミングの考え方・思考法
  • エンジニア必見!エンジニアが成長できるブログ紹介
  • エンジニアとは?仕事内容、年収、将来性を徹底解説
  • 【Rails入門説明書】find、find_byについて解説
  • プログラミング未経験者でも出来る開発環境構築
おすすめの記事