JsDOM+React TestUtilsの使い方を改良

TestUtilsにはいろいろ便利なメソッドがあるのを見つけてテストの書き方を変えたら、UserAgentが設定されていないということでエラーが出るようになってしまいました。かといって直接にnavigator.userAgentを設定しようにもGetterしかないと弾かれてしまいま…

素のnodeでES6の多くが動く

ECMAScript 2015 (ES6) | Node.js 今、BabelでES6とJSXをトランスパイルしてますが、そのBabelを起動するGulp(gulpfile.js)についてはES5で書いてました。しかしすでにnode v5.xではV8エンジンの対応状況が進んできているためにES6の仕様の多くが動いちゃ…

Reactコンポーネント内からkeyが取れない仕様だった

http://facebook.github.io/react/blog/2014/10/16/react-v0.12-rc1.html#breaking-change-key-and-ref-removed-from-this.props すでに0.12での仕様変更でしたから、私がReactに触れてからはずっとそうなってたのですが、自分で書いたコードの謎バグに悩ま…

gulp-jasmineでES6で書いたReactコンポーネントとReactステートレスコンポネントさらにはExpressルーターを同時にテストできるようにする

一通りハマって模索した結果、それぞれしっかり原因判明やりきって解決するまでの質ではないのですが、ES6 で書いたReactコンポーネントとステートレスコンポーネントをテストするとともに、ES6で書いたExpressルーターもまとめてテストできるプロジェクト設…

react-router v2リリース

しばらくrc版を用いて開発していましたが、react-router v2が昨日か一昨日ぐらいにリリースされていました。ドキュメントも新しくv2になってます。 react-router/ComponentLifecycle.md at latest · rackt/react-router · GitHub いつからあったかは定かでは…

TestUtilsが関数コンポーネントダメだって

'use strict'; /*global jest*/ jest.dontMock('../BootstrapResponsive'); const React = require('react'); const ReactDOM = require('react-dom'); const TestUtils = require('react-addons-test-utils'); import {ResponsiveCol} from '../BootstrapRe…

BootstrapのGridをReactに持ってきてみた。

material-uiを気にいって、それでReactアプリ書いてます。発展途上ではあるも開発者の方々がこまめにがっつり頑張ってくれてて、日々npm updateをかけるのが楽しみです。そんなmaterial-uiも今の所はGridレイアウトのコンポーネントはありません。Google謹製…

ReactのES6-classでのコンテキスト

class PutContext extends React.Component { getChildContext() { return {color: '#03a9f4'}; } render() { return <div>{this.props.children}</div>; } } // childContextTypesはpropTypesと同じスタイルの設定 PutContext.childContextTypes = {color: React.PropT…

WebStormでESLintを使う

数日、バタバタと調査しては考えが変わる毎日ですが、ES6-classでReactアプリを書く前提が整ってきました。 classボディ外に、propTypes/contextTypes/childContextTypesを書くのも、そういうものと思えばまあいいか MixinはAOP的なラッパーコンポーネントを…

Reactコンポーネント名の規則

つまらないハマりがあったので。 const foo = React.createClass({ render() { return <div>Foo</div>; } }); console.log("JSX:" + ReactDOMServer.renderToStaticMarkup(<foo/>)); console.log("API:" + ReactDOMServer.renderToStaticMarkup(React.createElement(foo))); </foo/>…

ReactのES6-classが所詮糖衣構文しかも甘くない

(承前:昨日の追記) react-mixin(https://github.com/brigand/react-mixin)でES6のclass構文を試してみました。書いてから気がついたのは、短時間で試したぐらいの中ではちょっとコード書き直すだけでどんどん筋が悪い体裁になっていくので、時期尚早とい…

関数型的なJS

JavaScriptで学ぶ関数型プログラミング作者: Michael Fogus,和田祐一郎出版社/メーカー: オライリージャパン発売日: 2014/01/18メディア: 単行本(ソフトカバー)この商品を含むブログ (5件) を見る ECMAScript6まじりのJavaScriptに手が馴染んできました。R…

MongooseでのCRUDと謎挙動

const Mongoose = require("mongoose"); const Schema = Mongoose.Schema; Mongoose.connect("mongodb://localhost:27017/sample"); const Person = Mongoose.model("person", // <-この"person"が後で問題になる new Schema({ created: {type: Date, defaul…

material-uiのi18n対策のひとつ

Material Designを実現するReactコンポーネントセットであるmaterial-uiは有用な上で、ソースを読んでも大変参考になるものが多くあります。中でもDatePickerのコードはReactでの動作エフェクトの作り方の他、コンポーネントを組み合わせてコンポーネントを…

Reactコンポーネントをファイル分割したら沈黙してしまった件

Reactで大きな画面を作るうちに、人の習性としてReactコンポーネントをファイル分割したくなります。 var React = require('react'); var Item = React.createClass({ render: function () { return <li value={this.props.value}>{this.props.text}</li>; } }); var List = React.createClass(…

document.querySelector

Reactコンポーネントをページに適用する際に、たったこれだけのためにjQueryを入れたくもなかったので、document.getElementByClassNameや〜Idでエレメント取得していましたが、単純名だけかい!という課題に私が知らなかっただけですでに高度な回答がありま…

PassportによるFacebook認証(続いてDBへ保存)

Passportでの認証を実践的に進めてみます。認証情報を永続化するのにMongo DBを利用します。はじめだけMongo DBのJSドライバをそのまま使って書いてましたが、コードブロックをtry-finallyで囲って最後にDB接続を解放するような書き方など2000年ぐらいにJava…

x-powered-byを消す

悪意ある攻撃への対策として、Responseのヘッダから'x-powered-by'を削ると良いという。 Expressでは何もしなければ、サーバ実装を示すこのヘッダ値に'Express'と正直に返してしまいます。そうなると悪い人が「そうかNodeでExpress使ってるのね」とすぐわか…

PassportによるFacebook認証(第一歩)

var Passport = require('passport'); var Facebook = require('passport-facebook'); // Facebook Strategyの設定を'fb'で登録。省略すると'facebook'で設定される Passport.use('fb', new Facebook.Strategy({ clientID: '1513567018936647', clientSecret…

オレオレHTTPSサーバを立てる

実際には証明書を買うとしても、開発時にはオレオレ証明書。 $ openssl req -nodes -x509 -newkey rsa:2048 -keyout key.pem -out cert.pem -days 90 Generating a 2048 bit RSA private key ...........................+++ .........................+++ w…

SuperAgentとMulterでファイルアップロード

ファイルアップロードの機能を作るのに、二日ハマりました。前提としてReactで作ったFormから投げ、Express4で書いたサーバで受けるというところでの通信部分だけです。まずガチなところとしてサーバを作ります。 var express = require('express'); var mul…

ReactでinputのonChangeが効かなくて焦った話など

Reactでちょこちょこ書いていて、嵌ったところをメモ。ちなみにECMAScript6は、ExpressもReactもあまりメリットない割に、参考資料が少なくてどう書いていいのか悩む時もあるのでやめた。Babelでreact-presetだけ使ってます。 inputのonChangeが効かなくなっ…

Node.js 5.0へ

5.0!ほんの一年ぐらい前は0.10とか0.11とか名乗ってたのになあ。 www.publickey1.jp 運用モードでも全くないので、バシッと最新にしちゃいます。これまではnodejs.orgから落としてきたインストーラを使ったので「n」を入れて、そこからアップデートします。…

今はbabel-nodeで動かす

ECMAScript6で、node.js/express.jsのサーバ側を書く段になるとes6的メリットを享受できていません。Reactの方はclassを用いて書くといい感じなんですけどね。 // server.es6 import express from 'express'; const server = express(); server.get('/', asy…

importの解決でBrowserifyからのBabelify

ECMAScript6でクライアント側を書いてますが、極小のHello Worldレベルから一歩進むだけで壁が。JavaScriptの発展の歴史の中で大きなアプリケーションを作るためのパッケージ参照機構が様々用意されてたみたいですが、そこにまた大きな曲がり角が出てきちゃ…

ECMAScript6を楽に

少々触った程度ですが、もうWebStormからSublimeやBracketsといったテキストエディタ+へは戻れません。だいたい最近の流行をつかんだところで、もっと中身の方に移ろうと思います。 babeljs.io JSX書くのに、BabelがいるってんならECMAScript6もいいよねっ…

Reactのバージョンあがってた

Reactのバージョンがv0.14.0に上がってました。構成もいろいろ変わってる。。。3秒見るだけで変わってて、独立したJSXTransformerが無くなりJSXの逐次変換ではBabelが使われるようになり、グローバル変数としての"React"を"ReactDom"に代えて利用ケース毎に…

React向けにLinterを設定する

JavaScriptを書き、Reactに触れるにあたって、エディタをどうしようかと一回りしました。元々Javaな人なんでEclipseなどの統合開発環境でがっちりサポートされてきた身としてはテキストエディタだけでっていうのは不安です。不安なんで一年前には速攻でJetBr…

入門 React

入門 React ―コンポーネントベースのWebフロントエンド開発作者: Frankie Bagnardi,Jonathan Beebe,Richard Feldman,Tom Hallett,Simon HØjberg,Karl Mikkelsen,宮崎空出版社/メーカー: オライリージャパン発売日: 2015/04/03メディア: 大型本この商品を含む…

神風

子供の時から何がまずいって、夏休みの宿題(のようなもの)をサボりにサボってギリギリまで熟成させて言い訳も効かないぐらいにしてしまいます。そんな時は体も正直で、毎日時間になったからと就寝してもいろいろ心配で寝れなくなって来ます。ピークになると…

新COO招聘

6月より、学生時代からの古い友人である新井正広さんをGlabio, Inc.そして来るBayPOS, Inc.のCOOとして招聘しました。彼とは1996年の暮れに、Nifty ServeにDelphiのコミュニティを作る発起人グループとしてはじめて出会い、Delphi Users' Forum (通称FDELPHI…

BayPOS, Incがはじまるまでの個人史を振り返ってみた

サイオスとHotto Mottonoのプレナス、米国で飲食店向けITシステムの合弁会社news.mynavi.jp プレナスの「やよい軒」、年内に米国1号店 出店加速へサイオスと共同出資会社www.nikkei.com 5/18のプレナスおよびサイオス両社の取締役会にて、レストラン向けIT…

はじめよう!要件定義

このエントリはまさしく4/1に書きたかった。しかし今は米国に住んでるので時差がありちゃんと4/1に書くにはちゃんとしないと。日本時間の4/1かつ米国西海岸時間でも4/1。具体的には日本の4/1午後4時から4/2午前0時の間、こちらでは4/1午前0時から午前8時の8…

Rhodia webnotebook

散々iPadやAndroid Tabでメモ取ろうかとしてみたけど、結局Rhodiaに戻った。ロートルなのかな? 写真のとおりのRhodia webnotebookのA6横ドット罫というのを愛用してましたが、残りページ少なくなってきたので同じの買おうと思ったのですけど、モデルチェン…

Android Studio 1.1で変わった

Android Studioがすでに先週にアップデートされていたみたいですが気がつくのが遅れました。 今回のアップデートで地味に嬉しいのはOSX版の利用JDKが、従来の「1.6*」だけでなく「1.7+」も加わったこと。Apple配布のJDK1.6がOSと密着してたうえにYosemiteか…

RetrofitとJsoupでWebスクレイピング

Robolectricで書いたお試しコードですが、RetrofitでHTMLのスクレイピングをしてみました。HTMLのパーサーはJsoupを用いています。手元の実行環境はAndroid API16とRobolectric 2.4ですけど、サンプルは画面が無いのでほとんどバージョン関係なく動くと思う…

バージョン過渡期の混乱

Androidは新機能のバックポートが充実しているので古いAPIでも新OSの目玉機能は同様に使えたりして好感なのですが、その時ターゲットとするバージョンの選択に応じて複数方法が用意されており、逆に何を使ったらいいんでしょうか?という混乱があります。そ…

Robolectric 3.0-SNAPSHOT

Robolectricに慣れてきたところで、API21のプロジェクトに投入してみます。今日時点のリリースバージョンである2.4ではAPI18までの対応になっていて、API19および21に設定するとエラーで止まるようになってます。Roboは、Androidの下層をさわろうとするクラ…

Gradleでテストしてたら、asmが被った

GradleでJUnit4+Robolectricをターミナルから動かしてます(仕事じゃなくって現実逃避ですけど)。IDEからはapp.imlを直接いじるという面倒なセットアップが無いと動きませんので、世の中の進歩をまつことにしてます。 今日、突然その環境が動かなくなりまし…

Gradleでapp.imlを操作するのがうまくいかない。

Androidでちょっと大きめな開発に携わっていて、2ヶ月半ぐらいどっぷりと。ずっとEclipseで書いてましたがその間にAndroid Studioも1.0がリリースされて今は1.0.2。たまに息抜きにAndroid Studioを触ってみたら、いきなり黒魔術のようなファイルがありました…

近況としてのAndroid

数週間前よりAndroidを書き始めました。その昔まだAndroidの端末が世にない2008年ごろに他に先駆けて実機をつくろうという、東京工科大の田胡先生という学究の徒によるものとは思えないほどテカテカした狙いを感じるプロジェクト、工科大ケータイAndroid版な…

先週末にヨセミテ行ってきた

OS X Yosemiteの発表以来、なにかと写真をみる機会が増えたヨセミテ国立公園に、サンクスギビングデーのお休みで行ってきました。まずサンクスギビングデーとは何か。。。 感謝祭 - Wikipedia Wikipediaでは「感謝祭」と言ってます。11月の第四木曜固定で学…

スマートウォッチ一考

[要するに...] 先週日本で羽生さんに強く煽られたので、余暇にオレオレ妖怪ウォッチを作るのも一興かとAndroid Wearを求めてベストバイに行ってきたけど、結果としてその場では$300出す気にならなかった [...という話] ベイエリアの家電量販店だけなのかは不…

NSNotificationCenterとセレクター記述のこと

iOSでは段を積んだようにメッセージキューが用意されています。そのアプリケーションワイドのやつを触るのがNSNotificationCenter。シングルViewアプリでUITextFieldを一個貼っただけのものを作ります。 import UIKit class ViewController: UIViewControlle…

SLRequestでGETなAPIの呼び方の注意点

FacebookのGraph APIはRest風な作りなのでGETやPOSTといったメソッドの別にも意味があり、GETが期待されてるAPIをうっかりPOSTで呼んでたら「success」とその他少々だけ入ったJSONが返ってきてさっぱり理由がわからなかったり。自分が間違ってるのにシミュレ…

info.plistを読むこととif-let-as?

FacebookにアクセスするiOSアプリケーションを作るには、info.plistにFacebook AppIDを書き込まないといけません。このへんはiOS向けのクイックスタートから数ステップでAppIDを取得してのちに、次に何をしなければならないかという説明文に詳しいです。 htt…

Null Coalescing Operator

Null Coalescing Operator、日本語だとヌル結合演算子と訳すのかな? func doSomething(queue: dispatch_queue_t? = nil, handler: () -> Void) -> Void { dispatch_async(queue ?? dispatch_get_main_queue()) { handler() } } こんな感じの関数があったと…

HTMLReaderというフレームワークがすごい

HTMLをクライアント側でちょっとパースする要件にてiOSで使えるHTMLパーサを調べると、いくつかあるのですが、HTMLReaderというのがたまたま目につきました。 nolanw/HTMLReader // Bridge-Headerにて、HTMLDocument.hとHTMLSelector.hをインクルードしてる …

XCodeのテストでビルド範囲を調整

XCode6でコードも書き慣れてきたので、通常開発モードとしてユニットテストも書き始めました。プロジェクト作るとアプリケーションとしてのターゲット設定と別にテストターゲットも自動にセッティングされます。またテストコードも新規作成ウィザードに「Tes…

Storyboardで縦に長い画面を作る

調べるとStoryboardは2011年秋のiOS6と同時に登場したXcode4.2の新機能だったとか。まったくブランク時期で、Storyboardもまた初見です。その前のInterfaceBuilderにはまったく良い思い出がないのですが、このStoryboardは一転してXcode開発の印象が変わりま…