JavaScript ～ チュートリアル、サンプル、ビデオセミナーなどのまとめ

JavaScriptは主にWebブラウザ上で動作するプログラミング言語です。HTMLを書き換えてWebページの表示を動的に変更するといった機能のほか、条件分岐、ループ、演算といった通常のプログラミング言語が備えている機能をひととおり備えています。

特に、バックグラウンドでサーバと通信を行うなどの方法で、ユーザーに使いやすい対話型のユーザーインターフェイスなどを実現する「Ajax」と呼ばれる実装が登場したことにより、Webアプリケーションを構築するプログラミング言語として、大きく注目されることとなりました。

主なWebサイト

JavaScriptの中核的な仕様は、標準化団体ECMA InternationalによるECMAScript仕様で規定されています。このECMAScript仕様を参照して、各ベンダごとにJavaScriptの実装が行われています。

• ECMAScript （英語）

WebブラウザのFirefoxを開発しているMozillaが、JavaScriptを詳しく解説しています。

• JavaScript - Mozilla Developer Center
  FirefoxのJavaScriptマニュアル

ベンダ以外では、コミュニティによる以下の情報サイトもあります。

• js-users.jp - 日本の JavaScript ユーザのためのハブサイト

チュートリアル、サンプル

ネット上にはJavaScriptに関する豊富な解説記事があります。下記が内容も新しく、充実しているでしょう。

• JavaScript - Wikibooks
  Hello,World、演算子、制御の流れ、関数の使い方、簡単なオブジェクト指向など、書籍並の充実した内容となっている
• いまさら聞けないJavaScript入門（1/3） - ＠IT
  3ページほどのコンパクトにまとまったJavaScript入門。手っ取り早い理解のために
• 連載：Ajax時代のJavaScriptプログラミング再入門 － ＠IT
  JavaScriptの歴史的経緯、関数、変数のスコープ、オブジェクト指向プログラミング
• 知られざるJavaScriptの世界：ITpro
  JavaScript流オブジェクト指向の解説
• JavaScriptによるオブジェクト指向プログラミング：CodeZine（コードジン）
• クロスブラウザスクリプトの作成テクニック：CodeZine（コードジン）
  JavaScriptにおけるオブジェクトの基本的性質、関数とメソッド、prototype
• 特集：Firefox 3とFirebugで始めるJavaScript開発｜gihyo.jp
• JavaScriptのイロハ：特集 - builder by ZDNet Japan
• そろそろきっちりJavaScript | コラム | エンタープライズ | マイコミジャーナル

DOM操作にフォーカスした連載と、セキュリティにフォーカスした記事もそれぞれ紹介します。

• DOMから始めるJavaScriptモダン・スクリプティング---目次：ITpro
• JavaScriptのセキュリティ問題と対策 - japan.internet.com デベロッパー

それ以外にも下記の解説記事が参考になります。

• これは便利! JavaScriptの勉強はこのコンテンツで - Eloquent JavaScript | エンタープライズ | マイコミジャーナル JavaScript講座 [Smart]
• DOKUGAKU JavaScript
• JavaScript講座［入門から各種テクニックを紹介］
• 初心者のためのJavaScript講座 - パズルネット 智慧（ソフィア）
• JavaScript入門 - JavaScriptist
• オブジェクト指向プログラム言語としてのJavaScript
• ［JavaScript］All About

JavaScriptの命令や関数のリファレンス。

• HTMLヘルプ形式のJavaScriptリファレンス「jsref.chm」を公開した。 - こせきの技術日記
• とほほのJavaScriptリファレンス
• JavaScript リファレンス - OpenSpace

サンプルを基にJavaScriptを学習したり、コピー＆ペーストですぐに利用できるサンプルを提供しているWebサイトも数多くあります。主なものを紹介します。

• 新JavaScript例文辞典
• JavaScript 各種サンプル - JavaScript Market
• JavaScript小技集
• イヌでもわかるJavaScript講座
• JavaScript--単体テスト環境の選択肢 - builder by ZDNet Japan

JavaScriptはおもちゃのような簡易言語だと長い間誤解されてきました。下記の文書はその経緯と理由について解説し、話題になりました。著者は、下記のビデオセミナーにも登場している、米Yahoo!のJavaScriptアーキテクト、Douglas Crockford氏。氏はJSONの提唱者としても知られるJavaScriptの有名人の一人です。

• JavaScript: The World's Most Misunderstood Programming Language
• JavaScript: 世界で最も誤解されたプログラミング言語 - FAX
  上記の日本語訳

ビデオセミナー

米Yahoo!のJavaScriptアーキテクト、Douglas Crockford氏がJavaScriptの歴史、構文、命令、関数、データ型などを詳細に解説するビデオセミナー。

Douglas Crockford氏による、継承やコンストラクタといったオブジェクト指向の解説を中心としたJavaScriptの高度な内容についてのビデオセミナー。

Douglas Crockford氏による、WebブラウザとJavaScriptの関係から始まり、DOMのテクノロジを中心に解説したビデオセミナー。

• Theory of the DOMのプレゼンテーション資料のダウンロード

主要ベンダのJavaScript実装

JavaScriptの中核的な仕様は、標準化団体ECMA InternationalによるECMAScript仕様で規定されています。

• TC39 - ECMAScript

このECMAScriptを参照して、各WebブラウザベンダがJavaScriptを実装しています。以下は、各社のJavaScriptのECMAScriptとの互換性情報、あるいはJavaScriptマニュアルです。

• Microsoft JScript Features - ECMA (Windows Scripting - JScript) （英語）
• ECMAScript Object Support - Opera （英語）
• Apple JavaScript Coding Guidelines: Introduction to Apple JavaScript Coding Guidelines （英語）
• ES3 に対する JScript の偏差 （英語）
• JScript

開発環境

JavaScriptのプログラミングに役立つツールやサービスを紹介しましょう。WebブラウザのFirefox、Opera、Safariには、標準でJavaScript開発支援の機能が内蔵されています。

• Error Console - MDC
  Firefoxで、JavaScriptのコンパイル時などにエラーを表示する「エラーコンソール」について
• Opera Dragonfly 入門 (Japanese) - Opera Developer Community
  Opera内蔵のJavaScriptデバッガ、Dragonflyについて
• Webアプリ開発環境としてのSafariを知ってますか？ - ＠IT
  Safariで、JavaScriptのエラーコンソールなどを表示する開発メニューを有効にする方法

プラグインや追加機能を使うことで、さらに強力なデバッグ環境を構築できます。よく利用されているのはFirefox用のプラグインFirebugです。

• Firebug - Web Development Evolved
  Firefox用のプラグイン
• Venkman JavaScript Debugger project page （英語）
  Firefox用のプラグイン
• DebugBar - IE extension for web developer （英語）
  Internet Explorer用のデバッグ追加機能

複数のWebブラウザに対応するツール。

• Firebug Lite （英語）
  Internet Explore、Opera、Safariで使えるJavaScript製の追加機能
• "IEerBug" とは [てっく煮]
  Internet Explorer 6.0とFireFox 1.5で動くデバッグ コンソール
• Blackbird - Open Source JavaScript Logging Utility （英語）
  alert()の代わりに使えるロギングツール
• JsUnit （英語）
  JavaScript用テストフレームワーク
• SourceForge.net: Jackal - JavaScript Debugger （英語）
  プロキシとして動作するJavaScriptデバッガ。どんなWebブラウザにも対応する

Webアプリケーションとして、Webブラウザ上で動作する開発環境もあります。

• JSLint, The JavaScript Verifier （英語）
• TIDE 2.0 beta （英語）
• JavaScript Shell （英語）

補完機能を備えたエディタや充実したデバッグ機能を備える統合開発環境。これらのツールの多くでは、HTMLオーサリング機能やAjaxライブラリなどへの対応や、PHPやPerl、Javaといったサーバまわりの開発言語への対応なども実現しています。

• Aptana （英語）
  HTML、CSSなどWebページの作成機能と統合された開発環境。PHPやRuby on Railsなどにも対応
• Web Tools Platform (WTP) Project （英語）
  Eclipseベースの開発環境。HTML、CSS、XML、JavaScriptとともにJava EEによる開発に対応
• Visual Studio 2008 Express Editions
  ASP.NETの開発環境としてHTMLやJavaScriptにも対応
• ja: NetBeans 日本語サイト
  HTML、JavaScript、Java、PHP、Ruby、Cなどに対応した開発環境
• Spket IDE - JavaScript Editor （英語）
• IntelliJ IDEA （英語）
• SplineTech JavaScript Debugger PRO. Debug JavaScript in HTML. （英語）
• EmacsでJavaScriptソースを快適に読むために：js2-modeとエグズーベラントCtags - 檜山正幸のキマイラ飼育記

主なフレームワーク、ライブラリ

JavaScriptのフレームワークやライブラリを利用することで、通信やユーザーインターフェイスなどの高度な機能をすぐに利用することができるようになります。ここでは主なものを紹介しましょう。

• jQuery: The Write Less, Do More, JavaScript Library
• jQuery UI - Home
• Prototype JavaScript framework: Easy Ajax and DOM manipulation for dynamic web applications
• script.aculo.us - web 2.0 javascript
• MooTools - a compact javascript framework
• Home | The Dojo Toolkit
• MochiKit - A lightweight Javascript library
• SproutCore - home
• Ext - A foundation you can build on
• The Yahoo! User Interface Library (YUI)
• Adobe Labs - Spry framework for Ajax
• AJAX : The Official Microsoft ASP.NET Site

コミュニティ

オープンに活動しているJavaScritコミュニティは2つほど見つけることができました。

• Shibuya.js
  東京近郊のエンジニアが集まるコミュニティ
• JavaScriptコミュニティTOP | All About コミュニティ
  ネット上での情報交換のためのコミュニティ

話題

2009年2月時点で、Webブラウザの多くはECMAScript 3をベースにしたJavaScript1.5もしくはそれ以降のバージョンを搭載しています。そして次バージョンのJavaScript 2.0は、ECMAScript 4をベースにする予定でした。

• 第1回　IT技術を考える －ECMAScript －
• 大幅に機能を強化するECMAScript － ＠IT
• JavaScript 1.6-1.9はECMAScript 4へ至るコード名だって? | エンタープライズ | マイコミジャーナル
• JavaScript 2.0へ向け、ECMAScript Edition 4参照実装最新版 | エンタープライズ | マイコミジャーナル
• 小飼弾のアルファギークに逢いたい：#10　jQuery/Mozilla John Resig｜gihyo.jp ... 技術評論社
  Mozilla CorporationでJavaScript Evangelistを務めるJohn Resig氏への、2007年12月時点でのインタビュー

しかし2008年8月に、JavaScript 2.0はECMAScript 4ではなく、ECMAScript 3.1をベースにECMAScript 4の機能をいくつか取り入れることになる、という方針変更が行われました。そして、この新しい取り組みは「ECMAScript Harmony」というプロジェクト名で呼ぶことになりました。

• JavaScript 2.0はECMAScript 3.1ベースに、ECMAScript 4は譲歩 | エンタープライズ | マイコミジャーナル
• 次の JavaScript の仕様はこうなる！ ECMAScript 3.0 から 3.1 への変更点まとめ - IT戦記
• ECMAScript 3.1 - kawaguti's chronicle
• ECMAScript Harmony　（英語）
  ECMA Scriptについての声明
• ECMAScriptHarmony - ECMAScript Harmony
  上記の日本語訳

また、アドビシステムズ社は、同社のFlashでECMAScript 4をベースにしたActionScriptを実装しており、JavaScript 2.0がECMAScript 3.1ベースになったことでJavaScriptとActionScriptの互換性についての動向を気にする発言があります。

• ECMAScript Harmonyについての反応を読む - 渋谷でWeb開発が流行っているらしいが（仮）
• akihiro kamijo: ECMAScript Harmony/ES3.1 と ActionScript
• BeInteractive! [ECMAScript Harmony と ActionScript]

JavaScriptおすすめ書籍

JavaScriptに関するビデオ

スライド