2011-02-17

JavaScriptをノンプログラマに教えるMEMO

まだまったくもってメモレベル。方針とか気づいたこととかごちゃ混ぜ。

jQuery前提

とりあえず jQuery 前提で。宗教戦争には興味なし。小さく十分なことができ情報が豊富、と三拍子揃ったライブラリはそれほどない。

アプリケーションを書きたいプログラマは自分の好きなものを選べばよい。

JavaScriptの記述位置

JavaScript（以下、JSと略記）

  1. 外部ファイルに書く
  2. 基本的には HTML の </body> の上で読む
  3. こうやって書く
jQuery( function($) {
  ...
});

1, 2 は比較的簡単に説明できるが 3 は面倒なので端折る。突っ込んでくる人がいてもその人の理解のレベルを見て判断する。

JSの記述位置と実行タイミング

理解する気と力のある人には説明する。

  • 基本的に JS は書いた位置でそのまま実行される
  • function で囲めば呼び出されたタイミングで実行される
  • jQuery( function($) {} ); で囲むと HTML が組み上がってから実行され、かつ他のライブラリを利用するパーツと組み合わせても安全
  • HTML の上の方に書くと HTML の読み込み前に JS の解釈が走って「見た目」の出来上がりが遅くなるので下に書く

JS の実行が遅れることによる「見た目の変化」が気になる場合は上に置いて一工夫することになるが、それは応用編にしておく。

Firebugとconsole.log

alert() は捨てる。

  • Firebug をすでに使っていることが前提
  • コンソールってあるよ
    • ここで実行もできるよ
  • JS の中で console と書くとこの「コンソール」を意味するよ。そこに log() でメッセージを書けるよ。

最初しつこいくらい console.log() を書いて確認してもらう。コンソール直叩きはそのあとで。ある程度コードが長く（と言っても10行くらいでいいんだけど）なってきた際に console.log が自然に出てこないと困る。

セレクタセレクタセレクタ

セレクタの知識不足は致命的。セレクタをセレクタとして認識できないとセレクタをクォートで囲んで与えるという説明も通じない。

「何を」「どうする」の「何を」がないと始まらない。

CSS 3 セレクタの知識も大事。この知識の足りないプログラマは無駄な処理を自分で作り込み始めてしまう。ここはノンプログラマ側から攻めてやるべき。「書かずに実現する」ことが「書いて実現する」ことより重要。

オブジェクト.メソッド()

メソッドの前の . を忘れたり後ろの ( ) を忘れたりする。とにかく型で覚える。

オブジェクト.メソッド()

これが分かればコードのかなりの部分の「型」が分かるはず。

文字列

ノンプログラマは地の文と文字列の区別がつかない。だからコードのパーツを捉えられるようにサポートする。これはオブジェクトの名前、これはメソッド、ここからここまでが引数。

コードのいわば「品詞」が分かるまではそれなりに時間が掛かる。短めのコードをたくさん読んで動きを理解するのが大切。

引数

  • ( ) の中に何を与えるのかはメソッド次第
  • メソッド( ) のリファレンスを読まないと分からない。読め。絶対。

ここら辺は比較的覚えればいい HTML や CSS とは異なる。リファレンスをざっくり理解し、いつでも引けるようにしておく、ちゃんと補完される環境を知るなどの努力が必要。

リファレンスはカタマリで読め

とりあえず

  • Attributes
  • CSS
  • Effect
  • Event
  • Selectors

その後

  • Manipulation
  • Utilities の .each()

くらいかなぁ。

メソッド名だけで調べて完結してしまうのではなく、カタマリで「読む」と「掴めてくる」はず。

リファレンスの記法が分からなければ分かりそうな人をつかまえて聞く。聞ける人がいなくてもいっぱい読んでると結構分かってくる。

CSSとの組み合わせ

JSの中でHTMLの要素を自動で作られるとCSSが当たらないけどどうしたらいいの？

という話。公開されているスクリプトを設置してそのデザインをカスタマイズする、というのはかなりよくある話だと思う。

まずは要素の特定

  • ドキュメントを読む
    • 書いてないのはクソ。できるだけ採用しない。
  • どのような要素が存在しているかを inspect できること
  • inspect しても分からない場合は jQuery plugin なら jQuery のリファレンスの manipulation のメソッド呼び出しを探す
    • そこできっと何かが起きている

リファレンス重要。

スタイルを書く

  • とりあえず jQuery.css() で書いちゃう
    • 何に対してスタイルを当てればよいのかを知るにはこれが早い
  • できるだけ外部 CSS の important! でやってみる
  • Stylish を併用するといいかも

CSS はやはり独立した CSS ファイルの中にあった方がエラーチェックもちゃんと機能するしメンテしやすい。

小さい課題からやる、何度も同じ課題をやる

  • いきなり何行もコードを書かなきゃいけないことに興味を持つとハードルが高い

短いといってもまったく読めない状態での数行は読める人の100行くらいに相当するかもしれない。

  • 何度も同じ課題をやる

さすがにまったく同じではない方がよい。自分でちょっとだけ違うバージョンを想定してそれをいくつも練習する。そうやって記法やリズムを自分の身体に染み込ませる。他の人は知らないけど自分は「書く」行為にはリズムが大切だと思っている。コードはただの字面じゃない。

コメント

基本は CSS と同じにしておくといいかも。

/*
  ...
*/

ただ

//

以降行末までという形もあるので、見てもビックリしない。

参考

About

例によって個人のなんちゃらです