当記事では、Reactでよく利用されるCSSフレームワークであるMaterialUI（通称：MUI）のDataGridの便利機能について紹介します。
MUIのDataGridは無料版でも高機能でいい感じ。
ついでにセル入力時に最大入力文字数を制限する方法はないかな〜
と、思ってる方におすすめです。
この記事では、以下のことを紹介してます。
- MaterialUIとは
- MaterialUIのDataGridとは
- maxlengthを設定する理由
- DataGridのセルにmaxlengthを設定する方法
materialUIでDataGridを使ったのですが、各項目の入力セルにmaxlengthを簡単に設定できませんでした。今回はDataGridのセルにmaxlengthを設定する方法を紹介します。
MaterialUIとは
MaterialUIを知らない方向けに簡単にMaterialUIを紹介します。
ReactやVueなどで画面を開発する場合、画面をデザインする時にHTMLとCSSを利用します。
CSSでデザインを最初からデザインすると手間と時間がかかります。この手間と時間を削減するために、世の中にはある程度デザインされたライブラリが存在しています。これがCSSフレームワークと呼ばれるものです。
MaterialUIは、Reactを利用する際に利用されるメジャーなCSSフレームワークの一つとなります。高機能のものは有償ですが、一部機能に制限はありますが無償版が提供されています。
本記事で利用するライセンス
無償版でも一覧上でデータの編集ができるDataGridという機能が使えるので、本記事では無償版を利用します。
本記事では実際にMaterialUIを導入し、ある程度知識がついている人向けの記事であるため、導入手順などは割愛しています。
導入方法は以下の公式ページを参照ください。
Material UI: React components that implement Material Design (mui.com)
MaterialUIのDataGridとは
上で少し触れましたが、MaterialUIのDataGridはデータを表示したり、Excelのように一覧上でデータを編集することができる機能です。
各項目に、DataGridが提供しているオブジェクトやTextFieldやセレクトボックスなどの汎用的なオブジェクトを設定することで、編集時ののオブジェクトを自由に設定することが可能です。
今回はDataGridが提供しているデフォルトのオブジェクトを使った場合のテキストボックスに、最大文字数の制限（maxlength）を設定する方法を紹介します。
DataGridのデフォルトのオブジェクトを採用した理由
上で説明しましたが、DataGridにはデフォルトのオブジェクトを設定するほか、TextFieldなどのオブジェクトを設定することが可能です。
TextFileldなどのオブジェクトを適用すればTextFieldのプロパティをそのまま利用できるので、maxlengthなどの設定も苦労なくできるのですが、以下の点から採用しませんでした。
理由１：表示モードと編集モードがなくなる
DataGridでは、表示時の見た目と編集時の見た目が違います。
Excelのようにセルをダブルクリックするとテキストボックスの見た目になる「編集モード」、他のセルに移動すると、ラベルの状態となる「表示モード」になるのがデフォルトの挙動なのですが、項目にTextFeildなどのオブジェクトを設定すると、常に見た目が「編集モード」となります。
この挙動に違和感を感じたため、デフォルトのオブジェクトを採用しました。また、手間を削減するためにCSSフレームワークを採用しているので、可能な限りCSSフレームワークの機能を利用したいと思ってます。
各項目にオブジェクトを設定する方法は、各項目の実装が必要となり、手間が増えるため採用しませんでした。
理由２：オブジェクトの定義が面倒
DataGridが提供しているオブジェクトを採用しない場合、各項目にオブジェクトを設定する必要があります。せっかくCSSフレームワークを導入しているので余計なことはしたくないのですが、オブジェクトを設定するという実装が必要になります。
maxlengthを設定する理由
オブジェクトに入力文字数制限（maxlength）の設定が必要な理由について説明します。
データを登録するデータベースの各項目には、格納バイト数を設定します。このバイト数を超過した値を登録しようとするとエラーになるため、アプリケーション側で文字数の制限を行います。
データを登録するデータベースの各項目には、格納バイト数を設定します。各項目には登録できる最大Byte数を設定する必要があり、このByte数以上の値を登録しようとするとシステムエラーが発生してしまい、データを登録することができません。そのため、アプリケーション側で文字数の制限を設定することでシステムエラーを発生させないように制限する必要があり、その対策方法の一つとしてmaxlenghtを設定する方法があります。
DataGridの各項目にmaxlengthを設定する方法
ようやく本記事の本題です。
DataGridの各項目にmaxlengthを設定する方法について紹介します。
MaterialUIの公式ページを参照しても、デフォルトのDataGridの項目にmaxlengthを設定するプロパティは存在しません。色々調べてみたのですが、どうやらプロパティとしては持っていないみたいです。
ではどのようにmaxlengthを設定するかというと、キー入力のイベントを検知し、各項目の文字数以上である場合、イベントをキャンセルします。
具体的なコードは以下のようになります。DataGridの編集中のキー入力イベントであるOnCellKeyDownイベントで対象の項目に対して、文字数の長さを判定し、イベントを継続するか判断します。
// 入力制御用の関数
const handleCellKeyDown = (params,event)=>{
if(event.target.value!==undefined){
if(event.code !== "Backspase" &&
event.code !== "Escape" &&
event.code !== "Enter"){
}
// ここで対象フィールドごとの入力値を制限する
// 今回の場合はusernameというフィールドで10文字までしか入力できないと仮定
if(params.field === "username"){
if(event.target.value.length >= 10){
event.parentDefault();
return;
}
}
}
}
// dataGridの設定部分
<DataGrid
onCellKeyDown={handleCellKeyDown}>
</>上記のコードを適用することで、項目に設定したいmaxlength以上の文字数を入力しようとしてもイベントがキャンセルされ、入力することができないように制御できます。
backspaceやEscape、Enterキーなどは制限以上の入力値が入力されている場合でも有効にしたいため、イベントのキャンセル対象から除外しています。
注意点ですが、本記事ではmaxlengthの設定方法を紹介することが目的であるため、上記コードではコピーアンドペーストなど利用者が行う可能性がある捜査全てを考慮したコードにはなっていません。コピーアンドペースト時のイベントもMaterialUIのイベントで検知できるため、コピーアンドペースト時にはそちらで文字列を切るなどをすることで対応が可能です。ここで記載した内容以外にもアプリケーションのユースケースに応じて、最大制限入力時でも許可するオペレーションをプロダクトに応じて設定してください。
まとめ
MaterialUIのDataGridでmaxlengthを設定する方法のまとめ
本記事では、MaterialUIのDataGrid利用時に各項目にmaxlengthを設定する方法について紹介しました。CSSフレームワークを利用することで簡単に高機能なUIをアプリケーションに組み込むことができますが、一方でCSSフレームワークの仕様に沿わない場合は独自で作り込みが必要となります。
このような場合に、今回紹介した内容のような対応方法の引き出しを増やすことで様々な場面で対応でき技術者としてのスキルが向上します。
本記事が皆様の参考になれば幸いです。
コメント