かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

2016-01-01から1ヶ月間の記事一覧

React + TypeScriptでreact-router-redux

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

今までKindleに出してきた本の紹介「WPF、UWP、React」

ということで宣伝です。 Universal Windows app開発入門 www.amazon.co.jp Universal Windows appの本です。UWPじゃなくてWindows 8.1世代のソースコードを共有してWPとPCのアプリを開発するやつですね。思ったより売れなかったので続編を書く気力が失われた…

Reduxって難しい

stateに何を持てばいいのかわからない。 入力項目はコンポーネントで保持する? アラートメッセージみたいな項目はstateに保持する? ダイアログとかってどうやって出すのがきれいなの? 誰か参考になるサンプルがあれば教えてほしい…。

小ネタ。プロジェクトをソース管理(Gitなど)に追加する方法

プロジェクト作成時にソース管理に追加しそこねたら、ソース管理に追加するには自分でgit initとかしないといけないと思い込んでましたがそうではないんですね。 ファイルメニューにしっかりソース管理に追加ってありました。

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-bootstrap -save index.htmlではbootstrapのcssを読み込んでおきましょう。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> </meta></head></html>

UWPでUserControlからメインページの画像を非表示にしたい

UWP

という感じのフォーラムの質問があった(解決されてたけど)のでGitHubにサンプルあげてみました。 Prism使ってます。 github.com UserControlへのViewModelの伝搬させてる所がポイントっちゃぁポイントかも。 こんな感じでプロパティをUserControlに用意し…

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

jsurlというライブラリが便利なのでTypeScriptから使おう

URLを文字列で組み立てるのがめんどくさい。 そんな悩みを解決してくれるのがjsurlです。 github.com TypeScriptの型定義は tsd install jsurl -save で落としてこれます。JavaScriptは…。npmに見当たらなかった(npmのjsurlは別ライブラリでした)のでgithu…

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の雛形です。…

Visual StudioでReact + TypeScriptをするプロジェクトテンプレートを更新しました

gulpfile.jsを追加してjestでテストできるようにしました。 testタスクを実行するとテストが走ります。カバレッジは取れません…。 1drv.ms

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

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

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

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

TypeScriptで名前付き引数がとりたい人生だった

単純なオブジェクトを作るときに、こんなのやりたかったんです。 class Person { constructor( public name: string = '', public age: number) { } } var obj = new Person(name: 'hoge'); console.log(obj.name); でも、名前付き引数はTypeScriptでサポー…

Visual Studio CodeでTypeScriptのデバッグ

Expressを使ったアプリをデバッグしてみたいと思います。 プロジェクトの作成 フォルダを作って以下のコマンドを打って必要なモジュールをインストールしておきます。 npm init -y npm install express --save npm install gulp gulp-typescript gulp-source…

TypeScriptのプロジェクトをAzure Web Appにgitデプロイする

TypeScriptのプロジェクトをgit使ってdeployしたいなぁと思います。 問題点 TypeScriptのプロジェクトではgitにJSが含まれてない。でもAzureにはJSをpushしないといけない。 とった対策 デプロイ用ブランチを作って、そこでJS追加してデプロイした。 デプロ…

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

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

ReactiveProperty v2.4.2をリリースしました

www.nuget.org ToReactivePropertyAsSynchronizedで、ignoreValidationErrorValueが無視されてたという報告を受けたので修正しました。 多分C#6への置き換えのときにチョンボしたと思われます…。

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を除い…