javascript

redux-form で表形式入力的なフォーム

redux-form の FieldArray を使えば、 複数のデータを同時に編集して一括登録、 みたいなことができる。 表形式入力的なフォーム。 DataGrid もどき。 import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import { createStore, …

redux-form でも react-bootstrap のフォーム関連コンポーネントを使う

試行錯誤の末に、 react-bootstrap が提供する FormGroup や FormControl といったフォーム関連コンポーネントを、 redux-form と一緒に使うことができた。 import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import { createSt…

redux-form 慣れてきた

React でフォームを実装するためのライブラリは、決定版と呼べるものが見当たらないので、一番スターが多い redux-form を使っている。 github.com フォームの入力内容をストアに持つのはいかがなものかと思っていたのに、不思議と使っているうちに気になら…

Browserify から Webpack に移行した

ES2015 + React の開発環境を Browserify で構築していたけど、 近いうち CSS もバンドルすることになりそうなので、 Webpack に移行することにした。 ブログに手順をメモしておく。 新規にプロジェクトを作成するときも同じ手順でいけるはず。 npm で必要な…

理性捨てて props 全部渡していたら react-router でハマった

react-router で遷移先のコンポーネントに props を渡すには React.cloneElement を使う。 tnakamura.hatenablog.com このとき、理性捨てて this.props.children && React.cloneElement(this.props.children, this.props) という風に props をまるごと渡して…

React + Redux で Web API を呼び出す

React + Redux で SPA を作成するとき避けられないのが、 Web API の呼び出し。 というか、Web API を呼び出さないなんて、まず考えられない。 Web API の呼び出しでは、redux-thunk を使う。 github.com Redux のミドルウェアで、 Action Creator でオブジ…

React で使う HTTP クライアント候補として SuperAgent を試してみた

React と Redux には HTTP クライアントは含まれていない。 別途ライブラリを使う必要がある。 Web API を呼び出すためだけに jQuery を使うのはバカげているから、 専用のライブラリがいいね。 Browserify でビルドするから、npm にあるライブラリを使える…

React でも Bootstrap のコンポーネントを使う

React で SPA を実装する場合も、 デザインは Bootstrap のお世話になりたい。 クラスを指定するだけで使えるコンポーネントは普通に使えそうだけど、 Tooltip や Dropdown や Modal のような、 jQuery に依存したコンポーネントは React でそのまま使えない…

React + Redux でもルーティング

react-router でルーティングを試してみたけど、 実際のアプリは React + Redux で開発する予定。 その際、react-router のみではなく redux-router も一緒に使う。 redux-router は react-router の Redux バインディング。 ルーターの状態を Redux のスト…

react-router で遷移先のコンポーネントに props を渡す

ネストしたルートに遷移するとき、 遷移先のルートに対応するコンポーネントが、親コンポーネントの props.children にセットされている。 ここで props.children をそのまま表示せずに、 React.cloneElement で props.children を複製すると、 その際に pro…

react-router を使って React でルーティング

SPA を作る上で実装したいのがルーティング。React を使ったアプリでのルーティング実装には react-router を使う。 今回からインストールは npm で。 npm install --save react-router react-router を使って Master-Detail の簡単なサンプルを書いてみた。…

React 開発環境構築

React を使ってきちんと SPA を作るのに、毎回ブラウザ表示時にコンパイルしていては、さすがに効率悪い。 モダンなフロントエンド開発環境にしたいので、調べながら構築することにした。 react や react-dom などのライブラリは npm でインストール。 そう…

React コンポーネントは Redux に依存しないほうがいい

先日 Redux を試したとき 末端のコンポーネントからコンテナコンポーネントまでイベント(というかコールバック)を伝播して、 コンテナコンポーネントで dispatch を呼び出してみたけど、 これ末端のコンポーネントで dispatch 呼び出したらダメなんだろうか…

React Meets Redux

先日 React で作ったタスクリストのサンプルを、 React と Redux で書き直してみた。 <html> <head> <meta charset="utf-8" /> <title>Redux Sample</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></meta></head></html>

Hello React World

Single Page Application を Angular で実装しようと思っていたんだけど、 Angular2 でコンポーネント指向にガラリと変わるみたいなので、 Angular の採用は見送って React を選択。 同じコンポーネント指向なら React でいいかな、と。 React 入門ということ…

Rails Assets を使って Rails プロジェクトに AngularJS をインストール

Rails で AngularJS を使おうと思っていたけど、 ファイルをダウンロードして vendor/assets に直接配置するのは管理が面倒 AngularJS をラップした gem は AngularJS 本体がバージョンアップしたとき対応するまでタイムラグがある そもそも angular-gem や …

AngularJS で Underscore.js を使ってみた

AngularJS にユーティリティ関数あるにはあるけど、配列やオブジェクトを操作する関数が足りないので、 Underscore.js を使うことにした。 AngularJS らしく依存性注入したいから、Underscope.js を AngularJS モジュール化している。 <html ng-app="UnderscoreSample"> <head> <meta charset="utf-8"> <title>UnderscoreSample</title> </head> <body ng-controller="MainCtrl"></body></html>…

AngularJS のテンプレートを入れ子にしたかったから angular-ui-router を使ってみた

AngularJS でテンプレートを入れ子にしたかったけど、ng-view は入れ子にできない。 つまり AngularJS の機能だけでは困難。 おまけに ng-view は複数置いて、別々のテンプレートを表示することもできないときた。 そんな ng-view や ngRoute に置き換わるの…

angular-mocks でモックが返すデータを動的に決める

angular-mocks をスタブとして使ってフロントエンドを開発していて、 ずっと angular.module("sampleApp").run(["$httpBackend", function($httpBackend) { $httpBackend.whenGET("/users").respond([ { id: 1, name: "香川" }, { id: 2, name: "本田" }, { …

ng-templat​e でテンプレートを HTML に埋め込む

script タグの type に text/ng-template を指定したら、 AnguarJS が中のテキストを $templateCache にキャッシュしてくれる。 そして、ルーターでテンプレートの URL を指定するとき、 その script タグの id にすると $templateCache にキャッシュされて…

backbone.stickit を使って Backbone でデータバインディング

最近また AngularJS が盛り上がってる気がする。 AngularJS のデータバインディングは魅力的だけど、自分は Backbone 派。 でも Backbone でもデータバインディング使いたい。 そこで New York Times 製の Backbone プラグイン backbone.stickit を試してみ…

レーダーチャートを描画したかったので Chart.js を試してみた

レーダーチャートを表示したいんだけど、 これまで Rails で使ってきた lazy_high_chart はどうも対応していないっぽい。 最近、JavaScript ライブラリをラップした gem を使うことに抵抗が出てきたので、 lazy_high_chart を使うのはやめて、他のライブラリ…

Testem + Mocha + Chai で JavaScript のテスト

Rails アプリの JavaScript のテストは、 Konacha 使うのをやめて、Mocha を直接使っている。 Mocha は HTML サポートしているんで、 TestRunner.html 作ってブラウザで表示すればテストが実行され、 お手軽だ。 ただ、複数のブラウザでテストする場合、ブラ…

Grunt で Hogan.js のテンプレートをコンパイル

CoffeeScript と Sass のコンパイルを Grunt で行うようにしたら、 ついでに Hogan.js のテンプレートもコンパイルしたくなるのは仕方ないよね。 人として。 Grunt のタスクをインストール Grunt の contrib タスクには Hogan.js 用のタスクがあるので、npm …

Grunt で CoffeeScript と Sass をコンパイル

最近、Rails の CoffeeScript や Sass のコンパイルをアセットパイプラインではなく Grunt でやりたくなったんで、Grunt を試してみた。 まず Grunt をインストール。 npm install -g grunt-cli CoffeeScript と Sass をコンパイルするタスクは Grunt 公式の…

Rails で JavaScript テンプレートの Hogan.js を使う

はじめに JavaScript テンプレートには backbone-rails がデフォルトでサポートしている EJS を使っていたけど、 backbone-rails 使うのやめたから EJS をあえて使う理由が無くなった。 自分の観測範囲内だと、JavaScript テンプレートでは Hogan.js と Hand…

backbone-rails から Bower+Backbone.js に移行

はじめに Rails で Backbone.js を使ってアプリを開発するときは、決まって backbone-rails を使っていた。 codebrew/backbone-rails …んだけど、Backbone.js の v1.0.0 が出たというのに、backbone-rails は未だ対応してない(2013/07/02 現在)。 JavaScript…

Backbone の View をテストする

以前 Konacha を導入してから、 Rails アプリの JavaScript コードをテストできるようになった。 Evergreen を導入したばかりだけど Konacha に移行した JavaScript コードの大半は、Backbone を使って実装した UI なんだけど、 困ったことに View のテスト…

Backbone を使って実装したアプ​リのパフォーマンス改​善には Underscore​ の throttle と debounce が便利

ネタ元はこちら。 クライアントサイド JavaScript のパフォーマンス改善には backburner.js が便利! - tricknotesのぼうけんのしょ 自分の場合、Web アプリの UI を開発するときって、たいてい Backbone 使っている。 この Backbone が依存している Undersc…

Backbone.js と jQuery.mmenu を使ったスライドナビゲーション

Backbone でモバイル版の UI を作っていて、 Facebook や Gmail の iPhone アプリみたいな、 スライド表示されるメニューを実装したくなった。 そういったメニューを実装するための jQuery プラグインは既にいくつか存在していて、 Sidr - A jQuery plugin f…