I've just finished learning on "30 Days to Learn jQuery"

タイトル通り、"30 Days to Learn jQuery"というコースを1通り終えたので、記念にメモ。

参考：Tuts+ Premium Course: 30 Days to Learn jQuery

メルアドを登録すると、jQueryについて学べる動画のURLが1日1回届きます。
各回は10〜30分で、jQueryについて学べます！

私はiPhoneに動画をエンコードして入れておいて、毎朝の通勤電車で見てました。
全編英語ですが、英語の勉強にもなるのでオススメです。

初心者として

当ブログを見れば一目瞭然ですが、私のJavaScriptの理解度はたかが知れてます。
jQueryについても、大した知識があるわけでもなく、いわば魔法の箱状態で使ってました。

このコースを終えてみて、これから何を学ぶべきかというものが明確になったと同時に、いわゆる勘所を片鱗とはいえ知ることができて良かったです。

このコースは、ご本人も仰られる通り、ソースコードを追うシーンが多いです。
jQueryだってJavaScript、基本がわかってれば簡単、そういうことなんやと思います。

簡単に扱える分、ちょっと触って知った気になる、わかった気になるのも簡単なんやと思います。
ただしっかり勉強すればするほど、自分の浅はかさや無学さに気付かされるという。

いろいろと、少しはわかるようになったと思います。

できるようになった！

セレクタ

最初の方は、セレクタについて一通りやってくれます。

$('#parent .child .target').doSomething();
// これは例ですが、こんな風にひたすらだらだら書いてた

$('#parent').children().find('.target').doSomething();
// みたいにチェーンさせて書けるようになった

この例だけじゃすごくわかりにくいですが、実際のシーンではとっても役立つと思います。
ある程度の区切りで変数に入れておいて、使いたいとこだけ切り出して使える。
当たり前ですが、知ってると知らないとじゃ大違いですよね。

変数にキャッシュ、this

var $this = $(this);
this.doSomething();

var box = $('.box');
box.animate({left:300},4000);

ほんと、知ってる人からすると何をいまさら・・って内容やと思います。
今まで書いてた自分のソースを見て、$('hoge')...って書きだす行の多いこと多いこと！！
とりあえずそれでも動くけども、けども！ｗ

省略して書く：Shorthands

var a = 'first';
var b = 300;
// って、一回一回varってしてた

var a = 'first', b = 300;
// って、書けるようになった！

if( a == 'yes' ){
  // true...
  }else{
  // false...
} 
// としか書けなかったのに

( a == 'yes' )
? // true... 
: // false...
// って書けるようになった！

お作法的書き方の意味がわかった

何かしらfunctionを書きはじめるにあたって、

var sample = function(){
  // do something..
}

sample();

これをなんで変数に格納するのかがそもそも理解できなかった頃もありました。

var showSomething = {
  init:function(){
    // init...
  },
  
  show:function(){
    // show...
  }
}

なんてことないこういうの。
initってなんやー！！ってか":"って何や！っていうのは過去の話！
いまになって、なるほどなぁです。

jQueryでできること

何ができて、何ができないかを把握するのは、ライブラリを利用するには必須やなぁと。
頑張って実装したら実は標準であった、とかなりたくないもんね。

知らんメソッド多すぎ

click, live, delegate, onの違い
classがtweetのpタグを作るには？
$.grep()って？
$.map() $.each()の違いは？
Deferredsとはなんぞや

この動画を見るまで、知る由もないものばかりでした。

DOM操作が最大の強み。

取得した要素に対して、何か行動する、それだけでそれが全て。
どうやって取得できるか、それに対して何ができるか、この2本に絞って考えられるかが肝かと。

結局はJavaScript

うまく言葉にはできないけど、なんとなくわかるようになったこの感覚。
オブジェクトをやりとりする言語やってことも。
型のチェックが甘い〜とかいう意味もわかった。

Ajaxはサーバーサイドの知識も必須

JavaScriptだけできてもダメってこともよーく。
やっぱPHPも勉強せにゃね！

Ajax＝コンテンツの外部取得＝決まったフォーマットに流すもの＝テンプレート化

概念的にはハラオチですが、使うのは難しそう・・。
ほんとにデザインとロジックを分離する必要がある時だけで良いのかも？

不満を言うならば

毎回の時間が不定

7分〜45分の幅で、だいたい15分くらいなイメージでしたｗ
電車で再生はじめて、3駅で動画終わった日があって、なんだか切なく・・。
何回も見ろってことやな！

後半の難易度UPが半端ない

DOM中心でいじくり回すより、Coreな部分が難しいのは当たり前やけど・・。

テンプレートはまだまだ使えそうにないですorz
Publish/Subscribeのデザインパターン？もわかりません・・。
プラグインはなんとなくわかったけど書けと言われると・・。
Deferredsなるもの

コース自体について

30日で？

「jQuery覚えるのに30日もいらん」っていうコメントをどこかで見ました。
いわゆる"わかる人"は、別に見なくていいと思います。

この人のいう"覚える"がどこまでかがわからないのもありますが、技術を覚えるというより、「30日継続して学習する」、「技術を覚える姿勢」という意味で初学者には良い教材やなぁと思いました。
よくわかってない人が、「こう書けばOK」っていう書き方のセオリー的なものを知る意味でも有用だと思います。
プロのお話やもんねー。

フォーラムで質問したり、Twitterでご本人さんに聞いたりもできるし。

動画教材びじねす

Codecademyからドットインストールまで、最近プログラミングを教えるサービスが増えてきたなぁと感じます。
初心者にとっては本当にありがたい限りです。
動画のいいところは、書き直しとかも含めて全部見れるので、どういう考え方でそのアウトプットに至ったかまでわかるということ。

さいごに

Hi, Jeff!
At first, I wanna say "thank you" from the bottom of my heart!
I've really learned a lot from you and your videos.
It was fun and excited for me to see your video in this 30 days.

As you say, "Read the original source code" was seemed to be difficult for me at vary first.
But now, I think I can read part of them and understand!

Some lessons are little bit difficult and I'm not sure that I've understood it.
For example, handlebar..template, Pub/Sub model, and idea of Prototype... X(
I have to study more and more.

To be a Web Developer like you, I decide to keep learning from now on!
Thank you so much from Japan.

Sincerely yours.

なんだか寂しいなぁ。