ひなたねこ: 4月 2012

ハードル高いと言われてしまったので。

Leiningenの導入

まずはbuild toolの導入です。
https://github.com/technomancy/leiningen
からスクリプトをダウンロードしましょう。

Linux

Installationの"Download the script"

Windows

Installationの"the batch file"

ダウンロードしたスクリプトはleinと名前を付けて、PATHの通ったところまたはダウンロードした場所にPATHを通しましょう。

ターミナルを立ち上げて

lein self-install

が実行出来ればleiningenの導入は完了です。

Projectの作成

ターミナルで

lein new cljstest

と打ちましょう。
cljstestというプロジェクトが作られます。

作られたプロジェクトのディレクトリには、project.cljが存在します。
これを以下のように書き換えて下さい。

	(defproject cljstest "1.0.0-SNAPSHOT"
	:dependencies [[org.clojure/clojure "1.4.0"]]
	:plugins [[lein-cljsbuild "0.1.8"]]
	:cljsbuild {
	:builds [{
	:source-path "src"
	:compiler {
	:output-to "main.js"
	:optimizations :whitespace
	:pretty-print true}}]})

view raw project.clj hosted with ❤ by GitHub

詳しい設定の仕方は
https://github.com/emezeske/lein-cljsbuild

編集ができたら


lein deps
lein cljsbuild auto

を実行して下さい。

core.cljsの編集

cljstest/src/cljstestに存在するcore.cljをcore.cljsにリネームし、以下のように編集します。

	(ns cljstest.core)

	(.alert js/window "Hello")

view raw core.clj hosted with ❤ by GitHub

ファイルを保存すると自動でコンパイルされ、 cljstestにmain.jsが作成されます。
以下のようなhtmlファイルをcljstestに作り、実行してみましょう。

	<html>
	<head>
	<title>cljstest</title>
	</head>
	<body>
	<script type="text/javascript" src="main.js"></script>
	</body>
	</html>

view raw test.html hosted with ❤ by GitHub

アラートが出れば完成です。

最近うぇっぶの勉強が足りないと思い、なんか書いてます。
せっかくだから新しいものに手を出していこうと思い、いろいろと挑戦しています。
使っている言語、ライブラリは

Scala

Unfiltered
Scalate

Jade
CoffeeScript
SASS

JavaFX

ClojureScript

Closure Library

Jython

Pygments

などなど。
便利なライブラリに驚きつつも、覚えなければいけないことが多くてなかなか大変です。
この中でも特に嵌ったものがClojureScript(Closure Library)。
情報が少ないので調べるのにも結構苦労します。
ClojureScript自体はとてもいいものなので、普及のため/覚え書きに基本的なことを書いていきます。

ClojureScript

ClojureScriptはGoogle Closure Libraryに依存しています！（重要）
なので、ClojureとClosure Libraryの両方を使えるようにならなければなりません！
学習コスト高いですね。しかし、言語的に強力なClojureと強大なライブラリ群のClosure Libraryが合わさっているので最強の環境だと思うのですよ！
なので皆さん是非使って私に教えて下さい。

開発環境

ClojureのデファクトなビルドツールとしてLeiningenがあります。
そして、ClojureScriptをビルドするpluginとしてlein-cljsbuildが存在します。
これなしには開発できないレベルで便利です。

lein cljsbuild auto

とやっておくだけで信じられない速度でcompileしてくれます。
是非使いましょう。

emacsを使っている人は、clojurescript-modeというものもあるので入れておくと便利だと思います。

cljs

では、実際のコードをみてポイントを書いていきたいと思います。

	(ns onedit
	(:require [goog.dom :as dom]
	[goog.events :as events]
	[goog.debug.Logger :as logger]
	[goog.debug.Console :as console]))

	(def logger (logger/getLogger "onedit"))

	(console/autoInstall)

	(def reader
	(let [reader (goog.global.FileReader.)]
	(set! reader.onload (fn [e]
	(.info logger e.target.result)
	(dom/setTextContent (dom/getElement "buffer") e.target.result)))
	reader))

	(defn load [file]
	(.readAsText reader file))

	(events/listen (dom/getElement "open") goog.events.EventType.CLICK #(.click (dom/getElement "file")))

	(events/listen (dom/getElement "file") goog.events.EventType.CHANGE (fn [e] (load (aget e.target.files 0))))

view raw gistfile1.clj hosted with ❤ by GitHub

ns

nsはClosure Libraryのprovideの役割を果たします。
(ns hoge)で定義された(def geso)は外部からhoge.gesoでアクセス出来ます。

:require

嵌ります。
:asが必須です。
あとUpperCamelだからといってクラス名と勘違いしないで下さい。
あくまでこれはClojureScriptなのです。
このrequireはClosure Libraryのrequireです。
注意して下さい。
:asで付けたaliasはstatic methodチックに呼び出せます。

参照

Clojureでは書き換え可能な参照を作るのにrefやatomを使いますが、これはJavaScriptなのでそんなことをせずにset!で直接varを書き換えることができます。
あとrefを使ってもSTMが使えるわけではないです。

goog.global

windowやdocumentなどのオブジェクトにアクセスしたい時はgoog.globalを使いましょう。
JavaScript Objectのインスタンスを作りたい時もこれを使うことになると思います。

※追記
goog.globalを使わなくてもjs/Stringのようにglobal objectを参照できました。

総括

とりあえずこんなところかな？
もっとたくさん苦労したところがあった気がする・・・・・
まあ、随時記事を書いていこうと思います。

私はClojure自体は慣れていたのですが、JavaScriptは初心者レベルだしClosure Libraryは触ったことがないしでとても大変でした。
ClojureScriptを書くとしてもJavaScriptがゆるふわなところには振り回されると思うので覚悟しておいて下さい。

ひなたねこ

2012年4月21日土曜日

ClojureScriptの導入

Leiningenの導入

Projectの作成

core.cljsの編集

2012年4月16日月曜日

ClojureScript

ClojureScript

開発環境

cljs

ns

:require

参照

goog.global

総括

ブログアーカイブ

ラベル