Arantium Maestum

プログラミング、囲碁、読書の話題

Web

Reactで書かれた囲碁ボードをReagentで作ってみる(Core編)

前々回、前回からの続き。 あとは作ったViewsとLogicを組み合わせるだけなので非常に簡単。 まずは状態を管理するreagent atomをdefonceしておく。 (defonce game-state (r/atom (l/new-game-state 9))) defではなくdefonceなのは、defだとコードに変更を加…

Reactで書かれた囲碁ボードをReagentで作ってみる(Views編)

前回からの続き。 Reagentコンポーネントを定義するviews.cljsの説明。 まずは点の大きさを表すGRID_SIZEを定義し、盤上の「点」をコンポーネント化する。 (def GRID_SIZE 40) (defn BoardIntersection [[row col] color click-fn] (let [style {:top (* row…

Reactで書かれた囲碁ボードをReagentで作ってみる(Logic編)

こういう記事を発見した。 React beginner tutorial: implementing the board game Go | Chris LaRose, Software Developer JSとReactで簡単な囲碁のボードを作成する、というもの。コードとしても非常に簡単だったのでClojurescriptとReagentで書いてみた。…

Clojure Web Development勉強 - Devcards(その1)最低限の設定

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

Clojure Web Development勉強 - Garden(その3)lein-gardenとfigwheelでgarden/CSS自動コンパイル&ロード

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

Clojure Web Development勉強 - Garden(その2)lein-gardenでCSSをオートコンパイル

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

Clojure Web Development勉強 - Garden(その1)最低限の設定でCSSをコンパイルしてみる

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

Clojure Web Development勉強 - FigwheelでCSS Auto-Loading

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

Clojure Web Development勉強 - ReactチュートリアルをReagentでやってみる(その5)

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

Clojure Web Development勉強 - ReactチュートリアルをReagentでやってみる(その4)

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

Clojure Web Development勉強 - ReactチュートリアルをReagentでやってみる(その3)

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

Clojure Web Development勉強 - ReactチュートリアルをReagentでやってみる(その2)

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

Clojure Web Development勉強 - ReactチュートリアルをReagentでやってみる(その1)

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

Clojure Web Development勉強 - Reagent(その3)状態の管理

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

Clojure Web Development勉強 - Reagent(その2)Reagent Atom

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

Clojure Web Development勉強 - Reagent(その1)概要とHiccup構文

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

Clojure Web Development勉強 - Reactあれこれ

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

Clojure Web Development勉強 - ClojureScript(その4)figwheelの最小限設定

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

Clojure Web Development勉強 - ClojureScript(その3)cljsbuildオプションあれこれ

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

Clojure Web Development勉強 - ClojureScript(その2)cljsbuildでコンパイル

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

Clojure Web Development勉強 - Clojurescript(その1)cljs.jarでコンパイル

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

Clojure Web Development勉強 - Hiccup (その2) XSSの恐怖

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

Clojure Web Development勉強 - Hiccup (その1)

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

Clojure Web Development勉強 - Compojure (その2)

ちょっと前回の説明で書いていなかったことを補足。 Compojureで使ったdefroutesマクロとGETやnot-foundといった個別のルート作成マクロ・関数の引数と戻り値について。 まず、GETやnot-foundは普通に関数を返す。返された関数のシグネチャは当然「リクエス…

Clojure Web Development勉強 - Compojure (その1)

さて、Ringに続いてClojure Web Developmentでメジャーなライブラリ/フレームワークであるCompojureを使ってみる。 ちなみにここらへんも含めてCompojureに関しては@_ayato_pさんにいろいろご教授いただいた。あとウェブ開発の資料も大変参考にさせていただ…

Clojure Web Development勉強 - Ring (その5) ルーティング

というわけでついにルーティング。 そもそもルーティングとは? 今まではどのリンクを踏んでも同じコンテンツしか見えないという「お前htmlメモ帳に直打ちしてftpでアップロードしてた頃のサイトの方がよっぽど動的なんだけどどうなの?」と煽られてしまうよ…

Clojure Web Development勉強 - Ring (その4) モジュール化とGET/POST Form

次回はルーティングだと言ったな、あれは嘘だ。 その前に、まず今まで書いたコードを handler.clj (responseを実際に返す関数群) middleware.clj (handlerをラップしてログを取ったりする機能を実装する関数群) core.clj (それ以外。main関数っぽいのも…

Clojure Web Development勉強 - Ring (その3) ResponseとHandler

いろんなresponseの作成を助ける関数群のring.util.responseを少し使ってみる。 gist.github.com 前回handlerと読んでいた関数をplain-textと改名し、それに加えてhtmlを返すhtml関数、404を返すnot-found関数、そしてhttp://www.google.comにリダイレクトす…

Clojure Web Development勉強 - Ring (その2) コード詳解

とりあえず前回張ったコードの説明をしておく。 gist.github.com 「詳解も何もそのまんまだろうが(怒」と言われたら「その通りですハハーッ(平伏」と言うしかないのだが、まあ自分のアウトプット&備忘録を兼ねて。 まずproject.clj。超簡単。というかlein…

Clojure Web Development勉強 - Ring (その1)

Clojureで囲碁対局サイトを作ってみたい - Arantium Maestum でも書いた通り、中規模ウェブアプリ的なものを開発してみたい。そのためのライブラリについて、色々と覚書をメモっておく。 Clojureでウェブ開発する場合、サーバサイドの根幹はほぼ必ずringとい…