TypeScript
Node.js v8.1 で util.promisify っていう関数が追加されてたんですね。 古き良き伝統にしたがったコールバック形式の関数を Promise を返す形にしてくれる。つまり await 出来るようになる！ nodejs.org ということで、今時コールバック形式のライブラリな…
TypeScript(というか JavaScript) のユニットテストって何がいいのかなぁというのがわからなかったので、とりあえず自分の観測範囲でよくみる感じの Jest 試してみました。 とりあえずシンプルに以下のコマンドをうってコンソールで始めてみようと思います。…
Router 使うと簡単に画面遷移するアプリ作れるってことで試してみましょう。 まぁ、Vue.js は公式ドキュメントがとてもよくて、さらには日本語もあって読みやすい！！なので、公式みたらわかるようになってるのですが、とりあえず試してみたログということで…
先日 Microsoft Azure のサーバーレスプラットフォームの Azure Functions に SignalR Service bindings の一般提供開始のアナウンスがありました！ azure.microsoft.com リポジトリはこちら。 github.com ということで、これもまた先日 Azure Functions Cor…
公式のブログはこちら。 azure.microsoft.com 2019/02/25 くらいに出た Azure Functions Core Tools の 2.4.401 のリリースノートに - Add TypeScript templates の文言が。 これは試すしかないでしょう。ということでアップデートして func init してみます…
今日、マイクロソフト本社から来た David さんとお昼ご飯をしたときに教えてもらえた彼のプロダクトが凄かったので紹介したいと思います。 quicktype.io quicktype JSON をペーストするとシリアライズ・デシリアライズするためのコードを出力してくれるサー…
dotnet new angularでプロジェクト作成して、webpackしてdotnet runで実行できることはわかりました。 では、Visual Studio Codeで快適に作業するにはどうするのがいいのか？ということになりますよね！ Visual Studio Codeで開発するには以下のような感じで…
以下の記事の続きです。 blog.okazuki.jp ひな形に自分のプログラムを追加してHello worldしてみます。 ClientAppフォルダにAngularのプログラムの本体がいます。そこを弄っていきます。 ClientApp/app/componentsフォルダにhelloworldフォルダを作りましょ…
2017/03/05 日時点の情報です @angular/cliとか使って始めるのもいいですが、これだとサーバーサイド何でつくるの？？という感じになってしまうので、C#erとしては今やるならASP.NET Coreでしょ！ということで始め方をメモっておきます。 結論としてはdotnet…
JavaScript界隈のフレームワークの組み合わせがファッキンホットですよね。個人的にはreactに頑張ってほしいと思いつつAngularJSも2が正式リリースされたら追いかけてみようかなというスタンスです。 といいつつ、最近reactを放置してたら自分のフィールドの…
以下のコマンドでbetaのTypeScriptを入れたとします。 npm install -g typescript@beta でもVisual Studio Codeは、通常の設定だと安定板のTypeScriptをターゲットにしています。 そんなときは、ファイル→基本設定→ユーザー設定を開いてTypeScriptのlib.*.d.…
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-routerをreduxで使うためのreact-router-reduxというものがあります。 先日、これの型定義ファイルが公開されてたので使ってみました。 react-router-reduxの公式サイトはこちらになります。 github.com 素のreactのプロジェクトに対して… react-redux…
前の記事で、カメラからとった画像を取得することが出来るようになりました。 今度はこれをアップロードしてみたいと思います。 といっても手抜き実装でbase64でエンコードしたものを、JSONの文字列として送って、サーバーサイドではそれをデコードしてさく…
最近はカメラ画像を取得することもできるらしい。ポイントは、inputのtypeをfileにしてacceptをimage/*:capture=cameraにするところです。 撮影した画像のプレビューを表示するにはimgタグを使います。File APIを使って画像を読み込んで使います。ソースで書…
react-routerで画面遷移のリンクといえばLinkタグかIndexLinkタグを使います。 でも、react-bootstrapのNavを使って画面の上部のタブみたいなのを作ろうとすると、Linkタグは使えません。 そんな時は、プログラムからhistoryを制御してやるといいです。 こん…
以下の例にあるようなDeep formを作ってみようと思いました。 erikras.github.io 結果 型定義にはそんなものなかった。 解決策 any最高！ import * as React from 'react'; import * as Redux from 'redux'; import * as ReduxForm from 'redux-form'; impor…
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>
redux-formのformになるクラスにinitialValuesというプロパティに値を設定してやると、フォームデータが初期化されるくさい。 注意点としては、redux-formの型定義ファイルにinitialValuesが定義されてないので自分でプロパティをはやしてやる必要があるとい…
redux-formのhandleSubmitに検証処理を渡すことでサブミット時に検証ロジックを走らせることができます。 こいつは、非同期前提なのでPromiseを返す感じのシグネチャになってます。 フォーム部分のコードの抜粋はこんな感じになります。validateContentメソ…
1つ前の記事で同期的な検証をやりました。redux-formは非同期な検証処理もサポートしています。 使い方は簡単、Primiseを返す検証ロジックを作って、reduxFormメソッドを呼び出すときasyncValidateに渡すだけ。非同期の検証のロジックのトリガーとなるフィー…
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…
入力フォームを作るのに便利そうなredux-formというのがあります。 erikras.github.io TypeScriptの型定義もあるので使ってみました。とりあえずシンプルな例から。 redux-formを使うには、reducerでReduxFormのreducerをformという名前でcombineReducersし…
URLを文字列で組み立てるのがめんどくさい。 そんな悩みを解決してくれるのがjsurlです。 github.com TypeScriptの型定義は tsd install jsurl -save で落としてこれます。JavaScriptは…。npmに見当たらなかった（npmのjsurlは別ライブラリでした）のでgithu…
Reduxの勉強がでら、ログインして一覧画面が出てデータの編集ができるみたいなのを作ってみました。 サインインの画面が出てきて admin/p@ssw0rdでサインインするとデータの一覧がでて、一応ページ切り替えが出来て 編集リンクをクリックすると編集画面が出…
こういう表示とデータを疎結合にしたときに問題になるのがダイアログ系。 頭をひねった感じこんなのでいけるんじゃないかっていう感じのが出来ました。 コンポーネント まず、アラートを出すコンポーネントを準備します。UIは持たないrenderメソッドはnullを…
ref属性って関数渡せるんですね。こんな風に。 export default class IndexPage extends React.Component<IndexPageProps, IndexPageState> { // ref保持しとくフィールド private x: HTMLInputElement; ... 省略 ... private handleSubmit(e: React.SyntheticEvent) { e.preventDefault(); v</indexpageprops,>…
gulpfile.jsを追加してjestでテストできるようにしました。 testタスクを実行するとテストが走ります。カバレッジは取れません…。 1drv.ms
ASP.NET WebAPI2でサーバーサイドを開発してクライアントサイドをReact使ってTypeScriptで開発することを想定したプロジェクトテンプレートを作りました。OneDriveに置いてるので、適当にドキュメントフォルダのVisual Studio 2015\Tempaltes\Project Templa…
単純なオブジェクトを作るときに、こんなのやりたかったんです。 class Person { constructor( public name: string = '', public age: number) { } } var obj = new Person(name: 'hoge'); console.log(obj.name); でも、名前付き引数はTypeScriptでサポー…
