blog

今からだって全然OK!僕がjQueryを0から覚えた サービスとか書籍まとめ

Sena

jQueryって何?なところからスタートしたときにお世話になったもの

まずはjQuery入門から入門

もともと僕は【jQuery】は、「そのうち出来るようになろ」くらいにしか考えてなかったんですが、Webデザインレシピさんの記事で「あれ、俺でも出来そう」になりました。
そのくらい、分かりやすくて入門の入門としては最高の教材になります。まず一読をおすすめします!

まさに僕も、【CSSは分かるけど】のレベルだったので、凄まじく分かりやすかったです。

じゃあJavaScriptも

で、jQueryとはなんぞ?が若干つかみかけた当たりで、「やっぱりjQueryの前にまずはJavaScriptじゃね?と思い、購入したのがこちら

まず、これ系の書籍にありがちな【堅っ苦しさ】が皆無。
他の書籍だと、初心者に手取り足取り教えてあげて、かと思えばいきなり中の上級くらいまで話しすっ飛ばされて「???」な初心者を置き去りにしたまま突っ走ってフィニッシュする本も多くあります(ありました!)。

が、この本の文章からは著者の園田誠さんの、なにか学園モノの味のある先生のような、テキトーっぽいけど大事な芯はしっかり体で覚えさせてくれるような、とかく人間味のあるテイストでJavaScriptというものがHTML、CSSとどう絡めていくか、を分かりやすく教えてくれます。

内容は【JavaScript初級編】のようなところなので あまり難しいところまでは進みませんが、はじめの一歩な部分を親切丁寧に説明してくれますので、最初のとっかかりにするにはとてもオススメです!

ちなみにこのほかにHTMLとCSSで基礎から学ぶWebデザインという書籍も出版されています。JavaScriptですっかりファンになった僕は両方買いました。こちらは座学的なことより、CSSとはなんぞや?なんのためのHTMLや?といった根本的な考え方を教えてくれる本です。Webの勉強を始めたばかりの方は特にオススメです。

少し深くjQueryに触ってみる

一家に一冊

このへんの時期では個人的にjQueryをガッツリ使ったものを作っていて、上記の知識や都度ググっていても効率が悪かったので購入したのがこちら。

いわゆる辞典系になります。
とある上級Webデザイナーの方から、「こういった逆引き系の冊子を一から目を通しておくと その言語で何ができるのか なんとなくでも分かるようになるから絶対やったほうがいい」とご教授いただいて購入したものです。

僕の近所の書店ではjQueryの辞典系の本が少なかったので選んだんですが、やりたいこと別にグループ分けしてあり、それぞれのメソッドやプロパティごとに例文もあります。辞典系の書籍では見やすさや探しやすさが最優先になるとおもいます。ので、これは当たり本だと思っています。

Webならこちら 何かあればまず

jQueryのリファレンス系のサイトってけっこうあるんですが、最初の頃に僕が個人的にいつも利用していたサイトがこちら。

中にはサンプルコードだけだったり サンプルページが別リンクになっていたりするリファレンスやブログが多い中、こちらは【サンプル付き】【コード付き】で疑問点が1ページで完結するようになっています。

僕がこのLogicAというブログで実際に動くサンプルをなるべく取り入れるようにしているのはjQuery 日本語リファレンスさんの影響が大きいです。

※ ただ、更新がしばらく止まっているようなので、最新情報とは相違がある場合があります。まずは基礎の基礎を学ぶ段階ではオススメです。が、その後のステップからは後述するもう一つのリファレンスサイトをオススメします。

文字ではなく【声】で教えてもらう

なぜ、このレベルで無料なのか?ここスゲーっす。僕は以前、某Webスクールに50万だして通いましたが、はっきりいって学ぶだけならスクールと同等、いや、スクール以上のことが網羅されていると思います。

学習レベルも初級者用の入門編から中級者用のサンプルを作っていくものやPHPと連携させて、などやりごたえはガッツリですし、どんどんコンテンツも増えています。

jQuery(JavaScript)関連では

JavaScript入門 (全25回)
jQuery入門 (全22回)
JavaScript入門 (Tips集) (全26回)
jQuery Mobile入門 (全21回)

などがあります。

また、通信添削コース という個人レッスンも有料で行ってくれるとのこと。料金もスクールに比べると激安なので、スクールに通う前に一度体験してみて比べてみるのもいいのではないでしょうか?

Webデザインレシピ を本でも

さきほど紹介したWebデザインレシピさんが執筆された書籍です。内容はjQuery一色ではなく、Web制作全般についてですが、どの項も【初心者にはわかりやすく】【中級者に役立つTips】が要所にちりばめられています。

本題のjQueryについても、WebデザインレシピさんのブログにあるjQuery記事をまとめてプラスαされている内容です。さきほど紹介した記事が分かりやすかった!という方は書籍もオススメします。

jQueryに慣れてきたら ステップアップしてみませう

本格的リファレンスサイト

さきほど紹介したjQuery 日本語リファレンスさんと比べると、初心者の方では少し分かりづらいと思います。
が、jQueryを使えるようになってからこのサイトを使うと神サイトになります。マジで。

まず尋常じゃなく探しやすい!んです。【アルファベットごと】にならんだメソッドやセレクター。【ジャンルごと】に分けて探せるタブ。さらに【検索ボックス】(しかも space のショートカットまで!)もついているド親切さ。

そして見やすい!んです。見たい項目をシングルクリックすると【簡易詳細ウィンドウ】でサッと内容確認ができるし、ダブルクリックで【もっと細かい説明】や【サンプルコード】、【実際に動くサンプル】もでます。
元のリストに戻るのも画面左におっきな矢印があるのでサッと戻れます。

だけど初心者はオススメできません専門用語が羅列してますし、「 〜 を 〜 したいときは何をどうすればいいの?」といった段階だとこのサイトで必要なメソッドなどを探すのは至難の業だと思われます。
ので、このサイトを使いこなせるようになったらjQuery中級者、と自称してもよいのではないでしょうか。

jQuery フィルター って分かってます?

手前味噌です。すみません。

自作のWebサービスです。jQueryのフィルターって似たようなもの( div:first と div:first-child とか)が多くて分かりづらかったんです。個人的に。

これはアニメーションでそのフィルターの役割が分かるように作っていますのでフィルター覚えたての方にはオススメです。オススメさせてください。

いちおう使い方は【jQueryのフィルターコードジェネレータ】 の説明書で解説してますが、そんな大層なもんじゃないので一度使ってみてください。

プラグインとか使いたくなるよね

jQueryの醍醐味のひとつがプラグインです。コツコツとコードをカキカキしなくても、プラグインというものを世界各国で無料配布されている方々がたくさんおります。その方々のお力を借りることで、【すんごいアニメーション】とか、【かっちょいいスタイル】とか、【ガッキガキと動作するシステム】とかが あっ という間に作れちゃいます。

で、おそらくプラグインで最も定番といえばjQuery Easing Pluginではないでしょうか。
jQueryをそこそこ使えるようになって、アニメーションとか余裕wになってきた頃に色気を出したくなるのは人の性。そんなご期待にそえるさまざまなアニメーション効果を付けられるプラグインです。

そんなプラグインのイージング(アニメーション効果)の挙動をサンプル付きでまとめてくれているサイトがコチラ。

それぞれの ■ をクリックすると どんなイージング効果があるか アニメーションしてくれます。アニメーションスピードも設定できる親切設計。もちろんプラグインのダウンロードリンクもあります。至れり尽くせりオススメサイトです。

プラグインとか作りたくなるよね

はい、本日3度目のWebデザインレシピさんです。たぶん大好きなんでしょうね。たぶんというか間違いなく。えぇ。

で、またまた親切丁寧な超良記事です。今まで紹介した内容のものってググれば他にも色々と(当ブログ含め)検索できますが、jQueryのプラグイン化を丁寧に記事にされているのってなかなか無いです。

この記事からプラグインを作れるまでに至ってもらい、どんどん便利なプラグインをたくさんの人達が世に送り出してくれると嬉しいです。僕がどんどん使いますよって。

ニッチなこととかしたくなる...よね?

ラストは自分のブログで〆てみよかな、と思いました。スミマセン。

出来るだけ人が書いていない、ニッチ(というかピンポイント)な案件を想定して記事を書いてます。もしちょうどピンポイントにニッチな条件が合う記事があればぜひ参考にして下さい!

と、僕がjQueryを学んできたことをザザザっと羅列してみましたが、Webデザインレシピさん多いな、っていうのが感想です。当初、全くそんな予定は無かったんですが、一個一個自分が歩んできた道を振り返ると、いっつもお世話になっていたようです(笑)

自分も負けないような(ガクブル)記事を書けるように精進してまいります。また、この記事で紹介させていただいたサイトの方々にはとてもお世話になりました!この場を借りてお礼申し上げさせてください!ありがとうございました!!以上でしたヾ(*´∀`*)ノ