2025-02-06

【React】React Hook Form でフォームの管理をする

React

React Hook Form を使う準備

npm でインストールします。

> npm install --save-dev react-hook-form

基本的なサンプル

import { useForm, FieldErrors } from 'react-hook-form';
import style from './FormCommon.module.css';


const FormBasic = () => {

    // フォームの定義
    type FormValues = {
        name: string;
        email: string;
        gender: string;
        detail: string;
    };

    // フォームのデフォルト値
    const defaultValues : FormValues = {
        name: 'なまえ',
        email: '',
        gender: '',
        detail: '詳細'
    };

    // 分割代入でuseFormから変数を取り出す
    const { register, handleSubmit, formState: { errors } } = useForm({ defaultValues });

    const onSubmit = (data: FormValues) => {
        console.log('onSubmit ----');
        console.log(data);
        alert('送信しました');
    }

    const onError = (errors: FieldErrors<FormValues>) => {
        console.log('onError ----');
        console.log(errors);
        alert('送信に失敗しました');
    }
    
    return (
        <div>
            <p>React Hook Form の基本</p>
            <form onSubmit={handleSubmit(onSubmit, onError)}>
                
                <div className={style.Div}>
                    <label className={style.Label}>名前: </label>
                    <input type="text" className={style.InputText} {...register('name', { 
                        required: '名前は入力必須です',
                        maxLength:{
                            value: 20,
                            message: '名前は20文字以内で入力してください'
                        } })} />
                    {errors.name && <div className={style.Error}>{errors.name.message}</div>}
                </div>
                
                <div className={style.Div}>
                    <label htmlFor="gender" className={style.Label}>性別: </label>
                    <label>
                    <input type="radio" value="male" {...register('gender', { required: '性別は入力必須です'})} />
                    男性
                    </label>　
                    <label>
                    <input type="radio" value="female" {...register('gender', { required: '性別は入力必須です'})} />
                    女性
                    </label>
                    {errors.gender && <div className={style.Error}>{errors.gender.message}</div>}
                </div>

                <div className={style.Div}>
                    <label htmlFor="email" className={style.Label}>メールアドレス: </label>
                    <input type="text" className={style.InputText} {...register('email', { 
                        required: 'メールアドレスは入力必須です',
                        pattern:{
                            value: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
                            message: 'メールアドレスの形式が不正です'
                        } })} />
                    {errors.email && <div className={style.Error}>{errors.email.message}</div>}
                </div>

                <div className={style.Div}>
                    <label className={style.Label}>詳細: </label><br/>
                    <textarea className={style.InputTextArea} {...register('detail', { 
                        required: '詳細は入力必須です',
                        minLength:{
                            value: 10,
                            message: '詳細は10文字以上で入力してください'
                        } })} />
                    {errors.detail && <div className={style.Error}>{errors.detail.message}</div>}
                </div>

                <button className={style.Button} type="submit">送信</button>
            </form>
        </div>
    )
}

export default FormBasic;

フォームの定義

    // フォームの定義
    type FormValues = {
        name: string;
        email: string;
        gender: string;
        detail: string;
    };

    // フォームのデフォルト値
    const defaultValues : FormValues = {
        name: 'なまえ',
        email: '',
        gender: '',
        detail: '詳細'
    };

useFormでReact Hook Form を初期化する

    const { register, handleSubmit, formState: { errors } } = useForm({ defaultValues });

Submit時の処理

    const onSubmit = (data: FormValues) => {
        console.log('onSubmit ----');
        console.log(data);
        alert('送信しました');
    }

エラー発生時の処理

    const onSubmit = (data: FormValues) => {
        console.log('onSubmit ----');
        console.log(data);
        alert('送信しました');
    }

Submit時に呼び出す処理

            <form onSubmit={handleSubmit(onSubmit, onError)}>

register関数で入力要素にハンドラーなどを登録する

                    <input type="text" className={style.InputText} {...register('name', { 
                        required: '名前は入力必須です',
                        maxLength:{
                            value: 20,
                            message: '名前は20文字以内で入力してください'
                        } })} />

エラー処理

                    {errors.name && <div className={style.Error}>{errors.name.message}</div>}

2025-02-02

nvmを使用してnode.jsのバージョンを切り替える

nvmとは

複数の異なるバージョンをnode.jsをインストールし、コマンドで簡単にnode.jsのバージョンを切り替えることができるツール。

プロジェクトごとで異なるバージョンのnode.jsを切り替えたい時などに使用する。

nvmの導入（windowsの場合）

以下からインストーラーnvm-setup.exeをダウンロードしてインストールする。

https://github.com/coreybutler/nvm-windows/releases

nvmの導入（Macの場合）

homebrew

homebrew が入っていない場合は導入する。公式ページの「インストール」の下に記載されているコマンドをコピーし、ターミナルで実行する。

https://brew.sh/ja/

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

※必ず公式サイトで最新のコマンドを確認して実行すること

途中、Macのアカウントのユーザーアカウントのパスワードを聞かれるので入力する。

インストールが終わった後、

- Run these commands in your terminal to add Homebrew to your PATH:

の下に表示されるコマンドをコピペして実行、パスを通す。

echo >> /Users/[ユーザー]/.zprofile

echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/user/.zprofile

eval "$(/opt/homebrew/bin/brew shellenv)"

コマンド brew を実行し、インストールが成功しているかどうか確認する。

パスがうまく通っていない場合は以下のような表示が出る。

zsh: command not found: brew

nvm

以下コマンドをターミナルで実行し、インストールする

> brew install nvm

アンインストールする場合は以下のコマンドを実行する

> brew uninstall nvm

パスが通っていない場合、以下コマンドを実行してパスを通す

Zsh（デフォルトのシェル）を使っている場合：

echo 'export NVM_DIR="$HOME/.nvm"' >> ~/.zshrc
echo '[ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && \. "/opt/homebrew/opt/nvm/nvm.sh"' >> ~/.zshrc
echo '[ -s "/opt/homebrew/opt/nvm/etc/bash_completion" ] && \. "/opt/homebrew/opt/nvm/etc/bash_completion"' >> ~/.zshrc

Bashを使っている場合：

echo 'export NVM_DIR="$HOME/.nvm"' >> ~/.bashrc
echo '[ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && \. "/opt/homebrew/opt/nvm/nvm.sh"' >> ~/.bashrc
echo '[ -s "/opt/homebrew/opt/nvm/etc/bash_completion" ] && \. "/opt/homebrew/opt/nvm/etc/bash_completion"' >> ~/.bashrc

設定の反映

source ~/.zshrc # Zshの場合
source ~/.bashrc # Bashの場合

パスが通っているかどうかの確認

nvm --version

nvm-windowsを使用している場合の切替

インストール可能なnode.jsの確認

> nvm list available

以下のように表示される

| CURRENT | LTS | OLD STABLE | OLD UNSTABLE |
|--------------|--------------|--------------|--------------|
| 23.7.0 | 22.13.1 | 0.12.18 | 0.11.16 |
| 23.6.1 | 22.13.0 | 0.12.17 | 0.11.15 |
| 23.6.0 | 22.12.0 | 0.12.16 | 0.11.14 |
| 23.5.0 | 22.11.0 | 0.12.15 | 0.11.13 |
| 23.4.0 | 20.18.2 | 0.12.14 | 0.11.12 |
| 23.3.0 | 20.18.1 | 0.12.13 | 0.11.11 |
| 23.2.0 | 20.18.0 | 0.12.12 | 0.11.10 |
| 23.1.0 | 20.17.0 | 0.12.11 | 0.11.9 |
| 23.0.0 | 20.16.0 | 0.12.10 | 0.11.8 |
| 22.10.0 | 20.15.1 | 0.12.9 | 0.11.7 |
| 22.9.0 | 20.15.0 | 0.12.8 | 0.11.6 |
| 22.8.0 | 20.14.0 | 0.12.7 | 0.11.5 |
| 22.7.0 | 20.13.1 | 0.12.6 | 0.11.4 |
| 22.6.0 | 20.13.0 | 0.12.5 | 0.11.3 |
| 22.5.1 | 20.12.2 | 0.12.4 | 0.11.2 |
| 22.5.0 | 20.12.1 | 0.12.3 | 0.11.1 |
| 22.4.1 | 20.12.0 | 0.12.2 | 0.11.0 |
| 22.4.0 | 20.11.1 | 0.12.1 | 0.9.12 |
| 22.3.0 | 20.11.0 | 0.12.0 | 0.9.11 |
| 22.2.0 | 20.10.0 | 0.10.48 | 0.9.10 |

node.jsのインストール（バージョンを 10.24.0 に指定した場合）

> nvm install 10.24.0

インストール済の node.js の確認

> nvm ls

(現在使用しているバージョンには * が付く)

22.2.0
16.1.0
* 10.24.0 (Currently using 64-bit executable)

使用するnode.jsの指定（バージョンを 22.2.0 に指定した場合）

> nvm use 22.2.0

有効になっているnode.jsのバージョンの確認

> node -v

以下のように表示される

nvm use 22.2.0

2025-02-02

お仕事で使う最低限のgit操作

git・github

gitそのものの解説ではなく、あくまで普段よく使用する操作のメモ。

※ちょっとずつ加筆予定

githubのリポジトリをクローンする

githubのプロジェクトのページを開き、右上の緑色のボタン <>Code をクリックする。

開いた窓の https の下にあるURLをコピー

クローンしたいディレクトリで以下コマンドを打つ

> git clone [コピーしたURL]

リポジトリから最新を取得する

> git pull

ブランチを作る

> git branch [ブランチ名]

ブランチを切り替える

> git checkout [ブランチ名]

mainブランチから今のブランチに最新を取り込む

mainブランチに切り替える

> git checkout main

mainブランチの最新を取得する

> git pull

最新を取り込みたい(マージしたい)ブランチに切り替える

> git checkout [ブランチ名]

mainブランチをマージする

> git merge main

リポジトリに編集した内容を反映する

> git push

2015-07-28

Laravel 5.1 の Hello World 【View編　の準備】

さて、前回 Controller を使った Hello World をやりましたが、今回は View を使って Hello World をやりましょう。これでMVCのVとCが登場する訳です。ViewにはLaravel標準のbladeというテンプレートを使用してやってみます。

【準備】
blade上でformを使用するときformヘルパーというものを使うのですが、Laravel5からはモジュールを追加しないとformヘルパーが使えません。Laravel4では特になんの設定もなく使えていたみたいなので、5に移行するときのちょっとしたハマりポイントになっているみたいです。

まずはLaravelインストールフォルダ直下にある composer.php の require に "illuminate/html": "~5.0" を追記します。

    "require": {
        "php": ">=5.5.9",
        "laravel/framework": "5.1.*",
        "illuminate/html": "~5.0"
    },

配列形式なのでカンマを忘れずに。次にコマンドプロンプトで composer update をしてモジュールの追加をします。カレントディレクトリはLaravelインストールディレクトリです。

> cd C:\pleiades\workspace\app_laravel
> composer update

モジュールの追加が終わったら config/app.php を編集します。
Laravel 5.1 の場合、

'providers'に

Illuminate\Html\HtmlServiceProvider::class,

'aliases' に

'Form' => Illuminate\Html\FormFacade::class,
'Html' => Illuminate\Html\HtmlFacade::class,

を追記します。
Laravel 5.0 の場合は、

'providers'に

'Illuminate\Html\HtmlServiceProvider',

'aliases' に

'Form' => 'Illuminate\Html\FormFacade',
'Html' => 'Illuminate\Html\HtmlFacade',

を追記します。
5.1 と 5.0 で微妙に書式が違います。5.1 ではファサードでclassを指定するようになりました。

ちなみに composer update を行う前に config/app.php 編集してしまうとエラーになります。

[Symfony\Component\Debug\Exception\FatalErrorException]
Class 'Illuminate\Html\HtmlServiceProvider' not found

というエラーがでたら config/app.php の 'providers' の記述を削除(コメントアウトでよい)して、composer update をしてください。

大したことまだ書いていないけど、今日はここまでにします。

2015-07-23

Laravel 5.1 の Hello World

PHP

Laravel 5.1 とタイトルにうたってますが、別にバージョン5.1固有の話題ってわけでもないかも…

前回Laravelのインストールについて記事を書いたので、今回は Hello World です。まあ、前回にも動作確認で簡単な Hello World はやっているんですがね。routes.php に

Route::get('aaa', function () {
return 'Hello!';
});

ってやつですね。URLに aaa と指定すると、function(){} 内に記述した処理が動きます。ここでは 'Hello!' という文字列をレスポンスに渡しているので、ブラウザに Hello! と表示されます。

この例だけ見るとすべてのページの処理と出力をこの routes.php に書いていくのがLaravelのやり方なんかい？と勘違いしてしまいますが、あくまでこういう書き方もできるというだけで、もちろんコントローラーやビューを使用する方法も用意されております。

という訳で、今回はコントローラークラスを作成してHello World をやってみたいと思います。app_laravel/app/Http/Controllers 以下(app_laravelはLaravelのインストールディレクトリなので環境により異なります)に HelloController.php を作成し、以下のように記述します。

<?php namespace App\Http\Controllers;
class HelloController extends Controller
{
    public function index()
    {
        return "hello!!!!";
    }
}

routes.php に、以下を追記します。

Route::get('hello', 'HelloController@index');

これで、URLに hello を指定すると HelloController クラスの index() メソッドを呼ぶという動きになります。ブラウザで

http://localhost/app_laravel/hello

にアクセスすると、画面に hello!!!! と表示されます。

2015-07-18

Laravel 5.1 のプロジェクト作成（インストール）その2

PHP

Laravelのイベントに参加するために茅場町のCOEDOに来ています。ただいまCOEDOから記事を投稿しております。

今回はhtdocs以外にLaravelをインストールしてみたいと思います。

【下準備】
Composerがインストール済とします。 Composerは下記URLからダウンロードできます。

https://getcomposer.org/download/

【Laravelのプロジェクト作成】
前回と同じですがインストール先はhtdocs以外の任意のフォルダです。
今回はEclipse(Aptana)のプロジェクトにしたいのでワークスペースフォルダ
(ここでは　C:\pleiades\workspace)に作成します。

>cd C:\pleiades\workspace
>composer create-project laravel/laravel app_laravel --prefer-dist

インストールできたらバージョンの確認(一応)

>cd app_laravel
>php artisan --version

【エイリアスの設定】
ここから前回とちょっと違うところです。htdocs以下ではないので、このままでは当然ブラウザからアクセスできません。なのでApacheの設定ファイルhttpd.confを編集します。ちなみにデフォルト設定でxamppをインストールした場合、C:\xampp\apache\confにあります。
余談ですが、こういう設定ファイルの編集は間違えると環境が壊れてしまうので、編集前のファイルを別名(httpd.conf_bkとかhttpd.conf_20150718とか)でコピーしバックアップしておくことをお勧めします。

Alias /app_laravel/ "C:/pleiades/workspace/app_laravel/public/"
<Directory "C:/pleiades/workspace/app_laravel/public/">
      Options All
      AllowOverride all
      Require all granted
</Directory>

記述する場所は　<IfModule alias_module>　～　</IfModule>　の間がいいでしょう。
この設定内容では /app_laravel/ にブラウザでアクセスしたら C:/pleiades/workspace/app_laravel/public/ を表示するよ！という意味になります。
設定が終わったらApacheを再起動し、ブラウザで

http://localhost/app_laravel/

にアクセスします。うまくいっていれば画面に　Laravel5　と表示されます。

【Hello World がうまくいかない？】
前回と同じくapp_laravel/app/Http にある routes.php をテキストエディタで開き、

Route::get('aaa', function () {
return 'Hello!';
});

と記述。ブラウザで以下URLへアクセスします。

http://localhost/app_laravel/aaa

しかし　Hello!　とは表示されずに404エラーになってしまいます。

【.htaccessの編集】

上記問題を解決するためには、.htaccess の編集を行う必要があります。.htaccess は Laravel インストールフォルダの public フォルダ直下にあるのでテキストエディタで開き、編集します。

編集前

<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews
    </IfModule>

    RewriteEngine On

    # Redirect Trailing Slashes If Not A Folder...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)/$ /$1 [L,R=301]

    # Handle Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]
</IfModule>

編集後

<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews
    </IfModule>

    RewriteEngine On

    # Redirect Trailing Slashes If Not A Folder...
    RewriteRule ^(.*)/$ /app_laravel/$1 [L,R=301]

    RewriteBase /app_laravel

    # Handle Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]
</IfModule>

RewriteCond %{REQUEST_FILENAME} !-d　を削除、
RewriteRule ^(.*)/$ /$1 [L,R=301]　を
RewriteRule ^(.*)/$ /app_laravel/$1 [L,R=301]　に編集、
RewriteBase /app_laravel　を追記しています。

改めてブラウザで

http://localhost/app_laravel/aaa

を表示してみると、無事画面に Hello! と表示されました！

とりあえず、これで完成です。

【Eclipse(Aptana)のプロジェクト作成】
Eclipse(Aptana)のプロジェクト新規作成をし、プロジェクト名に先ほど作成した Laravelプロジェクトの名前(今回の例ならば　app_laravel)を指定します。すでにフォルダがあるので警告が出ますが、かまわず[完了] ボタンを押せばプロジェクトが作れます。

2015-07-15

Laravel 5.1 のプロジェクト作成（インストール）

PHP

超久しぶりの投稿です。

PHP フレームワークのLaravelを仕事で使うことになったので、基本的なことをメモしていきたいと思います。

Laravelは日本ではまだマイナーですが、海外では人気No1のPHP フレームワークだそうです。日本では書籍もまだほとんど出ておらず、情報に乏しいのが難点です。最新版のバージョンは5.1ですが、出回っている情報もまだバージョン4までのものが多いみたいです。

さて、とりあえずは開発に必要な環境を用意するところからやってみたいと思います。Window8.1上のxamppに開発環境を作っていきます。

【下準備　Composer のインストール】
LaravelではComposerというツールを使ってパッケージ等の管理を行っているようです。なのでまずはComposerをインストールします。下記URLからインストーラーをダウンロードしてインストールしてください。

https://getcomposer.org/download/

【Laravelのプロジェクト作成】
まずは、xampp(apache)のhtdocs以下にLaravelプロジェクトを作ってみます。

①コマンドプロンプトを開き、カレントディレクトリをhtdocsまで移動する。

>cd C:\xampp\htdocs

②以下コマンドを打ち、Laravelをインストールする。

>composer create-project laravel/laravel app_laravel --prefer-dist

上記コマンドを打つ場合は最新バージョンのLaravelがインストールされる。
バージョンを指定してインストールしたい場合は、以下のようにする(例は4.2の場合)。

>composer create-project "laravel/laravel=~4.2" app_laravel --prefer-dist

③インストールしたLaravelのバージョン確認
インストールしたディレクトリで確認コマンドを打つ。

>cd app_laravel
>php artisan --version

④動作確認
ブラウザでLaravelをインストールしたフォルダの下のpublicを表示する。

http://localhost/app_laravel/public/

Laravel5と画面に表示されればとりあえずOK。

【とりあえずのHello World】
①app_laravel/app/Http にある routes.php をテキストエディタで開き、以下を記述。

Route::get('aaa', function () {
return 'Hello!';
});

②ブラウザで確認する。下記URLをブラウザで開いてみる。

http://localhost/app_laravel/public/aaa

画面にHello!と表示されればひとまず成功。

しかしURLにpublicとか入ってちょっと気持ち悪いですね。次回はちょっと違ったやり方でプロジェクトを作ってみましょう。

とりあえず今回はここまで！

Dream of Electric Sheep

フリーランスプログラマの備忘録自分用に技術をメモメモφ(・ω・。)

【React】React Hook Form でフォームの管理をする

React Hook Form を使う準備

基本的なサンプル

フォームの定義

useFormでReact Hook Form を初期化する

Submit時の処理

エラー発生時の処理

Submit時に呼び出す処理

register関数で入力要素にハンドラーなどを登録する

エラー処理

nvmを使用してnode.jsのバージョンを切り替える

nvmとは

nvmの導入（windowsの場合）

nvmの導入（Macの場合）

homebrew

nvm

nvm-windowsを使用している場合の切替

お仕事で使う最低限のgit操作

githubのリポジトリをクローンする

リポジトリから最新を取得する

ブランチを作る

ブランチを切り替える

mainブランチから今のブランチに最新を取り込む

リポジトリに編集した内容を反映する

Laravel 5.1 の Hello World 【View編　の準備】

Laravel 5.1 の Hello World

Laravel 5.1 のプロジェクト作成（インストール）その2

Laravel 5.1 のプロジェクト作成（インストール）