なんとな~くしあわせ?の日記

「そしてそれゆえ、知識そのものが力である」 (Nam et ipsa scientia potestas est.) 〜 フランシス・ベーコン

Clojure小ネタ

Clojure小ネタ

Clojureのテストはrepl.itというサイトでWEB上で試せる
repl.it - Online REPL, Compiler & IDE

ハッシュマップの型

  • {:key "value"} のような形のハッシュマップは array-map と呼ばれるものだ
Clojure 1.8.0
Java HotSpot(TM) 64-Bit Server VM 1.8.0_91-b14
   (def m {:no "1" :name "山田" :tel "xxx-xxx-xxxx"})
=> #'user/m
   (println m)
{:no 1, :name 山田, :tel xxx-xxx-xxxx}
=> nil
   (println (type m))
clojure.lang.PersistentArrayMap
=> nil

マップの操作

  • キー/バリューの取り出し
    • keys, vals が使える
   (vals m)
=> ("1" "山田" "xxx-xxx-xxxx")
   (keys m)
=> (:no :name :tel)
  • 順序を変えた取り出し
(map (fn [key] (key m)) [:no :name :tel]) 
=> ("1" "山田" "xxx-xxx-xxxx")
   (map (fn [key] (key m)) [:tel :name :no]) 
=> ("xxx-xxx-xxxx" "山田" "1")
  • キーの削除
    • dissoc を使う
   (dissoc m :no)
=> {:name "山田", :tel "xxx-xxx-xxxx"}
  • 複数キーの削除
    • apply を使うとうまくいく
   (apply dissoc m [:no :name])
=> {:tel "xxx-xxx-xxxx"}

ClojureでJavaの無名クラス実装

nantonaku-shiawase.hatenablog.com

以前JavaApache POIでCellWalkContextの実装を作ったのだが、これをClojureでやる場合はproxyを使うのがよい。

Java実装

		CellWalk cw = new CellWalk(sheet, range);
		cw.traverse(new CellHandler() {
			@Override
			public void onCell(Cell c, CellWalkContext ctx) {
				c.setCellType(CellType.BLANK);
			}
		});

Clojure実装

    (.traverse cw (proxy [CellHandler] []
                    (onCell [^Cell c ^CellWalkContext ctx]
                      (.setCellType c CellType/BLANK)
                      )))

    ))

Clojureにはproxyとreifyというものがあるが、Javaのメソッドに実装を入れたオブジェクトを突っ込む場合はproxyで動いた。

What is the difference between proxy and reify?

Hanami + Vue.jsでTODOアプリを作った

REST APIで動くSPAを作ってみたかったので、TODOアプリ*1を作った。

まずはバックエンドとフロントエンドの分離を目指したかった。構成はこんな感じ:

  • バックエンド:Hanami
  • フロントエンド:Vue.js with webpack

vue-hanami-todo.herokuapp.com

f:id:panzer-jagdironscrap1:20180325230054p:plain

資料

やったこと

  • バックエンド:Hanami
    • 1.REST APIの作成(これは以前このブログでやりましたね)
  • フロントエンド:Vue.js with webpack
    • 2.Hanamiのassetsの仕組みを使わずに、assets-webpack-pluginで、javascriptをビルドして配信
    • 3.あとはVue.jsではじめるMVVM入門の記事のとおりにVueのコードを書いて、HanamiとAjaxでつなげます
    • 4.Ajaxにはaxiosというライブラリを使用しました、使いやすかったです

以下、もう少し詳しく

バックエンド:Hanami

1.REST APIの作成

以下の記事を参照
nantonaku-shiawase.hatenablog.com

フロントエンド:Vue.js with webpack

2.assets-webpack-pluginで、javascriptをビルドして配信

ほとんどHanamiでwebpackを使う方法 - Qiitaに書かれていることを実行したのみです。ざっくりとした流れ。

  • Hanamiのassetsの仕組みを無効化
  • yarnで依存するjavascriptのパッケージをインストール → package.jsonに依存関係が記録される
  • webpackを実行してjavascriptを単一ファイルで読み込めるようにする
  • それをassets-webpack-pluginで読み込む

これにより、Hanamiのアーキテクチャを利用しつつwebpackの恩恵を享受できるようです。yarnとwebpackはすばらです!何が素晴らしいかって、完全なパッケージ管理システムができていることです。

3.Vue.jsではじめるMVVM入門の記事のとおりにVueのコードを書いて

ここは順当にVue.jsのドキュメントを読んで実装しました。

  • 細かいHTML要素はプログラマーに対してうまく隠蔽されているので、やりやすいです。感銘を受けました。
    • 下記は「hidden要素がVue.jsで使えないのか?」という質問ですが、解答は「使う必要はない」なのです
    • 例えば、今までのアプリならWEBアプリからDBの1要素を削除する場合、HTMLにその1要素のキー値をhiddenなどで用意する必要がありましたが、Vue.jsを使えばそのようなものを用意する必要がなくなります。なぜならVue.jsが自分の中でid要素をオブジェクトとして持っているからです。

github.com

4.Ajaxにはaxiosというライブラリを使用しました

特に感想なし、ここはjQueryで書くのとそんなに変わんないかな?

*1:本棚アプリのような練習用アプリです