TypeScript
Expressを使ったアプリをデバッグしてみたいと思います。 プロジェクトの作成 フォルダを作って以下のコマンドを打って必要なモジュールをインストールしておきます。 npm init -y npm install express --save npm install gulp gulp-typescript gulp-source…
TypeScriptのプロジェクトをgit使ってdeployしたいなぁと思います。 問題点 TypeScriptのプロジェクトではgitにJSが含まれてない。でもAzureにはJSをpushしないといけない。 とった対策 デプロイ用ブランチを作って、そこでJS追加してデプロイした。 デプロ…
過去にこんな記事を書いてて、react-nativeの型定義を手動で書き直してコンパイルするという変なことをやってたのですが、この方法をやらなくて済む構成を見つけました。 blog.okazuki.jp blog.okazuki.jp blog.okazuki.jp どうせなので、最初から手順を書い…
自分用メモ。 まず、tsconfig.jsonから。 tsconfig.json { "compilerOptions": { "target": "es5", "module": "commonjs", "removeComments": true, "sourceMap": true, "jsx": "react" }, "exclude": [ "node_modules" ] } とりあえず、node_modulesを除い…
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で書いてみたいとおもいます。 プロジェクトの作成 以下のコマンドを打ち込んでプロジェクトのひな型を作成…
はじめに 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…
先日見つけたInteractというライブラリを使って簡単なサンプルを作ってみました。 github.com 灰色の場所をクリックすると矩形が追加されます。矩形はドラッグで移動させることと、端っこをつまむことでリサイズが可能です。 ポイント interactは、npmではin…
interactjs.io ドラッグアンドドロップや、リサイズ、移動など色々な操作を簡単に記述できるというライブラリを見つけたのでメモです。 TypeScriptの型定義もありますが、ちょっと罠がありまして… npmからインストールするときはinteract.jsという名前でイン…
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 初心者なので、間違ってる事書いてたら教えてください。
Reactのver1までは以下のおまじないがいるらしいんですが www.material-ui.com react-tap-event-pluginに型定義が無いっぽいんですよね。 ということでこんな感じでいけました。 declare module 'react-tap-event-plugin' { function injectTapEventPlugin()…
Reactを使ってるとAJAX通信のためだけにjQueryを参照することもあります。でも、それだけに使うにはあまりにもヘビーだ。ということで、色々検索してたらwhatwg-fetchというものがあることを知りました。これを使ってみましょう。 github.com インストール …
material-uiのアイコンセットでmaterial-ui-mdiっていうのがあります。 github.com ちょっとアイコンセットがほしかったので試そうとしたらTypeScriptの型定義がないorz ということで無ければ作ればいいじゃない？ということで、こんな感じのT4 Templateを書…
Fluxとは。 facebook.github.io Reactで色々柔軟にできるけど、アプリ内のデータの流れを一方向に整理してみましたということみたいですね。Fluxはアーキテクチャであって、フレームワークやライブラリではないというけれど、一応公式で小さなライブラリがあ…
material-uiというものがあるというのを聞きました。 www.material-ui.com Reactでマテリアルデザインを再現するのにいい感じみたいですね。 プロジェクト作成 Visual StudioでTypeScriptのプロジェクトを作ります。 プロジェクトをPowerShellで開いてnpm in…
react-routerを使うまでのメモです。ちなみに、開始地点は、以下の記事のbrowserifyを使うようにしたプロジェクトです。 blog.okazuki.jp 型定義ファイルをダウンロード 以下のコマンドをうって型定義ファイルをダウンロードしておきます。 tsd install -sav…
