こんにちはかみむらです。 プロダクト開発で、デザイナーとフロントエンドエンジニアの円滑なコミュニケーションは必要不可欠です。 しかし、実際に開発を進める上で、円滑化する仕組み作りは悩ましい問題です。 そこでStorybookの紹介です。 これはコンポーネントをカタログ化して、管理できるツールです。カタログ化することで、双方の行き違いを限りなく少なくできます。 そして、FigmaやAdobe XDと連携できるなど、開発者とデザイナーの両方に嬉しい拡張機能もあります。 今回はReactにStorybookの導入と、基本的な使い方から便利なアドオン(拡張)を紹介していきます。 Storybookの公式サイト https://storybook.js.org/ 前提create-react-appで作成したプロジェクトを想定しています。あらかじめプロジェクトを準備してください。 npx creat
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは！ トップページ デザイナーの芦田です。 9月にスマホWeb版トップページのデザインシステム導入を行いました！ …と言っても見た目の変化が少ないので、気づいていない方も多いのではないでしょうか？ 見た目ではわかりづらいのですが、UIデザインとして大きな改修をしたので紹介します。 スマホWeb版トップページのデザインシステム導入 去年の10月にPC版トップページのリニューアルが無事完了したことを受けて、スマホWeb版も技術刷新を行うことになりました。 技術刷新ではエンジニアはモダンな開発環境に移行し、既存のUIのコードを書き直していきます。それと並行してデザイナーは既存のUIの仕様を確認、整理する必要があります。 この機会
Forkwell という会社の勉強会で登壇したときの資料。フロントエンドの人たちはデザインに近いところで仕事しているのに、小手先のツールに支配されすぎているので目線を上げるためのアンチテーゼ的な資料
How to create a super-ellipse CSS button based on Lamé curve
I’ve always been a CSS fiend. Ever since I started creating web content I have been looking for the “perfect” button. The one button that users want to click over and over again. We’ve seen the rise of flat, material, skeuomorphism and atomic design over the years, but I haven’t seen any CSS frameworks make use of the Lamé curve on buttons yet. So today, I’m going to teach you how to create your v
こんにちは。アートディレクターの三宅佑樹(@yuki_miyake)と申します。ビジュアルデザインやブランドコンサルティングなどを行うICVGというデザイン会社の代表をしています。 デザインの社会的活用を推進するためにはデザインをもっと身近な存在にする必要がある。その方法の１つとして、他分野からデザインの世界に入ってみようかなと考えている人をメインの対象として、広い意味での「デザイン」の世界を案内する「デザインの世界への招待状」という連載をお送りしています。 前回記事はこちら↓ デザインの世界への招待状 #1 デザインの世界へ 感想、いいね、シェアなど、ありがとうございました！とても励みになります。第2回は「拡張するデザイン領域」とお伝えしたのですが、諸事情により順番を変更して、今回は「デザインの学び方」をお送りします。 (デザインの道に進むことまでは考えていないが・・という人にも、「デザ
2018年10月18日、Roppongi Designersが主催するイベント「Designer X Engineer Development #01」が開催されました。デザイナーとエンジニアでどのように開発を進めていくか。デザインをプロダクトに落とし込むプロセスについて、どのような設計方法・ツール・コミュニケーションを行なっているかを共有する勉強会。今回は、5社のエンジニア・デザイナーが集い、自社における協同の現状を紹介します。プレゼンテーション「コンポーネント指向開発とデザイナー×エンジニアの協業」に登場したのは、株式会社ドワンゴの喜多峻氏。講演資料はこちら コンポーネント指向開発とデザイナー×エンジニアの協業 喜多峻氏：今日は「コンポーネント指向開発とデザイナー×エンジニアの協業」ということでLTをさせていただきます。 まず自己紹介なんですが、名前はどうでもいいんですけれども、ドワン
受注管理機能を支える技術 〜 VueCompositionAPIとGraphQLとAtomicDesignとScopedStyle〜 - 弥生開発者ブログ
こんにちは、 @mugi_uno です。 少し前に背骨の手術を受けたら身長が伸びました。 🎉 受注管理機能をリリースしました 2020/12/10に、Misocaに新しく「受注管理機能」をリリースしました。 www.misoca.jp いままでは、請求書・見積書・納品書といった単位でのステータス管理が主でしたが、新たに追加された受注管理機能を使うことで、案件単位でステータスを管理しつつ、各文書への変換も簡単に行えるようになりました。 そして、同時にこの受注管理機能は、開発面においても様々な新しい技術面でのトライもありました。 Vue.js & Vue Composition API GraphQL Apollo Client & Vue Apollo Atomic Design Scoped Style 今回は、これらについてどういった対応をしたのかと、リリース後にふりかえってみてそれぞ
Flexbox For Interfaces All The Way: Tracks Case Study — Smashing Magazine
Flexbox today is very, very real. After many years of development, the specification has become much more stable, making it easier to achieve those CSS layout dreams. In this article, Dennis Gaebel Jr will discuss layout patterns well suited to flexbox, using the interface from the Tracks application, which also takes advantage of atomic design principles. He’ll share how flexbox proved useful and
こんにちは。Webエンジニアの仁科です。 スペースマーケットでは先日、特集ページという新しい機能をリリースしました。 特集ページではスペースの利用シーンの提案やその利用シーンに適したスペースの紹介しています。 今回の記事では特集ページについて実装や技術スタックなどエンジニア目線での話をしたいと思います。 特集ページの目的 まずは今回リリースした特集ページの目的について紹介したいと思います。 レンタルスペースを利用するという習慣は次第に世間に広まってきていますが、まだまだ認知度を上げていく必要があります。 「レンタルスペースってどういったときに使うの？」 「花見ってレンタルスペースでやることもできるの？」 このように、まだレンタルスペースを活用していない方に具体的な利用シーンを知ってもらうために今回の特集ページを作成する運びとなりました。 特集ページでは『イベントの詳細』や『おすすめスペース
アプリデザインに入る前の準備が大切～『UIデザイナーのためのSketch入門＆実践ガイド』著者・吉竹遼氏の仕事術とは
iOS・Androidアプリが一般的になるにつれて、デザインツールにも新しいヒーローが登場した。オランダのデン・ハーグで2008年に創業したBogemian Coding社の『Sketch』だ。2013年にAdobe社の『Fireworks』が開発中止となったタイミングから風向きが変わり、現在では豊富なプラグインと直感的な操作性で注目を集めている。 『Sketch』でのUIデザインが日本でも普及していく中、『UIデザイナーのための Sketch入門&実践ガイド』がビー・エヌ・エヌ新社から2017年5月23日に発売された。 ※UIデザインのおすすめ本として、テクニカルクリエイターズ.comでも以前から宣伝してきた書籍である。 著者は吉竹遼氏（以下、よしたけさん）。学生時代からデザインを専攻し、社会に出た時からアプリ開発の現場で知見を深めてきた人物だ。 今回、同書籍の著者として、よしたけさんに
UIの意味付けに情報アーキテクチャは強い味方
Atomic Designは数ある分類方法のひとつ Atomic Design のように UI の『粒度』で分類することがあります。ボタンやフォーム要素のような小さな『分子』。大小様々な要素で構成された『ページ』と呼ばれる大きな集合体。UI を積み木構造のように考えやすくなりますが、Atomic Design 特有の思想であって、特定のアプリケーションの UI に適した分類ではない場合があります。 汎用性をもたせるために、Atoms、Molecules、Organisms、Templates、Pages の 5 段階が作られていますが、web サイトやアプリケーションによっては段階が多すぎます。無理に当てはめようとするあまり、Molecules かOrganisms かを議論するということにもなりかねません。 よくある話でボタンの分類があります。ボタンは Atom と呼べますが、アイコン付
先日、SNSを使ってカンタンに募集することができるbosyuというサービスをリリースしました。 bosyuのデザインを作っていく中で、sketchのシンボルを活用してみたのですが、とても効率よく作業を進めていくことができました。Basecampに入った当初、ほとんどシンボルが使えていなかった頃に比べると開発効率が2倍ほどになったと思います。 あくまでも僕流なので、「自分はこうしてるよ。」っていうアドバイスを募集します！！！(bosyuリンクを記事の最後に貼っておくのでぜひ応募お願いします！) 命名規則はAtomic Designを参考する僕は基本的にAtomic Designと言われる考え方をベースにシンボルを作っています。Atomic Designって何やねんって方はこちらの記事がわかりやすいので、ぜひ読んでみてください。 カンタンに言うと、デザインを小さい順からAtoms(原子)、Mo
Next.jsで作成する管理画面作成チュートリアル
Next.jsで管理画面のボイラーテンプレートを作成してみました。 本書では、利用した技術などを紹介していきます。 1. はじめに 2. プロジェクトセットアップ 3. 自動デプロイ（CI/CD） 4. バックエンドの準備 5. コンポーネント作成（Atomic Design） 6. 共通処理 7. 入力フォーム 8. 状態管理 9. 非同期処理（react-query） 10. レンダリングオプション（CSR/SSG/SSR/ISR） 11. 単体テスト
【2021年版】サーバーサイドエンジニアがVue.jsでモダンフロントエンド開発を始めるまで - Qiita
2020年12月からのプロジェクトで、Vue.js(2系)によるモダンフロントエンドの開発の一端を担うことになりました。そこで、プライベートで2ヶ月ほどフロントエンド開発の学習をし、なんとかフロントエンドの業務をこなせるようになってきましたので、やったことをご紹介します。 意外とやるべきことが多かったため、体系的にまとまっていると今後復習する際に役立つかと考え、この記事を執筆することにしました。 これまで Web系の受託開発会社に入社し、1年ほどサーバーサイド開発をメイン行ってきました。 この1年間はRuby, Ruby on Rails, RSpec にどっぷり浸かっている一方、フロントエンド開発はほぼゼロの状態からのスタートでした。 やったこと JavaScript JavaScript Primer を読む & ハンズオン 所要時間: 20時間 まずは JavaScript の言語仕
Retty Advent Calendar 2018 6日目の記事です。 昨日は @tkngue で CircleCI as a Resource でした。 CircleCIをビルド環境以外にも使い倒していこうという内容でしたが、今日はそれをフロントエンドで実践してみた事例紹介になります。 TL;DR PRごとにStorybookビルドするの、CircleCIで完結して簡単だからやるといいよ ほんでデザイナーもPRのフローに乗ってもらうと実装された細かい動作も確認できていいよ はじめに Rettyではお店会員様が 店舗情報の編集 検索結果にどう広告を出すかの設定 Retty予約にまつわる在庫登録・確認などの設定 アクセス解析 など多種多様な設定・確認を行える管理画面があります。 そちらを通常の開発とは別でフロントエンドのリニューアルを小さなプロジェクトチームで目下進行中です。 古き良きサー
ファイル構成 – React
お勧めの React プロジェクトの構成は？ React はファイルをどのようにフォルダ分けするかについての意見を持っていません。とはいえ、あなたが検討したいかもしれないエコシステム内でよく用いられる共通の方法があります。 機能ないしルート別にグループ化する プロジェクトを構成する一般的な方法の 1 つは、CSS や JS やテストをまとめて、機能別ないしルート別のフォルダにグループ化するというものです。 common/ Avatar.js Avatar.css APIUtils.js APIUtils.test.js feed/ index.js Feed.js Feed.css FeedStory.js FeedStory.test.js FeedAPI.js profile/ index.js Profile.js ProfileHeader.js ProfileHeader.css
THE GUILDさまのクライアント向け勉強会にお声がけ頂き、「Atomic DesignとSketch Symbol」というテーマでお話させて頂きました。 せっかくなので、この記事では当日どのような内容をお話させて頂いたかについて軽く触れてみたいと思います。 当日の構成 構成は「Sketchの話→Atomic Designの話→SketchとAtomic Designの話」という流れを意識しました。そもそもSketchとAtomic Designは別軸の話ですから、それぞれの話が最後にうまくリンクする構成ができたらよいんじゃないかなと。ゲームでよく見るAルートとBルートが合流して最終ルートに向かう、みたいなイメージです。うまくできたかは…… なお、当日はディスカッションの材料とするために、オンラインで質問の投稿や質問への投票ができるsli.doというサービスを利用しました。これまではGo
Abstract HTML／CSS／JavaScriptを組み合わせてモノを作るフロントエンドの開発において、運用の効率アップとコードの破綻を回避するため、画面を構成するUIを、それなりの大きさの塊の集合として考えてコードを構成するのが一般的です。 このUIの塊のことは、「モジュール」「コンポーネント」「ブロック」「エレメント」など、様々な呼ばれ方をします。 HTMLとCSSを書く際、このコンポーネント（と呼ぶことにします）をどのくらいの大きさのものとして扱うかは、なかなか難しい問題です。私を含め、フロントエンドに従事する者の多くがこの不確定なコンポーネントの粒度（大きさ）に頭を悩ませていることでしょう。 HTMLとCSS的にコンポーネントをどう考えるかは、CSS設計方法論（CSS methodology）としてまとめられたものがいくつもあります。しかしその多くは、コンポーネントの粒度につ
はじめまして。Kineca, Inc. pato デザイナーの原田 @yoshigorouu です。 2018年4月にpatoのアプリを全面的にリニューアルしました。リニューアルに至った背景やリリースまでのデザインプロセス、進めていくなかでの学びを共有できたらなと思います。 patoについてpatoを知らない方向けにプロダクトの説明をすると、patoはエンタメマッチングアプリです。芸能人やお笑い芸人などエンタメに特化したスキルをもったキャストと、会社の接待やプライベートのお酒の席を盛り上げたい人とのマッチングアプリです。"エンタメ版UBER"と考えるとわかりやすいかもしれません。 Before / Afterリニューアル前とリニューアル後のアプリアイコンと主要ページのデザインがこちらになります。総計150枚の大規模なリニューアルとなりました。 なぜリニューアルが必要だったか1つはプロダクト
How a little BEM and cleverness can make extensive use of EMs worth doing, and how it can up your game. Using relative units for measurements has a lot of advantages, but can cause a lot of heartache if inheritance goes wrong. But as I’ll demonstrate, BEM methodology and some clever standardization can reduce or eliminate the downsides. A little vocab before we get too far into this: em units CSS
The Unicorn Workflow, Design to Code with Atomic Design Principles and Sketch
Walk with meBrad Frost, the stunning human being in the video above, is largely responsible for the system this article is about. Atomic Design was developed in response to the responsive, digital world we live in. We’ve been making style guides, elemental guidelines, mood boards and many other tools to help make our designs easier to understand for years now. Similarly, developers have been using
はじめにこんにちは、Anewsのエンジニアリングマネージャーの山崎です。 この記事はストックマークアドベントカレンダーの22日目の記事です。 普段は、エンジニアリングマネージャーとして開発体制や中長期のエンジニア戦略を考えています。 またエンジニアリングマネージャーとは別にエンジニアとしてAnewsのFlutterアプリの開発を行なっています。 Anewsの開発組織では全員がフルスタックエンジニアとして働くことを推奨しており、 開発体制やプロセスについてもフロントエンド、バックエンドなどの領域を意識せず顧客への価値提供を最大化するためエンジニアが必要な開発を行うようにしています。 その中で、モバイルアプリだけは固定されたメンバーで開発を行うような体制になっています。 理由としては、 ・ モバイルアプリの開発経験が少ない ・ モバイルアプリのコードが複雑になっており、学習コストが高くなってい
File Structure – React
Is there a recommended way to structure React projects? React doesn’t have opinions on how you put files into folders. That said there are a few common approaches popular in the ecosystem you may want to consider. Grouping by features or routes One common way to structure projects is to locate CSS, JS, and tests together inside folders grouped by feature or route. common/ Avatar.js Avatar.css APIU
Riot.js + Web Components + Atomic Design は優勝！ #Riot.js #AtomicDesign #WebComponents #AMESTAGE
2016年は「AtomicDesign」を取り入れた「APB CSS（Atomic Parts Base CSS）」で迷わず、簡単、拡張性持った CSS設計を！
というわけで、 明けまして、おめでとうございます！ なんか、慌ただしく2016年を迎えてしまった次第です。。 今年はちょっとゆっくりしたいなと思いつつ、 2016年、今年もよろしくお願いいたします。mm さてはて、早速本題の方ですが、webデザイン界隈で 最近、「マテリアル・デザイン」だの「アトミック・デザイン」など以前にも 増して色々と聞くようになってきたのを肌で感じる今日この頃でして、 デザイナーの方もそれらの思考を持ってデザインされるかと思います。 そもそも「アトミック・デザイン」ってなんぞやって方はこちらを、 Atomic Design Atomic Design http://bradfrost.com/blog/post/atomic-web-design/ Atomic Designの特徴として、こちらの図であるように、 UIパーツを「ATOMS」（原子）と捉え、原子と原子の
8/16から9/21までサイバーエージェントの長期インターンに行っていたので感想を書く。 某インターン以外でも最高の夏🍉は過ごせる！！ 面接 インフラかサーバサイドやりたいけど、インフラは自信ないとか言ってたら、「OpenStackって知ってる?」って聞かれて「名前しか知らないです」って言ったのでサーバーサイドの方面で選考が進むことになった。 某コンテンツ系サービスのバックエンド見たかったけど、精鋭が揃っているらしく、goを業務で書いたことがないときびしいと言われたので、某メディア系のサービスの中の人とエンジニア面接して無事にメディアサービス （エンジニア対象）に採用されることになった。goのバイナリ読んだりしてたけど、あんまり書いてなかったし、しゃあない。 エンジニア面接のあとすぐ人事の方から電話がかかってきて「Androidもできたよね！？」って聞かれて、Oss Stars～Andr
freee Developers Advent Calendar 2019 の17日目です。 デザインシステムチームの @toofu__ です。夜はニートゥーチェストをしており、1988年生まれ4268人中3位です（12月16日現在）。腹筋が喜んでいます。 freee のデザインシステムの現状 freee にはデザインシステムチームが存在し、下記の運用を行っています。 UIコンポーネントライブラリ Vibes デザインガイドライン Groove アクセシビリティガイドライン Groove と Vibes が生まれた経緯とかについてはチームメンバーの @ymrl が1日目に色々書いてくれているので、よろしければご覧ください。 developers.freee.co.jp この記事では、Groove と Vibes に関するもうちょっと細かいブツの雑多な話を書きます。 Vibes の詳細 Vi
BEM & Atomic Design: A CSS Architecture Worth Loving | Lullabot
Using Pattern Lab and BEM on a project I stumbled upon a great way of structuring CSS, better naming, and better a developer experience. Atomic Design is all the rage; I’ve recently had the pleasure of using BEM (or CEM in Drupal 8 parlance) and Pattern Lab on Carnegie Mellon’s HCII’s site. Working through that site I landed on a front-end architecture I’m very happy with, so much so, I thought it
FlutterアプリにおけるUI Component Architecture #LayerXテックアドカレ - LayerX エンジニアブログ
こんにちは。バクラク申請・経費精算 ネイティブアプリエンジニアのyoheiです。 最近はこたけ正義感の逆転裁判プレイ動画を見ながら法律の勉強してます。好きなラジオは真空ジェシカのラジオ父ちゃんです。M-1も応援してます！ この記事はLayerXテックアドカレ2023の26日目の記事です。前回は 赤羽さん が「Go言語のORMであるGORMをv1からv2へのマイグレーションした話」を書いてくれました。27日目の記事 id:itkq さんより「勤怠をいい感じにする社内Slackアプリ #LayerXテックアドカレ - LayerX エンジニアブログ」ポストされました。一緒にご覧いただけたらと！ バクラク申請・経費申請では現在のモバイルアプリをFlutterでのリプレースを進めています。そのうえでチームとしてUIコンポーネント(Widget)をどの用に作っていくか設計(UI Component
美の軸を２つもつこと｜ai
昔、仕事仲間と花火大会に行った帰り道のこと。他愛のない話をしながら皆で歩いていると、やけに無口な同僚が一人いた。 「眠いの？」なんて誰かがきいたら、彼はこう答えた。 「さっきの花火、パーティクルで再現するとしたら、どうすればいいかと思って」 彼は当時引く手あまたの Flash Developer で、プログラミングが得意だった。 美しい花火を観て、それをどうプログラムするかを思案するなんて、風情がない、という話ではない。もしデートなら顰蹙ものかもしれないが、決して彼の風情を感じる心が欠落しているわけではないのだと思う。 彼は別な軸で美を捉えたのだ。私は観ている世界の違いに驚いた。 デザイナーとエンジニアは、世界の捉え方が違うと思うことはよくある。同じものを観ているようで、そうでもなかったりする。 いや、デザイナーでもプログラミングする人はけっこういるから、プログラミングを知っている人と知ら
Starting to Write CSS
Don't you feel that CSS is not the same anymore? Last few years became a hot topic and many smart people talked about it. CSS is not that little thing which front-end developer should do to make the page looks pretty. It's far more then that. We care about performance and we want to produce better web sites. In this article I want to share what I learned last few months and what exactly is my visi
YUI Blog Development Challenges of Interface Design for Mobile Devices Challenges of Interface Design for Mobile Devices The single most important concept to master when designing mobile device interfaces is "context". The context in which an application is used and the context of how information is input are both key issues; each must be understood before a well crafted design may be implemented.
先日なるほどデザインがお買い得になっていたのですかさず買ってしまった。（今更だがテイスト的にKindle版よりも出版物で買ったほうが良かったかもと思いつつある） 本の趣旨としてはWebよりも出版物のデザインにフォーカスしているといえる。とはいえデザインというものの基礎の話をしている本であり、それはWebについても考える部分は多いと感じた。 自分はエンジニアという役職で、デザインに関しては専門ではない、ただフロントエンドという部分においては、デザイナの理想にいかに近似させるかという部分は責務であると思っている。そういう人間にとっては「デザイナはどういう点に気を使っているか」という部分をノンデザイナーズ・デザインブックよりも専門的な点で知れる本といえるだろう。 Chapter3にあるグラフなどはエンジニアにもよく馴染みのある話だったり、写真の構図や配置による意図などは理解しておくと「ああ、この
Marginalia
すべて Tech Idea Diary 2024-06-26 WebブラウザにおけるOpenTelemetryの自動計装PoC: Trace via Service Worker TechWebOpenTelemetryService Worker 2024-06-23 Cloudflare Image Transformationで画像最適化した TechCloudflareBlog DevAstro 2024-06-20 Angular: Rendering EffectsとBusiness Effects TechAngularSignals 2024-06-14 計画の優先順位ではなく目標の優先順位を決める Idea雑記言語化 2024-06-13 Angular: Model Inputsを使ったカスタムフォームコントロール実装例 TechAngularSignalsForms
marmelab.com A frontend Framework for building data-driven applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design. Previously named admin-on-rest. Open sourced and maintained by marmelab. React Admin 管理画面を作るのに最適化された React アプリケーションフレームワーク France のMarmelab社によってメンテナンスされている OSS がコア Enterprise Edition もある OSS として公開していない便利な private modules が使えたり、開発サポートが受けられ
目的 フロントエンドを開発する上でUIコンポーネントを区分する際に問題が起きました。 UIコンポーネントを区分せず、フラットに開発すると、1サービスで軽くUIコンポーネントが3桁ぐらい同一ディレクトリで無法地帯のように散乱されるのは想像に難くないでしょう。(事実そうなりかけて解決策を探した結果この記事を書いています それを解決するためにAtomic Designを参考にしようといくつかの方のAtomic Designのスライドショーを見ましたが、それらのスライドショーの内容の通りやっても上手く行かない事は明白でした。 調査した所、Atomic Designをフロントエンド界隈では使っている所はとても多かったです。 そんなに広まっている設計がこれほどまでに薄いものだとはどうしても思えなくて、原文を探し呼んだ所、とても重要な部分が他のスライドや記事では抜けている、または間違った解説をしていたの
ゼロから始めるデザインシステム - チーム開発を加速させるデザインアプローチ！ #全文公開｜原田 佳樹 Harada Yoshiki
9/22(日)の技術書典7に@scrpgilと共著で「ゼロから始めるデザインシステム - チーム開発を加速させるデザインアプローチ！」という本を出展します。 それに合わせて、事前に本書の本文を公開することにしました。技術書典というイベントは年々盛り上がっていますが、デザイン畑の人にはまだまだ認知が高くないと思うので、より多くの人に届けられるようにnoteで公開することにしました。 「ゼロから始めるデザインシステム」ということで、まさにこれから新しくデザインシステムについてしっかり腰を添えて学んでいこうという人向けの本になります。言葉は聞いたことあるけど、実際に使ったことはない、もしくはこれから導入し始めようと考えている、また、いざ導入したものの、そこまでうまく機能していない、そんな人たちに向けた本になります。 本書は6章から構成されています。第1〜5章は理論編、第6章は実践編です。はじめに
Qiita開発チームがReactの開発で default export を使わなくなった理由 - Qiita
はじめに こんにちは、Qiita開発チームの@ohakutsuです。 現在、QiitaのフロントエンドはReact + Atomic Designで実装されています。 Atomic Designの特徴として、再利用可能な単位で分割されたコンポーネントをつくる必要があります。 しかし、分割されたコンポーネントの数は日々大きくなっていってしまい、コンポーネントの管理が難しくなってしまいます。 そこで、Qiita開発チームでは、default exportを使い実装をしていたのをやめ、named exportを使い実装を行うようになりました。 今回は、Qiita開発チームがなぜdefault exportを使わなくなったのかについてお話します。 なぜ default export を使わなくなったのか Qiita開発チームがdefault exportを使わなくなった理由は、default ex
Today, we are at our wits’ end writing scalable CSS on large Web applications. There are many methods for CSS architectures, e.g. OOCSS, SMACSS, ITCSS and so on. In this article, I propose the best of CSS architecture, named “ECSSIST (Extensible CSS Idealistic Structure Theory, pronouced as ‘EXIST’)”. Elements of ECSSISTECSSIST is composed of 5 styling layers. These are named as “Settings”, “Base”
You’re Burning Budget on Design: An Argument for Modular Design
I recently wrote an article about how to make your designs as modular as your code. As I explained in the article, Atomic Design is an incredible way to create designs that can be replicated and communicated easily, across your team. Along with increasing your ability to communicate within your team, modular design also makes changing styles across your design incredibly simple. Done properly, mod
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Storybookを使ってReactの開発をX倍早くしよう！！便利なアドオンの使い方を紹介
長年のデザイン課題を解決！スマホWeb版トップページ デザインシステム導入
フロントエンド最前線に流されない Atomic Design という考え方
デザインの世界への招待状 #2 デザインの学び方｜三宅佑樹 / Yuki Miyake
コンポーネント指向のフロントエンド開発において、デザイナー×エンジニアの協業を通して学んだこと
特集ページのリリースと技術的背景について。 | スペースマーケットブログ
Sketchのシンボル活用で新規サービスの開発効率が2倍になった｜北川レオ / hicard
PRごとにCIでStorybookをビルドしてデザイナーとインタラクションまで作っていく話 - Qiita
「Atomic DesignとSketch Symbol」をお話させて頂きました | よりデザイン
真のコンポーネント粒度を求めて - builderscon tokyo 2017
patoリニューアルのデザインプロセスを公開｜原田 佳樹 Harada Yoshiki
Scaling CSS Components with BEM, REMs, & EMs | Lullabot
開発速度向上のためのAnewsモバイルアプリのアーキテクチャ改善
Riot.js で Atomic Design しながら AMESTAGE 作った話
サイバーエージェントの長期インターンに行ってきた - 冬のソフトウェア海岸
デザインシステム運用の雑多な細かいはなし - freee Developers Hub
Challenges of Interface Design for Mobile Devices
エンジニアがなるほどデザインを読むとCSSに対して意識が変わるかもしれないという話
React Adminの感想 - valid,invalid
2018年のフロントエンドエンジニア/デザイナーに知ってほしいAtomic Design - Qiita
Extensible CSS Idealistic Structure Theory