タグ

関連タグで絞り込む (0)

  • 関連タグはありません

タグの絞り込みを解除

JavaScriptとDesignとReactに関するefclのブックマーク (2)

  • ソースコードを解析して社内向けUIライブラリの使用状況を自動で集計する

    デザインエンジニアの安田(@_yuheiy)です。 この記事では、社内向けに提供しているライブラリの使用状況を把握すべく作成した、プロダクト全体のソースコードを解析して、提供しているモジュールおよびそれを使用しているプロダクトごとに個別に自動集計する仕組みとその実装方法について解説します。 ライブラリ開発の問題と使用状況の解析 弊社では、KARTEのプロダクト群全体のデザインシステムである「Sour」を開発しています。その一環として、React製のUIライブラリ「sour-react」を作成し、社内向けのnpmパッケージとして提供しています。現在、sour-reactはKARTEのいくつものプロダクトにおいて採用されており、UI開発に欠かせないものになるほど浸透しています。 作成したライブラリが広く使われるようになるのは喜ばしくもありますが、一方、それに伴って新たな問題が生じることもありま

    ソースコードを解析して社内向けUIライブラリの使用状況を自動で集計する
    efcl
    efcl 2024/08/06
    デザインシステムのUIコンポーネントがどのプロダクトで利用されているかを集計するGitHub Actionsで動くスクリプトについて。 実際にデザインシステムが提供してるUIを利用している回数や場所などの使用状況を可視化する
  • フロントエンド視点:デザイナーと協業して作るスタイルガイドの難易度を下げる

    前回 Atomic Design を実案件に導入した話で触れたコンポーネントリストを作り始めたとき、個人的にいろいろと学びがありました。 コンポーネントリストやスタイルガイドは、フロントエンドエンジニアとデザイナーが協業して作る必要がありますが、この協業がなかなかうまくいかず、スタイルガイド運用をワークさせるのは難易度が高い印象がありました。 自分自身、今まで携ってきた開発プロジェクトにおいて、うまくワークしたと思えるスタイルガイド作りができなかったのですが、現在のプロジェクトで開発初期からスタイルガイドを作り、リリース後、運用フェーズまでワークさせることができました。 記事ではフロントエンドエンジニアとデザイナーが協業してスタイルガイドを作り始めるにあたって気をつけたことについて書いていきます。 共通言語としてのスタイルガイド 開発において、スタイルガイドが欲しい理由は、開発中のコミュ

    フロントエンド視点:デザイナーと協業して作るスタイルガイドの難易度を下げる
    efcl
    efcl 2016/05/18
    デザイナーと協業するためのコニュニケーションツールとしてのスタイルガイドについて
  • 1