かずきのBlog@hatena

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

React

Visual Studio 2015でTypeScript 2.0 RC + React + ASP.NET Coreの組み合わせをやる方法

JavaScript界隈のフレームワークの組み合わせがファッキンホットですよね。個人的にはreactに頑張ってほしいと思いつつAngularJSも2が正式リリースされたら追いかけてみようかなというスタンスです。 といいつつ、最近reactを放置してたら自分のフィールドの…

React + TypeScriptでreact-router-redux

react-routerをreduxで使うためのreact-router-reduxというものがあります。 先日、これの型定義ファイルが公開されてたので使ってみました。 react-router-reduxの公式サイトはこちらになります。 github.com 素のreactのプロジェクトに対して… react-redux…

React + TypeScriptでカメラからとった画像をアップロードする

前の記事で、カメラからとった画像を取得することが出来るようになりました。 今度はこれをアップロードしてみたいと思います。 といっても手抜き実装でbase64でエンコードしたものを、JSONの文字列として送って、サーバーサイドではそれをデコードしてさく…

React + TypeScriptでスマホカメラの画像を取得するフォームを作る

最近はカメラ画像を取得することもできるらしい。ポイントは、inputのtypeをfileにしてacceptをimage/*:capture=cameraにするところです。 撮影した画像のプレビューを表示するにはimgタグを使います。File APIを使って画像を読み込んで使います。ソースで書…

React + TypeScriptでreact-bootstrapのNavとreact-routerの共存

react-routerで画面遷移のリンクといえばLinkタグかIndexLinkタグを使います。 でも、react-bootstrapのNavを使って画面の上部のタブみたいなのを作ろうとすると、Linkタグは使えません。 そんな時は、プログラムからhistoryを制御してやるといいです。 こん…

TypeScript + Reactでredux-formを使ったDeep formのサンプル

以下の例にあるようなDeep formを作ってみようと思いました。 erikras.github.io 結果 型定義にはそんなものなかった。 解決策 any最高! import * as React from 'react'; import * as Redux from 'redux'; import * as ReduxForm from 'redux-form'; impor…

TypeScript + Reactでbootstrap

react-bootstrapを使うととても簡単です。 以下のコマンドで必要なものがインストールできます。 npm install react-bootstrap bootstrap --save tsd install react-boosstrap -save index.htmlではbootstrapのcssを読み込んでおきましょう。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> </meta></head></html>

React + TypeScriptでredux-formのformの値を初期化する

redux-formのformになるクラスにinitialValuesというプロパティに値を設定してやると、フォームデータが初期化されるくさい。 注意点としては、redux-formの型定義ファイルにinitialValuesが定義されてないので自分でプロパティをはやしてやる必要があるとい…

TypeScript + Reactのredux-formでサブミット時に検証を行う

redux-formのhandleSubmitに検証処理を渡すことでサブミット時に検証ロジックを走らせることができます。 こいつは、非同期前提なのでPromiseを返す感じのシグネチャになってます。 フォーム部分のコードの抜粋はこんな感じになります。validateContentメソ…

TypeScript + Reactでredux-formを使って非同期の検証処理を行う

1つ前の記事で同期的な検証をやりました。redux-formは非同期な検証処理もサポートしています。 使い方は簡単、Primiseを返す検証ロジックを作って、reduxFormメソッドを呼び出すときasyncValidateに渡すだけ。非同期の検証のロジックのトリガーとなるフィー…

React + TypeScriptのredux-formでバリデーションを行う

redux-form作るときにvalidateパラメータに検証関数を追加すればOKです。 import * as React from 'react'; import * as ReactDOM from 'react-dom'; import * as ReduxForm from 'redux-form'; import * as Redux from 'redux'; import {Provider} from 're…

TypeScriptでredux-formを使ってみる

入力フォームを作るのに便利そうなredux-formというのがあります。 erikras.github.io TypeScriptの型定義もあるので使ってみました。とりあえずシンプルな例から。 redux-formを使うには、reducerでReduxFormのreducerをformという名前でcombineReducersし…

Reduxで忘れがちなこと

Reduxで小さなプログラムを書く練習を何回かしてて忘れがちなことをメモしておこうと思う。 dispatch呼び忘れ Reduxでは、store.dispatch(アクションクリエイターの関数(引数))という形で処理を書かないといけない。こうすることで、Reducerの関数へ処理が渡…

TypeScriptでReactとRedux使って一覧と詳細画面みたいなのを作ってみた

Reduxの勉強がでら、ログインして一覧画面が出てデータの編集ができるみたいなのを作ってみました。 サインインの画面が出てきて admin/p@ssw0rdでサインインするとデータの一覧がでて、一応ページ切り替えが出来て 編集リンクをクリックすると編集画面が出…

TypeScript + React + Reduxでalertダイアログを出す

こういう表示とデータを疎結合にしたときに問題になるのがダイアログ系。 頭をひねった感じこんなのでいけるんじゃないかっていう感じのが出来ました。 コンポーネント まず、アラートを出すコンポーネントを準備します。UIは持たないrenderメソッドはnullを…

Reactのrefの個人的に意外な指定方法

ref属性って関数渡せるんですね。こんな風に。 export default class IndexPage extends React.Component<IndexPageProps, IndexPageState> { // ref保持しとくフィールド private x: HTMLInputElement; ... 省略 ... private handleSubmit(e: React.SyntheticEvent) { e.preventDefault(); v</indexpageprops,>…

ASP.NET WebAPI2でAjaxでOAuth認証するよ(ついでにTypeScriptとReact)

ReactとかやっててWebAPIを呼び出してやるようにすると、認証ってのがどうしても必要になってきます。ということでASP.NET WebAPI2でOAuth認証を行ってAPIをたたくところまでやってみようと思います。 スタート地点は先日作ったReactApplicationの雛形です。…

Reduxってどうなってるんだってばよ

Reduxが難しい。理解できたらいいんだろうけど。 TypeScriptで開発するとき、何をどの順番で作っていけばすっきりするのかわからない。 ということで整理もかねて徒然なるままにBlogに向かいて書いてみたいと思います。 Actions まず、何はともあれアクショ…

TypeScript + React + Visual Studioのプロジェクトテンプレートを準備してみた

ASP.NET WebAPI2でサーバーサイドを開発してクライアントサイドをReact使ってTypeScriptで開発することを想定したプロジェクトテンプレートを作りました。OneDriveに置いてるので、適当にドキュメントフォルダのVisual Studio 2015\Tempaltes\Project Templa…

React NativeをTypeScriptでやるときの設定など

過去にこんな記事を書いてて、react-nativeの型定義を手動で書き直してコンパイルするという変なことをやってたのですが、この方法をやらなくて済む構成を見つけました。 blog.okazuki.jp blog.okazuki.jp blog.okazuki.jp どうせなので、最初から手順を書い…

TypeScript + React + WebPack + Gulpの作り方(SourceMapからminifyまで)

自分用メモ。 まず、tsconfig.jsonから。 tsconfig.json { "compilerOptions": { "target": "es5", "module": "commonjs", "removeComments": true, "sourceMap": true, "jsx": "react" }, "exclude": [ "node_modules" ] } とりあえず、node_modulesを除い…

React NativeをTypeScriptで(VS Code編)

2016/01/11追記:以下の記事を参照してください blog.okazuki.jp react-nativeをVS CodeからTypeScriptでHello worldしてみました。エミュレータはVisual Studio Emulator for Androidです。 プロジェクトの作成 プロジェクトを作りたいフォルダにコマンドプ…

Visual Studio Codeを使ってサーバーもクライアントもTypeScriptで開発!(Express + React)

Expressを使ってサーバーサイドをTypeScriptで開発。Reactを使ってクライアントサイドをTypeScriptで開発。 1言語で開発できるって素晴らしいことですよね。 個人的にはC#でやりたい!すごくやりたい! 環境 Windows 10 Visual Studio Code Node npmで以下の…

Visual Studio CodeでTypeScript JSXをコンパイルしたい

高機能エディタVisual Studio Codeをちょろっと試してみました。 まずは、reactのコードがコンパイルできるようになるところまでを目指してやってみます。 作業フォルダの作成 VS Codeはプロジェクトファイルとかいう概念がなさそうでフォルダを開くところか…

react-nativeをTypeScriptでいってみた

2016/01/11追記:以下の記事を参照してください blog.okazuki.jp はじめに react-nativeがWindowsでも動いた(Androidだけ)ので、試しにTypeScriptで書いてみたいとおもいます。 プロジェクトの作成 以下のコマンドを打ち込んでプロジェクトのひな型を作成…

react-nativeをWindowsで動かしてみた(ついでにVisual Studio Emulator for Android使って)

2016/01/11追記:以下の記事を参照してください blog.okazuki.jp はじめに react-nativeっていうのを使うと、iOSとAndroidアプリまで作れるっていうじゃないですか。 ということで、AndroidアプリのHello worldくらいを試してみたいと思います。 iOSじゃない…

TypeScript JSX + ReactでReduxな画面遷移のある簡単なTODOアプリを作ってみました

はじめに Reduxをちょっとやり始めたので、無理やりですが画面遷移(react-router)を含めたTODOアプリサンプルを作ってみたいと思います。 やりながら書くので、最終結果がダメでしたというオチになってるかもしれない点ご了承ください。 プロジェクトの作…

React + TypeScript JSX + Reduxで非同期処理を呼ぼう

公式ドキュメントのここらへん。 Async Actions | Redux そもそも 普通のSPAだと、AJAX呼び出しとかで非同期な処理が盛りだくさん。Reduxでどうやるの?という風になるのですが、これが素のReduxのライブラリだけだと難しいということで、redux-thunkという…

React + TypeScript JSXでInteractを使う

先日見つけたInteractというライブラリを使って簡単なサンプルを作ってみました。 github.com 灰色の場所をクリックすると矩形が追加されます。矩形はドラッグで移動させることと、端っこをつまむことでリサイズが可能です。 ポイント interactは、npmではin…

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>…