コーダーがjQueryを覚えていく、使っていく方法

コーディングを勉強して、HTMLの組み方やCSSの設定ができるようになった人が次に取り組みたいのがプログラムの部分。というわけでjQueryへの取り組み方について書いてみます。

リッチコンテンツ

現在のWebサイトはアニメーションすることが一般的になっています。画像が横に移動したり、Webページが上下に移動したり、文字が動いたりするとエンドユーザの目を引くことが多いからですね。これら動きのある動的なコンテンツをリッチコンテンツと呼んでいます。

リッチコンテンツの動きを作るには、CSSのアニメーション用のプロパティやJavaScriptのプログラムを使うことになります。

jQueryとは

JavaScriptがブラウザごとに動作が変わる、プログラムに慣れていないコーダーは扱いづらいなどの理由から、便利な記述方法をまとめたものとして生まれたのがjQueryです。jQueryはJavaScriptのライブラリの一つです。

仕事でWebサイトのリッチコンテンツを作るときは特に何も無ければjQueryでの実装から考えます。

jQueryのプラグイン

Webページに動きのある部分を作るとき、自作はせずにjQueryを使って作られたプラグインと呼ばれる、別なプログラムを使うことが基本となります。プラグインはエンジニアが自分たちで開発してGitHubなどで公開しています。

有名なのがモーダルウィンドウとスライドショーですね。人気のあるプラグインは作者が専用サイトを公開しているのでそこから必要なプログラムやソースコードを入手して記述していきます。

既存のプラグインを実装する

プラグインは公開サイトの手順に沿って自分が作っているWebページにHTMLなどを記述することで動作が可能になります。Webページの構成によっては多少HTMLなどの書き換えが必要になります。

公開サイトを見ても導入が難しいと感じる人は「自分が使いたいプラグインの名称 使い方」とかでググると、そのプラグインを実装した人のブログが出てきますのでそこからも使ってみることができます。

プラグインを導入する上で注意する点は、個人開発が多いので現在も開発が継続されているのか確認すること、jQueryのバージョンアップに伴いプラグインの記述方法も変わる可能性があるので、定期的な記述の確認もしておきましょう。

プラグインを少しいじってみる

既存のプラグインの実装ができるようになったら、次はそのプラグインをカスタマイズする部分に入ります。カスタマイズといってもプラグインで用意された設定を利用して、より違う動きをつけるところになります。

カスタマイズ用の設定についてはやはり公式サイトや個人ブログから情報を得ることになります。

仕事ではクライアントからの要望を受けて希望する動作になるようにHTMLやCSSやプラグインの設定内容を変更していくことになります。

プログラムをコピペして使う

プラグインを使わない軽微な動作を使う場合は、Webページ用のプログラムは先人がすでに作ってブログなどに掲載していることが多いです。そこから制作中のサイトに持ってくることで希望した動作が可能になります。

コピペするときに気をつけて欲しいことがあります。ブログに書かれているソースコードはその人が自分の作業でやってみたことを書いているだけなので、自分のWebページに持ってきても動くかどうか分かりません。動くようにするためにはプログラムの部分を一部書き換えるなどの作業が発生します。

このあたりからjQueryの書き方やプログラミング言語の基礎知識が必要になってきます。jQueryはイベントやメソッドについて、プログラムは変数の使い方や制御構造の動きなどを覚えておくといいと思います。

うまく動かないときは

Chromeの開発ツールを使ってエラーが表示されいるかを調べ、そのエラーからおかしい部分を取り除く作業をしていきます。よくあるのが変数に希望する値が入っていない場合で、console.log()を使って値のチェックしながら動作の確認をしていきます。

プログラミング言語を勉強する

クライアントの要望によりプラグインを使わず独自のプログラムを組むことも出てきます。そうなってくるとよりプログラムに深い知識などが必要になってくるため、jQueryやJavaScriptの勉強が必要になります。余裕があれば初心者向けの書籍等を購入してサンプルプログラムなどを写経していきましょう。

プログラムはコーディングより敷居が高いので覚えるにも時間がかかります。いきなり難しい部分を始めてしまうと詰まりやすいので、まずは簡単なところから一つずつ積み重ねていきましょう。