JavaScriptをもっと上達したい人へのヒント（JavaScript おれおれ Advent Calendar 2011 – 24日目）

JavaScript おれおれ Advent Calendar 2011 – 24日目（最終日）

JavaScriptを書くプログラマーさんでも、JavaScriptも書くデザイナーさんでも。

僕なんかがおこがましいとは思うんですが。

いっぱい書く

とにかく書く事です。何でもいいです。作りたいものがあれば作ってもいいし、面白そうなものを見かけたら真似してみましょう。

ライブラリーやフレームワークは躊躇なく使う

簡単に書けるならそれに越した事はありません。どんどん使いましょう。そもそも便利なライブラリーを習得する事だって大切です。

分かりやすいと最近評判の本ですね。プログラミングの知識が全く無い状態の読者を想定しているそうです。

• 「Webデザイナーのための jQuery入門」という本を書きました – Takazudo hamalog

で、私が書いた本の話に戻りますが、「Webデザイナーのための jQuery入門」は、読者が、プログラミングの知識が全く無い状態を考慮して構成されています。これが最適解かはわかりませんが、「よーしではJavaScriptをちゃんと覚えるぞー。どうしたらいいの？」に答えたような本にしたつもりです。最低限必要な概念や知識を説明した上で、実際にサイトで使いそうなものを作っていき、その中でJavaScriptの基礎にも触れながら、jQueryを覚えていけるような流れで書きました。

「守破離」という言葉もあります。まずは道に従いやがて慣れてから工夫を凝らし、最終的に自身の中に道を見つける事ができれば良いと思います。慣れないうちは著名なもの（jQuery、prototype、Dojo Toolkit、Ext Js…）を使ってみましょう。慣れてきたら自分で判断して、適切なものを選択してみてください。

公開する

作ったものは公開しましょう。できれば何が出来るのか、どうやって使うのかという簡単な説明書も書くと良いです。

説明書なんか省略しても、と思うかもしれませんが、誰かに「それ」を説明するという事は、設計や実装を客観的に見直す事に繋がります。操作説明を書きながら、「あ、こういう操作の方が使いやすそうだったな」と気付く事もあるかもしれません。

アプリケーションではないコードでも、ブログなんかで公開したら良いと思います。思わぬ「ツッコミ」ももらえるかもしれません。

いっぱい読む

自分の書き方と比較する

同じ処理をするにも複数の書き方があります。

var i;
for (i = 0; i < arr.length; i++) {
}

var i;
for (i = 0;
     i < arr.length;
     i++)
{
}

for (var i = 0, l = arr.length; i < l; i++) {
}

var i = 0;
while (arr[i++]) {
}

var i = 0;
do {
} while(arr[++i]);

arr.forEach(function(item, i) {
});

jQuery.each(arr, function(i, item) {
});

知らない書き方であれば、長所と短所を調べて、引き出しに追加しておきましょう。

面白い動作の実装方法を調べる

「なにこれすげえ！」と思ったらそのまま「なにこれどうやってんの？」と思ってコードを見てみましょう。

知らない機能があるかもしれません。すぐ使えるようにはならないかもしれませんが、引き出しを増やしておくのは良い事です。

その際はデバッグツール（別項）をフル活用すると良いでしょう。

改造する

ゼロから書くだけではなく、面白そうなコードをちょっと変えてみるところから始めるとやりやすいと思います。数字をちょっと変えるだけでも動きがすすっと変わるものもあります。

JavaScript等のコードを保存、公開できるjsdo.itというウェブサービスがあります。

• jsdo.it – Share JavaScript, HTML5 and CSS

同様のサービスは他にもあるのですが、jsdo.itにはForkという特徴的な機能があります。元のコード（誰かが書いたやつ）を複製してから編集する事ができます。

またコードが残るので後から見返すのにも便利です。

JavaScriptを学ぶ

パターンを学ぶ

よくある処理はよくある書き方で書かれています。特にデータ構造などプログラミング的なテクニックは他言語でも使えるので潰しがききます。

ある程度大きな規模の実装では、「GOFのデザインパターン」等が有効な場合があります。

この↑本はJavaScriptではなくJavaで書かれていますが、図説もあるので、十分理解できるかと思います。（さすがにプログラマー向けですが。）

「JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス」も参考になります。

こちらはJavaScriptに特化した解説です。デザインパターンではありません。（コードパターンとでも言うのかな？）　JavaScriptの仕様を解説しつつ、ありがちな駄目コードとあるべきコードを示してくれます。サイ本より圧倒的に薄いわりに、学ぶべきものは多いです。

リファレンスを見る

改造する際、どんな値が使えるのか確認しましょう。

だいたいMDN (Mozilla Developer Network)に掲載されています。

• JavaScript Reference – MDN （日本語です、一部英語も）

本格的な仕様を確認するのは後で、十分こなれてからで間に合うと思っています。

仕様を学ぶ

別項で紹介した「JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス」は仕様を学ぶのに良いと思います。

もっとかっちり学びたい場合は、初心者には薦めませんが、こちらの「サイ本」の呼び名で有名な本です。

分厚いので一気に読もうとはしないで、セクションごとに興味を引かれたものだけかいつまんで読んでゆくようなスタイルが良いかと思います。

また言語の仕様書も面白いです。JavaScriptはECMAScript（エクマスクリプト）という上位言語があります。ECMAScriptの仕様書はPDFファイルで公開されています。

• ECMAScript – Documentation
  • Under Translation of ECMA-262 3rd Edition （有志による日本語版）

関連技術を学ぶ

ちょっとかじっておくと違うと思います。

HTML/DOMを学ぶ

クライアントサイトJSなら当然必須ですが、たとえサーバーサイドJS一本で行くにしても、HTMLを出力する事もあるでしょう。

まあそんなに難しくない（=難しいレベルまで学ばなくていい）と思いますが。

HTML5を学ぶ

バズワード化していますが、JavaScripterから見て重要なのは、もちろんJavaScriptのインターフェイスです。sectionをどう組むかみたいなのは優先順位低めで。

LocalStorageとCache Manifestをうまく使えば、Webクライアントサイドの技術だけでオフラインアプリケーションを作成する事も可能になりました。またCanvasを使って高度な画像処理を行うサンプルは目にされた事があると思います。

また見落とされがちですが、HTMLの要素まわりのインターフェイスにも追加になったものがあります。例えばフォームでスライダーやプログレスバーが使えるようになりましたし、ドラッグ＆ドロップも属性で指定できるようになりました。

• HTML5サンプル集 | 株式会社あゆた

CSSを学ぶ

特に、ぐりぐり動かす類のUIを実装するのに必須です。

特にボックスモデルとCSS3のanimation、transitionが重要だと思います。別項でも紹介したjsdo.itで面白いコードがよく公開されているので、ときどき覗いてみると良いと思います。

• jsdo.itの”animation”タグが付けられているコード

HTTPを学ぶ

通信系の処理で、知ってると便利な場合があります。ないかな。あったと思います。

ツールを使い倒す

エディターを使い倒す

対応括弧にジャンプするとか検索とか補完とか、だいたい機能はあるはずです。知っているとだいぶ便利。

デバッグツールを使い倒す

各ブラウザーで使える「開発者ツール」はご存知でしょうか。console.log()やdebuggerとか。

• javascript デバッグ – Google 検索

これがあると格段に捗りますというか、ないとやっていけません。IEも8から付属しました。

console系は .log()以外にも多数の機能があります。ブラウザーによって利用できる機能が違ったりしますが、是非確認してください。

for (var p in console) {
  console.log('console.' + p + '() is supported!');
}

console.profiles() is supported!
console.memory() is supported!
console._commandLineAPI() is supported!
console.debug() is supported!
console.error() is supported!
console.info() is supported!
console.log() is supported!
console.warn() is supported!
console.dir() is supported!
console.dirxml() is supported!
console.trace() is supported!
console.assert() is supported!
console.count() is supported!
console.markTimeline() is supported!
console.profile() is supported!
console.profileEnd() is supported!
console.time() is supported!
console.timeEnd() is supported!
console.timeStamp() is supported!
console.group() is supported!
console.groupCollapsed() is supported!
console.groupEnd() is supported!

（環境により異なります。）

解析ツールを使い倒す

いわゆるlintというやつです。コードの不正な部分、曖昧な箇所を指定してくれます。

• JSLintでストリクトなJavaScriptを書く | Mach3.laBlog

必ずしもlintをパスする必要はないと思いますが、多いに参考になるんじゃないかと思います。

(‘_`) oO( 正直使ってません。 )

ドキュメント化ツールを使い倒す

先ほど「説明書を書こう」という話をしましたが、それのもっと範囲の小さいものです。各関数ごとに説明を書きます。

• JsDoc Toolkitを使う！ – トップページ

ツール利用を前提とする事で書式が統一される事で見やすくなる、という利点もあります。

自動試験ツールを使い倒す

最近jQuery関連製品のQUnitというものをよく使っています。他にも幾つかありますが、好きなものをひとつ使えるようになればだいぶ違います。

• QUnit – jQuery JavaScript Library
  • QUnitの基本的な使い方 – Block Rockin’ Codes
• JsUnit
  • JsUnit を使った JavaScript のユニットテスト – WebOS Goodies

関数の「入力」「出力」「副作用」をきっちり考えられれば、良い設計になると思います。

↑一昨日くらいに買いました。まだ最初の方しか読んでないですが……。

愛する

愛こそすべて。メリークリスマス！　良いお年を！