サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
中東情勢
qiita.com/taneba
この記事は、フロントエンドでTDDを実践する(理論編)の続編として書きました。 本記事では、react-testing-libraryでReactでTDDする方法をサンプルを使って解説します。 react-testing-libraryは、PayPalのエンジニアでありフロントエンドのTDDの第一人者であるKent C Doddsが、enzymeのリプレイスを意図して作ったReactのための新しいテストユーティリティです。 設計思想は、The more your tests resemble the way your software is used, the more confidence they can give you. enzymeのように実装そのもののテストをするよりも、ユーザーが使うようにテストされるべきというフィロソフィーがAPIに強く反映されています。 実際には、いくつか
この記事は リクルートライフスタイル Advent Calendar 2018 8日目の記事です。 2018/12/10更新:続編で フロントエンドでTDDを実践する(react-testing-libraryを使った実践編)を書きました。 はじめに 自分のフロントエンドチームでは、TDDでの開発フローを実施することでフロントエンド開発の課題に向き合っていきます。 今回は、一般的に難しいとされるフロントエンドでのテストについて、どんな方針でテストを書けばいいかについて書いてみたいと思います。 フロントエンド開発の課題 プロジェクトによりますが、テストに関連するものでは以下のようなものが挙げられます。 実装する仕様について、プロジェクト内でどう認識合わせするか? 開発工程のリライアビリティをどう担保するか? テストの精度、粒度をどう考えるか?(クロスブラウザ、ユーザーの操作等の副作用、コスト
この記事はリクルートライフスタイル Advent Calendar 2017の記事です JSで配列やオブジェクトの操作をする際のUtilityライブラリとして広く使われているlodashですが、lodashにはlodash/fpというモジュールが用意されています。今回はそのlodash/fpを使って、JSでの配列操作をよりエレガントに書く方法を紹介します。 はじめに この記事では、下記のような問いを共通の課題とします。 // このような配列あるとします const users = [ { id: 1, name: 'travis', age: 36, active: true }, { id: 2, name: 'fred', age: 40, active: false }, { id: 3, name: 'berney', age: 31, active: true }, { id:
実際の現場で使えるstyled-componentsのデザインパターンを紹介します。 なお、styled-componentsのみで完結するパターンについて記述しており、他のライブラリと組み合わせるようなパターンについては紹介しません。 随時更新・追加していきます。 基本パターン styled-componentsは、reactのコンポーネントに与えられたpropsを参照し、propsに応じてstyleを出し分けることが可能です。 const Button = styled.button` background: ${props => props.primary ? 'palevioletred' : 'white'}; color: ${props => props.primary ? 'white' : 'palevioletred'}; font-size: 1em; margin:
はじめに 自分は普段フロントエンドエンジニアとして、React Reduxなアーキテクチャのアプリを作ることが多いのですが、stylingにstyled-componentsを導入しています。今回は、styled-componentsでのCSS設計について書いてみたいと思います。 styled-componentsとは JSでstyleを記述するCSS in JSのライブラリで、2019年8月現在最も人気のあるライブラリです。タグ付きテンプレートリテラルをうまく使った独自性と、明快なAPIでCSS in JSの火付け役にもなり、同じ思想を持った亜種ライブラリ(paypal/glamorous, zeit/styled-jsx等)が続々と出て来るなどある種のブームを巻き起こしました。 そもそも、Reactの登場でフロントエンド開発が「jQueryによるhtmlへの振る舞いの後付け」というスク
qiita.com/tanebag
メリークリスマスですね、今回でTECH::CAMP Advent Calendar 2015は最後になりますが、ラストを飾るに相応しくない渋めの内容になります。(笑) Webアプリケーションの新しいアーキテクチャの一つにSPA(Single Page Application)というものがあります。一言で言えばアプリケーション内のリンクを辿っていくときにページ全体を読み込むのではなく必要な所だけを読み込んでいくようなもののことです。 今回は、僕がそんなSPAをAngularJSとrailsを組み合わせて作った時に悩んだ2つのポイントについて書きたいと思います。 まだまだぺーぺーなのでお手柔らかに、肩の力を抜いてお読み下さいませ。 なお、定石的な実装や手順については既に良記事がいくつかありますので説明しません。 railsは4.2、AngularJSは1.4系 前提 以下のような記事を読めるア
このページを最初にブックマークしてみませんか?
『@tanebaのマイページ - Qiita』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く