Web
前々回、前回からの続き。 あとは作ったViewsとLogicを組み合わせるだけなので非常に簡単。 まずは状態を管理するreagent atomをdefonceしておく。 (defonce game-state (r/atom (l/new-game-state 9))) defではなくdefonceなのは、defだとコードに変更を加…
前回からの続き。 Reagentコンポーネントを定義するviews.cljsの説明。 まずは点の大きさを表すGRID_SIZEを定義し、盤上の「点」をコンポーネント化する。 (def GRID_SIZE 40) (defn BoardIntersection [[row col] color click-fn] (let [style {:top (* row…
こういう記事を発見した。 React beginner tutorial: implementing the board game Go | Chris LaRose, Software Developer JSとReactで簡単な囲碁のボードを作成する、というもの。コードとしても非常に簡単だったのでClojurescriptとReagentで書いてみた。…
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.…
なにやら五島勉のようなタイトルをつけて恐縮だが、Hiccupでも良く指摘される重大な問題として、自動的に文字列をエスケープしないことによるXSS脆弱性の導入がある。 クロスサイトスクリプティング - Wikipedia つまり、今まで紹介してきたコードにもあるよ…
今まで愚直にHTMLタグを文字列として書いてきたが、読むほうも辛かったと思うが書くほうはもっと辛かった。 まあ、ただこの時点では大して動的な機能もなく（唯一あったのはフォームから受け取った文字列を表示するくらい（ただしこれが「くらい」というには…
ちょっと前回の説明で書いていなかったことを補足。 Compojureで使ったdefroutesマクロとGETやnot-foundといった個別のルート作成マクロ・関数の引数と戻り値について。 まず、GETやnot-foundは普通に関数を返す。返された関数のシグネチャは当然「リクエス…
さて、Ringに続いてClojure Web Developmentでメジャーなライブラリ/フレームワークであるCompojureを使ってみる。 ちなみにここらへんも含めてCompojureに関しては@_ayato_pさんにいろいろご教授いただいた。あとウェブ開発の資料も大変参考にさせていただ…
というわけでついにルーティング。 そもそもルーティングとは？ 今まではどのリンクを踏んでも同じコンテンツしか見えないという「お前htmlメモ帳に直打ちしてftpでアップロードしてた頃のサイトの方がよっぽど動的なんだけどどうなの？」と煽られてしまうよ…
次回はルーティングだと言ったな、あれは嘘だ。 その前に、まず今まで書いたコードを handler.clj （responseを実際に返す関数群） middleware.clj （handlerをラップしてログを取ったりする機能を実装する関数群） core.clj （それ以外。main関数っぽいのも…
いろんなresponseの作成を助ける関数群のring.util.responseを少し使ってみる。 gist.github.com 前回handlerと読んでいた関数をplain-textと改名し、それに加えてhtmlを返すhtml関数、404を返すnot-found関数、そしてhttp://www.google.comにリダイレクトす…
とりあえず前回張ったコードの説明をしておく。 gist.github.com 「詳解も何もそのまんまだろうが（怒」と言われたら「その通りですハハーッ（平伏」と言うしかないのだが、まあ自分のアウトプット＆備忘録を兼ねて。 まずproject.clj。超簡単。というかlein…
Clojureで囲碁対局サイトを作ってみたい - Arantium Maestum でも書いた通り、中規模ウェブアプリ的なものを開発してみたい。そのためのライブラリについて、色々と覚書をメモっておく。 Clojureでウェブ開発する場合、サーバサイドの根幹はほぼ必ずringとい…
