こんにちは、フロントエンドチームです。
今週のフロントエンド定例の内容を記載します。
フロントエンド定例について、以前の記事（ランサーズのフロントエンドチームが取り組んでいること）でお伝えしたのですが、毎週金曜日に開催しており、実際の業務で取り組んでいることや気になった技術情報等をシェアしあう会になっています。
以下、今週の内容です。
@syo_igarashi
社内共有UIライブラリ（スタイルガイドライン）の利用について
社内GitHubレポジトリにあるスタイルガイドラインで定義しているUIをnode_modulesとして使用可能になりました。
使用例
使用するときは対象のプロジェクトで
yarn add https://github.com/[スタイルガイドラインのレポジトリ].git#master
もしくは
yarn add https://github.com/[スタイルガイドラインのレポジトリ].git#20220412-1
とGitのブランチもしくはタグなどでインストールがされます。
開発しながらデザインガイドも更新する場合はmaster指定でガツガツ進めていく方針でもいいと思います。
リリースが終わり、開発が安定してストップし始めたらGitのタグ指定するか デザインガイドのpackage.json のバージョンを更新していくのがよいかもしれません。
JSX上では
import { Alert } from'@lancers/design_guideline';
const Component = () => {
return (
<Alert
title="import { Alert } from '@lancers/design_guideline';"
description="success"
kind="success"
/>
);
}追加・更新について
共通に使えそうなものはどんどんスタイルガイドに実装していきましょう
手順を記載すると
- src/component ディレクトリ下に下記のコンポーネントディレクトリ・ファイルを作成
- src/component/[コンポーネント名]
- src/component/[コンポーネント名]/index.stories.tsx
- Storybook上でのテスト よりStorybook駆動開発のため必須
- src/component/[コンポーネント名]/index.tsx
- src/component/[コンポーネント名]/style.module.scss
- src/component/[コンポーネント名]/index.stories.tsx
2. Sorybook経由にコンポーネント実装を進める
3. src/component/index.ts に新規で追加したコンポーネントをexport指定追加する
本当に外のディレクトリにもexportしたいなど依存性の整理のためにある
4. yarn buildでJSファイルの生成をする
5.コンポーネント実装をGitコミットプッシュする
6. PRを作成しCIとレビュアーを通す
PRにfeature, bugなどのラベルをつける（理由は後記にあるタグ作成のため）
- CIで行っていること
- ビジュアルリグレッションツール確認
PR経由にコンポーネントの変更がわかるようになっている - eslint, stylelintによる構文チェック
- Storybook経由でのユニットテスト実行
- ビジュアルリグレッションツール確認
7. PRマージ後はGitHubのリリース機能からGitのタグを生成する
タグの名前は [YYYYMMDD-n] の日付があるようなバージョンを意識したもので作成する
PRのラベルの情報からリリースノートとしても自動生成される
あとは使用例にあるライブラリの使い方で機能実装側で使用する
再度スタイルガイドラインが更新されたときは
yarn upgrade @lancers/design_guidelineすること
大まかなフローはこのような感じで
細かい規約等は社内Wikiに記載します。
React Hook Form使い始めた
社内共有UIライブラリでもReact Hook Formを使えるようにする仕組み上、
共通のinputタグコンポーネントのPropsとしてinputRef、name(inputタグのname属性)を置くような仕組みで作ってたりします。
import { useForm } from 'react-hook-form';
const Input = ({ type, value, name, inputRef }) => {
return (
<input
type={type}
value={value}
name={name}
ref={inputRef}
>
</input>
);
}
const Component = () => {
const { register } = useForm();
const { name, ref } = register('form_name');
return (
<Input
type="text"
value="hoge"
name={name}
inputRef={ref}
>
</Input>
)
}
import { useForm } from 'react-hook-form';
const Component = () => {
const {
formState: { errors },
setError
} = useForm({);
setError(
'form_input_name',
{
type: 'custom',
message: 'バリデーションエラー'
}
);
console.log(errors['form_input_name'].message);
}
次回の更新予定は、5/20（金）になります！
前回の定例内容はこちらから確認可能ですのでご興味いただければ下記のリンクから閲覧いただければと思います。