STASEON

企業とクリエイターのマッチングサービス

【簡単にWebサイトにアニメーションを追加できる】jQueryとは
COLUMN 2019.10.10

【簡単にWebサイトにアニメーションを追加できる】jQueryとは

最近のWebデザインでは、アニメーションを多用する機会が増えてきました。効果的にアニメーションを利用すれば、ユーザーへ注意喚起ができるだけでなく、Webサイトの使い勝手自体も向上します。そしてアニメーションを追加するときによく使われているのが「jQuery」です。

今回はjQueryとは何か、そして利用するメリットや実際の導入方法までご紹介していきます。「jQueryとは何か知りたい」、「WebデザインでjQueryを使うのがよいと聞いたが、どんなメリットがあるのか具体的に知りたい」という方はぜひご覧ください。

jQueryとは

jQueryとは、Webサイトのプログラミング言語の一種である「JavaScript」を簡単に記述できるようにしたライブラリで、2006年に初版がリリースされました。主にWebサイトへアニメーションを追加するために利用されます。滑らかに動くアニメーションは、jQueryで実装されているケースが多いです。

基本的には「$(‘セレクタ’).メソッド(’引数’);」という書き方を基本にしてプログラムを記述していきます。

$(‘セレクタ’)のセレクタと書かれた部分には、「CSS」のセレクタと同じように「HTML」タグやclass、id属性など、処理を行いたい対象を記述します。そして「.(ピリオド)」で区切った後メソッド部分で、実際にどんな処理を行うかを記述します。またメソッドを書くときに引数を指定してアニメーションスピードなどを調整したりできます。

最後にJavaScriptと同じように、記述の最後に「;(セミコロン)」を記述します。

jQueryのメリット

jQueryには、次のメリットがあります。

・JavaScriptよりも簡単に記述することができ、モダンなデザインのWebサイトにできる
・モダンなアニメーションを簡単に実装できる
・上手に活用すればユーザビリティが高まり、SEO対策にもなる

JavaScriptよりも簡単に記述することができる

通常JavaScriptを記述する際は、ある程度のコードボリュームが必要になります。例えば<p id=”’font-design’”>フォント</p>の「フォント」の文字部分を赤色にしたいという場合は、
GetElementById(‘font-design’).style.color=’red’;
というように記述します。:「GetElementById」の部分は1文字違わずこのまま書かないといけなかったり、「=(イコール)」で文字色設定を左の式とくっつけないといけなかったり、記述の際は注意点がいくつかあります。

しかしjQueryを利用すると、
$(‘ #font-design‘).css(‘color’,’red’);
と、一気に記述が省略されます。このようにjQueryを利用すると、JavaScriptより簡単にWebデザインができるようになります。また記述が簡単な分、可読性が高まり、メンテナンスなどのときも楽に中身を調べられます。

モダンなアニメーションを簡単に実装できる

自分の手で一からスライドイン効果やフェードアウト効果などを作ろうとすると、かなり時間がかかります。滑らかに動かすためにはある程度の計算が必要であり、微調整などの手間もかかるからです。

しかしjQueryでは、
・ $(‘img’).slideUp();
・ $(‘img’).fadeOut();
とするだけで、スライドイン効果やフェードアウト効果などをWebサイトに実装できます。

アニメーションはモダンなWebデザインを作る上で重要な要素の一つです。jQueryを使うことで、滑らかに動いたりといったモダンな動きがWebサイト上で簡単に実現します。

上手に活用すればユーザビリティが高まり、SEO対策にもなる

例えばスマホでは重要なメニュー以外はハンバーガーメニューで一旦隠しておき、ハンバーガーメニューをユーザーがタップしたときに詳細メニューを表示できれば便利です。jQueryではそういったユーザビリティに関係するアニメーションも簡単に実装可能です。

むやみやたらにアニメーションを追加するのはよろしくありませんが、ユーザーのアクションに応じて適切なアニメーションを用意すれば、それだけそのWebサイトは見やすくなります。またjQueryを活用すれば、「レスポンシブデザイン」のWebサイトも作りやすくなります。結果的にユーザビリティが高く、レスポンシブデザインになっているWebサイトはSEO的にも評価が高くなるので、jQueryはSEO対策としても効果があると言えます。

jQueryの導入方法

ここからは、jQueryの導入方法を2つに分けてご紹介していきます。

jQuery公式サイトからライブラリをダウンロードする

まずはjQuery公式サイトにアクセスします。

現在は
・Download the compressed, production jQuery 3.4.1
・Download the uncompressed, development jQuery 3.4.1
・Download the compressed, production jQuery 3.4.1 slim build
・Download the uncompressed, development jQuery 3.4.1 slim build

上記合計4つのダウンロード項目が用意されています。

「compressed」は内部ファイルの空白などを取り除いて軽量化したもので、jQuery内部をカスタマイズする予定のない方は読み込みが速くなるのでおすすめです。また「uncompressed」は、jQuery内部コードを操作してカスタマイズしたいときに利用しましょう。

ダウンロード項目の中には「slim build」と書かれたものもあります。こちらは非同期通信などのプログラムを取り除いたバージョンで、なるべく軽量にjQueryを使いたい場合に向いています。

ダウンロードする際はマウスを右クリックした後、「名前をつけてリンク先を保存」を選んで保存しましょう。左クリックではjQueryファイルが開くだけでダウンロードができません。

ダウンロードが終了したら次はWebサイトのディレクトリ内にjQueryを配置します。そして読み込みたいページに
<script type=”text/javascript” src=”相対参照か絶対参照で保存場所を指定/保存したjQueryのファイル名.js” ></script>
の形でコードを埋め込めば準備完了です。ダウンロードして配置する手間はありますが、ローカル環境でも安定してjQueryを読み込めるのが、この方法のメリットです。

外部サーバーからjQueryを読み込んで使う

外部サーバーからjQueryを読み込んで使う方法もあります。外部サーバーは「Google」の「CDN(コンテンツ配信ネットワーク)」サーバーを利用するのが一般的です。

まずはGoogle CDNの公式サイトを開きます。

そして「jQuery」の欄に
・3.x snippet:
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
・2.x snippet:
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js”></script>
・1.x snippet:
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js”></script>

の3つが並んでいるので、いずれかをコピーします。基本最新バージョンである「3.x snippet」をコピーしてもらえれば問題ないですが、旧式のjQueryコードを他所からコピーして使う場合などは、「1.x snippet」や「2.x snippet」などを選ぶ必要が出てきます。

最後にHTML内にコードを貼れば準備完了です。この方法だとダウンロードする方法よりも準備に時間がかからず、jQuery読み込みも速めです。ただしCDNサーバーがダウンしたりするとjQueryが一切使えなくなるなどの危険があることは認識しておきましょう。

ちなみにどちらの方法でも<script>コードを貼る位置は、</body>の直前がおすすめです。JavaScriptでは、処理を行うコンテンツ要素があらかじめ読み込めていないとエラーが起きます。確実に読み込んで処理を完了させるには、全コンテンツ要素読み込みが完了する</body>直前への配置が無難です。

まとめ

今回はjQueryの概要やメリット、そして導入方法まで解説してきました。

動きのあるWebサイトが多くなり、レスポンシブデザインもSEO上重要になってきました。ですからHTMLとCSSだけでなく、jQueryなどを使ってアニメーションをつけるスキルもWebデザイナーには必要です。jQueryは取っかかりやすいので、何かしらプログラムを学習した経験のある方はコードの意味がすぐに分かると思います。

jQueryを使えるようになれば、Webデザインの表現の幅が広がります。ぜひjQueryをマスターして、モダンなWebサイトを作ってみてください。

▼関連記事

・フロントエンドエンジニアのキャリアと将来性を検証!
・就職や転職、ブランディングで活用!フロントエンドエンジニアのポートフォリオ
・人気CMS、WordPressでWebデザインするメリットやポイント

▼クリエイティブ業界の求人情報

・クリエイター求人検索

はじめての方へ

アカウントを登録すると、求人情報やポートフォリオをお気に入り登録することができます。



おすすめの求人

MORE

おすすめの記事