CSSをいじりたおす根気がなかった・・・ ということで話題を変えてFigwheelの作者でもあるBruce Haumanが作ったツールであるDevcardsについて書く。 Devcardsとは DevcardsはClojureScript+Reactで作ったコンポーネントの動作を試すための環境を提供するツー…

前々々回のfigwheelによるCSS自動ロードと前回のlein-gardenによるgarden→CSS自動コンパイルを合わせると、gardenデータ構造をcljファイルに記述・変更すると即時にブラウザで表示が更新されるような環境が出来上がる。 project.clj leiningen及びlein-garde…

前回紹介したワークフローだとCSSをednで定義できるのはいいが、二つほど問題があった。 変更の度にいちいちlein runでCSSをコンパイルする必要がある -main関数をCSSコンパイルのために使っていた lein-gardenはこの二つの問題を同時に解決する、gardenコン…

前回に続いてCSSの話。 Reagent/Hiccupを使ってHTML/DOMをedn形式で定義しているのだから、できればCSSも同じくednで定義したい！という末期症状な人間のために、gardenというライブラリが存在している。 github.com Hiccupと同じように、Clojureのデータ構…

Single Page Applicationで複雑かつ洗練されたGUIを実装するためには、一般的にHTMLで定義されている文書のコンテンツだけではなく、CSSで定義されているスタイルをどうコントロールするかも非常に重要なポイントになる。 JavaScriptで直接DOMにコンポーネン…

ReactチュートリアルのShowing the Movesから最後のImplementing Time Travelまで。 Showing the Moves https://facebook.github.io/react/tutorial/tutorial.html#showing-the-moves 前回作成したhistoryデータを使って過去の動きを表示するようにする。 Ja…

最後までやるつもりだったのだが、長くなったので今回はStoring a Historyだけ。 https://facebook.github.io/react/tutorial/tutorial.html#storing-a-history これまでReactチュートリアルでは、まずSquareを状態を持ったコンポーネントとして実装し、その…

公式チュートリアルのFunctional ComponentsからDeclaring a Winnerまで。 Functional Components 前回散々JavaScript版が明示的じゃない、ボイラープレートが多いと煽っていたが、実際にはJSでも純粋関数的に書くとより簡潔になる： function Square(props)…

React公式チュートリアルを進める。今回はPassing Data Through PropsからLifting State Upまで。 Passing Data Through Props https://facebook.github.io/react/tutorial/tutorial.html#passing-data-through-props 親コンポーネント（つまり呼び出し側の…

Reactの公式ページに基本概念などの説明のためのチュートリアルがある： facebook.github.io これをClojureScript/Reagentでやっていきたい。 最終的な成果物は簡単な○×ゲーム。 HTMLやCSS、そしてReact Componentの大枠はすでに出来上がっていて、チュート…

Reagentでは、Hiccup構文を使ったコンポーネント関数とReagent Atomを使って、複雑な状態を持つクライアントサイド・アプリケーションを作成できる。 前回の例ではコードをなるべく単純に留めるために、トップレベルでReagent Atomを定義し、各コンポーネン…

さて、Reagentの二大要素の二つ目であるReagent Atomについて。 Reagentでは、コンポーネントの可変な状態を保持するために特殊なAtomを用意している。 と言っても概念・機能は通常のClojureのAtomとほとんど同じで、Immutableなデータ構造へのポインタのよ…

ReactのClojureScript WrapperであるReagentライブラリについて。 前回書いたとおり、ClojureScriptには有名なReact Wrapperが三つある。Om/Om-Next、Quiescent、そしてこのReagentである。 最初の二つの特徴を非常にざっくりと要約するなら： Om/Om-Nextは…

Facebookが提供するJavaScriptライブラリであるReactについていろいろと書こうと思う。 まず、私自身がReactについて調べていた時に大変参考になった記事を三つ挙げる： qiita.com mizchi.hatenablog.com qiita.com 本記事と前後してこれらも読めば、Reactに…

Figwheelは素晴らしい。FigwheelはClojureScriptを使うことで得る大きな喜びの一つだ。 と過剰に思われる売り込みで始める。しかし、個人的には全く誇張している意識はない。 Figwheelはwebsocketを使って、ソースファイルの変更を自動的にブラウザに反映さ…

cljsbuildには様々なオプションがある。なんでこんなにあるの？と言いたくなるくらいある。 個人的に使いそうだなぁと思うものを抜粋すると： :cljsbuild { :builds { :main { :source-paths ["src-cljs"] :compiler { :optimizations :whitespace :output-t…

Clojureビルドツールあれこれ Clojureビルドツール界隈ではleiningenが圧倒的シェアを誇っておりそこにbootが食らいついている、というような状況になっている。 私はbootは使ったことはないが、leiningenにはいつも非常にお世話になっている。project.cljに…

一旦サーバサイドを離れて、フロントエンドの開発を進めてみる。 フロントエンドについては以前から少し試していて、拙いながらも渋谷のLisp.Meetupでもライブコーディングしながらプレゼンしたことがある。その時はClojurescriptからFigwheel、Reagent、d3.…

昨日のコードを2点修正： 前回は独立変数を一つだけ用意したが、今回は二つ。さらに、今後独立変数の数の増減はX値と母数のθ値だけアップデートすれば、他のコードは変更なしで機能するようリファクタした。 core.matrixの実装を、標準実装のndarray、vector…

まあ何も言わずこのGorilla-replのOnline Viewerを見てくれ。 Gorilla REPL viewer コードの常であるが、「どうやって正しく計算するか」よりも「どうやって正しく読み手にコードの意図を伝えるか」が最も難しかった。 一番腐心したところの割には、正直あま…

前置き Clojure Advent Calendarで機械学習ネタで記事を書くことを宣言してしまった。どうしよう。 C++、Python、Matlab\Octaveあたりではちょこちょこと（業務も含めて）機械学習はやったことがあるが、Clojureでは「JVMだし数値計算はしたくないよねー」と…

なにやら五島勉のようなタイトルをつけて恐縮だが、Hiccupでも良く指摘される重大な問題として、自動的に文字列をエスケープしないことによるXSS脆弱性の導入がある。 クロスサイトスクリプティング - Wikipedia つまり、今まで紹介してきたコードにもあるよ…

今まで愚直にHTMLタグを文字列として書いてきたが、読むほうも辛かったと思うが書くほうはもっと辛かった。 まあ、ただこの時点では大して動的な機能もなく（唯一あったのはフォームから受け取った文字列を表示するくらい（ただしこれが「くらい」というには…