Webプログラミング言語（JavaScript処理系） · Asynchronous JavaScript and JavaScript/ASP Asynchronous JavaScript and XML →Ajax Ajaxのもじり→どう見ても後付です。本当にありがとうございます。

HTTP Meeting 2008 ～Webサービスの明日を見つけよう～ @ InternetWeek 2008

Webプログラミング言語（JavaScript処理系）Webプログラミング言語（JavaScript処理系）

サイボウズ・ラボ株式会社

竹迫良範

<[email protected]>


自己紹介自己紹介

氏名竹迫良範id:TAKESAKO（0x1F歳）

所属サイボウズ・ラボ株式会社Microsoft MVPアワード2008 - Developer Securityセキュリティ＆プログラミングキャンプ2008講師第29回 U-20プログラミングコンテスト審査委員Shibuya Perl Mongers ２代目リーダーオライリー Perlクックブック第２版監訳など


Webアプリケーションの開発環境Webアプリケーションの開発環境

Ruby

Perl

PHP

Python

サーバ側（Webサーバ）

クライアント側（ブラウザ）

Java

（昔）HTMLを動的に生成（いま）JavaScript 必須


（昔）HTMLを動的に生成JavaScript

自動生成

Web2.0・Ajaxブーム到来でカオスな状況にWeb2.0・Ajaxブーム到来でカオスな状況に

Ruby

Perl

PHP

Pythonサーバ側

（Webサーバ）


Java

prototype.js

RJS Template

GWT

J2S


本当のWebアプリケーション開発言語は？本当のWebアプリケーション開発言語は？

Ruby

Perl

PHP

Python

サーバ側（Webサーバ）


Java

JavaScriptでゴリゴリ書く

サーバ側も

JavaScript で

全部書く

言語大統一理論


コンピュータの進化とプログラミング言語コンピュータの進化とプログラミング言語

CPUのトレンドマルチコア化それを生かすプログラミング言語処理系の研究

高速化技術アウト・オブ・オーダー、投機的実行 …

スーパーパイプライン、スーパースカラー …

Lightweight Language の登場スクリプト言語でも高速に動作Perl, Ruby, Python, PHP, ActionScript …

JavaScript 高速化バトル勃発Chrome の v8 エンジンの公開（2008年）


各ブラウザの JavaScript エンジン各ブラウザの JavaScript エンジン

Internet ExplorerJScript

Chromev8

FirefoxSpiderMonkey

TraceMonkey

Tamarin

SafariWebKit

SquirrelFish

SFX (SquirrelFish Extreme)


JavaScript エンジンの速度比較JavaScript エンジンの速度比較

SunSpider benchmark の結果（Safari）

http://trac.webkit.org/wiki/Introducing%20SquirrelFish%20Extreme.ja


TraceMonkey: JavaScript LightspeedTraceMonkey: JavaScript Lightspeed

http://weblogs.mozillazine.org/roadmap/archives/2008/08/tracemonkey_javascript_lightsp.html

Brendan's Roadmap Updates


Safari vs. Firefox vs. ChromeSafari vs. Firefox vs. Chrome

http://www.satine.org/archives/2008/09/19/squirrelfish-extreme-fastest-javascript-engine-yet/

2. Mozilla's Dromaeo benchmark (Windows)

1. SunSpider benchmark (Mac OS X)


量質転化の法則量質転化の法則

量が質に転化するとき

量を積み重ねることで質的な変化が起こる瞬間

頭の良くない奴（プログラム）でも、量をこなせば質に転化することがある

コンピュータの処理速度が向上

賢い枝狩りアルゴリズム

昔はCPUの速度が遅く、メモリの量も少なかった

単純な総当りアルゴリズム

単位時間あたりに処理できる情報量が増えたため現在再注目されている


JavaScript = Web2.0時代のマシン語JavaScript = Web2.0時代のマシン語

Ajax, Web OS, Thin client…

mobile server

Server Side

Java, Perl, Ruby, C …

browser


Z80 エミュレーターZ80 エミュレーター

jsMSXThe first MSX emulator 100% written in Javascript

http://jsmsxdemo.googlepages.com/jsmsx.html

Console:

Booting jsMSX

Starting RAM slots

Starting VDP

Starting PSG (No Sound)

interrupt=0,ticks=59666 cpu ticks/interrupt,

cpu clock=3.58 MHz

MSX ready to go. Load ROMs and hit [start].


JSSpeccyJSSpeccy

ZX Spectrum emulator in Javascript

http://matt.west.co.tt/spectrum/jsspeccy/

ZX Spectrum

(3.50MHz Z80 / RAM 16KB)

http://jsspeccy.zxdemo.org/


SproutCodeSproutCode

RIA Webアプリケーション開発向け

100% JavaScript フレームワーク

MobileMe の開発で採用

http://www.sproutcore.com/


Cappuccino & Objective-JCappuccino & Objective-J

Cocoa likeCappuccino implements most of the familiar APIs from GNUstep and Apple's Cocoa frameworks.

Objective-JCappuccino was implemented using a new programming language called Objective-J, which is modelled after Objective-C and built entirely on top of JavaScript.

CappuccinoWhen you program in Cappuccino, you don't need to concern yourself with the complexities of traditional web technologies like HTML, CSS, or even the DOM. The unpleasantries of building complex cross browser applications are abstracted away for you.




言語VM↓

JavaScript


“orto”JavaVM on JavaScript

“orto”JavaVM on JavaScript

アクセラートジャパン

小林悠（yukoba）さん

アクセラートジャパン

小林悠（yukoba）さん



↑JavaScript + DHTML による JavaVMの実装

↓Java バイトコード (J2ME)




It works on iPhone!

<とおる。>: But I can't control because iphone has no keyboard;(


Logo on JavaScript (yukobaさん)Logo on JavaScript (yukobaさん)

http://accelart.jp/shibuyajs/logo/logo.html<script type="text/logo">手順は森の一部を描け :何回目 :長さ

もし :何回目 = :緻密さ [前へ :長さ止まれ

]森の一部を描け :何回目 + 1 :長さ * 0.6右へ 85森の一部を描け :何回目 + 1 :長さ / 3左へ 170森の一部を描け :何回目 + 1 :長さ / 3右へ 85森の一部を描け :何回目 + 1 :長さ * 0.35

終わり

手順は森を描け :緻密さペンを上げろ

位置は [ 270 -20 ] 左へ 90

ペンを下ろせ

森の一部を描け 0 550終わり

森を描け 5</script>


JsRuby（中谷さん）JsRuby（中谷さん）

JavaScript で実装した Ruby インタプリタ

http://labs.cybozu.co.jp/blog/nakatani/2008/01/_jsruby.html


HotRuby - Ruby on JavaScript and FlashHotRuby - Ruby on JavaScript and Flash

http://hotruby.yukoba.jp/


早速 AIR で Flash Player を作ってみた早速 AIR で Flash Player を作ってみた

yossyさん @ Shibuya.abc


Flash C Compiler (Scott Petersen@Adobe)Flash C Compiler (Scott Petersen@Adobe)

FlaCC is a research project that compiles C code to ActionScript using llvm-gcc with a custom flash code generator.

http://llvm.org/devmtg/2008-08/

DOOM on AIRdemo

DOOM on AIRdemo


第1回 LLVM 勉強会 (2008/08/23)第1回 LLVM 勉強会 (2008/08/23)

1. JIT のやりかた by syoyo

2. Partial evaluation のやりかた by syoyo

3. LLVM First Steps by nyaxt

4. An LLVM benchmark by shinh

5. オレ言語の LLVM フロントエンドコンパイラの作り方 by syoyo

(MUDA, rsl2llvm, py2llvm あたりの経験を元に)py2llvm

rsl2llvm

6. バイナリだけが出力じゃない by omo



Server Side↓

JavaScript


サーバサイド JavaScript の有名どころサーバサイド JavaScript の有名どころ

Microsoft IIS

ASP (Active Server Page)

VBScript / PerlScript / JScript …

LiveWare JavaScript から発展

Netscape Enterprise Server

iPlanet

Sun Java System Web server

BroadVision

One-To-One Enterprise

いろいろ



Ajaja とは？Ajaja とは？

サーバサイド JavaScript のオープンソース実装

IIS/ASP の記法がそのまま使えるように配慮過去の資産が継承できる

処理系

SpiderMonkey を採用（C言語）Mozilla Firefox での豊富な実績

CGI で提供

/usr/bin/asp_js コマンド

SQLite3標準サポート

use('SQLite');

db = new SQLite('sample.db');


Ajaja の名前の由来Ajaja の名前の由来

AjajaAsynchronous JavaScript and JavaScript/ASPAsynchronous JavaScript and XML → AjaxAjaxのもじり → どう見ても後付です。本当にありがとうございます。

最初の動機ブラウザ上で動く JavaScript と、ウェブサーバで動くJavaScript とを相互に通信させることで、JavaScriptのみによる Ajax なシステムを作れるようにしてみよう

開発者西田圭介さん（＋アルファギークな仲間達）OpenCOBOLの開発者、Gonzuiの共同開発者現在、某商用VPNソフトウェアを開発中

ライセンスMPL, GPL, LGPL のトリプルライセンス


Ajaja サンプルプログラムAjaja サンプルプログラム

hello.asp

<%@ Language=JavaScript %><%

var hello = "Hello world";%><html><head>

<title><%= hello %></title></head><body>

<h1><%= hello %></h1></body></html>


実行処理系のベンチマーク実行処理系のベンチマーク

JS は SpiderMonkey を DEBUG モードでビルドJS(OPT=1)は SpiderMonkey を BUILD_OPT=1 でビルド

CPU: Pentium 4 3GHz

OS: RHEL4 Update 3 (Linux 2.6.9-34)（秒）


[ソース]



PHP↓

JavaScript


JSmartyJSmarty

(PHP Template on JS)(PHP Template on JS)


bbs.tpl (JSmarty - Smarty互換)bbs.tpl (JSmarty - Smarty互換)

HTMLテンプレート（ソースから一部抜粋）

{foreach from=$rows item='row'}<dl><dt>[{$row[0]}] <strong style='color:green;'>{$row[1]}</strong> 投稿者：{$row[2]}投稿日：{$row[3]}</dt><dd><p>{$row[4]}</p></dd></dl><hr>{/foreach}


JSmarty - ブラウザと Ajaja の両方に対応JSmarty - ブラウザと Ajaja の両方に対応

Smarty

PHPの代表的なテンプレートエンジン

JSmarty

JavaScriptで動くテンプレートエンジン

Smartyクローン

できるだけSmarty互換（少し独自仕様あり）

利用するメソッドやプロパティととかは大体そのまま

Smartyのテンプレートがそのまま利用できる

プラグインとかも対応プラグインロードには JSAN.js 利用


サーバ／クライアントで .js を共有サーバ／クライアントで .js を共有

JavaScriptライブラリをサーバサイドでもprototype.js

jQueryどこでもJavaScriptライブラリ

（例）Validationロジックの共通化フォームの入力値のチェック数値、文字列の長さ

クライアント側のチェック → サーバ送信

DRYの原則（Don’t Repeat Yourself）Ruby on Rails の設計指針↑

サーバ・クライアント両方でソースを共有


Wiki.Formatter in JavaScript (kazuhoさん)Wiki.Formatter in JavaScript (kazuhoさん)

var formatter = new Wiki.Formatter();document.getElementById('wiki').innerHTML = formatter.format(srcText);

var formatter = new Wiki.Formatter({autoLink: false, // http:// 等の文字列をリンク化しないfoldLines: true, // 改行を <br /> に変換するnameToLink: function (name) { // WikiName => リンクへの変換

return 'http://example.com/wiki/' + name;},initHandlers: function () { // 記法定義をオーバーライド

this.initHandlers();// 順序なしリストのレベル 1‐3 として・を登録this.addTaggedStatement('・', '<li>', 'ul', 1);this.addTaggedStatement('・・', '<li>', 'ul', 2);this.addTaggedStatement('・・・', '<li>', 'ul', 3);// &fontweight(フォントの重さ) { ... } という記法を追加this.addExpression(

function (stack) {stack[1].out +=

'<span style="font‐weight: " + stack[0].params + ';">'+ stack[0].out+ '</span>';

},'&fontweight','¥}','&fontweight¥¥¥(¥¥¥s*¥¥¥d+¥¥¥s*)¥¥¥s*¥¥¥{');

}});


OpenJSAN


でも、最近

盛り上がってない… orz



Perl↓

JavaScript


PMconnectPMconnect

(JS + Perl CPAN)(JS + Perl CPAN)


pmconnect (樋口さん)pmconnect (樋口さん)

SpiderMonkeyとPerlのバインディング

/* GD グラフィックスライブラリ */Perl.Use("GD");var im = new Perl("GD::Image",100,100);var white = im.colorAllocate(255,255,255);var black = im.colorAllocate(0,0,0);var red = im.colorAllocate(255,0,0);var blue = im.colorAllocate(0,0,255);im.transparent(white);im.interlaced('true');im.rectangle(0,0,99,99,black);im.arc(50,50,95,75,0,360,blue);im.fill(50,50,red);var s = im.png();

Perl.Use("FileHandle");var fh = new Perl("FileHandle", "gdout.png", "w");fh.print(s);fh.close();


変数に $ をつけなくても

Perlのライブラリが使える！！


≠ JSAN


CPAN には使えるPerlライブラリがいっぱい存在

http://cpants.perl.org/graphs.html


pmconnect - samples


use("Perl");Perl.Use("XML::DOM");var parser = new Perl("XML::DOM::Parser");var doc = parser.parsefile("test.xml");var nodes = doc.getElementsByTagName("foo");var n = nodes.getLength();for (var i = 0; i < n; ++i) {var node = nodes.item(i);var txelm = node.getFirstChild();print(txelm.getNodeValue());

}print(doc);doc.dispose();

<?xml version="1.0" encoding="UTF‐8“standalone="no"?>

<data><foo>foo1</foo><bar>bar1</bar><foo>foo2</foo><bar>bar2</bar>

</data>

JavaScript から Perl の XML パーサーを使うJavaScript から Perl の XML パーサーを使う

$ jspl dom.js

test.xml


Ajajaの戦略Ajajaの戦略

新しいプログラミング言語は作らない

SpiderMonkeyを採用最も普及しているJavaScriptの処理系

IIS/ASPの記法をサポートVBプログラマ層の取り込み

JSmartyも使えるよPHPテンプレートエンジンSmartyのJavaScript実装

JavaScriptのライブラリは少ない

PMconnectPerlのライブラリをJavaScriptの構文で利用できる

既にある豊富なPerlのCPANモジュールを活用

OpenJSAN


Llv8call（tokuhiromさん）Llv8call（tokuhiromさん）



Documents

Webプログラミング言語 （JavaScript処理系） · Asynchronous JavaScript and JavaScript/ASP Asynchronous JavaScript and XML →Ajax Ajaxのもじり→どう見ても後付です。本当にありがとうございます。

Webプログラミング言語（JavaScript処理系） · Asynchronous JavaScript and JavaScript/ASP Asynchronous JavaScript and XML →Ajax Ajaxのもじり→どう見ても後付です。本当にありがとうございます。