JavaScript

いよいよreact-router-redux v5へ

react-routerをv4へマイグレーションすると同時に、react-router-reduxもv5に上げます。こちらはまだアルファ版ということですが、十分に機能するしとてもシンプルなためにコード読んですぐ分かる内容ですから、危険視するほどではないと思います。 $ npm in…

react-router v3 to v4移行でホットデプロイOK

path-to-regexp まずはMISC。 github.com react-routerのv3 to v4マイグレーション中に遭遇。v3までreact-routerが自前にURLをパースしていたのに代えてライブラリを使うようになってました。Expressスタイルというらしいコロン前置のパラメータが入ったURL…

Reactのホットデプロイ環境を作る

昨今のトランスパイルやバンドル作業が行われるWEBフロント開発では書いたコードがそのままブラウザで動かないために、WEBブラウザで実行確認するためにはビルド・ブラウザリロードの手間が必要です。ホットデプロイ環境を構築すると、コードが書き変えを監…

しばらく見ない間にES6開発ツールセットが良くなってた

WEBのフロントエンドをES6でreact + redux + react-router + Material-UI利用して書いてますが、このビルド環境をそれまでのGulp + Browserifyからnpm + webpackに置き換えました。しばらく見ない間にツール毎の進化があって組み合わせがシンプル化できるよ…

react-routerが都合よくAPIを公開してくれた!(がダメだった)

mk.hatenablog.com かなり前ですけど、react-routerのURLをreduxで管理していい感じ、というコード書きました。こちらはreact-routerの非公開関数を利用していたので将来危険だなあと思ってましたが、react-router 4.xでやっぱりダメになりました。しかしそ…

reduxとreact-routerの間でURLとstateの同期を行う

reactのルーティング機能?というかテンプレートシステムというか?にreact-routerがあります。リクエストパスに応じて画面構成要素を組み立てるのでreact-routerを使ってアプリケーションを作ると当然URLと画面は同期することができます。URLを直打ちしても…

reduxはredux-actionsギプスをつけて養成

reactアプリケーション開発においてコンポーネントに引数として渡されるpropsと、スコープの大きな実行時変数としてのcontextに加えて、もっぱらコンポーネント内部の状態管理としてのstateをあれこれ操作するのがデータフローの基本だったのですが、ここ一…

material-uiのSVGアイコンを作る

Googleはマテリアルデザインのガイドラインを提供するほかに、CSS+ JavaScriptのライブラリ(Material Design Lite)やフォント(Roboto/Notoなど)も用意し、アイコンもまたまとまった数のものがあります。 design.google.com このアイコンは最も使われるだ…

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メディア: 大型本この商品を含む…

テスタブル JavaScript(ちょっと読んだ)

テスタブルJavaScript作者: Mark Ethan Trostler,牧野聡出版社/メーカー: オライリージャパン発売日: 2013/09/21メディア: 大型本この商品を含むブログ (1件) を見る 先に読んでるもので渋滞していたので持ち歩きだけでしたが、今朝より読み始めました。オラ…

LoopBack探訪

StrongLoopのslcコマンドの中で、lbの説明にある「LoopBack」とはなんだろうと思い調べるとStrongLoopがSuiteの中で提供するモバイルアプリのバックエンドソリューションでした。しかもOSS。 $ slc lb workspace my2ndSL Creating workspace my2ndSL Create …

StrongLoopをインスコしてみた

http://strongloop.com/ Node.jsの企業向けディストリビューションという、StrongLoopをインスコしてみました。がっちり電話や住所も含むユーザー登録を行った後に、ダウンロードサイトにて各OS版のディストロを選択します。tarボールとインストーラ付きの両…

テスタブル JavaScript

テスタブルJavaScript作者: Mark Ethan Trostler,牧野聡出版社/メーカー: オライリージャパン発売日: 2013/09/21メディア: 大型本この商品を含むブログを見る これ、買ってみた。明日届いたのち、読んだら感想を書く。

WebStrom7のKarmaでテスト環境組んでみた

WebStrom7EA (WS-131.130)のKarma機能を使うべく、Karmaでテスト環境を組んでみました。まずKarmaって何?からはじまって、ドキュメント一読。たいした量ないので全部読める。 http://karma-runner.github.io/0.10/index.html テストランナーなんですね。テ…

WebStorm7

TypeScriptの0.9サポートが無かったことの発覚からWebStorm7のアーリーアクセス版を使い始めましたが、こちらこんな機能がWEBサイトに(まだそこまで勉強が届いていないため、これから)。 For more a complete experience with Sass, there is now support …

TypeScriptを使うための.d.tsファイル

TypeScriptから既存のJavaScript製ライブラリを型付きで使うときには、Cのヘッダファイルみたいなものとしてコーディング時だけ型を解決するものがあると便利だという。今朝はiPhone5sを買うのに調査を中断したので、手を動かしての検証作業はできてないけど…

開眼!JavaScript

開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質作者: Cody Lindley,和田祐一郎出版社/メーカー: オライリージャパン発売日: 2013/06/19メディア: 単行本(ソフトカバー)この商品を含むブログを見る オライリー本に珍しく、薄く(171ページ)小さな版…

ドメインを一通り見た後はテストかな

ドメイン(Domain)を一通り見てきました。最後のほうは断定しちゃってるけど、まあ大丈夫なんじゃないかとは思います。次はテスト環境だね。これまたしばらく現役から離れているうちにBDDなんていうようなことも。隔世の感の中、なにから触ったものかリサー…

Node.jsの例外処理(ドメインの存在意義)

Node.jsはエコシステムが発達していて、コアライブラリだけでなく、サードパーティがたくさん有用な拡張モジュールを提供してくれています。また、自前で書くコードも一つのJSファイルだけで書くのではなく、見通しも良いように、再利用可能なように、機能単…

Node.jsの例外処理(イベントループによって分断されるコールスタック)

setTimeout()や、process.nextTick()で設定されるコールバック関数の中で例外が発生した場合、アプリケーションにて通常にtry-catchで補足できないのは、Node.jsの中核たるイベントループで遅延スケジュールされた関数のコールスタックが分断されるためです…

Node.jsの例外処理(承前:なぜ例外処理が必要なのか)

ドメインの実装を徘徊してだいたい裏がとれたので、一旦まとめ。 JavaScriptの言語仕様として例外処理は用意されています。すなわち、何か処理上で継続しがたいような不都合があったら、throw文にて例外を送出します。(脱線:JavaScriptの例外としては一般…

node.ccでのDomain対応

https://github.com/joyent/node/blob/master/src/node.cc ですね。ここには来たくなかったのですが、実はキレイなコードで読みやすかったw。 Handle<Value> MakeDomainCallback(Environment* env, const Handle<Object> object, const Handle<Function> callback, int argc, Handle<Value> a</value></function></object></value>…