Skip to content

Latest commit

 

History

History
235 lines (178 loc) · 8.12 KB

tutorial-01.md

File metadata and controls

235 lines (178 loc) · 8.12 KB

Tutorial 1 - The basic

まず始めに、leiningen 2lein-cljsbuildというプラグインを使って、 CLJSの基本的なプロジェクトを作ってみよう。

Leiningenは、Clojureのためのビルド管理システムだ。lein-cljsbuildは ClojureScriptに特化したLeiningenのプラグインだ。

ClojureのProjectを作ろう!

まだ何もやっていないのなら、まずはleiningenをインストールしよう。そして 新しいプロジェクトを作ろう。名前はmodern-cljsだ。

lein new modern-cljs

お節介だけど、leinを環境変数として$PATHに入れることをお薦めしよう。

プロジェクトの構成をかえてみよう!

ClojureとClojureScriptをホストするためのディレクトリを作ろう。そして、 Leiningenが作ったsrc/modern_cljsのディレクトリを新しい構成のディレクトリに 反映させよう。

cd modern-cljs
mkdir -p src/{clj,cljs/modern_cljs}
mv src/modern_cljs/ src/clj/

NOTE 2: due to java difficulties in managing hyphen "-" (or other special characters) in package names, substitute an underscore for any hyphen in corresponding directory names.

プロジェクトに静的ファイルをおいておくためのディレクトリも作っておこう。 (例えば、htmlのページとか、JavaScriptとか、CSSとか、ね)

mkdir -p resources/public/{js,css}

最後に、下のようなディレクトリ構成になればいい。

├── LICENSE
├── README.md
├── doc
│   └── intro.md
├── project.clj
├── resources
│   └── public
│       ├── css
│       └── js
├── src
│   ├── clj
│   │   └── modern_cljs
│   │       └── core.clj
│   └── cljs
│       └── modern_cljs
└── test
    └── modern_cljs
        └── core_test.clj

12 directories, 6 files

project.cljを編集しよう!

でだ。project.cljを編集する必要が出てくる。というのも:

  • プロジェクトにあるsource-pathsのClojureのソースコードをアップデートするため。
  • lein-cljsbuildのプラグインをproject.cljの設定に追加するため。

Leiningenが作成したproject.cljがそこにあるはずだ。

(defproject modern-cljs "0.1.0-SNAPSHOT"
  :description "FIXME: write description"
  :url "http://example.com/FIXME"
  :license {:name "Eclipse Public License"
            :url "http://www.eclipse.org/legal/epl-v10.html"}
  :dependencies [[org.clojure/clojure "1.5.1"]])

そこにlein-cljsbuildのアップデートされたバージョンを置いて、:cljsbuild:source-pathsの設定をするんだ。

(defproject modern-cljs "0.1.0-SNAPSHOT"
  :description "FIXME: write description"
  :url "http://example.com/FIXME"
  :license {:name "Eclipse Public License"
            :url "http://www.eclipse.org/legal/epl-v10.html"}

  ;; CLJ source code path
  :source-paths ["src/clj"]
  :dependencies [[org.clojure/clojure "1.5.1"]]

  ;; lein-cljsbuild plugin to build a CLJS project
  :plugins [[lein-cljsbuild "0.3.3"]]

  ;; cljsbuild options configuration
  :cljsbuild {:builds
              [{;; CLJS source code path
                :source-paths ["src/cljs"]

                ;; Google Closure (CLS) options configuration
                :compiler {;; CLS generated JS script filename
                           :output-to "resources/public/js/modern.js"

                           ;; minimal JS optimization directive
                           :optimizations :whitespace

                           ;; generated JS code prettyfication
                           :pretty-print true}}]})

ClojureScriptのソースファイルを作ろう

project.cljを設定したあと、ClojureScriptのファイルを、src/cljs/modern_cljsディレクトリに 作ろう。下のようなファイルだ。

(ns modern-cljs.modern)

(.write js/document "Hello, ClojureScript!")

これをmodern.cljsというファイル名で保存しよう。

ノート3: ClojureScriptのソースコードは*.cljsであって、*.cljではないことに 注意しよう。

Htmlファイルも作ろう

シンプルなHtmlを作って、そこにproject.cljにあった:output-toキーワードの値である ポイントのscriptタグを入れよう。それをresources/public/ディレクトリの中に、 simple.htmlの中にセーブしよう。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Simple CLJS</title>
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
    <!-- pointing to cljsbuild generated js file -->
    <script src="js/modern.js"></script>
</body>
</html>

ClojureSciptをコンパイルしよう

ClojureからJavaScriptにするために、下のようにcljsbuildのサブタスクである onceを使おう。

lein cljsbuild once
Retrieving lein-cljsbuild/lein-cljsbuild/0.3.3/lein-cljsbuild-0.3.3.pom from clojars
Retrieving lein-cljsbuild/lein-cljsbuild/0.3.3/lein-cljsbuild-0.3.3.jar from clojars
Compiling ClojureScript.
WARNING: It appears your project does not contain a ClojureScript dependency. One will be provided for you by lein-cljsbuild, but it is strongly recommended that you add your own.  You can find a list of all ClojureScript releases here:
http://search.maven.org/#search|ga|1|g%3A%22org.clojure%22%20AND%20a%3A%22clojurescript%22
Retrieving cljsbuild/cljsbuild/0.3.3-SNAPSHOT/cljsbuild-0.3.3-20130913.125809-2.pom from clojars
Retrieving cljsbuild/cljsbuild/0.3.3-SNAPSHOT/cljsbuild-0.3.3-20130913.125809-2.jar from clojars
Compiling "resources/public/js/modern.js" from ["src/cljs"]...
Successfully compiled "resources/public/js/modern.js" in 7.131854 seconds.

見ての通り、WARNINGといっている。これは、cljsbuildプラグインは、ClojureScriptがどんなにリリース されていたとしても、project.cljファイルの:dependenciesの部分に、特定のClojureScriptを使うように 強く薦めているのだ。

というわけで、ClojureScriptを:depedenciesに入れることで、cljsbuildは幸せな気持ちになる!

(defproject modern-cljs "0.1.0-SNAPSHOT"
  ...
  :dependencies [[org.clojure/clojure "1.5.1"]
                 [org.clojure/clojurescript "0.0-1878"]]
  ...)

NOTE 4: we added the latest CLJS release (i.e. "0.0-1878") available at the time of this writing.

lein cljbuild clean コマンドは、以前の問題を綺麗にしてくれる そしてlein cljsbuild onceをもう一度たたいてみよう。

lein cljsbuild clean
Deleting files generated by lein-cljsbuild.
lein cljsbuild once
Compiling ClojureScript.
Retrieving org/clojure/clojurescript/0.0-1878/clojurescript-0.0-1878.pom from central
Retrieving org/clojure/clojurescript/0.0-1878/clojurescript-0.0-1878.jar from central
Compiling ClojureScript.
Compiling "resources/public/js/modern.js" from ["src/cljs"]...
Successfully compiled "resources/public/js/modern.js" in 6.894774 seconds.

simple.htmlを見てみよう

ブラウザを開いて、ローカルファイルのsimple.htmlを見てみよう。 全て上手くいっているなら、"Hello, ClojureScipt!"の文字が見えるだろう。

Hello ClojureScript

In the next tutorial we're introduce the so called brepl, a browser connected CLJS REPL.

License

Copyright © Mimmo Cosenza, 2012-2013. Released under the Eclipse Public License, the same as Clojure.