かずきのBlog@hatena

日本マイクロソフトに勤めています。XAML + C#の組み合わせをメインに、たまにASP.NETやJavaなどの.NET系以外のことも書いています。掲載内容は個人の見解であり、所属する企業を代表するものではありません。

React

React + TypeScriptでjestを使ったテストをする

Reactを使ったアプリのテストにはjestっていうのが使われるっぽいですね?jest知らない子だ。 facebook.github.io Mock by Defaultとか激しいですね。 軽く使ってみる テスト対象のスクリプトのあるフォルダに__tests__というフォルダを作ってその下に「***-…

React + TypeScriptで入力値チェック

入力値チェックしたかったら、こんな感じのを用意するのかなというのを作ってみました。 業務で使うなら、もうちょっと汎用性減らして数字用とか○○コード用とかっていう風に作ってもいいのかもね。 interface InputTextBoxProps extends React.Props<{}> { l…

ReactRouter + TypeScriptでパラメータを受け取る方法

ルートの定義でdetail/:idみたいにしてたら、idという名前のパラメータを受け取ることが出来ます。受け取り方は以下のような感じで。 ReactRouter.RouteComponentPropsの第二型引数にパラメータの型を指定します。 interface DetailComposerProps extends Re…

React + TypeScript JSXでマスター詳細画面みたいなの

React + react-router + react-datagrid + whatwg-fetch + react-bootstrapくらいを使ってます。 github.com 一応ASP.NET WebAPIで作ったWebAPIを呼び出しています。 グリッドにAPIからとってきたものを表示して 行を選択すると編集画面に移動。 感想として…

react-routerでコンポーネント外から画面遷移する(TypeScript版)

react-routerにはbrowserHistoryというものがあるので、それをimportして使えばいいよ!って書いてある。 github.com しかし、型定義にそんなものはない。 じゃぁどうするの? historyモジュールのcreateHistoryを呼んだものをグローバルに用意しておきます…

ReactとTypeScriptでデータグリッド表示するのに使えるreact-datagrid

業務で使おうと思ったらそれなりのデータグリッド部品が必要になりますよね。そんなとき、ちょっと我慢すれば使えそうなreact-datagridを紹介したいと思います。 react-datagrid npm install react-datagrid --save tsd install react-datagrid で導入が可能…

Visual StudioとTypeScriptによるReact入門という薄い本をKindleに出してみました

あけましておめでとうございます。 年末割とReactしてたので自分の復習がてらWordにまとめてKidnelに放流してみました。 www.amazon.co.jp 初心者なので、間違ってる事書いてたら教えてください。

TypeScriptでmaterial-uiするときのreact-tap-event-plugin

Reactのver1までは以下のおまじないがいるらしいんですが www.material-ui.com react-tap-event-pluginに型定義が無いっぽいんですよね。 ということでこんな感じでいけました。 declare module 'react-tap-event-plugin' { function injectTapEventPlugin()…

TypeScriptでmaterial-ui-mdiを使う

material-uiのアイコンセットでmaterial-ui-mdiっていうのがあります。 github.com ちょっとアイコンセットがほしかったので試そうとしたらTypeScriptの型定義がないorz ということで無ければ作ればいいじゃない?ということで、こんな感じのT4 Templateを書…

TypeScript JSXでReactのFluxのHello worldしてみた

Fluxとは。 facebook.github.io Reactで色々柔軟にできるけど、アプリ内のデータの流れを一方向に整理してみましたということみたいですね。Fluxはアーキテクチャであって、フレームワークやライブラリではないというけれど、一応公式で小さなライブラリがあ…

TypeScript JSXでMaterial UIを試してみた

material-uiというものがあるというのを聞きました。 www.material-ui.com Reactでマテリアルデザインを再現するのにいい感じみたいですね。 プロジェクト作成 Visual StudioでTypeScriptのプロジェクトを作ります。 プロジェクトをPowerShellで開いてnpm in…

TypeScript JSXでReactRouter

react-routerを使うまでのメモです。ちなみに、開始地点は、以下の記事のbrowserifyを使うようにしたプロジェクトです。 blog.okazuki.jp 型定義ファイルをダウンロード 以下のコマンドをうって型定義ファイルをダウンロードしておきます。 tsd install -sav…

Visual Studio 2015 + ReactのHello world環境作り

はじめに Reactをやりはじめてimport なにがしみたいなモジュールを取り込むやり方に憧れて、そういう環境作れないかと試行錯誤した結果です。gruntとかは毎回準備するにはヘビーなので入れてません。 ということで備忘録開始。 1回だけやればいい作業 node.…

TypeScript JSXでラジオボタンのリストを作る

onChangeで選択された値を渡してくれるコールバックと、defaultValueで、初期選択の値を設定できるみたいな感じです。 ラジオボタンのリストの要素はoptionタグで指定できる雰囲気でいってみましょう。 まず、プロパティを定義します。 interface RadioListP…

Visual Studio上のTypeScript JSXを使ってReact.js「ReactのチュートリアルをTypeScriptでリライト」

なんとなくReactのチュートリアルをTypeScript JSXでこなせるような気がしてきたので、やってみたいと思います。 facebook.github.io プロジェクトの初期設定とかは以下の記事を参照してください。 blog.okazuki.jp 最初のコンポーネント 最初はCommentBoxと…

Visual Studio上のTypeScript JSXを使ってReact.js「style属性をJSのオブジェクトで指定する」

ということができるみたいですね。 fontSize → font-sizeみたいな感じのルールでJSのオブジェクトのプロパティをCSSのstyleの名前に変換してくれるみたいです。こんな感じで /// <reference path="typings/tsd.d.ts" /> var h2Style = { fontSize: 40, color: 'red', backgroundColor: 'yellow' };</reference>…

Visual Studio上のTypeScript JSXを使ってReact.js「デフォルトのプロパティ」

JSXとかだとgetDefaultPropsというメソッドを定義しておくとプロパティのデフォルト値として使ってくれるんですがTypeScriptの場合違うらしい。 どうやるかというと、デフォルト値がほしいプロパティの定義に?をつけて必須じゃなくしてから、public static d…

Visual Studio上のTypeScript JSXを使ってReact.js「Hello ReactComponnent」

今まではタグを組み立ててただけですが、今回はReactComponentというものを作ります。 propsとstateというものをReactComponentを持ってるみたいですが、propsはイミュータブルでstateに変更する予定のある値を突っ込むみたいなイメージっぽいです。ReactCom…

Visual Studio上のTypeScript JSXを使ってReact.js「JSXらしい書き方してみよう」

今まで別にTypeScript JSXじゃなくてもいい書き方をしてたのですが、ついにJSXらしい書き方をしてみようと思います。 このコードを /// <reference path="typings/tsd.d.ts" /> var section = React.DOM.section( { className: 'container' }, React.DOM.h1({ className: 'header' }, 'React!!'), </reference>…

Visual Studio上のTypeScript JSXを使ってReact.js「便利なファクトリメソッド」

React.jsはReact.DOMに各種タグを簡単につくるためのファクトリメソッドが定義されています。使ってみましょう。 /// <reference path="typings/tsd.d.ts" /> var section = React.DOM.section( { className: 'container' }, React.DOM.h1({ className: 'header' }, 'React!!'), React.DOM.ul( { c</reference>…

Visual Studio上のTypeScript JSXを使ってReact.js「createFactory」

同じ名前のタグを沢山組み立てるときに楽ができるReact.createFactoryという関数があるみたい。こんな感じで、liタグを沢山作るときにあらかじめliタグを作るファクトリを定義することができる。 /// <reference path="typings/tsd.d.ts" /> var h1 = React.createElement('h1', { className: 'hea</reference>…

Visual Studio上でTypeScript JSXを使ってReact.js「低レベルなタグの組み立て」

createElementメソッドを使ってせっせとタグを組み立てることができます。タグ名、属性、子要素という感じみたいです。 /// <reference path="typings/tsd.d.ts" /> var h1 = React.createElement('h1', { className: 'header' }, 'これはReactです'); var p = React.createElement('p', null, 'Re</reference>…

Visual Studio上でTypeScript JSXを使ってReact.js「ローカルにreact.jsのファイルを抱え込もう」

先ほどは、CDN上のReactを読み込みましたが、手元にreactのjsファイルを持ってくる場合。 bowerを使いました。(Visual Studio関係ない) npm install bower -g と入力してbowerを入れます。bowerはgitを使うみたいなので、gitをインストールしてPATHを通し…

Visual Studio上のTypeScript JSXでReactのHelloWorldしてみた

試行錯誤した結果です。 Reactは言わずと知れたFacebookが作ってるライブラリですが、最近Visual Studio 2015 Update 1でtsxというTypeScriptでJSXをサポートするみたいなものが出てきました。今回はこれを使って遊んでみたいと思います。 node.jsのインスト…