2019.08.14
TestCafe TypeScript UITestAutomation ブラウザ操作
TestCafe ページオブジェクトパターン この記事では、ページオブジェクトパターン(ページモデル)を用いた TestCafeのコーディング手法を紹介する。 前回のおさらい 前回のような、手続き型1のコードで書いたテストシナリオは以下のとおりである。 これだと、テストのシナリオの中に、ページのHT …More Read
2019.06.19
Node.js TestCafe TypeScript UITestAutomation
TestCafe入門 この記事では、TestCafeと呼ばれるフレームワークの入門を扱う。 概略 ユーザーのブラウザ操作(以下UI)を模倣して、ウェブページ・ウェブアプリケーションを操作することにより、UIテストを代行するフレームワーク JavaScript、CoffeeScript、TypeScr …More Read
2017.10.02
create-react-app React TypeScript
Reactでデータ集合に対してリスト表示する方法をまとめます。 List データとしてarrayを考え、それをリスト表示します。 map()を用いてarrayの要素を<li>に射影する、が基本方針です。 表示だけならばこれで動くには動くのですが、コンパイル時に警告が出るはずです。 実はこ …More Read
2017.10.02
create-react-app React TypeScript
Reactにおいて、条件に応じた表示の切り替え方法についてまとめます。 要素を変数に入れる 条件による表示の分岐をさせたいとき、変数にJSX要素を入れておき、後からそれを入れ込むという方法がとれます。 今回の例ではstateのshowの値に応じて表示するか決定しています。また、ボタンのクリックにより …More Read
2017.10.02
create-react-app React TypeScript Webpack
create-react-appを用いて生成したReactプロジェクトにおいて、コンポーネントにCSSを適用する方法を紹介します。 インライン 通常のHTML要素がインラインでスタイルを適用できるとの同じ要領で、ReactコンポーネントもJSXの中にインラインでスタイルを記述することができます。 J …More Read
2017.09.22
React TypeScript
Reactでイベントの扱い方の基本を紹介します。 イベントハンドラ 今回はテキストの入力(inputタグの変更イベント)に応じて別要素の表示が変わるコンポーネントを作成してみます。 次のような動きです。 早速ですが上記のように動くコンポーネントを下に載せます。 JSX内のinput要素のonChag …More Read
2017.09.20
Material-UI React TypeScript
React+TypeScript環境にMaterial-UIを導入する手順と簡単な使い方を紹介します。 Material-UI Material-UIは、Google Material DesignをReactのコンポーネントとして実装したコンポーネント群です。 Material Designの基準 …More Read
2017.09.20
create-react-app React TypeScript
Reactの肝であるコンポーネントの基本についてまとめたいと思います。 React+TypeScriptの環境構築については前回の記事を参照。 React: v15.6.1 コンポーネント Reactはコンポーネント指向に基づいたライブラリです。 コンポーネントと呼ばれるUI部品を定義し、それらを組 …More Read
2017.09.13
create-react-app React TypeScript
SPAのライブラリ/フレームワークとしてはデファクトスタンダードとなった感があるReact。 (最近だとVue.jsの話題もよく見ますね) まあ今更感はありますが、Reactの素振りをまとめていきます。 Angularを使っているときにTypeScriptいいなと感じたので、今回React+Type …More Read