【javascript】jQuery初心者が知っておくといいスニペットコード紹介記事のまとめ

javascript, jQuery, WEB制作

jQueryを使う際に役立つスニペットコードを書いていたり紹介している記事のまとめです。

スニペットコードとは?
スニペットとは、一般的には「切れ端」「断片」という意味の英語である。
IT用語としては、プログラミング言語の中で簡単に切り貼りして再利用できる部分の事。プログラムを作成する際には、しばしば、頻繁に利用する同じ記述の繰り返しや、微妙な変更を加えるだけで使うことができそうなパターンに遭遇する。そのようなパターンをスニペットとして登録しておくと、一塊のコードを呼び出して貼り付けることで簡単に記述できるようになる。

引用元-コードスニペットとは – IT用語辞典 Weblio辞書

jQuery pluginを導入するまでも無い規模の機能を実装したい場合などに、こういったスニペットコードを利用するのが効率的にいいかと思います。更に自作でpluginを作れるのならば、よく使うスニペットコードは自作plugin化してしまえば管理効率があがります

jQueryを覚える際に、こういったスニペットコードを目にし、どういった仕組みでコードが動作し、どのような効果をもたらすのかを考えることでjQueryの基本を学ぶのに最適だと感じています。

同じ結果をもたらすコードでも、各サイトでの記述方法が異なるので、その記述の違いを調べたり考えたりする事も、jQueryの基本を学ぶにはいいでしょう。

※古い記事も紹介してありますので、使用する際は現在のjQueryのバージョンで使用できるメソッドかどうかを確認してください。

スポンサーリンク

スニペットコードまとめ記事紹介

web業界では有名なかちびと.netさんのページです。
様々な用途別に分けられたスニペットコードを紹介されています。
HTMLやCSSのコードも書いてあるので、見やすいです。

よく使うjQueryのコードを紹介している。

jQueryを使用する際の基本的な事から、
各コードの解説も分かりやすく書いてあるので、
jQuery初心者には優しい内容になっている。

■記載されているスニペットコード

  • リンクを別タブで開く
  • 外部リンクのみ別タブで開く
  • Topへ戻るリンク
  • スクロールするとTopへ戻るリンクが現れる
  • ページ内スクロール移動リンク
  • 空のP要素を削除
  • 空のP要素を削除(子要素がある場合を除く)
  • 画像にマウスホバーで透過させる
  • divの高さを揃える
  • 背景をアニメーションさせる

WEBクリエイターのアイドル、manaさんの記事です。
こちらでも良く使用するであろうjQuery スニペットコードが紹介されています。

■記載されているスニペットコード

  • マウスオーバーで画像を変更
  • 外部リンクを別タブで開く
  • Div全体をクリックできるようにする
  • テーブルの偶数・奇数の行の色を変える
  • リンク切れ画像を差し替える
  • CSSハックを使わずブラウザーごとにCSSを変更
  • 画像のプリローダー
  • IE6以下ユーザーにメッセージを表示
  • Divを消す
  • フォーカスしているフォームのラベルにクラスをつける
  • フォームにテキストを入れておき、フォーカスで消す(文字色も変更)
  • 入力文字数をカウント
  • ラジオボタンとチェックボックスを装飾する
  • スライドパネル
  • アコーディオン
  • ツールチップ
  • プリントダイアログを表示
  • Twitter最新のTweetを表示
  • 効果音を入れる

多数のjQueryスニペットコードを紹介しているサイト。
簡易的な解説もあります。

sublimeTextでスニペットコードを管理する

sublimetextを使いスニペットコードを登録しておくと効率化が図れます。
上記記事は、スニペットコードの登録方法が解説されています。

jQuery習得の早道

これからjQueryを学んでいきたいという方は、なるべく完全に基本を習得した上でスニペットコードを登録して使い始めるのをオススメします。

プログラムを覚えていくコツとしては、【自分でコードを打つ事】なので、なるべくなら、上記のスニペットコードを手打ちでまずは丸写しし、記述方法や各メソッドの仕組みを知る事です。

HTMLタグやCSSのセレクタやプロパティも、両方合わせると結構な数がありますが、普段から触っていると殆ど暗記しているでしょう?

それと同様に、jQueryの記述方法やメソッド等も手打ちしている際に勝手に暗記されていくので、学習には最適です。

まずはコードを手打ちし、分らない所があれば都度調べる。それがjQuery習得の早道です。

この記事が気に入ったら
『いいね』しよう!