#フロントエンド
自社コーポレートサイトのアクセシビリティ向上に取り組み始めた話
こんにちは。イチマルイチデザイン株式会社でフロントエンドエンジニアをしている長谷川です。
この度、自社コーポレートサイト（https://101de-sign.com/）のアクセシビリティ向上の取り組みを始めました。
今回の記事では、アクセシビリティ向上に取り組み始めた経緯や取り組み内容を、備忘録として書いています。
アクセシビリティ周りのちょっとした解説も交えていますが、がっつり解説はして
Body scroll lockを使用して要素のスクロール固定を制御するカスタムフックを作成する
こんにちは。
イチマルイチデザインのフロントエンドエンジニアの高橋です。
今回は、Body scroll lockを使用したカスタムフックを作成して、ドロワーメニューやモーダルの展開時に、背面の要素を固定する処理を簡単かつシンプルに実装する方法を共有します。
実装方法と解説
こちらが実際のコードの全体像となります。
// useBodyScrollLock.tsimport { RefObj
Chakra UIとReact Hook FormとYupを使ってフォームを作成する
こんにちは。イチマルイチデザインのフロントエンドエンジニアの高橋です。
今回は、Chakra UIとReact Hook FormとYupを使用して、ユーザビリティ高めのフォームを比較的簡単に作成する方法を共有します。
使用するライブラリ実装方法こちらが実際のコードの全体像となります。
import { Button, Container, FormControl, FormErrorMes
Mac に Yarn をインストールする
イチマルイチデザインでフロントエンドを担当している河口です。
今回は Yarn を Mac にインストールする手順を紹介します。
Yarn は js のパッケージを管理できるパッケージマネージャーです。
Node.js をインストールした際に、自動でインストールされる npm と役割は同様になります。
Command Line Tools for Xcode をインストールまずは、動作環境を整