講演資料


講義資料スライドの表紙

講義資料スライドの表紙です。スライド画像、または下の要約文中の青いページ番号リンクをクリックすると、別のタブで無駄なノイズのない、純粋なPDFビューア画面が起動し、指定されたページへ直接ジャンプして快適に閲覧できます。

全体概要

本セミナーは「JavaScriptの進化」を軸に、2013年時点における最先端のWeb技術動向と、JavaScriptの言語的限界を乗り越えようとする二つのアプローチ（TypeScriptとDart）を深く掘り下げた講義です。

JavaScriptは1995年にNetScapeのブラウザ内言語として誕生しました。当初から「ホスト環境内言語」として設計されたこの言語は、特定の実行環境に依存するという根本的な制約を持ちながらも、jQueryによるAJAX革命を経て、2009年のNode.jsの登場によってサーバーサイドへと適用範囲を劇的に拡大させました [p.6], [p.33]。Node.jsの誕生は単なる「クライアントからサーバーへの拡張」ではなく、スレッドに依存しないイベントループと非同期I/Oという新しいプログラミングパラダイムの台頭を意味しており、その問題意識はRyan DahlがJSConf 2009で提示した「I/Oは違ったやり方で行われる必要がある」というテーゼに凝縮されています [p.35], [p.36]。

JavaScriptをめぐる新しい動向として、Chrome for AndroidのHTML5対応の進展、AngularJSに代表されるJavaScript MVCフレームワークの台頭、そしてWeb ComponentsとMDVというWebの構造そのものを変革しようとする動きが詳述されます [p.49], [p.64], [p.111]。特にAngularJSは「HTMLの語彙をアプリケーション開発のために拡張する」という思想に基づいており、宣言的なデータバインディングによってDOM操作を抽象化するアプローチが解説されます [p.68]。

後半では、JavaScriptが大規模開発においてスケールしないという根本的な問題意識に応えるべく設計された二つの言語が比較検討されます。MicrosoftのTypeScriptは「JavaScriptのスーパーセット」として静的型付けをオプションで追加し、既存のエコシステムと共存しながらツールサポートを強化するアプローチをとります [p.176]。一方、GoogleのDartはJavaScriptの構造的な問題を根本から解決するために「言語そのものを置き換える」という野心的な賭けを提示しており、両者のアプローチの違いがこのセミナーの核心的な対比をなしています [p.240]。

講義のロードマップ

■ Part I: JavaScriptの進化

  • この部の核心:

JavaScriptがブラウザ内の小さなスクリプト言語から、サーバーサイドをも含む汎用プラットフォームへと進化した歴史的経緯を追います。jQueryによる非同期・関数型スタイルの普及と、Node.jsによるホスト環境からの脱却という二つの飛躍が中心テーマです。さらに、Chrome for AndroidのHTML5対応状況、AngularJSのMVCパターン、Web ComponentsとMDVというWebの次世代標準が詳細に解説されます [p.5], [p.48]。

  • 論理展開:
  • JavaScriptは1995年に「ホスト環境内言語」として誕生し、ECMAScriptとして標準化された。プロトタイプベースの継承（Prototype-Based Inheritance）が初期から実装されていた [p.6], [p.13], [p.15]。
  • jQueryは91%という圧倒的な普及率を持ち、イベントドリブンな非同期コールバックスタイルでAJAXを実現。JavaScriptの関数型言語としての特質を全面的に活用した [p.24], [p.29]。
  • Ryan Dahlは2009年、「ApacheはスレッドベースだがNGINXはEventLoopを使う」という比較を示し、非同期・non-blockingなI/Oインフラとしてのnode.jsを提案した [p.37], [p.38], [p.44]。
  • AngularJSはHTMLの語彙をアプリ開発用に拡張し、$scope・$compile・$digestループを通じてModel-View間の双方向データバインディングを実現する [p.89], [p.93], [p.104]。
  • Web Componentは「Custom Elements」「Shadow DOM」「HTML Templates」「HTML Imports」「MDV」の5要素から構成され、polymer.jsがそのpolyfill実装として提供される [p.118], [p.133], [p.135]。

■ Part II-1: TypeScript

  • この部の核心:

TypeScriptは「JavaScriptのsyntactic sugar」であり、ECMAScript 5のスーパーセットとして設計されています。すべてのJavaScriptプログラムは有効なTypeScriptプログラムであるという後方互換性を保ちながら、オプショナルな静的型システム、クラス、モジュールを提供し、大規模アプリ開発のためのツールサポートを実現します [p.176]。

  • 論理展開:
  • 型システムの特徴: すべての型はAny型のサブタイプ。Primitive Types（number, boolean, string, void）とObject Types（class, interface, array, literal types）に分類される。型アノテーションはオプションで、型推論により最小限の記述でも静的チェックが効く [p.194], [p.195], [p.200]。
  • Structural Subtyping: 型の比較は構造的に行われる。クラスが明示的にインターフェースを実装宣言しなくても、構造が適合していれば型互換とみなされる [p.185], [p.186]。
  • モジュールシステム: 内部モジュール（namespaceとsingleton instance）と外部モジュール（CommonJSおよびAMD対応）の二種類をサポート。ECMAScript 6のmodule提案に準拠する方向 [p.220], [p.226]。
  • Ambient Declarations: `declare`キーワードで外部JavaScriptライブラリの型情報を宣言し、jQueryのような既存ライブラリとの型安全な統合が可能になる [p.180], [p.192]。

■ Part II-2: Dart

  • この部の核心:

DartはGoogleが「JavaScriptはスケールしない」という根本的な問題認識のもとに設計した新言語です。大規模プログラミングのサポート、高速な起動性能、予測可能な実行時パフォーマンスを設計目標に掲げ、JavaScriptへのトランスパイル（dart2js）とDart VMの両方での実行をサポートします [p.231], [p.238], [p.247]。

  • 論理展開:
  • 設計思想: 「structured yet flexible」を目標とし、オプショナル型付け、クラスベースの単一継承、ライブラリシステムを核とする。すべてのクラスはObjectを継承し、Every class implicitly defines an interfaceという設計によってinterfaceキーワードは廃止された [p.247], [p.256], [p.260]。
  • DOMの改善: 従来のJavaScript DOM APIをDartらしいコレクション操作に置き換え（例: `elem.attributes['name']` や `new DivElement()`）、イベント処理も`elem.on.click.add(...)`スタイルに刷新 [p.252], [p.254]。
  • dart:async（Future）: コールバック地獄を避けるため、PromiseパターンをFutureオブジェクトとして言語レベルでサポート。`.then()/.catchError()`チェーンと`Future.wait()`による複数非同期処理の待機が可能 [p.270], [p.272], [p.273]。
  • dart:isolate: 共有メモリスレッドを持たず、すべてのコードはIsolate内で実行。IsolateはSendPort/ReceivePortによるメッセージパッシングのみで通信し、安全な並行処理を実現する [p.274], [p.275], [p.276]。
  • polymer.dartへの展開: 2013年7月にDartチームとPolymerチームが協力してpolymer.dartを公開。observe、mdv、shadow_domなどのパッケージをPubに追加し、DartからWeb Componentsを利用可能にした [p.161], [p.162]。