TypeScript

PlaywrightでMUIのDialogをテストする

Playwright で MUI の Dialog コンポーネントをテストするのに手間取ったのでメモ。 import { Button, Dialog, DialogTitle, DialogContent, DialogActions, DialogContentText, } from "@mui/material"; import { test, expect } from "@playwright/experim…

React Router の Link と Material-UI の ListItem を組み合わせる

Material-UI と React Router を使う SPA で、必ずと言って良いほど書いているので、いい加減メモしておく。 import React from 'react'; import { NavLink as RouterLink, NavLinkProps as RouterLinkProps, useLocation, } from 'react-router-dom'; impor…

Hello React Hooks

React からだいぶ離れている間に、16.8 で Hooks が出て、React を使った Web アプリ開発のパラダイムがかなり変わったようだ。Hooks 以前と以後に分かれるのでは、と思うくらいに。久しぶりに仕事で React を触ることになりそうなので、Hooks は試しておか…

Cloud Functions as a Frontend for Firestore

Web から Firestore を使うと、アクセスキーが開発ツールから丸見えになってしまうのが不安。いやまぁ、ちゃんとアクセスルールを設定すれば問題ないんだろうけど、自分の Firestore スキルはまだそこまでではない。うっかり設定し忘れもあり得る。 いっそ、…

TypeScript でも React Meets Redux

React を使って TODO サンプルを TypeScript で書き直したので、 今度はさらに Redux も使ってみる。 まずは Redux の型定義ファイルをインストール。 tsd query redux --action install --resolve tsd query react-redux --action install --resolve 特にひ…

TypeScript で React

今まで書いたサンプル程度の規模でも、 実行時に踏むまでバグに気付かないことが結構あって、 実際踏むと萎える。 React で規模の大きい SPA 作っていたらと思うとゾッとする。 コンパイル時に分かれば良いのに。 そうだ。 TypeScript で書いてみよう。 Java…

TypeScript で Backbone のサンプルを書き換えてみた

はじめに CoffeeScript や Haxe みたいな、JavaScript にコンパイルする言語は、デバッグのやりにくさを懸念して、ずっと食わず嫌いしていた。それは TypeScript が出た当初も変わらなかったんだけど、先日 SourceMap を知って懸念は払拭された。Chrome で変…