はてなブックマーク

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? この記事は リクルートライフスタイル Advent Calendar 2018 8日目の記事です。 2018/12/10更新：続編で フロントエンドでTDDを実践する（react-testing-libraryを使った実践編）を書きました。 はじめに 自分のフロントエンドチームでは、TDDでの開発フローを実施することでフロントエンド開発の課題に向き合っていきます。 今回は、一般的に難しいとされるフロントエンドでのテストについて、どんな方針でテストを書けばいいかについて書いてみたいと思います。 フロントエンド開発の課題 プロジェクトにより

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

実際の現場で使える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への振る舞いの後付け」というスク

メリークリスマスですね、今回でTECH::CAMP Advent Calendar 2015は最後になりますが、ラストを飾るに相応しくない渋めの内容になります。（笑） Webアプリケーションの新しいアーキテクチャの一つにSPA（Single Page Application）というものがあります。一言で言えばアプリケーション内のリンクを辿っていくときにページ全体を読み込むのではなく必要な所だけを読み込んでいくようなもののことです。 今回は、僕がそんなSPAをAngularJSとrailsを組み合わせて作った時に悩んだ２つのポイントについて書きたいと思います。 まだまだぺーぺーなのでお手柔らかに、肩の力を抜いてお読み下さいませ。 なお、定石的な実装や手順については既に良記事がいくつかありますので説明しません。 railsは4.2、AngularJSは1.4系 ##前提 以下のような記事を読め