株式会社HRBrainでフロントエンドエンジニアをしている富岡です。 この記事はHRBrain Advent Calendar 2023カレンダー2の23日目の記事です。 背景 私の所属しているチームではフォームを作ることが多く、これまでは都度フォームを作成していました。 将来的な作成コスト削減のため、APIを元にフォームとバリデーションを作成することになりました。 作成する際に参考になりそうな記事を探しましたが、これというものは見つけられなかったため今回執筆することにしました。 主な使用技術 react: 17.0.2 typescript: 4.4.4, react-hook-form: 7.27.0 @hookform/resolvers: 2.8.8 yup: 1.0.0-beta.3 都度フォームを作成していたときの記述方法 例えば、firstName、lastName、memo

JavaScriptのundefined判定にはいくつか記載方法がありますが、言語仕様を理解しないまま記述すると、ブラウザや開発環境によっては思わぬバグを生み出すことがあります。 この記事では、JavaScriptにおけるundefinedの判定方法を複数紹介し、ESLintのルールから適切な判定について検討してみようと思います。 ESLintとは ESLintは、JavaScriptやTypeScriptの静的コード解析ツールでです。 単純な構文エラーの検出やルールを設定することで一貫性のあるコーディングスタイルを維持しやすくなります。 JavaScriptにおけるundefinedの判定パターン JavaScriptでundefined判定をしたいとき、いくつかの書き方が考えられます。 パターンとしてはざっとこんなものでしょうか。 厳密等価演算子（===）を使用する

はじめに この記事はHRBrain Advent Calendar 2022カレンダー3の21日目の記事です。 フロントエンドエンジニアの富岡です。 35歳のフロントエンドエンジニアがメガベンチャーから転職した理由で書いた通り11月にHRBrainへ入社しました。 HRBrainでは複数のプロダクトでstyled-componentsを用いて開発をしており、私が配属された労務プロダクトでも使用しています。そこで、開発がしやすいようにVisual Studio Code（以降VS Code）のプラグインのインストールをしたのですが、シンタックスハイライトは効いているのに、補完が効かないという状態になってしまいました。 この記事では、解決した方法とそれまでに行った手順を備忘録も兼ねて記載します。 開発環境 解決方法が異なることもあると思われるため、開発環境を抜粋して記載します。 M1Mac（O

なぜエンジニアになったのか エンジニアになる直前は焼肉屋の店長を3年ほどしていました。 接客や調理をしていく中、スーパーで購入すれば同じ品質の食材を店舗より安く購入できるのに、お客様が来店してくれるのは過ごす時間や空間に価値を感じてくれているからだろうと考えるようになりました。 何に価値を感じているかはそれぞれですが、それを受け取り作り上げていくにはどうしてもスタッフの力が必要で採用と教育がとても重要でした。 スタッフは学生アルバイトが主体で卒業などによる入れ替わりがあるため、一度体制ができても長期間維持できるものでありません。常に採用と教育に力を割く必要がありましたが、採用・教育に注力できない状況となり別の仕事を考えたときエンジニアを志すことにしました。 エンジニアという職種を志した理由は下記でした。 自身のスキルアップがサービスのレベルアップに直結しそう さまざまななポジションの人と関