かずきのBlog@hatena

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

2015-01-01から1年間の記事一覧

TypeScriptでmaterial-uiするときのreact-tap-event-plugin

Reactのver1までは以下のおまじないがいるらしいんですが www.material-ui.com react-tap-event-pluginに型定義が無いっぽいんですよね。 ということでこんな感じでいけました。 declare module 'react-tap-event-plugin' { function injectTapEventPlugin()…

TypeScriptを使ってwhatwg-fetchを使ってライトウェイトにAJAXしたい

Reactを使ってるとAJAX通信のためだけにjQueryを参照することもあります。でも、それだけに使うにはあまりにもヘビーだ。ということで、色々検索してたらwhatwg-fetchというものがあることを知りました。これを使ってみましょう。 github.com インストール …

TypeScriptでmaterial-ui-mdiを使う

material-uiのアイコンセットでmaterial-ui-mdiっていうのがあります。 github.com ちょっとアイコンセットがほしかったので試そうとしたらTypeScriptの型定義がないorz ということで無ければ作ればいいじゃない?ということで、こんな感じのT4 Templateを書…

2015年のアクセス結果から人気の高かった記事とは #とは

最近Reactにお熱な感じですが、このBlogのメインコンテンツはXAML系テクノロジのUWPやWPFあたりになります。そんなBlogでトップページを除くアクセスの多かった記事Top3を紹介したいと思います。なんとなく思いつきです。 No1は…! blog.okazuki.jp アッ、ハ…

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のインスト…

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

www.nuget.org クリスマスリリース!というわけでもなく、バグっぽい挙動の報告がきたのでなおしました。はい。 v2.4.1 バグフィックス ReadOnlyReactiveCollectionでDispose時にコレクションの要素のDisposeが呼ばれないケースがある問題に対応

ReactiveProperty v2.4.0-pre1を放流しました

www.nuget.org ReactiveProperty v2.4.0-pre1をNuGetに放流しました。 今回は、Xamarin.iOSのUIViewに対してSetBindingメソッドを使えるようにしたりしました。Xamarin.Androidにしか今までなかった機能をポーティングした感じです。が…、手元にiOSとMacがな…

めとべや東京 10でUWPの新しいバインディングについて話してきました

UWP

スライドを公開しておきます。 めとべや東京10 Universal Windows Platform appの新しいバインディング from 一希 大田

FriendlyでFrameを使ったアプリをテストする その2

blog.okazuki.jp 1つ前の記事でWPFContentControlなるものをこさえてまでやった方法ですが、Friendly作者の石川さんに聞いたらさくっともっといい方法を教えてもらえました。 AppVar型にもLogicalTreeメソッドはあるのじゃよ 個人的にWPFContentControlを作…

FriendlyでFrameを使ったアプリをテストする

追記 blog.okazuki.jp この記事の内容より良い方法がありましたので上の記事に書いてます。 あと、この記事に書いたWPFContentControl足してもらえたみたいです。 元記事 という要望がありました。 WindowControlのLogicalTreeで辿ればいいや!って思ってた…

Friendlyを入門してみた

デスクトップアプリのテストを行うためのFriendlyというライブラリのハンズオンの補助講師してきた(受講者に非常に近い立ち位置で)のでちょっと試してみました。WPFの足し算アプリを用意してみた。XAMLがわかればテストできる感じなので、XAMLだけさくっと…

R言語で相関係数

R

2つの数字データがあって、相関ってあるの?っていうのが知りたい。そんなときに使えるのが相関係数というものみたいです。 相関係数を求める前に共分散というのを求める必要があります。共分散というのは、2つのデータの偏差(平均と引いた数)を掛け算して平…

R言語で偏差値って

R

はぁ…数学苦手…。 R言語って統計解析がお得意なんですって。 すべての数字を合計して数で割った平均と、ソートして真ん中の値を取り出す中央値くらいは知ってるけどそれ以上はちょっと…という感じですね。 平均と中央値を出す関数はmeanとmedianという関数と…

R言語で文字列を分割したい

R

stringrパッケージにある、str_splitでできます。第一引数に分割したい文字列、patternに分割する区切りを表す正規表現を指定できます。カンマか-で分割したい場合は以下のような感じになります。 require(stringr) x <- "a,b,c-d-e-f" y <- str_split(x, pa…

R言語のベクトル

R

同じ型をまとめて管理するものでc()関数で作るらしい。 x <- c(1,2,3,4,5) print(x) 出力結果 [1] 1 2 3 4 5 1~5みたいに規則性のあるものは、開始:終了といった感じでかけるみたい。 x <- 1:5 print(x) 出力結果は同じ。 Rはベクトルに対する演算が便利に…

R言語のifelse

R

ExcelのIF文みたいに使えます。 ifelse(1==1, print("true case"), print("false case")) ifelse(1!=1, print("true case"), print("false case")) 実行すると以下のような感じ。 [1] "true case" [1] "false case" ベクトルに対しても使える点が便利っぽい…