Yeomanを使って簡単にTypeScriptでExpressJSを始めてみたいと思います。 The web's scaffolding tool for modern webapps | Yeoman npm install -g yo # まだインストールしてない場合 yo yoコマンドを打ち込んだらウィザードが始まります。Install a genera…

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

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

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

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

2016/01/11追記：以下の記事を参照してください blog.okazuki.jp はじめに react-nativeっていうのを使うと、iOSとAndroidアプリまで作れるっていうじゃないですか。 ということで、AndroidアプリのHello worldくらいを試してみたいと思います。 iOSじゃない…

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

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

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

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

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

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

このお題で2個より多い時って言われて悩んだ結果です。 blog.okazuki.jp サイズを*で指定すれば、GridSplitterは画面のサイズを超えてリサイズされないという特性をもちます。これでOK。じゃぁあとは保存と復元をどうやるかですが、こんな感じでいけます。 p…

という方法です。 ColumnDefinitionのMaxWidthを指定してやれば実現できました。こんな感じのConverterを用意しておきます。 using System; using System.Collections.Generic; using System.Globalization; using System.Linq; using System.Text; using Sy…

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

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

最新版を別途インストールしてもタスクランナーエクスプローラーとかから実行するときに使われるnodejsのバージョンが古いです。 これを解決するのに以下のサイトが非常に参考になりました。 qiita.com でも、この設定ってどこに保存されるんだろう…。 危惧…

JavaScript開発のお供としてのタスクランナーのgulp。これのgulpfile.jsをインテリセンスが効く環境でかけたら入門できるかも…と思いVisual Studio Codeとか色々あさってましたが、灯台元暮らし的にVisual Studio 2015でインテリセンスがききました。ハイ。 …

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

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

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

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

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

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

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