WEBデザイナーが教えるクリエイティブ系への転職情報サイト「WEBデザイナーズナビ」

Webデザイナーズナビ 〜デザイナーの転職・スキルアップ情報 〜

採用基準をクリアするためにWEBデザイナーが最初に覚えるべきjQueryの基礎

WEBデザイナーが初めて覚えるjQuery

高単価なWEBデザイナーを目指すならばjavascriptの基本ができたほうが採用確率が高くなります。派遣社員や正社員レベルの給料を目指すならば基礎とフリーらのライブラリのカスタマイズは必須知識です。

javascript(jQuery)はWEBデザイナーが扱う唯一プログラム言語といってもいいくらいで、HTMLやCSSとは記述方式が異なります。自由に使いこなせるまでにはまとまった勉強期間が必要です。

そのせいで敷居が高く感じてしまうjavascriptですが、ほとんどの採用基準はjQueryで簡単な動作が作れて基本的なコードが書ける程度です。私も多くのWEBデザインの開発現場に入りましたが、WEBデザイナーに対するjavascriptの期待値は高くありません。

基本的なことをだけわかっていれば採用基準をクリアしたと思っていいでしょう。WEBデザインの技術は仕事をしながらコードを書くのが一番成長しますので勉強期間は短く、採用基準ギリギリのレベルで現場に入ってしまった方がよいです。参考として私が大手WEBサービス開発の現場の採用されたときに使用したjQueryの基礎をまとめます。これができれば派遣社員のWEBデザイナーのレベルはクリアです。

jQueryを読み込む

まずはjQueryをHTMLの中に読み込みます。公式サイトからjqueryファイルをダウンロードして読み込ませるやりかたと、直接ネットにアップされているjQueryを読み込むCDN方式の2つがあります。

ネットがつながっている環境ならばCDN方式の方が楽ですので、基本的にはこちらの方がおすすめです。採用面接でウェブポートフォリオをノートパソコンに入れて持っていくときはjQueryファイルをローカルに落として動作するように確認してから行きましょう。

jQueryの基本的な書き方

複雑な構造に見えますが、実はシンプルな構造になっています。jQuery初心者のWEBデザイナーはCSSのクラスの制御が出来れば十分です。まずは基本構造を覚えましょう。

jQuery本体を読み込んだら、実行する処理を書いていきます。headの中に書くか、bodyの締めタグの手前に書くのが一般的です。

jQeuryの処理の書き方

このように書きます。深く考えずにこういうものだと暗記するくらいで大丈夫です。慣れないうちはタグの閉め忘れで動作しないことが多発しますので、このコードをコピーアンドペーストして勉強するのが良いでしょう。

スクラッチで書くときは、最初に閉めタグを全部記述してから中の処理を書くとエラーが減ります。CSSのコーディングに慣れていると閉めタグを最後に書くクセが出ますので、javascriptやjQueryを書く場合は注意が必要です。

動作させる要素を指定する

動作させたい要素をセレクターと言います。これはHTMLでもCSSのどちらでも指定できます。pタグ全てを指定するならば$(“p”)になりますし、classを指定するならば$(“.link”)のように記述します。

セレクターを指定したあとに、その要素をどう動かすかの命令するだけです。

セレクターで指定した要素のCSSを追加する

See the Pen wzdwPp by WEB Designers NAVI (@mahkun) on CodePen.

HTMLやCSSを指定してプロパティを追加することができます。css(“プロパティ”, “数値”)が記述ルールです。CSSの専門家であるWEBデザイナーならばこのjQueryのメソッドは抵抗なく使えると思います。

セレクターで指定した要素のCSSを付与する

See the Pen jrmNYp by WEB Designers NAVI (@mahkun) on CodePen.

セレクターにHTMLを指定してしまうとすべての要素が対象になってしまうため、WEBデザインの現場では基本的にクラスやIDを使用します。

クリックで要素クラスやIDを付与する

最初からクラスやIDを変えてあるならCSSで初めから書いておけばいいじゃないか?と思った方も多いでしょう。その通りです。ここまではjQueryの記述のルールの確認です。jQueryの多くは【クリック】【オンマウス】などのイベントに合わせてクラスやIDを付けたり外したりする使い方をします。

See the Pen xEdKYb by WEB Designers NAVI (@mahkun) on CodePen.

$(ダラー)とfunctionだらけで混乱するかもしれません。これに拒否反応を示してjQueryから逃げてしまうWEBデザイナーは大勢います。しかしjQueryの記述ルールをしっかりと覚えていれば理解は簡単です。

jQueryは$(function(){});で命令を行います。クリックしたら【ここにクラスを追加する】という動作をルールに従って(function(){});を使い記述したに過ぎません。このルールに従って参考書を見ながらjQueryが書けるレベルならばWEBデザイナーとしては中堅レベル。派遣社員で時給2000円くらいのWEB開発現場に常駐することは可能です。

jQueryで使用できるイベント

サンプルではクリックでの動作でしたが、jQueryでは様々なイベントが用意されています。HTMLとCSSと同じで知っていれば参考書やネットで調べてjQueryを書くことができます。まずはどのようなイベントがあるのかを覚えましょう。

click() クリック時に処理を行う
dbclick() ダブルクリック時に処理を行う
hover() マウスオーバー / アウト時に処理を行う
mousedown() クリックしてボタンが押し込まれたときに処理を行う
mouseup() マウスが押されたボタンが離れたときに処理を行う
mouseover() マウスオーバー時に処理を行う
mouseout() マウスが離れたときに処理を行う
mousemove() マウスが移動したときに処理を行う
one() イベント中に一度だけ処理を行う
on() 対象の要素を絞って処理を行う
off() 設定されているイベント処理を取り消す
touchstart() タッチされている間
touchmove () 指が動いているとき
touchend() 指が離れたとき
focus() フォームのフォーカス時に処理を行う
blur() フォームのフォーカスがはずれたときに処理を行う
change() フォームの入力値が変更されたときに処理を行う
submit() フォームの送信ボタンがクリックされたときに処理を行う

クリックだけではなく、フォームやスマートフォンのイベントにも対応しています。このイベントに対して動作の命令を書いていきます。

jQueryの独自アニメーション

以前はjavascrioptで複雑なコードを書いて処理していたフェードアウトやアニメーションなどを簡単に記述できるのがjQueryの魅力です。これによりプログラム言語に疎いWEBデザイナーであってもアコーディオンメニューのようなインタラクティブな動きの実装が可能になりました。

プログラムが書けない人用に簡略化されたものとも言えるので、WEBデザイナーとしてjQueryを勉強するなら使いこなせるようになりたい機能です。

フェードイン / アウトによる要素の表示切り替え

See the Pen KgmKWO by WEB Designers NAVI (@mahkun) on CodePen.

アニメーションの命令

show() 徐々に表示する
hide() 徐々に非表示にする
toggle() 表示・非表示を切り替える
slideDown() スライドアニメーションで表示する
SlideUp() スライドアニメーションで非表示にする
slideToggle() 表示・非表示をアニメーションで切り替える
fadeIn() フェードインで表示する
fadeout() フェードアウトで非表示にする
fadeTo() 透明度を指定した値に徐々に変更する
animate() CSSのプロパティ値を徐々に変更する

jQuery初心者のWEBデザイナーはこの程度の理解で十分

最初から複雑な動作をjQeuryで書こうすると挫折していまいますので、WEBデザインの現場に必要最低限のものだけ覚えれば十分です。この基本のjQueryだけでも多くのWEBサイトで採用されているメニューの表示切り替えなどの実装は可能です。

基本がわかればインターネットのフリーのjQueryライブラリをカスタマイズして使用することもできますので、コンテンツスライダーなどをポートフォリオに組み込むこともできるようになります。

むしろどのようなjQueryで命令した後のコードをCSSとHTMLでどのように組むかとういアイディアの方が大事です。それがわかっていてjQuery動作前のHTML+CSSと動作後のHTML+CSSを分けてシステムエンジニアに納品できるWEBデザイナーは貴重です。

参考書は1冊手元においておくこと

jQueryのコードはWEBデザイナーが毎日書くことは稀です。フロントエンドエンジニアならそのような環境もありますが、WEBデザイナーはPhotoshopでのデザインとHTML・CSSが基本です。

jQueryを忘れたときに急に仕事がくるということもありますので、参考書は1冊置買っておきましょう。私のおすすめはWEB制作の現場で使うjQueryデザイン入門です。

転職に有利になりたい人や複雑なjQueryを書きたい人はオンラインスクールがおすすめ

jQueryはWEBデザイナーにとっては敷居が高いものです。逆の味方をすればキチンと書けるデザイナーはWEB開発現場で重宝され採用確率が一気に高まります。アルバイトや派遣のWEBデザイナーが次の段階に進むためにガッツリとjQueryの勉強をするのは非常に有効な戦略です。

しかし独学やWEBデザイナー仲間での勉強ではどうしても習熟速度が遅いです。本職のWEB系のシステムエンジニアに聞いた方が本質の理解やサーバーと連携などを教えてもらます。

そのような開発現場で仕事をしているならばjQueryの勉強の場はありますが非常に稀です。勉強するならば直接エンジニアにjQuery / javascriptを教えてもらえるTechAcademy [テックアカデミー]のようなオンラインスクールが一番手軽で効率的です。



スポンサーリンク

Desingers Navigator

アルバイトWEBデザイナーから始まり派遣WEBデザイナーを経て、大手企業正社員WEBデザイナーへ。その後WEBディレクターになりUI・UXの専門に。現在はフリーランスのWEBデザイナー / ディレクターをしています。

関連記事 / RELATED POST