Storybookを使ってReactの開発をX倍早くしよう！！便利なアドオンの使い方を紹介
こんにちはかみむらです。 プロダクト開発で、デザイナーとフロントエンドエンジニアの円滑なコミュニケーションは必要不可欠です。 しかし、実際に開発を進める上で、円滑化する仕組み作りは悩ましい問題です。 そこでStorybookの紹介です。 これはコンポーネントをカタログ化して、管理できるツールです。カタログ化することで、双方の行き違いを限りなく少なくできます。 そして、FigmaやAdobe XDと連携できるなど、開発者とデザイナーの両方に嬉しい拡張機能もあります。 今回はReactにStorybookの導入と、基本的な使い方から便利なアドオン(拡張)を紹介していきます。 Storybookの公式サイト https://storybook.js.org/ 前提create-react-appで作成したプロジェクトを想定しています。あらかじめプロジェクトを準備してください。 npx creat
storybookを理解する
この記事ではReact, Typescriptをベースにstorybookの全体像に触れていきます。 「storybook、名前は聞いたことある」というレベル感の人に対して、実務でstorybookを使う上での下地を作ることが目的です。そのため、「細かい」と判断した部分は割愛させてもらってます。（あくまで下地） 基本的には公式ドキュメントがベースになっていますので、詳しい説明は公式ドキュメントを確認してください。 storybookとは storybookとはUIのカタログを作るツールで、2022年現在、フロントエンド開発において必要不可欠です。 各componentのUIやpropsに応じた挙動の確認、component単位でドキュメントを用意することを可能にしてくれます。 導入方法 コマンドを打ちましょう。
Storybook を腐らせずに運用しよう - Qiita
副業で Findy の開発に参加している keik です。 先日そちらの開発で Storybook を導入しましたが、ただ導入するだけでは何かと腐りがちな Storybook なので、そうならないためにちょこちょこと工夫をしています。それらの内容を紹介します。 TL;DR UI コンポーネントのカタログ化ツール Storybook は、設計・実装・テストの各プロセスに良い効果をもたらす しかし、漫然と導入してもメンテナンスされず腐りやすい 腐らせないために以下の工夫をするのがオススメ StoryShots による自動スナップショットテストを導入する Story は UI コンポーネント実装ファイル一つ一つに対して .stories.js というファイル名で実装する Story 名はファイルパスから自動生成する サンプル https://github.com/keik/maintainabl
CSSスタイルガイドをStorybook for HTMLに移行した話 - RAKSUL TechBlog
こんにちは。印刷のラクスルでフロントエンドを担当している菅野です。 2週連続の投稿となります。(前回の記事: Jestを実行した時に、同時にESlintを走らせてみる) 現在、印刷サービスのフロントエンドエンジニアとデザイナーでデザインシステムの構築・整備を行っています。 その一環として、運用中のCSSスタイルガイドをStorybookに移行しました。 今回は、移行を決めた動機や導入時に得られた知見、今後の運用についてご紹介したいと思います。 [caption id="attachment_4313" align="alignnone" width="1024"] 運用中のStorybookの画面[/caption] これまでのスタイルガイドにおける課題感 該当プロジェクト(印刷のラクスル)ではPostCSSを使用しており、社内でデザインのコンポーネント一覧を共有するために、postcss
デザイナーとエンジニアの協業を加速させる！スタイルガイド作成ツール「Storybook」の紹介 | クリエイターのための総合情報サイト CREATIVE VILLAGE
ReactやVue.jsなどのライブラリ/フレームワークが普及し、コンポーネント単位でUIを設計・実装するフロントエンド開発が一般的になってきました。しかし、コンポーネント単位での開発には様々な悩みポイントがあります。 コンポーネントには、単純に見た目の情報だけを持っているものもあれば、それぞれが状態を持っていてその状態によって見た目や振る舞いを変化させたりするものもあります。そういったコンポーネントは、他のコンポーネントと連携しても見た目や振る舞いが壊れないように（壊さないように）実装しなければいけません。 コンポーネント単位のフロントエンド開発において、コンポーネントを独立させて管理するスタイルガイドを作成することは必須と言っても過言ではありません。本記事では、スタイルガイドを作成するためのオープンソースツールであるStorybookを紹介します。 村上 玄徳氏 株式会社メンバーズ メ
storybook をさらに有効活用するために chromatic を導入する
目次 開発に storybook を導入した chromatic で storybook をさらに有効活用できそう 実際に検証してみた 開発に storybook を導入した 混沌としていたコンポーネントを整理するために、Atomic Design を導入することにしました。その際に、storybook も作成していこうということになりました。 手順はおおよそ以下の通りでした。 デザイナーが Atomic Design に則ってコンポーネントを整理する。 エンジニアがコンポーネントと storybook を作成する。 PR ごとに Circle CI で storybook を build し、レビュー時にはコードと共に見た目や挙動も確認する。 エンジニアが相互レビューし合い、コーディングルールなどを整理していく。 新規画面の作成 / 既存の画面の置き換えを行う。 この時点で、storyb
akfm.dev - フロントエンドエンジニアでも怖くないReact＋Docker構築
Introduction ちょっと前ですが、Node12 が LTS になりましたね。 喜ばしいことではあるんですが、実はちょっと前に Mac の Catalina と Node12 の掛け合わせで、Node gyp が動かずハマってちょっと苦労したことがありまして。 Docker で動くようちゃんと構築しておけば無駄に苦労せずに済んだのになーっと当時は思ったんですが、そこまで時間かけたくなかったのでその場しのぎで対応したりしてました。 その後困ったことはないんですが、必要になってからやってみても遅いなと思い、本サイトで Docker 環境を構築してみる事にしました。 他の記事でも書いてますが、本サイトは GatsbyJS Storybook Jest を使用して開発しています。 なので今回はこの 3 つを Docker 上で動かせるようにしてみたいと思います。 環境情報 Mac OS M
静的なHTMLのためのコンポーネント駆動開発―その導入を振り返って
ここ数年で、「デザインシステム」はウェブ開発やデザインのコミュニティでとても人気の話題になりました。そして「コンポーネント」として定義される一連のデザイン成果物を開発・メンテナンスするために、StyleguidistやStorybookといったツールが多くのプロジェクトで一般的に使われています。このプロセスはデザインシステムという概念の一部として、コンポーネント駆動開発（Component Driven Development）と定義することができるでしょう。 さて、コンポーネント駆動開発にまつわる資料のほとんどは、ReactやVue、Angularといった、フロントエンドのビューのためのメジャーなライブラリを利用することについてのものです。しかしもっとトラディショナルな技術スタックの場合はどうすればいいでしょう？ 例えば私たちスタンダードデザインユニットでは、静的なHTMLとCSSのアセ
一貫したデザインのためにデザインシステムを運用する方法
BenはUXPinのコンテンツ戦略担当者です。 Webウェブデザイナーとバックエンド開発者の両方として働いています。 人は馴染みがあるものを信頼します。そのことを知っている多くのデザイナーは、作品をできるだけシンプルにするよう努めています。また、シンプルなデザインは実用的でもあります。たとえば、一度ナビゲーションバーをデザインすれば、すべてのページで使うことができます。 しかし、デザインコンセプトはどんどん変化します。新しいアイデアを持つデザイナーが古いプロジェクトを引き継いだり、新しいコーディング手法が昨年の最先端に取って代わったりすることもあるでしょう。その結果、一貫性のないビジュアルとコードの寄せ集めになってしまいやがて問題となります。 デザインの一貫性とは デザインの一貫性がある製品は、変更を加えても見た目や動作が全体としてまとまりがあるように見えます。これは、特に大規模なサイトで
こういうのを一つは用意しておきたい！Webサイトのスタイルガイドを作成する時に便利な無料テンプレート素材
スタイルガイドを0から作成している人に、朗報です。 Webサイトで使用するカラーやフォント、ロゴなどを変更するだけで、そのWebサイトのスタイルガイドが作成できるSketchのテンプレート素材を紹介します。 UI要素はシンボル化されており、カスタマイズも自由。しかもスタイルガイドのフォーマットは4種類用意されています。 Symbols Symbolsで作成できるスタイルガイド Symbolsのダウンロード Symbolsの使い方 Symbolsで作成できるスタイルガイド Symbolsはその名の通り、シンボルで自動更新されるスタイルガイドのテンプレートです。使用するカラー・フォント・ロゴなどを変更するだけで、Webサイトに使用するさまざまなコンポーネントのスタイルを定義できます。
最近のデザインで使われている、ロゴ・ブランディング・Webサイトのガイドラインのまとめ
Webサイトやスマホアプリのレイアウトの構成・展開、UIエレメントのバリエーション、カラーの使い方など、デザインの定義がまとめられたスタイルガイドを紹介します。 ロゴやブランディングも引き出しを増やすためにも参考にしたいですね。
Google HTML/CSS Style Guide
Background This document defines formatting and style rules for HTML and CSS. It aims at improving collaboration, code quality, and enabling supporting infrastructure. It applies to raw, working files that use HTML and CSS, including GSS files. Tools are free to obfuscate, minify, and compile as long as the general code quality is maintained. General General Style Rules Protocol Use HTTPS for embe
gulp で sc5-styleguide を使ってスタイルガイドを開発の sass で同期する方法 設定編 | SONICMOOV LAB
マークアップエンジニアのうさこです。 寒い日が続きますね… ちまたではインフルエンザが流行っているそう… 弊社でも猛威を振るっている今日この頃。 わたしは予防対策でアライグマボトルを肩身離さず持ち歩いていますよ。 マスクはしてないけどね！！！ さて、本題に入ります ( ` − ㉨ −´) 目次 目標 インストール ディレクトリ構成 README 作成 SCSS 設定 目標 開発用とスタイルガイド用で css が分かれていることで、スタイルガイド用の css の更新が厳かになり… 結局、スタイルガイドを使わなくなってしまった…… という経験がある方も多いのではないかと…。 今回は「生きたスタイルガイド」を目指します。 インストール まず、プロジェクトフォルダ で package.json を作成しましょう！
コーディングガイド 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> </
生きたスタイルガイドのためのKSS | 第1回 KSSの特徴
生きたスタイルガイドのためのKSS 第1回 KSSの特徴 このシリーズではスタイルガイドジェネレーターのKSSを紹介します。第1回目はKSSがどんな特徴を持っているジェネレーターなのかを解説しています。 KSSとは KSSはスタイルガイドジェネレータのひとつです。先にCodeGridで紹介しているStyleDocco*と同様に、CSSで定義されたスタイルとその説明を一覧化したWebページを出力するものです。 *注：StyleDocco StyleDoccoに関しては「賢く使うStyleDocco」シリーズを参照してください。 KSSのWebサイト、KSS · Knyle Style Sheetsでは、KSSで作成されたスタイルガイドのよい例としてGitHubのCSS · Styleguideが挙げられています。スタイルが多くのカテゴリに分類されていますが、とりわけ、ボタン用スタイルを並べた
Style Guide Template in CSS | CodyHouse
Style Guide Template A customizable Style Guide template, to gather design guidelines and share them with colleagues and clients. A Style Guide is a collection of design guidelines, to be used as a reference by teammates - and clients - while collaborating on a web project. While it's particular useful for big projects, it can be handy for small ones too. A common approach to a style guideline is
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SC5 Style Guide Generator
スタイルガイドジェネレータを比べてみた - Qiita
https://blog.mismithportfolio.com/web/20160806sc5styleguide
レスポンシブの表示も完璧に定義できる優れもの！スタイルガイドを作成するのに役立つテンプレート -Styleguide | コリス
