どうもフリーランスエンジニアをしているゾエです。
この記事では、技術の話は抜きでjQueryでさくっと実務を行っていく方法を解説していきます。
jQueryは歴史が長く、化石だなんて言われることも多い言語ですが、その分知見がネット上に沢山共有されているのが強みです。
それらを活用することができると、jQueryを用いて比較的容易に様々な動きを実装できるようになるのでjQuery初心者の方は必見です。
目次
jQueryでは適切に情報を調べる能力が重要
jQueryの難しいところに、なんと検索していいのかわからないという事があります。
一般的なCSSフレームワークで動きをつける場合は動きに名称がついていてそれの公式ドキュメントを読めば終わるのですが、jQueryの場合はそれがないので実装がしづらいというわけです。
ですが、これから紹介することを押さえておけばGoogle検索でjQuery 開くとかで検索する必要性が減ります。
全てを抑えると、こんな感じの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風の動きは全部網羅されてます。
この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を使えば簡単に動きをつけることも可能
先ほど紹介した押すと開く動きの実装などには、Bootstrapがおすすめです。
使い方はjQueryUIなんかと変わらず、モダンな動きを簡単に実装することができます。
BootstrapのComponentsの名前と動きはなんとなく覚えておくと少し幸せになれるので、少し徘徊してみてください。
ちょっと難しそうと思ったらライブラリ
今までは、BootstrapやjQueryUIなどの網羅性が高いものをご紹介しましたが、実際に複雑なものを実装する時にはそれだけだと厳しい場合があります。
そんな時に使いたいのがプラグインです。
プラグインは特化しているため複雑な機能要件に対応しやすいようにできています。
僕は画像スライダーのslickとかbxsliderぐらいしか使ったことはないのですが、ちょっと難しいなと思ったらライブラリに頼りましょう。
日本語で見つからない時は英語版をチェック
jQueryに限った話ではないのですが、なんかいい情報が落ちてないなーと思ったら英語版のGoogleで検索をするのがオススメです。
僕も英語は得意ではないのですが、Google翻訳を駆使して使っています。
先ほどの、CodePenの例でいうと、likeをgoodで検索したり、いいねで検索すると目的の情報に辿りつきません。
諦めて、普段から英語で検索するようにするのがオススメです。
少なくとも、ブックマークだけはしておきましょう。
英語版Google
まとめ
こんな感じって言われたらCodepen
Bootstrapのコンポーネントにあったなと思ったらBootstrap
難しそうだなーと思ったらライブラリ探し
いい情報落ちてないなーと思ったら英語検索
をすると、一番楽に実装できるのではないかなと思います。
この記事ではjQueryが得意でないなかで実務をこなすためのコツを紹介させて頂きましたが、もっと楽をする方法を教えてもらえる嬉しいです。
じゃんじゃんコメント待ってます。
WINDII
最新記事 by WINDII (全て見る)
- Nuxt.js + Contentful。HeadlessCMSでポータルサイトを作る - 2019年12月28日
- IOSアプリをAppStoreに公開する手順書（Ionic） - 2019年9月11日
- IonicAcademyでIonic＆Angularでのアプリ開発を学ぶ - 2019年8月30日
この記事へのコメントはありません。