JavaScriptの最近のブログ記事



SICPのP.12~ 1.1.7例:Newton法による平方根をJavaScriptで求めてみた。



見慣れた言語に書き直すと理解度が高まるから書き直して損はない。



JavaScriptで1.1.7例:Newton法による平方根を求める。



//schemeではif文だが、JavaScriptでは三項演算子を
var sqrt_iter = function(guess, x){
return (good_enough(guess, x)) ? guess : sqrt_iter(improve(guess, x), x);
};

var improve = function(guess, x){
return average(guess, x / guess);
};

var average = function(x, y){
return (x + y) / 2;
};

//JavaScriptでは戻り値をBoolean型として明示化
var good_enough = function(guess, x){
return (abs((square(guess)) - x) < 0.001) ? true : false;
};

var square = function(x){
return x * x;
};

var sqrt = function(x){
return sqrt_iter(1.0, x);
};

//絶対値を求めるabsプロシージャはMathオブジェクトのabsメソッドを利用
var abs = function(x){
return Math.abs(x);
};

//実行例
alert(sqrt(9)); //3.00009155413138
alert(sqrt(100 + 37)); //11.704699917758145

JavaScriptだと変数名、関数名に「?」と「-」が使えないので、


sqrt-iterはsqrt_iter。


good-enough?はgood-enoughに名称を変更。


P.14 問題1.7

SICPのP.14 問題1.7でgood-enoughを改良するのだけど、割愛。



Schemeで1.1.7例:Newton法による平方根


元のSchemeコード。



(define (sqrt-iter guess x)
(if (good-enough? guess x)
guess
(sqrt-iter (improve guess x)
x)))

(define (improve guess x)
(average guess (/ x guess)))

(define (average x y)
(/ (+ x y) 2))

(define (good-enough? guess x)
(< (abs (- (square guess) x)) 0.0001))

(define (square x)
(* x x))

(define (sqrt x)
(sqar-iter 1.0 x))

;;実行例
(display (sqrt 9)) ;;3.00009155413138
(display (sqrt (+ 100 37)) ;;11.704699917758145


参考


JavaScriptシェル

テストには、下記Javascriptシェルを利用しました。


構文のチェックをしてくれる便利な一品。師匠作。


Javascriptシェル


SICP Lite

SICP Liteコミュニティ。およそ隔週ごとに開催。前回は休んじゃった>_<


過去の議事録が揃っているので参考にしました。


SICP Lite



参考文献





JavaScriptでカリー化


私の第一言語であるJavaScriptでカリー化を試してみる。


JavaScriptはお師匠のJavascriptシェルで実行すると楽ちん。



例題はWikipediaのカリー化を参考にしよう。



関数 f がhttp://upload.wikimedia.org/math/9/3/6/936d3616ae1788839acf2cbb7228fad2.pngの形のとき、f をカリー化したものを g とすると、g はhttp://upload.wikimedia.org/math/8/6/7/8678d9a38b70c18ff730a4326baf87b9.pngの形を取る。非カリー化(uncurrying)とは、これの逆の変換である。


カリー化とは直感的には「引数を幾つか固定すると、残った引数の関数が得られる」ということである。たとえば、除算の関数http://upload.wikimedia.org/math/8/b/0/8b012fa4da01406236b0b0a5cb959a03.pngをカリー化したものを cdiv とし、inv = cdiv(1) とすると、inv は新しい関数となり、http://upload.wikimedia.org/math/d/2/0/d201da20452ac22a913f0debbcdd4dc4.png 、つまり引数の逆数を返す関数になる。


http://ja.wikipedia.org/wiki/%E3%82%AB%E3%83%AA%E3%83%BC%E5%8C%96

実際に書いてみた。

例題を実直にdiv関数を書くとこんな感じ。



var div = function(x,y){
return x / y;
};
alert(div(2, 1));//2

2つ目の例を落とし込むとこんな感じ。



var inv = function(x){
return function(y){
return x / y;
};
};

var cdiv = inv(10);//inv(10)のfunctionを変数cdivにbindする

alert(cdiv(1));//10
alert(cdiv(2));//5

var cdiv = inv(2);//inv(2)のfunctionを変数cdivにbindする
alert(cdiv(1));//2
alert(cdiv(2));//1

alert(inv(10)(2));//5
alert(inv(10)(5));//2


書いて分かったけど、高階関数の一種なのね。なるほど。


乗法してみた

もう少し書いてみる。次は乗法。



var multiplication_curry = function(x){
return function(y){
return x * y;
};
};

//実行例1
var first = multiplication_curry(1);
var second = multiplication_curry(2);
var third = multiplication_curry(3);
alert(first(second((third(4)))));//24
//first(second((third(4))))
//first(second((3 * 4)))
//first(second((12)))
//first(2 * 12)
//first(24)
//1 * 24
//24

//実行例2: 実行例1とは当然等価。
alert(multiplication_curry(1)(multiplication_curry(2)(multiplication_curry(3)(4))));//24
//multiplication_curry(1)(multiplication_curry(2)(3 * 4))
//multiplication_curry(1)(multiplication_curry(2)(12))
//multiplication_curry(1)(2 * 12))
//multiplication_curry(1)(24))
//1 * 24
//24

展開式も書いてみた。


JavaScriptでこの書き方好きだけど、他人のコードをリバースエンジニアリングするのは勘弁。



Pythonでカリー化


乗法を第2言語のPythonで書いてみる。



multiplication_curry = lambda x: lambda y: x * y

print(multiplication_curry(1)(multiplication_curry(2)(multiplication_curry(3)(4))))#24

lamda式を使う。return文がないので綺麗に書けた。


Gaucheでカリー化


ついでにGaucheでもカリー化。



(define (multiplication_curry x)
(lambda (y) (* x y)))

((multiplication_curry 1)
((multiplication_curry 2)
((multiplication_curry 3)
4)))
;;24

大体理解した。



別件の疑問


JavaScriptの関数定義の際、変数に無名関数を束縛する書き方と関数を定義する書き方どっちが主流なんだろう??


変数に無名関数を束縛する書き方例


var div = function(x,y){
return x / y;
};


関数の定義


function div(x,y){
return x / y;
}


個人的には前者の変数に無名関数を束縛する書き方なのだけれど...どっちが良いのだろうか...??




まとめ



  1. カリー化を実戦で使うところってどこだ?

  2. やっぱりプログラミング言語はファーストクラスオブジェクトじゃないと♪



参考


id:m-hiyamaさんのブログを読んでて興味を持ちました。


檜山正幸のキマイラ飼育記


例題はWikipediaからの引用です。


Wikipedia カリー化


実行とテストにはお師匠のJavascriptシェルを利用しました。


Javascriptシェル


イベントをIE、Firefoxで処理する際のメモ書き。

  • イベントオブジェクトの取得。
  • HTMLエレメントの取得。
  • 座標の取得。
var event = e || window.event; var element = event.srcElement || event.target; var xy1 = [event.clientX, event.clientY]; var xy2 = [event.screenX, event.screenY];



仕事でCanvas要素を使う機会があったので情報をまとめとく。



これはいい!と思ったのが、canvas要素に対してtoDataURL()メソッドを使うと、生データが取れる点。


あとはimg要素に流しこめば画像として複製出来るし。



現状、IEが対応してないので、ExplorerCanvasのJavaScriptを使って対応する。




参考


W3C The canvas element

W3CによるCanvas要素の仕様。


英語版しかないのと、チュートリアルが不十分。。


W3C HTML5 4.8.11 The canvas element


Canvas チュートリアル(Mozila Developer Center)

さすが、Mozila.org。


チュートリアルが日本語化までしっかりされてる。


Canvas チュートリアル



ExplorerCanvas

InternetExplorerでCanvasを利用可能にするJavaScript。


Google code explorercanvas


HTML5.JP Canvas

一般企業さんが運営されているサイトの情報の質が高い。


HTML5.JP Canvas



Apple Developer Connection Web Apps Dev Center

アカウント取る必要があるけど。


Apple Developer Connection Web Apps Dev Center



追記


なぜか、TwitterでHTML5watcherというbotにフォローされた..なぜだ?


http://twitter.com/HTML5watcher




JsonMLが使い勝手よいので、更に深堀り。


前回の記事。


JavaScript 最近使ったライブラリ


XMLをJSONにする。


JSONからHTML,XMLは前回紹介したのだけど,今度はHTML,XMLをJSONに変える。


といっても、コマンド実行です。


使うコマンドはxsktproc。macだと標準で入ってる。



$ xsltproc JsonML.xslt <対象のxmlファイル>

JsonML.xsl.xmlは、下記。


http://jsonml.org/JsonML.xslt


これで大量のHTMLをJSONに変換できる。


参考


IBM developerWorks Japan JsonML の紹介




JsonML


決められたJSON(JSONML=JSONマークアップ言語)からHTML要素を生成するライブラリ。


公式

JsonML.org


参考

IT戦記 JsonML を使う高速テンプレートエンジン「JsonML.Template」


IBM developerWorks Japan JsonML の紹介



具体例

JsonML.parseにJSONを食べさせるとElementが帰ってくるからappendChildかinnerHTMLする。


まずはJSONMLで定義。onclickとかも設定できる。



var BnfGrammar = [
"div",
{"id":"main"},
["div",
{"id":"header"},
"ヘッダーです。"
],
["div",
{"id":"body"},
["div",
{"id":"menu"},
["div",
{"class":"button1"},
{"onclick":function(){
alert("ボタン1です。");
}},
"ボタン1"
],
["div",
{"class":"button2"},
{"onclick":function(){
alert("ボタン2です。");
}},
"ボタン2"
]
]
],
["div",
{"id":"footer"},
"Copyright(C) 2009 hogehoge. All Rights Reserved."
]
];

次に定義したJSONMLをHTMLに変換。



var UI = JsonML.parse(BnfGrammar, function (elem) {
if (elem.className.indexOf("Remove-Me") >= 0) {
return null;
}

if (elem.tagName && elem.tagName.toLowerCase() === "a" &&
elem.className.indexOf("External-Link") >= 0) {
elem.onclick = function(evt) {
window.open(elem.href); return false;
};

} else if (elem.className.indexOf("Fancy-Widgit") >= 0) {
FancyWidgit.bindDOM(elem);
}
return elem;
});

document.body.appendChild(UI);

逆にXMLやXHTMLをJsonに出来るメソッドもある。


残念なのは、メソッド一覧などのドキュメントが不足してること。デモとソースを解析するしか手だてはなさそう。




java-jaという破滅集団から生まれた更なる破滅集団。


その名は...


java-ja.js


活動



他言語のハッカソンに参加してJavascriptしか書かない等の精力的な活動を行なっている。


http://java-ja.yoshiori.org/index.php?java-ja.js

Python温泉での噂は私も聴いた...さすが。


目標



最終的な目標はLinuxカーネルをjsで書く事 (進捗: 0/10,000,000行)


http://java-ja.yoshiori.org/index.php?java-ja.js

おお。楽しそう!


総括


という訳で、国内に活発なjavascriptコミュニティを知らなかっただけに嬉しいです。


これを機にJavaScripterな私は積極的に参加したいです。



そういえば、Rhino触る予定だったの放置してた...orz


参考


java-ja.js

http://java-ja.yoshiori.org/index.php?java-ja.js


java-ja

http://java-ja.yoshiori.org


Rhino

https://developer.mozilla.org/ja/Rhino




久々の更新です。


外部のJavaScriptを読み込む方法かつコードが綺麗なのは...


と考えていて自分なりに考えがまとまりました。


コード


scriptタグの生成をinnerHTMLで生成するかと考えたのですが、


innerHTMLはブラウザでは実装されているもののそもそも推奨されているものではないので、


代わりに、createElementで実直にいきました。



<script type="text/javascript">
var head = document.getElementsByTagName("head")[0];
script = document.createElement("script");
script.type = "text/javascript";
script.src = "<対象のJavaScriptファイル>";
head.appendChild(script);

もちろん、読み込む対象のJavaScriptファイルは安全なコードである事が使用の前提条件です(;^^


組み込んだあとは、FireFoxならばFirebug等で確認して下さい。確かにscriptタグが生成されているはずです。


今回のコードの欠点としては、body要素内に配置しないと、正常に動きません。



head要素やjsファイルとして別に分ける場合には、addEventListnerでonloadイベントに対し設定すると良いでしょう。


JavaScript関連で、とてつもなく興味深いことがらをメモ書きとして。

Rhino

JavaのJavaScript実装。Rhino。これいれれば、ツールとか簡単な処理もJavaScriptで作れるな。

サイコロ回転エフェクト

JavaベースのJavaScriptインタプリタ。[JavaScript] Animation.Cube - サイコロ回転エフェクト (rotating cube animation)

何かサービスに組み込めそうなのと、このロジックを知りたい。数式苦手><



Pythonには型宣言はありません。あると思ってたのは私の誤解です...。


Python中心の話題と、私が触った言語、興味がある言語に基づき話を進めて行きます。



JavaScript2.0以前の型宣言


JavaScript2.0以前は型宣言はない、動的型付け言語です。



JavaScript2.0の型宣言


JavaScript2.0からは型宣言が可能になる。数値型の場合こんな感じ。



var i:Integer = 100;



ちなみに、JavaScript2.0では定数はconstで宣言可能。


参考:http://www.mozilla-japan.org/js/language/js20/libraries/types.html:JavaScript2.0 型]


参考:http://d.hatena.ne.jp/amachang/20060520/1148064043:IT戦記 mozillaのjavascript2.0を書いてみた(自分用)]



ECMAScript4だと型宣言は数値型の場合こんな感じ。



var i:int = 100;




ecmascript4のインタプリタは下記公式サイトで配布されてるので触れてみるのみいいかも。


参考:http://www.ecmascript.org/index.php:ecmascript



ActionScript3.0の型宣言


調べてないけど、確かECMAScriptと同様だったかと。


(基本、JavaScript, ActionScript, ECMAScriptは親戚も親戚。兄弟や親子みたいな言語だからな...)



本題のPython2.6,Python3の型宣言


結論から言うと、Pythonには型宣言ない。動的片付け言語。


JavaScript2.0とかECMASCript4を調査した後に、


「あれ、Pythonって型宣言できるんだっけ?」と思い、google先生に問い合わせ。


問い合わせた結果、このid:nishiohirokazu氏ダイアリーに到達。


http://d.hatena.ne.jp/nishiohirokazu/20090213/1234475993:西尾泰和のはてなダイアリー [Python]型の宣言をしてコンストラクタでassert]



class Monster(object):


hitpoint = int


defense = int


attack = int


西尾泰和のはてなダイアリー [Python


でこのソースコードを見た時点で私の脳みその判断は...


「Pythonには型宣言がある」


(ちょっ!ソース読めよ!!)...ここが誤解箇所でした。



Pythonの組み込み型を調べる。


そんな誤解をした状態で、Pythonのドキュメント和訳を調べててやっと気づいた訳です...


http://www.python.jp/doc/release/lib/types.html:3. 組み込み型 ]



Pythonの哲学


下記の書籍の引用ですが、



初めてのPython 第3版 (大型本)



Pythonでは、言語の各要素の組み合わせ型に一貫性があり、組み合わせ型の種類もごく少なく抑えられています。



との記載があります。


これを私はPythonの哲学の一つであると認識しています。


この哲学を基に考えると、プログラマが任意で型宣言をできる仕組みをPythonが言語として設けるかというとそれはないとすぐ分かったのに~>_<



追:Javaの型宣言


Javaはむろん型宣言ばりばり、宣言型の静的型付け言語。


お恥ずかしながら数値型の宣言。



Integer i1 = 100;




追:Scheme(Gauche処理系)


型宣言はない。動的型付け言語。


この点がLispとの大きな違いではないかな...。


(型宣言については処理系によってまちまちな気がするけど。)


(あと、哲学がPythonと似てる気がする。)



追:Lisp(ANCI Common Lisp処理系)


型宣言あり。動的型付け言語。


(こちらもSchemeと同様、型宣言については処理系によってまちまちな気がするけど。)


参考:http://d.hatena.ne.jp/taka_2/20081010:プログラマとSEのあいだ [Book][Lisp]「Ansi Common Lisp」読了]



追:PHP5.3系


型宣言はありません。動的型付け言語です。


文字列連結時の.やビルドイン関数、ビルドイン関数名に違和感があり好きになれないけど、


使えるレンタルサーバーが多い点、Webに関するサーバーサイド言語としてシェアが高いのが...いや業務で使ってるからあまり言えない...


近年Javaっぽさがまし、クラス、デストラクタ、インストラクタなどが盛り込まれる。


PHPプログラマには是非下記を読んでほしい。


http://www.ibm.com/developerworks/jp/opensource/library/os-php-7oohabits/:IBM developerWorks Japan PHP でオブジェクト指向の設計をするための 7 つの良い習慣を身につける]



私について


今後も触れる限り他の言語、処理系を触ってみます。


有名どころでも、Ruby, C, C++, アセンブラ, Cobol, ...,触ってない言語がたくさん。


(業務でまずはPythonを実戦投入することが直近の目標。)



以下、全般の参考。


http://ja.wikipedia.org/wiki/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E8%A8%80%E8%AA%9E%E3%81%AE%E6%AF%94%E8%BC%83:WikiPedia プログラミング言語の比較]


あわせて読みたい

  • あわせて読みたいブログパーツ

Lingr java-ja

ウェブページ

Powered by Movable Type 4.1