かずきのBlog@hatena

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

TypeScript

色々なプログラミング言語で JSON をパースするためのイカしたサービス quicktype

今日、マイクロソフト本社から来た David さんとお昼ご飯をしたときに教えてもらえた彼のプロダクトが凄かったので紹介したいと思います。 quicktype.io quicktype JSON をペーストするとシリアライズ・デシリアライズするためのコードを出力してくれるサー…

ASP.NET CoreでAngularをする VSCodeを使おう

dotnet new angularでプロジェクト作成して、webpackしてdotnet runで実行できることはわかりました。 では、Visual Studio Codeで快適に作業するにはどうするのがいいのか?ということになりますよね! Visual Studio Codeで開発するには以下のような感じで…

ASP.NET CoreでAngularをするHello world

以下の記事の続きです。 blog.okazuki.jp ひな形に自分のプログラムを追加してHello worldしてみます。 ClientAppフォルダにAngularのプログラムの本体がいます。そこを弄っていきます。 ClientApp/app/componentsフォルダにhelloworldフォルダを作りましょ…

ASP.NET CoreでAngularをする下準備

2017/03/05 日時点の情報です @angular/cliとか使って始めるのもいいですが、これだとサーバーサイド何でつくるの??という感じになってしまうので、C#erとしては今やるならASP.NET Coreでしょ!ということで始め方をメモっておきます。 結論としてはdotnet…

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

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

Visual Studio Codeでbeta版のTypeScriptを使う方法

以下のコマンドでbetaのTypeScriptを入れたとします。 npm install -g typescript@beta でもVisual Studio Codeは、通常の設定だと安定板のTypeScriptをターゲットにしています。 そんなときは、ファイル→基本設定→ユーザー設定を開いてTypeScriptのlib.*.d.…

TypeScriptの型定義はtsdからtypingsへ?

npm install tsd --global と打ち込むと… npm WARN deprecated tsd@0.6.5: TSD is deprecated in favor of Typings (https://github.com/typings/typings) - see https://github.com/DefinitelyTyped/tsd/issues/269 for more information と表示されるよう…

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

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

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

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

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

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

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 どうせなので、最初から手順を書い…

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

yoを使ってExpressJSをTypeScriptで始めてみよう(VS Code)

Yeomanを使って簡単にTypeScriptでExpressJSを始めてみたいと思います。 The web's scaffolding tool for modern webapps | Yeoman npm install -g yo # まだインストールしてない場合 yo yoコマンドを打ち込んだらウィザードが始まります。Install a genera…