フロントエンド定例 2022/5/13

igarashisho|2022年05月13日
フロントエンド

こんにちは、フロントエンドチームです。
今週のフロントエンド定例の内容を記載します。

フロントエンド定例について、以前の記事(ランサーズのフロントエンドチームが取り組んでいること)でお伝えしたのですが、毎週金曜日に開催しており、実際の業務で取り組んでいることや気になった技術情報等をシェアしあう会になっています。

以下、今週の内容です。

@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"
     />
  );
}
というような感じに使用することが可能です。

追加・更新について

共通に使えそうなものはどんどんスタイルガイドに実装していきましょう

手順を記載すると

  1. src/component ディレクトリ下に下記のコンポーネントディレクトリ・ファイルを作成
  • src/component/[コンポーネント名]
    • src/component/[コンポーネント名]/index.stories.tsx
    • src/component/[コンポーネント名]/index.tsx
    • src/component/[コンポーネント名]/style.module.scss

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属性)を置くような仕組みで作ってたりします。

React Hook Formのregisterにあるname、refをコンポーネントのPropsにまわせばReact Hook Formも使用できるように作成しています。
実装のイメージとして下記になります。
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);
}
でバリデーションのエラーメッセージは取れることは確認済みではあるがerrors[‘form_input_name’]の型定義的にはFieldError[] | undefinedが期待されるというやつ
上記のIssueにもあるようにuseFormから取れるerrorsの型の解決方法がv8でも変わってくるのかも?
useForm<Form>とかではなくyupなども考えてみるかも思ったり
タイプセーフに書けるものが望まれるというとそれはそう

 

次回の更新予定は、5/20(金)になります!

前回の定例内容はこちらから確認可能ですのでご興味いただければ下記のリンクから閲覧いただければと思います。

https://engineer.blog.lancers.jp/フロントエンド定例