TypeScriptでReactのライブラリを作りました

TypeScriptの勉強が嵩じて、一個、Reactのフォーム画面を作るときのめんどくさいところをまとめた小さなライブラリを作りました。 github.com 何がめんどくさいと思っていたかというと、 フォームの一時的状態をどこに持つか悩む。Reduxストアに持つのは大げ…

in keyof T

TypeScript 2.1 · TypeScript このTypeScript2.1で追加されたという keyof演算子をうまくつかうと、オブジェクトのプロパティを縛るのに有用でした。 test ('power of keyof', () => { // 返値のin keyofという受け方が今回の話題。今回Nは捨て型だけど、使…

関数オーバーロード

Functions · TypeScript 上記URLの最後、関数オーバーロード(記事のOverloads項目)なる言語仕様について。まずは以下のようなのがあったとします。 // .tsxファイル まずはこんなのがあったとします。 import * as React from 'react'; type P = { message…

prop-typesか、それに代わる何かが必要な件

これまでReactコンポーネントを書く時、コンポーネントの使われ方を縛るためにprop-typesを用いて動的なチェックをしていました。TypeScriptでは代わって静的な型チェックを利用してprop-typesを使わずとも利用方法を縛るということになってます。しかし、け…

Interfaceのメンバ競合の問題

import * as ReduxActions from 'redux-actions'; import * as Redux from 'redux'; // 型の競合エラーがでる interface ExAction extends Redux.Action, ReduxActions.Action<string> {} 現実感の無い実験のためのこのコードは、今日時点では残念ながらコンパイラを</string>…

The hidden power of Jest matchers

medium.com 素晴らしい記事。これらの「The hidden power」を知らず、expect(rec.prop).toBe(val)の組み合わせをプロパティの数だけ並べてましたよ。 function fn() { return { a: 1, b: true, c: 'hello', d: { d1: 2, d2: false }, e: 3, f: 4 }; } // 今…

トランスパイルに時間がかかってたのでtsconfig.jsonを直した

いつからか、TypeScriptトランスパイルに極端に時間がかかるようになってました。ビルドも、DevServer実行も、テストもすべてトランスパイルが走るのでこれが遅いと開発の勝手全てに影響します。特にtslintが遅くなった結果、エディタで警告やエラー箇所を修…

不慣れによる失敗、配列の宣言

まだTypeScriptが手に馴染むには書いた量が少なく、日々失敗が多い。 type Book = { title: string, vols: [string] }; type BooksPayload = { books: [Book] }; // 正解は、= { books: Book[ ] }; こんなコードを書いていた。意図としてはBookの配列をActio…

Reducerを書くのにhandleAction"s"をやめた

redux-actionsを用いてActionCreatorとReducerを書いていますが、TypeScriptに移行して書き方がちょっと変わりました。 これまではActionCreatorをまとめて作るcreateActionsと、Reducerをまとめて作るhandleReducersを便利に用いてました。しかしTypeScript…

tsconfig.jsonでstrict: trueとするのは時期尚早だった

できるだけ厳しめ環境で書いた方がよろしかろうと、TypeScriptのトランスパイラオプションを最もstrictにしましたが、私の現時点でtsconfig.jsonで、strict: trueとするのは時期尚早でした。 tsconfig.jsonで、strict: trueとする webpack.config.*.tsで、'p…

Reduxでの有用なTypeScriptサンプル

https://github.com/reactjs/redux/tree/master/test/typescript Reduxのリポジトリの中、test/typescriptにReduxでの有用なTypeScriptサンプルがあります。強い型付けでのMiddlewareの書き方とか参考になるもの多い。また、これらのテストは動かさずにコー…

型強化の呪文。noImplicitAny

www.infoq.com 上記記事をたまたま読んで目にした呪文。noImplicitAny。 Over time, they reached the point of enabling advanced compiler options, such as –noImplicitAny to prevent the compiler from inferring an any type. advancedってすごいな。…

TypeScriptでもリリースビルドする

TypeScriptの8つめ。 Productionをやります。 // webpack.config.production.ts import * as path from 'path'; import * as webpack from 'webpack'; export default { entry: './ts/index.tsx', output: { path: path.resolve('static/js'), filename: 'bu…

Atomを入れてTypeScriptを書く

TypeScriptの7つめ。 愛用のWebStormでTypeScriptを研究しつつ、おまけでAtomをインスコしてサンプルを作るときの清書プラットフォームとして使って見ました。 Homebrew-Cask 私はHomebrewでNodeもYarnも入れてますので、Atomも。MacOS向けGUIインストーラー…

TypeScriptでもReduxのHMR対応しておきましょう

TypeScriptの6つめ。 HMRには3段階あって、非Reactアプリ、Reactアプリと続いて最後にReact+Reduxアプリに到達します。 // /store/Store.ts import { createStore, combineReducers, applyMiddleware } from 'redux'; import { routerReducer as router, rou…

TypeScriptでもHMRを実現する

TypeScriptの5つめ。まだまだ続きます。 $ yarn add react-hot-loader@next $ yarn add @types/webpack-env -D react-hot-loaderは3.0.0-beta.7が入りました。そして@types/webpack-envを!これが自分的には一番ヤバい。見つけるのに苦労した。 // webpack.c…

TypeScriptでもJest+Enzyme

TypeScriptの4つめ。 Lintができたらテストもちゃんとやっとく。最近覚えたJestそしてEnzymeでやります。 $ yarn add jest enzyme react-test-renderer ts-jest @types/jest -D jestとenzymeを加える他に、@types/jestが必須です。必須ではないですが@types/…

TypeScriptでもLintを張る

TypeScriptの3つめ。 やはり大人の嗜みとしてLintを設定したいと思います。ES6ではEslintでAirbnbをやってました。TypeScriptでもAirbnbを張り付けときます。 $ yarn add tslint tslint-config-airbnb tslint-react tslint-loader -D 名前もそのまま、Tslint…

Webpackの設定をTypeScriptで書く

TypeScriptの2つめ。前記事の続き。 Webpack DevServerを動かしてTypeScriptで書いたReactアプリを動かしましたが、このWebpackの設定をTypeScriptで書くことも可能。Babel使ってES6で書くこともできましたので驚くことではない。 $ yarn add ts-node -D yar…

TypeScriptのReact-Webpack DevServer実行

TypeScriptのReactアプリを作るに際し、一番シンプルなのはWebpack DevServerで実行だけするというものかなと思います。NodeとYarnはすでに入ってること前提で、あとはテキストエディタ&WEBブラウザだけでOK。 $ mkdir TsReact $ cd TsReact $ yarn init $ …

TypeScriptのReact開発環境を作った

Labor Dayの連休を利用して、TypeScriptでReact開発環境を作ることをやってみました。 (TypeScriptで書いたReactアプリを、以下同じ) Webpack DevServerで実行する 構文および書き癖チェックする Jest+Enzymeでテストする Webpack DevServerでHMR実行する We…

Flowの速い環境変化

Flowの0.54.0が出てたのでアップグレードしたら、挙動が変わった。 # .flowconfig [ignore] .*/sass/* .*/static/* .*/bin/* .*/pkg/* .*/src/* .*/vendor/* [include] [libs] [lints] [options] suppress_comment= \\(.\\|\n\\)*\\flow-suppress esproposal…

yarnに乗り換えてみた

Facebook OSSの話題に触れてるうちに、yarnにしてみっかなと。yarnのライセンスはFacebook OSSの特徴となったBSD-3-ClauseではなくBSD-2-Clauseですけど、そこはかとなくFacebookな匂いの子です。今までニーズがなかったから入れ替えてなかったけど、むしろ…

FlowにImmutable.jsの型定義を取り込む

Immutable.jsの型定義の取り込みできた。今後は応用して他のライブラリも手動で取り込みできよう。 # .flowconfig [ignore] # .*/node_modules/* こいつが邪魔してた .*/node_modules/eslint-plugin-jsx-a11y/* .*/node_modules/react-event-listener/* .*/s…

Flow-Typedで型定義をまとめて取り込む

Flowはいまのところマジ大変。どうやら一番成長の速い時期にぶつかってしまったらしく、わからないことを調べても皆がバラバラなことを言ってたりして困る。サンプルで数行のお試しコードを書いてる分にはハマりどころも少ないんだけど、ちゃんと出来上がっ…

Flowでの型チェック環境を設定する

flow.org ちょっと前に、redux-formのリポジトリで「🎉 Flow Typing 🎉 (#3138)」と絵文字まじりのコミットログを見つけて気になって(絵文字を)調べたついでから、JSの型チェックを行うFlowを知りました。型はコードの堅牢性を高めると信じてるので大好きなの…

Material-uiがreact-tap-event-pluginを廃止してた

リリースノートを見るとすでに二週間近く前のことですが、Material-UIが0.19.0をリリースし、長年引っ張っていたreact-tap-event-pluginを廃止していました。onTouchTapと各所にあったものがonClickに置き換わっています。後方互換のためかonTouchTapのまま…

Jest+EnzymeでReactコンポーネントをテストする

JestはそもそもReactアプリをテストするためにあるのだと思うのですよ。作り手が同じFacebookだし、ドキュメントにもそういうことを言ってます。そこでJestでReactをテストしようとドキュメントにあたるとAirbnbの作るEnzymeを使うことを推奨されていました…

Jestのモック機能を活用する

テスト環境をJasmineからJestに入れ替えましたので、カバレッジを上げるためおよびTDD的にもこちらの活用を行っていきたいと思います。一年ぐらい、いや二年?、目を離した間にモック機能がかなり成熟していました。 そのまえにeslint react/jsx-boolean-val…

ReactとReduxのためのChrome拡張機能

さらに昨日の続き。 chrome.google.com かねてよりChrome拡張機能でReactアプリケーションのリアルタイムコンポーネント構造を見るためのReact Developper Toolsを用いていましたが、HMR環境でも問題なく活用できています。HMRで部分再描画ができてる時にはT…

HMRの完成度アップ、ReducerのHMRも

昨日までで完成かと思ってたら、さらに続きが! HMR環境で開発してたら、react-reduxのProviderコンポーネントが以下の警告をブラウザのstdoutに出してました。 does not support changing `store` on the fly. It is most likely that you see this error b…

react-reduxのHMRできた!

ここ連日の続き、完結です。 react-router v4での完全再描画を伴わない、変更箇所だけ表示が更新されるHMR(Hot Module Replace)ができました。理由はreact-reduxのProviderコンポーネントの置き場所。連日のアプリケーションが以下のように変わって完成。…

いよいよreact-router-redux v5へ

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

react-router v3 to v4移行

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

ReactのHMR環境を作る

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

しばらく見ない間に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でやっぱりダメになりました。しかしそ…

Make: Electronics ―作ってわかる電気と電子回路の基礎

Make: Electronics ―作ってわかる電気と電子回路の基礎 ((Make:PROJECTS))作者: Charles Platt,鴨澤眞夫出版社/メーカー: オライリージャパン発売日: 2010/11/29メディア: 大型本購入: 6人 クリック: 207回この商品を含むブログ (22件) を見る 入門用に電子…

Intel EditsonとRaspberry PI Camera

Intel Edison やはり、小さいです。まずは標準アプリを母艦としたMBPに入れ初期設定しました。アプリでは、ファームアップデート・パスワード設定・WiFi設定の三つだけをやるもので、GUI操作だけで簡単にセットアップは終わります。動くところまで、Raspberr…

Ubuntu Core断念

Raspberry PIでサクッといっちゃったんで物足りずに、活用云々よりも先に違うLinuxディストロをいれてみようかと。で断念しました。 Snappy Ubuntu Core Raspberry Pi 2/3 | Ubuntu developer portal Raspberry PIの公式サイトでは公式の中の公式としてRaspb…

Raspberry PIを箱から出してGoアプリを動かす

Hello Raspberry! 8th gradeの長女(Mayaa)が最近いきなり電子工作に興味をもってブレッドボードなどを買ってきたので、対抗してRaspberry PIをはじめました。幸いにまだ臭いとかは言わないまでも、いずれ生ゴミ扱い仕掛けて来かねない思春期の娘に対して、…

macOS Sierra上でGAE/Go SDKが動くようになった

https://storage.googleapis.com/appengine-sdks/featured/go_appengine_sdk_darwin_amd64-1.9.46.zip gcloudツールからのコンポーネント管理では現時点アップデートされていませんでしたが、GAE/Go単体SDKはGo1.6.3ベースにアップデートされていました。 再…

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

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

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

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

goji.ioで正規表現Pattern

ハンドラのとこはgoji.ioで書いてます。見ると標準のnet/httpとgolang.org/x/net/contextをうまいこと活かしたからこその極薄なライブラリなのですが、リクエストパスでハンドラを切り替えるのに簡潔利便なので私はお好みです。しかし薄すぎて足りないところ…

可搬性の高いGoのVendoring環境整備

GAE/Goでも、package main/func mainのGoでも、プロジェクトはdirenvをつかってVendoringを実現すると可搬性高くて最高というメモ。 direnv シェルの実行パスに置かれたローカル設定を動的に反映させてくれるかしこいツール。素敵。インストールはHomeBrewで…

Sierraの上に仮想ElCapitanを作る

およそOKだったので、本体もSierraにアップデートしてしまいました。 試した範囲でおよそ問題なかったのですが、アップデートしてから動かなくなってしまったのに気がついたのが一つ、Go for Google App EngineのSDKです。こちら内部にGo 1.6.2を抱え込んで…

仮想Sierra環境を作る

Mac環境を汚さないように壊れてよい仮想なMacを作ります。どうせいまなら出たばかりのSierraで。Mac on MacはVMWareをつかうと超簡単と聞きますが、追加無償でも十分!VirtualBoxで作ります。ホストはEl Capitan。トータルで2時間半ぐらいかかりましたが、ほ…

SONY MDR-100ABN/Yを買った

長らくBeats Studio WirelessのTitaniumカラーを愛用してきましたが、急に激しい物欲が発作したのと、それを正当化する理由がいくつか出てきたので新しいヘッドホンを購入しました。選んだのはSONY MDR-100ABN/Yで、外れたら返品すればいいやと他の候補とは…

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

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