Storybookでモジュール一覧を作る | フロントエンドBlog | ミツエーリンクス
当社ではサイトを構築する前に、全体で共通して使うパーツ（当社では「モジュール」と呼んでいます）を洗い出し、モジュールだけを集めたモジュール一覧ページを作成することがあります。モジュール一覧には、各モジュールをどのようにマークアップするか、マークアップ時の注意点などを羅列します。一覧を作成しておくことで、複数人で作業した場合でも人によるマークアップのゆれを減らし、効率のよい開発ができます。 最近はReactやVue.jsをはじめとするフレームワークを使用するプロジェクトが増えてきており、モジュールと同じようにコンポーネント一覧を作ることがあります。モジュールはコンポーネントに似ていますが、コンポーネントはさまざまな状態（State）を持ち、状況によって見た目や機能が変わるという違いがあり、全ての状態を一覧するページを0から作るのは手間がかかります。そんなときにオススメなのが「Storyboo
フロントエンド視点：デザイナーと協業して作るスタイルガイドの難易度を下げる
前回 Atomic Design を実案件に導入した話で触れたコンポーネントリストを作り始めたとき、個人的にいろいろと学びがありました。 コンポーネントリストやスタイルガイドは、フロントエンドエンジニアとデザイナーが協業して作る必要がありますが、この協業がなかなかうまくいかず、スタイルガイド運用をワークさせるのは難易度が高い印象がありました。 自分自身、今まで携ってきた開発プロジェクトにおいて、うまくワークしたと思えるスタイルガイド作りができなかったのですが、現在のプロジェクトで開発初期からスタイルガイドを作り、リリース後、運用フェーズまでワークさせることができました。 本記事ではフロントエンドエンジニアとデザイナーが協業してスタイルガイドを作り始めるにあたって気をつけたことについて書いていきます。 共通言語としてのスタイルガイド 開発において、スタイルガイドが欲しい理由は、開発中のコミュ
モダンとクラシックをとりもつスタイル・ガイド
既にあるウェブサイトの実装を、今後を意識してモダンにしようとすると、どうしても既存のクラシックな何かしらの置き換えが必要になる。多くの人が作り始めているであろうスタイル・ガイドはそういった時に役に立つ。現状での保証された結果を提示してくれるからだ。 クラシックな何かしらの置き換えが必要になった場合、その目的をきちんと知る必要がある。そうでないと正しくモダンに置き換えることができない。すべてをフルスクラッチで書き直すといった場合でも、少なくともクラシックな何かしらによる結果を知る必要があるだろう。 スタイル・ガイドは良くも悪くも結果に過ぎないが、ちゃんとした結果であることは保証されている。それをきちんと作っておけばとあるコンポーネント(とでもいうようなもの)がどのような意図を持ったものかを具体的な実装を知ることなく理解できるはずだ。 ちゃんと作られたスタイル・ガイド、というとかなり大げさだが
参考にしたい！ JavaScript(CoffeeScript)スタイルガイド7選！ - Money Forward Developers Blog
こんにちはー。 フロントエンドエンジニアの平山です。 JavaScript(CoffeeScript)の役割が増えてきた昨今。 ここいらで一度、有名なスタイルガイドを追ってみたいと思います。 一緒にスタイルガイドを策定したり、あーやこーや語らいながらよりよいスタイルガイドを考えたいフロントエンドエンジニアの方は、とりあえず一緒に開発しましょう！ 【採用サイト】 ■『マネーフォワード採用サイト』 https://recruit.moneyforward.com/ ■『Wantedly』 https://www.wantedly.com/companies/moneyforward JavaScript AirBnB Airbnb JavaScript Style Guide Airbnb JavaScript Style Guide（es5） 和訳（非公式） JSスタイルガイドだと有名な感じ
デザイナーとエンジニアの共通言語を！開発スピードを上げるOSSスタイルガイド構築 | SELECK
今回のソリューション：【Living Style Guide/リビングスタイルガイド】 〜株式会社リッチメディアは、デザイナーとエンジニアのコミュニケーションの効率化に課題感をもっていた。その解決策として選んだLiving Style Guide（リビングスタイルガイド）の使い方〜 UI/UXデザインを作り上げていく過程で多くの場合課題になるのは、フロントエンジニアとデザイナーの意思疎通をいかに上手くやっていくかということだ。デザイナーのイメージするものをコーディングによってどれだけ正確に再現するか、互いに共通認識を持つことで開発のスピードアップにも繋がる。 ヘルスケア領域、ビューティー・サロン領域におけるメディア事業を展開する株式会社リッチメディアで現在新卒2年目のエンジニアを務める古沢 宏太さんは、デザイナーとエンジニアのコミュニケーションをもっと効率化できるのではと考えていた。そして
Style Guide - About - Hail2u.net
Sketch, markup, code, style, test, and then deploy. Weblog Documents Projects About Hail2u.netで使われているマークアップやスタイルの解説兼プレビューのページです。マークアップはHTMLのソースを、スタイルについては全ての変更履歴を含むGitリポジトリかこのページで参照されている非圧縮のCSSファイルを参照してください。このページに限ってはマークアップにおかしいところが多々ありますが、その多くはプレビューを作る上でのやむを得ない事情によるものです。 バージョニング フォーマットはSemantic Versioningを使っています。ただしAPIの変更などというものはあまりないので、以下のような条件でバージョン番号の増加を行っています: メジャー・バージョンは、レイアウトの大幅な置き換えやテーマカラー
CoffeeScript スタイルガイドの公開とその目的 - クックパッド開発者ブログ
こんにちは、クックパッド編集室の太田(@os0x)です。 普段は料理動画やクックパッドニュースなど、メディア寄りのサービスを担当しながら、社内のCoffeeScriptを中心としたウェブフロントエンドのコードレビューなどを行っています。 今回は、そのCoffeeScriptのレビューを円滑に行うためのコーディングスタイルについてお話したいと思います。 Style guides in Cookpad クックパッドでは、github.com上でスタイルガイドを公開しているのをご存知でしょうか？ cookpad/styleguide これまで、Ruby / Objective-C / Java のコーディングスタイルが公開されていました。そして、本日 CoffeeScript のコーディングスタイルを追加しました。 さて、そもそもスタイルガイドとはなんでしょうか？コーディング規約とも言われたりし
制作ガイドライン
本ガイドラインは、バーンワークス株式会社が行う Web サイト制作全般においての品質を保持するために定めたものである。当社は本ガイドラインに基づいた制作を行い、クライアントに対して常に安定した品質のサービス、及び納品物を提供する。 Last modified 2023-10-18 ディレクターはクライアントから指定の Web サイト要件を満たし、Web サイトのビジネスゴールを達成するため、適切な情報提供、提案を行う、また Web サイトの情報設計からプロジェクトの進行管理、プロジェクトメンバーの業務管理、納品物の品質管理を適切に行うものとする。 ディレクターはクライアントを含めプロジェクトメンバー間でのコミュニケーションを積極的に取ることで円滑なプロジェクト進行を心がける。また、クライアントに対しては進捗の報告、情報共有を適時、および明確に行い、信頼関係の構築に努める。 新規 Web サ
Swift開発で参考にしたいGitHub社の「Swift Style Guide」と日本語版 | ソフトアンテナ
Appleのアプリ開発用言語として大きな注目を集めているプログラミング言語「Swift」。まだ新しい言語だけあって、様々な定石や規約が出揃っておらず、どのように書けばベストなのか迷っている開発者の方も多いかもしれません。 そのようなときに参考になりそうなGitHub社のスタイルガイド、「Swift Style Guide」と、その日本語訳「Swiftコーディング規約」が公開されています。 同スタイルガイドは、Swiftプログラムの精密さや厳密さを向上させ、エラーを減少させることを目的としたガイドラインで、例えば、「(タブよりスペースを使うといった)空白の使い方」から、「可能な限りlet宣言をvar宣言より優先する」、「オプショナル型の開示指定は避ける」、「暗黙的開示オプショナル型の使用を避ける」などシンタックスの細部に至る、様々な指針が提示されています。 if let foo = foo
I am mitsuruog | 進化の早いフロントエンドの世界についていくために、スタイルガイドを有効活用しているという話
フロントエンドの世界では、日々新しいフレームワークやライブラリが生まれています。 初めてそういった新しいものを習得する場合に、なるべくなら近道したいと思うのが人の気持ちだと思います。 まず大変なのが、Hello World から実際のプロダクトやプロトタイプで利用する場合で、これは初めてで何もわからない土地を一人で散策するような感覚にも似ています。 今日、紹介するのは私が進化の早いフロントエンドの世界で、より早く未開の土地に慣れるためにスタイルガイドを有効活用しているという話です。 ちなみにこの記事はFrontrend Advent Calendar 2014 - Qiitaの 6 日目の記事です。 5 日目はじめての CSS 設計 - Qiita(@moschann) 7 日目CSS のプリプロセスとポストプロセス、そして Rework と PostCSS(@morishitter) 良
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
CSSプリプロセッサでスタイルガイド - inkdesign
07 Dec 2012 ※この記事は、CSS Preprocessor Advent Calendar 2012の7日目の記事です。 CSS PreprocessorとIAの親和性、という記事の影響を受けまして、こちらの記事で書かれていた、 CSS Preprocessor そのものを共通ドキュメントにしてしまうとか という点を拾わせていただき、スタイルガイドのツールを紹介しようとおもう。 スタイルガイドとはなにか スタイルガイドは簡単にいうと、モバイル時代におけるCSSの設計と実装から引用させてもらうと、ページ上の部品（コンポーネント）をあつめたリスト、ページのこと。デザインパターンと呼ばれることもあるかもしれない。 具体的な成果物としてどういったものを指すのかというのは実際のページをみてもらう方が早いとおもうので、一度下記のページも参照してほしい。 MailChimp Design P
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.js スタイルガイド早見表 🎄✨ - Qiita
Home
GitHub - sizucca/pepagis: [WIP] Styleguide Generator![GitHub - sizucca/pepagis: [WIP] Styleguide Generator](https://cdn-ak-scissors.b.st-hatena.com/image/square/75a77992496bef9c79621a2f69b5879eb65967b4/height=288;version=1;width=512/https%3A%2F%2Fopengraph.githubassets.com%2F5d63dc3d3266b0f8ff9005b19b19fdfdac1e8d80ff68f00933d628ad9718eb29%2Fsizucca%2Fpepagis)