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…

Sencha Touch の Model と Store の使い方メモ

Sencha Touch の Model を Store を使って、 Web API からデータを取得する方法をメモしておく。 まず、次のようなモデルを定義したとする。 Ext.define("App.model.Post", { extend: "Ext.data.Model", config: { fields: [ { name:"name", type:"string" }…

Bootstrap を使ってデザインしたアプリに Sidr でメニューを作成

Twitter Bootstrap はレスポンシブ Web デザインをサポートしているから、 小さい画面ではナビゲーションバーのメニューが隠れて、代わりにボタンが表示される。 このボタンをタップするとメニューがドロップダウン(?)表示されるんだけど、これ好みじゃない…

文字列を扱う便利メソッドが大量な『Underscore.string』

Backbone.js で Model や Collection や Router の URL を組み立てるのに、 C# でいうところの string.Format みたいなメソッドが欲しいけど、 今のところ Backbone.js にも Underscore.js にも無い。 その代わりといっては何だが、『Underscore.string』と…

Gmail スタイルのショートカ​ットを実装できる『M​ousetrap』

Web アプリにショートカットを実装したくて、ライブラリを探していたら、良いの見つけた。 『Mousetrap』。 ccampbell/mousetrap JavaScript でショートカットを実装するライブラリでは shortcuts.js が有名だけど、後発の Mousetrap は shortcuts.js と同等…

Rails で JavaScript を国際化する

はじめに Rails で JavaScript を国際化するには、『i18n-js』という gem を使う。 fnando/i18n-js 自分が作っている Web アプリでそこまでやる必要性は無いかもしれないけど、 国際化せずに直接 HTML や JavaScript のメッセージに日本語を書き込むのは、何…

AngularJS で Rails の CSRF トークン検証に引っか​かったときの対処法

Rails で AngularJS を使おうと、angular-rails や angularjs-rails といった gem を調べてみたけど、どれもイマイチだったんで vendor/assets/javascripts 下に AngularJS ファイル一式を放り込んで開発している。 AngularJS のデータバインディングを活用…

AngularJS でモデルとコントローラーをモジュール化する

先日 AngularJS のルーティング機能を試したけど、サンプルではモデルをコントローラーごとに作成していた。でも、プロダクトコードだとコントローラーやモデルは再利用しやすいように、AngularJS のモジュールにするはず。特にモデルは。そういうわけで、モ…

AngularJS のルーティング機能を試してみた

AngularJS を使って Single Page Application を作成するなら、おそらく避けて通れないのがルーティング機能。例えば一覧と編集でビューを切り替えたい場合、ルーティング機能を使ってコントローラーとテンプレートを切り替えて描画する、はず。先日作成した…

AngularJS で Web API を呼び出す

AngularJS で Web API を呼び出すのに使う $resource が、ドキュメントを読んだだけじゃイマイチ分からなかったんで、簡単なサンプルを書いてみた。まず、呼び出す対象の Web API は Sinatra でさくっと作成。 # coding: utf-8 require "sinatra" require "j…

AngularJS でコントローラーをネストする

AngularJS ではコントローラーを入れ子にして、ng-repeat で処理するコレクションの要素1つ1つに子コントローラーをバインドすることができる。例えば、よく見かける ToDo アプリのサンプルだとこんな感じ。 <html ng-app> <head> <meta charset="utf-8"> <title>Angular Sample</title> <style type="text/css"> .done-true { text-decora</style></meta></head></html>…

pkg からインストールした Node をアンインストールして nvm でインストールし直す

公式サイトからダウンロードできる pkg ファイルは簡単に Node をインストール出来ていいんだけど、残念なことにアンインストール手段が提供されていなかった…。手動で削除するしかないかと諦めて、何を削除すればいいのかネットで調べたところ、gist で削除…

jQuery Mobile + Backbone.js でルーティングに Backbone.Router を使う方法

自分が jQuery Mobile と Backbone.js を組み合わせて使うときって、jQuery Mobile のデザインやウィジェットが使いたいだけで、ルーティングは Backbone.js でやりたいのがほとんど。例えば List/Detail タイプのアプリを作っていて、URL に含まれている id…

試行錯誤の末にたどり着いた Backbone.Router の使い方

だいぶ前に書いた Backbone.js の入門記事で Backbone.Router を使ったサンプルを紹介した。 作って覚える Backbone.js (2) Router 編 - present Router が表示する View を切り替える良い方法が思いつかなかったので、サンプルではメイン View をグローバル…

jquery-mockjax を使って CRUD 処理をすべてテストする方法

jQuery.ajax の動作を差し替えられる jquery-mockjax プラグインは、自分にとって JavaScript での UI 開発に欠かせないプラグインになってしまった。何が気に入っているかっていうと、動的に、しかも簡単にレスポンスを変更できるところ。以前書いた jquery…

RequireJS と Backbone.js を組み合わせてモデルとビューをモジュール化してみる

はじめに Backbone.js を使って UI を実装しているけど、モデルやビューが増えてきた。1ファイルに収めるには多いんで、ファイルを分割して実装し、最終的には結合したい。そこで、RequireJS を使ってモデルやビューをモジュールにして、ファイルを分割しつ…

AngularJS で ToDo アプリのサンプルを書いてみた

Google 製の JavaScript MVC フレームワーク『AngularJS』で、簡単な ToDo アプリのサンプルを書いてみた。 <html ng-app> <head> <meta charset="utf-8"> <title>AngularTodo</title> <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> <script> // モデル function Todo(text, done) { this.id = Todo.getNextId(); …</meta></head></html>

Backbone.js で HTML5 Web SQL Database を使うための backbone-webdatabase を作ってみた

Backbone.Model の fetch や save はサーバーと通信するけど、データをサーバーではなくローカルにだけ保存したいときがある。例えば PhoneGap でスタンドアロンアプリを作るときとか。localStorage にアクセスするライブラリは、backbone-localstorage って…

PhoneGap でも使えるという HTML5 の Web SQL Database を試してみた

PhoneGap で何かスマートフォンアプリでも作ろうかなと思ってネットで調べてたけど、PhoneGap ってデータベースに HTML5 の Web SQL Database を使うのか。Titanium Mobile みたいに独自の API とかじゃないんだね。 Apache Cordova API Documentation Web S…

QUnit はオワコン!?Jasmine を使ってみる

はじめに JavaScript でテストするためのフレームワークは QUnit と Jasmine が人気を二分していたみたいですが、最近は Jasmine が優勢?雑誌やブログで Jasmine を推しているのをよく見かけました。中には「QUnit はオワコン。これからは Jasmine!」って…

Knockout.js にイベント機能を追加するプラグインを作ってみた

以前、「Knockout.js には Backbone.js みたいなルーティング機能が足りない」みたいなことを書きました。でも、Knockout.js はそもそもルーティング機能を本体で提供する気が無いようだし、Sammy.js や nav.js を併用すればいいかな、ってことで自己解決。……