かずきのBlog@hatena

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

TypeScript

Promise 対応していないコールバック形式のライブラリーを Promise にしたい

Node.js v8.1 で util.promisify っていう関数が追加されてたんですね。 古き良き伝統にしたがったコールバック形式の関数を Promise を返す形にしてくれる。つまり await 出来るようになる! nodejs.org ということで、今時コールバック形式のライブラリな…

TypeScript で Jest 使ってみた

TypeScript(というか JavaScript) のユニットテストって何がいいのかなぁというのがわからなかったので、とりあえず自分の観測範囲でよくみる感じの Jest 試してみました。 とりあえずシンプルに以下のコマンドをうってコンソールで始めてみようと思います。…

Vue.js で Router 使ってみよう

Router 使うと簡単に画面遷移するアプリ作れるってことで試してみましょう。 まぁ、Vue.js は公式ドキュメントがとてもよくて、さらには日本語もあって読みやすい!!なので、公式みたらわかるようになってるのですが、とりあえず試してみたログということで…

TypeScript を使ってサーバーレスで WebSocket サーバーを作ってみた

先日 Microsoft Azure のサーバーレスプラットフォームの Azure Functions に SignalR Service bindings の一般提供開始のアナウンスがありました! azure.microsoft.com リポジトリはこちら。 github.com ということで、これもまた先日 Azure Functions Cor…

Azure Functions を TypeScript でやってみた「ハローワールドから Durable Functions まで」

公式のブログはこちら。 azure.microsoft.com 2019/02/25 くらいに出た Azure Functions Core Tools の 2.4.401 のリリースノートに - Add TypeScript templates の文言が。 これは試すしかないでしょう。ということでアップデートして func init してみます…

色々なプログラミング言語で 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-bootstrap -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でサポー…