📨

Encraft #6「Focus on UI Component 実装」開催レポート

2023/09/26に公開

株式会社ナレッジワークソフトウェアエンジニアのziです。
本記事では、2023年8月30日に開催したオフライン勉強会Encraft #6「Focus on UI Component 実装」の開催レポートをお届けいたします！

Encraftとは？

Encraft（エンクラフト）は株式会社ナレッジワークが提供する、 "Enablement" と "Craftsmanship" をテーマにした勉強会です。技術にこだわりを持つ人々が集まって互いに知見を交換し、できることを増やしていく場を作りたいと思っています。
過去のイベントの開催レポートは以下からご覧ください。

オフラインで参加することが難しい方などに向けて、今回もYouTubeでのLive配信も行いました。動画アーカイブもこちらにありますので、ぜひご覧ください！
また、セッションの感想をハッシュタグ #encraft でつぶやいていただけると嬉しいです。

セッション

ButtonとLink、どう実装する？

@yoshiko_pg / 登壇資料

このセッションについて

ButtonとLinkのコンポーネントの設計と実装について。
ButtonとLinkの見た目と挙動を整理して実装した。

「見た目」と「振る舞い」を分離して考えた
「見た目」を持たない「振る舞い」の部分を個別に実装
- onClickを受け付けるClickableコンポーネント
- hrefを受け付けるLinkableコンポーネント
「見た目」はchildrenとして内部に持つため任意に与えることができる
また「見た目」と「振る舞い」を内部に持ち込んだコンポーネントも作成
- Buttonコンポーネント
- Linkコンポーネント
「見た目」と「振る舞い」を分離したことで、柔軟に効率的に機能実装ができた

Dive into SmartHR UI

@nabeliwo /　登壇資料

このセッションについて

SmartHR UIの実装、開発運用体制について

SmartHR内の複数のサービスでの見た目を統一させるために開発されたSmartHR UI
SmartHRはTypeScript, React, styled-componentsで作成されたJIS X 8341-3:2016適合レベルA準拠のOSS
SmartHR独自のデザインシステムも作成しており、デフォルトではそのデザイントークンに対応している
推しコンポーネントの話
- Button
  - Propsによるデザインの対応幅が広い
    - variant, size, wide, suffix, prefix, square, loading, disabledDetail...
  - 改善のエコシステム
    - 利用者から上がった改善を取り込み、還元、さらに利用してもらって改善というエコシステムで改善を繰り返している
- ComboBox
  - 検索によってフィルタリングできる複数選択も可能なセレクト
  - キーボード操作による選択肢の削除やフォーカスの移動なども実装している
  - コンポーネントの組み合わせによって発生するバグなども地道に改善している
    - なるべく複雑な挙動を実現するためのライブラリも使えるが、ライブラリの制約などに縛られないために、そういったライブラリは使わずに地道に実装している
- レイアウト系コンポーネント群
  - Every Layoutを参考にしたレイアウト系コンポーネント
  - これによって画面上の全てのUIをSmartHR UIで実装可能になった
smarthr-patternsの話
- SmartHR UIの組み合わせ方による個人差を埋めるためのパターン集
アクセシビリティ対応
- SmartHR UIでアクセシビリティ試験を実施しJIS X 8341-3:2016 レベルA準拠
- SmartHR UIのアクセシビリティを向上するとプロダクトのアクセシビリティ向上につながる
テストについて
- Storybookのカタログ化
- Chromaticによる画像回帰テスト
- Testcafeによるe2e

Spindle UIのつくりかた

@herablog / 登壇資料

このセッションについて

AmebaのデザインシステムのひとつのSpnidle UIについて

Spindleとは
- Amebaらしさを一貫して届けるための仕組み
- Spindleにはブランドガイドラインなども含まれておりUIライブラリはその一環
Spindle UIとは
- 各Webアプリで再作成の必要ない小さな単位でのコンポーネントを作成、配信することを目指している
- 逆に大きなライブラリを作ることは目指していない
Spindle UIの作られ方
- Suggest → Design → Document　→ Develop　→ Publishという流れで開発している
- Suggest
  - その時に利用されることがわかっているコンポーネントを気軽に提案できるようにしている
- Desgin
  - デザイナーがデザインと要件定義を行う
  - Tap Areaや一覧表なども定義
  - Figmaでも公開している
- Document
  - 背景・設計を記載して、不明点・考慮漏れを洗い出す
  - デザイントークン・プロパティ・使用例なども記載する
  - アクセシビリティチェックリストも確認する
- Develop
  - scaffdogを利用したテンプレートを利用している
  - StorybookをドキュメントとVRT用途で利用している
  - 実装中に気づいたことなどがあれば設計フェーズに戻ったり柔軟に対応している
- Publish
  - npmへのpublish
Spindle UIによりブランドを一貫して届ける仕組みができ、職種を超えたコラボレーションも生まれた

Triple-WIN アンケート

Encraftでは、参加者のアンケート回答に連動してナレッジワーク社が OSS プロジェクトに寄付をする試みを行っております。参加者の 1 回答当たり 8 ドルをナレッジワークが OSS に寄付することで、参加者と OSS プロジェクトをナレッジワーク社が繋ぐ仕組みです。
今回は45名の方がアンケートに回答してくださり、うち計上対象となるオフライン参加者35名ぶんの280ドルをopen collective経由で storybook プロジェクトに寄付いたしました。
storybookはナレッジワークでも日々利用しているOSSライブラリなので、少しでもお役にたてれば嬉しいです。
オフライン・オンライン問わず、ご回答いただいた皆様、ありがとうございました！