Storybook による UI & Unit Testing のススメ | メルカリエンジニアリング
Mercari Advent Calendar 2018 19 日目です。 担当はメルカリ JP フロントエンドチームの @nekobato がお送りします。 メルカリ フロントエンドチームでは主に React を利用してフロントエンド構築を行っており、 その中のWeb Rearchitecture では Storybook による UI Testing に取り組んでいます。 今回はフロントエンドの UI Testing と Unit Testing を Storybook & Storyshots を利用して行っているという話をします。 Storybook とは Storybook は個別の UI コンポーネントをブラウジングする開発環境を構築するモジュールです。 単独では目視による UI テストを可能にするのみですが、アドオンと組み合わせることで様々なテスト環境を構築することが可能にな
チームごとに色づいたピクシブのStorybook運用 - pixiv inside
こんにちは、pixivでUX/UIエンジニアをやっている@do7beです。今回はピクシブ株式会社の各チームで採用しているStorybookの運用体制についてご紹介したいと思います。 Storybookについて StorybookはUIのカタログようなツールで、コンポーネントの一覧表示や、デザインの保証や動作検証に役立ちます。 このStorybookを採用することが、割れ窓に対する解答なのではないかとこの頃は思っています。Storybookの詳細な説明については他のアドベントカレンダーなどの記事にまとまっていますので割愛して、今回は社内でのStorybookの運用についてお話したいと思います。 チームごとの特色が出る運用体制 まだ導入してから日は浅いですが、pixivだけでなくピクシブ株式会社の様々なサービスでStorybookを採用しています。Storyの設計、コンポーネントの分割、担保し
Trello CSS Guide
trello-css-guide.md Hello, visitors! If you want an updated version of this styleguide in repo form with tons of real-life examples… check out Trellisheets! https://github.com/trello/trellisheets Trello CSS Guide “I perfectly understand our CSS. I never have any issues with cascading rules. I never have to use !important or inline styles. Even though somebody else wrote this bit of CSS, I know exa
AirbnbのES6スタイルガイドを読んで - maru source
こんにちは丸山@h13i32maruです。 ES6の仕様がRC4になっており、正式リリースを今か今かと待ちわびている。とはいえもう個人で書くコードはES6一択。ES5には戻れない(それにしてもBabelの勢いがすごい)。 そんな感じでES6を書いてるわけだけど、つい先日にAirbnbがES6のスタイルガイドを公開したというのを見かけたので、ざっくり読んでみた。 Airbnb JavaScript Style Guide() {} ほとんどの内容はすでにES5で一般的になっているものだったけど、一部ES6ならではのものがあった。賛成できるものもあったり、できないものもあったので、気になる項目だけ軽く紹介してみる。 constを使う References ES5まではvar fooというように変数を宣言してきたけど、このvarが曲者で他の言語とはちょっと異質な存在である。「ブロックスコープでは
Style Guide Best Practices
Brad Frost Web designer Style Guide Best Practices We’re tasked with creating experiences that look and function beautifully across a dizzying array of devices and environments. That’s a tall order in and of itself, but once you factor in other team members, clients, stakeholders, and organizational quirks, things start looking downright intimidating. With so many variables to consider, we need so
CoffeeScript スタイルガイドの公開とその目的 - クックパッド開発者ブログ
こんにちは、クックパッド編集室の太田(@os0x)です。 普段は料理動画やクックパッドニュースなど、メディア寄りのサービスを担当しながら、社内のCoffeeScriptを中心としたウェブフロントエンドのコードレビューなどを行っています。 今回は、そのCoffeeScriptのレビューを円滑に行うためのコーディングスタイルについてお話したいと思います。 Style guides in Cookpad クックパッドでは、github.com上でスタイルガイドを公開しているのをご存知でしょうか？ cookpad/styleguide これまで、Ruby / Objective-C / Java のコーディングスタイルが公開されていました。そして、本日 CoffeeScript のコーディングスタイルを追加しました。 さて、そもそもスタイルガイドとはなんでしょうか？コーディング規約とも言われたりし
iOSアプリのコーディング規約を考える時はGoogleよりもNYTimesのObjective-Cスタイルガイドを参考にすべき - Steel Dragon 14106
iOSアプリのコーディング規約を考える時はGoogleよりもNYTimesのObjective-Cスタイルガイドを参考にすべき By raimon, 2015-03-21(土), in category Ios Googleのスタイルガイドは古い 複数人でiOSアプリをObjective-Cコードで書いて保守する時、コーディング規約を検討することになる。 参考にすべきスタイルガイドとして良く挙がるものにGoogle Objective-C Style Guideがあるが、これはいかんせん古い。メモリ管理ARCやNSNumberのリテラル構文など、比較的新しいトピックについても追記されてはいるが、 インスタンス変数のアクセス修飾子 プロパティを使う事が主流となっている2015年現在、余り扱われない autorelease を使ったオブジェクト生成など、MRC時代の規約 何よりホスティング先が
React Style Guide
The idea of "idiomatic" React hasn’t been explicitly written on, so I thought I’d offer some conventions that my team at Tune has been using during the past few months of adoption. For the sake of this article, scope will be limited to coding style in React components - not styling, componentization, or Flux strategies. Also, this is meant to be a living document - and I am sure there are better i
コーディングガイド by @mdo
HTMLシンタックス インデントには半角スペース2個分のソフトタブを使用すること。これが全ての環境で全く同じように見せる唯一の方法。 ネストされた要素はかならず1段階だけインデント(半角スペース2個)すること。 いつもダブルクォートを使うこと。属性値に対してシングルクォートを使わないこと。 閉じタグの無い要素に対して、末尾のスラッシュは省く事。HTML5仕様に省略して良いと書いてある。 省略できる閉じタグを省略しないこと。(例えば</li>とか</body>)。 <!DOCTYPE html> <html> <head> <title>Page title</title> </head> <body> <img src="images/company-logo.png" alt="Company"> <h1 class="hello-world">Hello, world!</h1> </
Google's AngularJS Style Guide
An AngularJS Style Guide for Closure Users at Google This is the external version of a document that was primarily written for Google engineers. It describes a recommended style for AngularJS apps that use Closure, as used internally at Google. Members of the broader AngularJS community should feel free to apply (or not apply) these recommendations, as relevant to their own use cases. This documen
JavaScriptのスタイルガイドまとめ(おすすめ4選) - Qiita
はじめに スタイルガイド自体は各々のルールでかなりの数が存在しますが、 下記のおすすめ4選を押さえておけば問題ないと思います。 おすすめ４選 Google JavaScript Style Guide Googleによる、最も代表的なスタイルガイドです。 時間のない方は、これだけにでも目を通しておく事をおすすめします。 JavaScriptのBad Partsについても述べられています。 英語：https://google.github.io/styleguide/javascriptguide.xml 日本語：http://www38.atwiki.jp/aias-jsstyleguide2/pages/1.html Closure Linterを使用することで、チームでの統一がしやすくなります。 グーグル製JavaScript文法チェッカー jQuery JavaScript Styl
問題解決のためのスタイルガイド入門
定義が広いスタイルガイド フロントエンド開発者からスタイルガイドという言葉を耳にするようになりました。効率的、かつ一貫性のある見た目とコードをつくるための共有ツールとして、スタイルガイドが使われることがあります。一見、目新しくみえるスタイルガイドですが、最近生まれた新しいアイデアではありません。ロゴやコーポレートカラーの使い方を記したスタイルガイドは昔からありますし、ライターにもスタイルガイドがあります。 このように、開発者も、デザイナーも、ライターも同じように「スタイルガイド」という言葉を使っています。人によって、その言葉から受ける印象も異なれば、必要としている要素も異なります。YUI 並の UI アセット をスタイルガイドに含めることを期待している人もいます。アプリや Web サイト開発におけるスタイルガイドを作る際に難しいのは、何で作って管理するかではなく、どの範囲をスタイルガイドと
ウェブサイトの制作に携わる全ての人に役立つスタイルガイドを簡単に作成できる -Style Guide Boilerplate
ウェブサイトのデザインや実装の一貫性を促進するために、制作に携わる全ての人に役立つスタイルガイドを簡単に作成できるテンプレートを紹介します。 現役時代、独自のテンプレートを使ってましたが、こういう便利なものがリリースされる時代なのですね（遠い目 Style Guide Boilerplate Style Guide Boilerplate -GitHub Style Guide Boilerplateの紹介の前に、スタイルガイド未体験の人用にどのように役立てるか簡単に説明します。 ウェブサイトのデザインや実装方法を定義し、一貫性を促進する。 モジュール形式の考え方を促進する。 ページを作成する際にパーツやエレメントで迷わないようにする。 ウェブサイトを効率的に管理する。 スタイルガイド制作のタイミングとしては、草案を制作中に作りつつ、納品時には定義が全て網羅されている状態がベストではないで
『StyleDoccoによるCSSスタイルガイドの導入』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして、アメーバ事業本部 teens事業部の谷です。業務ではフロントエンドデベロッパーとして、主にHTML/CSSの設計・実装をおこなっています。 今回は、以前斉藤が書いた「モバイル時代におけるCSSの設計と実装」という記事で触れられていたコンポーネントリストもといスタイルガイドについてのお話です。 スタイルガイドの事例と、スタイルガイドを生成するツール StyleDocco の紹介をします。スタイルガイドとは先の記事より引用すると、ページ上の部品（コンポーネント、モジュール）を集めたリスト、ページのことです。どれがコンポーネントで、どれがモジ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - alexlande/react-style-guide: A component to display React components with their JSX source in style guides
GitHub - airbnb/javascript: JavaScript Style Guide
coding-styles/es6.md at master · elierotenberg/coding-styles
A Vision for Style Guides in 2015
https://qiita.com/t32k/items/9e03e80061de21411765
http://www.hp-stylelink.com/news/2013/10/20131001.php
