かずきのBlog@hatena

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

TypeScript

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

Visual Studio上でTypeScript JSXを使ってReact.js「低レベルなタグの組み立て」

createElementメソッドを使ってせっせとタグを組み立てることができます。タグ名、属性、子要素という感じみたいです。 /// <reference path="typings/tsd.d.ts" /> var h1 = React.createElement('h1', { className: 'header' }, 'これはReactです'); var p = React.createElement('p', null, 'Re</reference>…

Visual Studio上でTypeScript JSXを使ってReact.js「ローカルにreact.jsのファイルを抱え込もう」

先ほどは、CDN上のReactを読み込みましたが、手元にreactのjsファイルを持ってくる場合。 bowerを使いました。(Visual Studio関係ない) npm install bower -g と入力してbowerを入れます。bowerはgitを使うみたいなので、gitをインストールしてPATHを通し…

Visual Studio上のTypeScript JSXでReactのHelloWorldしてみた

試行錯誤した結果です。 Reactは言わずと知れたFacebookが作ってるライブラリですが、最近Visual Studio 2015 Update 1でtsxというTypeScriptでJSXをサポートするみたいなものが出てきました。今回はこれを使って遊んでみたいと思います。 node.jsのインスト…

TypeScriptでIndexedDBのIDBKeyRangeを使うときの注意点

こんなバグがあるバージョンのTypeScriptもあります。 typescript definition from lib.d.ts - Stack Overflow 拡張機能からTypeScriptで検索して新しいの入れたらなおってました。

WinJSのListViewでクリックされた項目に応じた処理をする

TypeScriptでページに対応するViewModelを作ります。今回はリストを持っただけのシンプルなやつ。 ポイントはアイテムが選択されたときに呼び出されるようにするclickプロパティ。WinJS.Utilities.markSupportedForProcessingを呼び出してるところ。これをす…

WinJSとTypeScriptの組み合わせ

WinJSにはTypeScriptの型定義も用意されています。winjs.TypeScript.DefinitelyTypedがそれになります。これを使うとWinJSに用意されてるWinJS.ClassやWinJS.Namespaceとか使わなくても名前空間とかクラス定義ができるのが個人的には性に合ってそうな気がし…

TypeScript + AngularJS「リソースを使う」

結構めんどくさい。とりあえず動いたのでメモ。 ng.resource.IResourceを継承したものを作る プロパティを生やす IResourceServiceからIResourceClassを作る IResourceClassのgetの戻り値を自作のIResourceを継承したものにキャスト あとは好きにする /// <reference path="scripts/typings/angularjs/angular.d.ts" /> /</reference>…

TypeScript + AngularJS + ASP.NET WebAPI + ASP.NET Identity + Form認証でサインイン処理してみよう

カオスな感じですが、AngularJSを使ってForm認証を行うサンプルを作成しました。ちょっと自信がないので、突っ込み歓迎です…。 TypeScript + AngularJSでASP.NETのForm認証を行う in C#, JavaScript for Visual Studio 2013 基本的にはASP.NET Identityでユ…

不可解なエラーのとき確認するポイント

ただのメモです。 AngularJS使っててエラーがでたら以下の点を確認すること。 必要なモジュールは読み込まれているか angujar.module("hoge", [ここを確認]) 必要なjsファイルは、ちゃんとページに読み込まれているか typoしてないか $routeProviderを$rootP…

ルート定義のresolve

ルート定義のwhenメソッドの第二引数のresolveでは、コントローラに注入したいデータを取得する処理を定義することが出来ます。 /// <reference path="scripts/typings/angularjs/angular.d.ts" /> /// <reference path="scripts/typings/angularjs/angular-route.d.ts" /> module TypeScriptAngularJSApp2 { angular.module("MyApp", ["ngRoute"]) // コントローラの定義。value1とvalue2を</reference></reference>…

AngularJSとTypeScript「サービスを共有してページ間のデータ共有」

サービスのインスタンスは1つ。ということは、同じサービスをページ間で共有すればデータを渡すことが出来るということです。ということでやってみました。 /// <reference path="scripts/typings/angularjs/angular.d.ts" /> /// <reference path="scripts/typings/angularjs/angular-route.d.ts" /> module TypeScriptAngularJSApp2 { // データ共有用のサービス class SampleService { ke</reference></reference>…

ng.ILocationServiceを使った画面遷移での画面間データ渡し

とりあえずパラメータを使うのが一番楽そうです。パラメータはng.ILocationServiceのsearchメソッドにオブジェクトを渡してやるといい感じに面倒を見てくれます。 前回の処理に、ページ間のデータ渡しをコントローラに追加したコードは以下のような感じにな…

TypeScriptとAngularJS「コントローラ起点の画面遷移」

ng.ILocationServiceを使います。 ルートの定義 $locationでng.ILocationServiceをコントローラにインジェクションできるので、そいつのpathメソッドにURLを指定することで画面遷移が出来ます。 /// <reference path="scripts/typings/angularjs/angular.d.ts" /> /// <reference path="scripts/typings/angularjs/angular-route.d.ts" /> module TypeScriptAngularJSApp2 { // Page1用のス</reference></reference>…

AngularJSとTypeScript「Directiveのハローワールド」

AngularJSのかなり強力なディレクティブという機能のハローワールドしてみました。こいつAngularJSでDOM操作する処理をカプセル化する素敵なやつです。とりあえず、JavaScriptではなくてTypeScriptでは、どういう風にかくのかというのをつかむために、Hello …

TypeScriptとAngularJS「Visual Studio用プロジェクトテンプレート」

毎回NuGetからAngularJSと型定義入れたりするのがめんどくさくなったので、プロジェクトテンプレート化しました。zipのまま、TemplatesのProjectTemplatesフォルダにつっこめば使えると思います。

TypeScriptとAngularJS「ページ切り替え」

Single Page Applicationだとしても、疑似的にページ切り替えしますよね。ということで、そのための機能がAngularJSにもあります。 使い方 angular-route.js(min.js)をangular.js(min.js)の後に追加。angular.moduleのモジュール作成時に"ngRoute"への依存関…

TypeScriptとAngularJS「サービス」

サービスというものは、シングルトンで管理されるコントローラあたりから使うものみたいです。作り方はコントローラと大して変わらないけど、モジュールのserviceメソッドで登録するらしい。 ということで、サービスとスコープとコントローラを定義してみた…

TypeScriptとAngularJS「表示非表示を切り替えるng-show ng-hide」

お手軽にDOMの要素の表示非表示を切り替えれるっぽいということで試してみました。バックのTypeScriptは、フラグを1つもったScopeを定義して、それをtrue/falseを切り替えるだけのシンプル実装 /// <reference path="scripts/typings/angularjs/angular.d.ts" /> interface ToggleMenuScope extends ng.IScope { isShow: </reference>…

TypeScriptとAngularJS「formのサブミット時に処理をする」

入力フォームとかで使いそうです。先ほどの例では、ボタンに直接ng-clickをつけて関数を割り当ててましたが、formでやるように改造してみます。ちなみにTypeScript側は下と同じです。 TypeScriptとAngularJS「プロパティの監視とコレクションのバインド」 - …

TypeScriptとAngularJS「プロパティの監視とコレクションのバインド」

とあるプロパティの値の変化を監視して、その中身をコレクションに履歴として収集するようにするアプリを組んでみました。ここまで、すんなりいってるので怖いです。 TypeScript側 ポイントは$scopeの$watch関数。こいつに監視したいスコープのプロパティを…

TypeScriptとAngularJS「スコープにオブジェクトを持たせる」

やってることは大したことではないけど、実際のプログラムでは、スコープに持たせるのは単純なプリミティブ型ではなくてオブジェクトですよね。ということでやってみた。結果としてはちゃんと動いた TypeScript側 /// <reference path="scripts/typings/angularjs/angular.d.ts" /> module MyApp { // scopeに持たせるオ</reference>…

TypeScriptとAngularJSでボタンクリックしてみよう

ボタンクリックに反応するようにしてみました。やり方は簡単でボタン系のタグにng-click属性つけてやればいいみたいです。 コントローラとスコープのコードは以下のような感じ。 /// <reference path="scripts/typings/angularjs/angular.d.ts" /> module MyApp { interface GreetScope extends ng.IScope { message: str</reference>…

TypeScript + AngularJSのHelloWorldしてみた

何事もHelloWorldみたいなのから。HelloWorldといっても、モジュールとスコープとコントローラ使う感じで。 プロジェクト 以下のライブラリをNuGetから突っ込みます。 angularjs angularjs.TypeScript.DefinitelyTyped スコープの定義 とりあえず、挨拶用の…

TypeScript + AngularJSでTodoのサンプルを書いてみた

2014/05/25追記 こういう書き方も出来ると紹介してもらいました。 @okazuki $scopeのメソッドの型をFunctionにしたくない場合 URL こーゆー感じで書くとコピペで済む+型チェックの恩恵が受けられるのでよいと思います。2014-05-25 02:06:40 via twicli to @o…

x軸のラベルに改行を入れたい

まぁそんなこともあるってことで。 元データがyyyyMMddHHmmssみたいなデータでこれを… MM/dd HH:mm みたいにラベルに表示したいってときです。ぐぐったらstackoverflowに答えが。もとのラベル決して、tspanでテキスト区切って座標の調整が必要みたいです。 j…

d3.jsのコレクション操作系関数

いろいろあるんですね…。知らないと損しちゃう。 D3: Array methods : circumstance evidence 個人的に特に便利と感じたのはnest関数からのkeyやrollupです。keyがgroup byみたいなものでrollupがグルーピングしたものを集計する処理です。 画面用にこんなHT…

TypeScriptでthree.js

今日デブサミ2013 Day0に行ったんですが、デバイスとかセンサーで得た情報を視覚化するのって大事だなと思ったりしたんですが、自分にはその手段がないということに気付きました。3Dグラフィックとか現実をシミュレートするような基礎的な知識が何もない。 …

TypeScriptとd3.jsで折れ線グラフ描いてみた

ということで、これまでの練習の成果という感じで折れ線グラフを1つ描いてみた。 TypeScriptとd3.js - かずきのBlog@hatena TypeScriptとd3.jsでグラフ描こうぞ - かずきのBlog@hatena TypeScriptとd3.jsでグラフを描こうぞ 2 - かずきのBlog@hatena 点と線 …

TypeScriptとd3.jsでグラフを描こうぞ 2

下の続き。 TypeScriptとd3.jsでグラフ描こうぞ - かずきのBlog@hatena y方向の値の調整 パソコンとかの描画関係のAPIの座標系は左上が0,0なのが一般的です。svgも例にもれず。でも、グラフの座標は左下が0,0だったりしますよね。ということで、y座標のスケ…

TypeScriptとd3.jsでグラフ描こうぞ

昨日の続きです。 TypeScriptとd3.js - かずきのBlog@hatena d3.jsで線を引きたい 基本的にSVGでやるのでpathを使うことになります。でもPathの書式が変態!!(XAMLとかもそうですけど、あんまり手書きするものではないですよね…) path要素の解説-SVG学習辞典…

TypeScriptとd3.js

グラフ描きたい・・・!Webで(詰んだ) HTML苦手 CSS苦手 JavaScript苦手 d3.js 苦手といっても何か使えるものはないか?ということで、探してみたのがd3.js。こいつjQueryみたいなセレクタで要素を選択したりもできるし、グラフ描いたりもできるとは…。素…