現役フリーランスエンジニアが運営するテックメディア。日々の業務で得た知識を発信していきます!

  1. フロントエンド
  2. 135 view

実務で役立つjQueryのコツ。サクッと実装【逆引きレシピ不要】

最終更新日:2019/04/19

楽してjQuery
どうもフリーランスエンジニアをしているゾエです。
この記事では、技術の話は抜きでjQueryでさくっと実務を行っていく方法を解説していきます。

jQueryは歴史が長く、化石だなんて言われることも多い言語ですが、その分知見がネット上に沢山共有されているのが強みです。

それらを活用することができると、jQueryを用いて比較的容易に様々な動きを実装できるようになるのでjQuery初心者の方は必見です。

jQueryでは適切に情報を調べる能力が重要

jQueryの難しいところに、なんと検索していいのかわからないという事があります。
一般的なCSSフレームワークで動きをつける場合は動きに名称がついていてそれの公式ドキュメントを読めば終わるのですが、jQueryの場合はそれがないので実装がしづらいというわけです。
ですが、これから紹介することを押さえておけばGoogle検索でjQuery 開くとかで検索する必要性が減ります。

expansion panel

全てを抑えると、こんな感じのExpansionPanel奴を実装したい時は、あ、BootstrapのAccordionね。
とか、こういう一般的な動きならCodePenに落ちてるだろう。とかそういう楽に実装する方法をすぐに閃くことが可能になります。

小さい動きならcodepenをチェック

まずはCodePenから紹介していきます。
例えば、youtubeのような、いいね、よくないボタンを実装するとしましょう。

いいね jQueryとかの検索ワードで調べれば参考になる記事はあるのですが、多少要件が違うので、実装まですぐにできるということは多くはないです。

では、どうすればいいのでしょう。
勿論自分で実装する方法を調べるのも手ではありますが、正直実装なんてしたくない。
ふぇ〜って感じですよね。

そんな時に役立つのがCodePenです。
だいたいのものがあるので、これ知ってるだけで秒速で実装ができることが結構あります。

例えばyoutubeみたいないいねボタンが欲しいと言われた場合、自分で実装しようとすると意外と難しいです。
なので、codepen上でlike dislikeと検索しましょう。

はい、全く同じ機能要件のものが見つかりました。

See the Pen
Like / Dislike buttons
by Mirza Leka (@MirzaLeka)
on CodePen.

codepenの活用方法は簡単で、UI(動き)、デザインが最も近いものを探して、あとはコピー&ペーストして使うという方法です。

仮に全く同じようなものがなくても、ベースになりそうなコードを見つけたらそれをベースにcodepen上で開発までできるのもいいところです。
なので、今回の場合はとりあえず先程の奴をベースに色だけ変えるとかの対応ですみます。

自分でcodepen上でいいUIのものを探してきて提案するなんていう使い方もできるので、この方法は是非覚えておいてください。
likeで検索すると、tinder,twitter,facebook風の動きは全部網羅されてます。
code pen サンプル

このUIとか自分だと全然実装方法わからないので、もしこれを実装することがあれば神様ありがとうございますっていう感じ?

See the Pen
Tinder Animation (GSAP)
by Arjen Tienkamp (@arjentienkamp)
on CodePen.

これはおまけ情報なのですが、codepenはyoutubeと同様に人の作品でも、自分のブログに埋め込むことができます。

少し散策してみては?
CodePen

jQueryUIも要チェック

Dialog | jQuery UI
jQueryUIはjQueryを便利に使えるようにしてあるライブラリです。
他のCSSフレームワークと同様に、動きに名前がついていて、簡単な使い方を覚えるだけで利用することができます。
少し動きが古いのですが、例えばinputをdatepickerにしたい場合などにお世話になったりします。

使い方はjQueryUIを読み込んでちょっとしたコードを書くだけです。

<link rel="stylesheet" href="jquery-ui.min.css">
<script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.min.js"></script>

Bootstrapを使えば簡単に動きをつけることも可能

bootstarap 紹介

先ほど紹介した押すと開く動きの実装などには、Bootstrapがおすすめです。
使い方はjQueryUIなんかと変わらず、モダンな動きを簡単に実装することができます。
BootstrapのComponentsの名前と動きはなんとなく覚えておくと少し幸せになれるので、少し徘徊してみてください。

Collapse · Bootstrap

ちょっと難しそうと思ったらライブラリ

今までは、BootstrapやjQueryUIなどの網羅性が高いものをご紹介しましたが、実際に複雑なものを実装する時にはそれだけだと厳しい場合があります。
そんな時に使いたいのがプラグインです。
プラグインは特化しているため複雑な機能要件に対応しやすいようにできています。

僕は画像スライダーのslickとかbxsliderぐらいしか使ったことはないのですが、ちょっと難しいなと思ったらライブラリに頼りましょう。

画像スライダー リッチ

slick
bxslider

誰でもフリーで使える!jQueryのプラグイン30選

日本語で見つからない時は英語版をチェック

jQueryに限った話ではないのですが、なんかいい情報が落ちてないなーと思ったら英語版のGoogleで検索をするのがオススメです。
僕も英語は得意ではないのですが、Google翻訳を駆使して使っています。
先ほどの、CodePenの例でいうと、likeをgoodで検索したり、いいねで検索すると目的の情報に辿りつきません。

諦めて、普段から英語で検索するようにするのがオススメです。

少なくとも、ブックマークだけはしておきましょう。
英語版Google

まとめ

こんな感じって言われたらCodepen
Bootstrapのコンポーネントにあったなと思ったらBootstrap
難しそうだなーと思ったらライブラリ探し
いい情報落ちてないなーと思ったら英語検索

をすると、一番楽に実装できるのではないかなと思います。
この記事ではjQueryが得意でないなかで実務をこなすためのコツを紹介させて頂きましたが、もっと楽をする方法を教えてもらえる嬉しいです。

じゃんじゃんコメント待ってます。

The following two tabs change content below.
WINDII

WINDII

WINDII(ウィンディ)は、フリーランスエンジニアが運営するテックメディアです。 日々の業務で得た知見を、皆さんに役立つコンテンツにして発信していくので応援よろしくお願いします! また、Slackで無料コミュニティも運営しています。たくさんのエンジニアが参加していて、プログラミングの相談や雑談などをしている楽しいコミュニティなので、興味ある方はぜひお気軽にご参加ください。 Slackコミュニティはこちらから

フロントエンドの最近記事

  1. IOSアプリをAppStoreに公開する手順書(Ionic)

  2. IonicAcademyでIonic&Angularでのアプリ開発を学ぶ

  3. Ionic4+firebaseで認証をする方法【ログイン、ログアウト機能の実装】

  4. ハイブリッドアプリ開発チュートリアル【Ionic4+OnsenUI】

  5. Ionic4+Angular Materialの始め方【Ionic事前調査兵団】

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

PAGE TOP