かずきのBlog@hatena

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

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…

React NativeをTypeScriptで(VS Code編)

2016/01/11追記:以下の記事を参照してください blog.okazuki.jp react-nativeをVS CodeからTypeScriptでHello worldしてみました。エミュレータはVisual Studio Emulator for Androidです。 プロジェクトの作成 プロジェクトを作りたいフォルダにコマンドプ…

Visual Studio Codeを使ってサーバーもクライアントもTypeScriptで開発!(Express + React)

Expressを使ってサーバーサイドをTypeScriptで開発。Reactを使ってクライアントサイドをTypeScriptで開発。 1言語で開発できるって素晴らしいことですよね。 個人的にはC#でやりたい!すごくやりたい! 環境 Windows 10 Visual Studio Code Node npmで以下の…

Visual Studio CodeでTypeScript JSXをコンパイルしたい

高機能エディタVisual Studio Codeをちょろっと試してみました。 まずは、reactのコードがコンパイルできるようになるところまでを目指してやってみます。 作業フォルダの作成 VS Codeはプロジェクトファイルとかいう概念がなさそうでフォルダを開くところか…

react-nativeをTypeScriptでいってみた

2016/01/11追記:以下の記事を参照してください blog.okazuki.jp はじめに react-nativeがWindowsでも動いた(Androidだけ)ので、試しにTypeScriptで書いてみたいとおもいます。 プロジェクトの作成 以下のコマンドを打ち込んでプロジェクトのひな型を作成…

TypeScript JSX + ReactでReduxな画面遷移のある簡単なTODOアプリを作ってみました

はじめに Reduxをちょっとやり始めたので、無理やりですが画面遷移(react-router)を含めたTODOアプリサンプルを作ってみたいと思います。 やりながら書くので、最終結果がダメでしたというオチになってるかもしれない点ご了承ください。 プロジェクトの作…

React + TypeScript JSX + Reduxで非同期処理を呼ぼう

公式ドキュメントのここらへん。 Async Actions | Redux そもそも 普通のSPAだと、AJAX呼び出しとかで非同期な処理が盛りだくさん。Reduxでどうやるの?という風になるのですが、これが素のReduxのライブラリだけだと難しいということで、redux-thunkという…

TypeScript JSX + ReactでReduxなカウンターアプリ

Reduxなカウンターアプリを作ってみました。 TypeScript JSXで。 感想としては、この規模だとFluxより楽な気がします。規模が大きくなるとどうなるのか未知数。FluxのChatサンプルでも書き直してみたらわかるかなぁ。 Counterの作成 まずはクラスがないと始…

TypeScriptのコンソールアプリでReduxを触ってみた

FluxとかReduxとか色々あるみたいですね。 Reduxは、以下のサイトにまとまってます。 rackt.org (state, action) -> newStateというreducerというのを組み合わせたのを使うっぽい。とりあえず習うより慣れろなのでカウンターアプリのコンソールアプリを作っ…

TypeScriptでobject-assignを使う

オブジェクトのコピーをさくっとやってくれる便利なライブラリobject-assignを使ってみました。 インストールはnpmとtsdで以下のような感じ。 npm install object-assign --save tsd install object-assign 使う側のコードはこんな感じ。requireで読み込んで…

TypeScriptでNodeのHello world

簡単なHTTPサーバーを試してみました。 HTTPモジュールを読み込んで基本的なHTTPのサーバーをつくる。 import * as http from 'http'; var server = http.createServer(); var port = 1337; server.on('request', (req: http.ServerRequest, res: http.Serve…

React + TypeScript JSXでInteractを使う

先日見つけたInteractというライブラリを使って簡単なサンプルを作ってみました。 github.com 灰色の場所をクリックすると矩形が追加されます。矩形はドラッグで移動させることと、端っこをつまむことでリサイズが可能です。 ポイント interactは、npmではin…

Interactというライブラリ

interactjs.io ドラッグアンドドロップや、リサイズ、移動など色々な操作を簡単に記述できるというライブラリを見つけたのでメモです。 TypeScriptの型定義もありますが、ちょっと罠がありまして… npmからインストールするときはinteract.jsという名前でイン…

React + TypeScriptでjestを使ったテストをする

Reactを使ったアプリのテストにはjestっていうのが使われるっぽいですね?jest知らない子だ。 facebook.github.io Mock by Defaultとか激しいですね。 軽く使ってみる テスト対象のスクリプトのあるフォルダに__tests__というフォルダを作ってその下に「***-…

React + TypeScriptで入力値チェック

入力値チェックしたかったら、こんな感じのを用意するのかなというのを作ってみました。 業務で使うなら、もうちょっと汎用性減らして数字用とか○○コード用とかっていう風に作ってもいいのかもね。 interface InputTextBoxProps extends React.Props<{}> { l…

ReactRouter + TypeScriptでパラメータを受け取る方法

ルートの定義でdetail/:idみたいにしてたら、idという名前のパラメータを受け取ることが出来ます。受け取り方は以下のような感じで。 ReactRouter.RouteComponentPropsの第二型引数にパラメータの型を指定します。 interface DetailComposerProps extends Re…

React + TypeScript JSXでマスター詳細画面みたいなの

React + react-router + react-datagrid + whatwg-fetch + react-bootstrapくらいを使ってます。 github.com 一応ASP.NET WebAPIで作ったWebAPIを呼び出しています。 グリッドにAPIからとってきたものを表示して 行を選択すると編集画面に移動。 感想として…

react-routerでコンポーネント外から画面遷移する(TypeScript版)

react-routerにはbrowserHistoryというものがあるので、それをimportして使えばいいよ!って書いてある。 github.com しかし、型定義にそんなものはない。 じゃぁどうするの? historyモジュールのcreateHistoryを呼んだものをグローバルに用意しておきます…

ReactとTypeScriptでデータグリッド表示するのに使えるreact-datagrid

業務で使おうと思ったらそれなりのデータグリッド部品が必要になりますよね。そんなとき、ちょっと我慢すれば使えそうなreact-datagridを紹介したいと思います。 react-datagrid npm install react-datagrid --save tsd install react-datagrid で導入が可能…

Visual StudioとTypeScriptによるReact入門という薄い本をKindleに出してみました

あけましておめでとうございます。 年末割とReactしてたので自分の復習がてらWordにまとめてKidnelに放流してみました。 www.amazon.co.jp 初心者なので、間違ってる事書いてたら教えてください。

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

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…