AWS EC2 : gitをインストール
AWS EC2でGitをインストールする手順。 gitをインストール 必要に応じて、以下の、コマンドでrootへ移動 以下のコマンドでgitをインストール。 バージョン確認 バージョンが表示されればOK
AWS EC2 : Node環境構築
EC2上でNodeの環境を構築する手順。 Contents1 NVM (Node Version Manager) をインストール1.1 rootへ移動1.2 NVMをインストール2 NVMを現在のシェルセッションで利用 […]
Docker コンテナ内に入り、MySQLに接続
Dockerコンテナ内に作成されたMySQLへ接続する方法。 Contents1 dockerコンテナに入る1.1 コンテナ名を確認する1.2 コンテナに入る2 MySQLにログイン dockerコンテナに入る コンテナ […]
react-hook-form 基本的な使い方② (チェックボックスなど)
本投稿では、react-hook-formを使用した以下の要素の基本的な記述方法についてまとめる。 コード例 コードの解説については、コメントとして残す。 動作例 以下、動作例。
react-hook-form + zod : バリデーションの実装
Zodは、TypeScript向けのスキーマベースのバリデーションライブラリである。 入力データやAPIレスポンスなどのデータ構造の検証を、TypeScriptの型と一貫して行うことが可能であり、react + Type […]
react-hook-form 基本的な使用方法
近頃は、react-hook-formを利用し、フォーム入力/送信周りの実装(バリデーションも合わせて実装が可能)をするケースは多く見られるため、使用方法を残しておく。 Contents1 インストール2 サンプルコード […]
指定したセレクタに一致しない要素に対して、スタイルを適用(:not())
特定の要素に対してのみスタイルを適用する方法は、nth-child()などを含め、色々と存在するが、:not()という疑似要素を使用することでも実現することが可能。 今回は、:not()の使用方法についてまとめてみる。 […]
子要素に関連づいた親要素に対して、スタイルを適用(:has())
子要素に紐づいた親要素に対してのみ、CSSを適用するには、:has()という疑似要素を使用する。 例えば、チェックボックスやラジオボタンの選択状態に応じて、スタイルを変更することが手軽に出来たりするので、便利。 今回は、 […]
マウスでクリックやドラッグし、選択した要素へスタイルを適用させる(::selection)
とある要素をクリックもしくはドラッグした際に、デザインを変更したい時がある。 cssの疑似要素で実装することも可能なため、今回はその方法についてまとめていく。 Contents1 HTMLソースの準備2 擬似要素(::s […]
HTML/CSS : データ属性(data-**)の使用
特定のデータが渡された場合に、柔軟にCSSの切り替えを行いたい時がある。 例えば、APIから渡された値に応じて、表示されるアイコンを切り替えたい場合や同じコンポーネント内で用途ごとにデザインを変えたい場合などが挙げられる […]