Reactで複数の空文字を入力できないようにしたい

Question

今回したかったこと

• 正規表現「/\s+/」を用いて複数の空文字の入力が来た際にonClickAdd関数の処理を終わらせたかった。
• 今回初めてReactを触って、入力値の検知をフロント側でしたため、railsのblank?メソッドのようなものを最初は探したが無かったため、正規表現で空文字と複数の空文字にマッチする際に弾くという形を取ることにしました。

...省略
export const App = () => {
  const [todoText, setTodoText] = useState('');
  const [incompleteTodos, setIncompleteTodos] = useState([
    'ああああ',
    'いいいい'
  ]);
  const [completeTodos, setCompleteTodos] = useState([
    'うううう',
    'ええええ'
  ]);

  const onChangeTodoText = (event) => setTodoText(event.target.value);
  const onClickAdd = () => {
    // 以下がうまくいかなかったため、仕方なく空文字1文字のみに対応
    // if (todoText === /\s*/) return;
    if (todoText === '') return;
    const newTodos = [...incompleteTodos, todoText];
    setIncompleteTodos(newTodos);
    setTodoText('');
  };

...省略*

<br>

試したこと

• todoTextの型を確認 => string
• console.logで正規表現がそもそも作動しているのか確認 => 作動していなかった？全てfalseになった

todoText = "";
console.log(todoText === /\s*/);
// => false

todoText = " ";
console.log(todoText === /\s*/);
// => false

todoText = "";
console.log(todoText === /\s{0,}/);
// => false

todoText = " ";
console.log(todoText === /\s{0,}/);
// => false

<br>

実行環境

"dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },

Answer 1

ruby だと todoText =~ 正規表現 って書けるので、コメントアウトされている

// if (todoText === /\s*/) return;

とかって書きたくなるのも分かるんですが、JSでは =~ みたいなのは無いので、

if (/^\s*$/.test(todoText)) return;

とするとか、あるいは正規表現を使わずに、（ソース見た限りだとtodoTextはnullやundefinedにならなさそうなので、）

if (!todoText.trim()) return;

とするとかですね。

Comments

[shinchan_]

ご回答ありがとうございます。
正しく、Rubyを一番最初に学習していまして、Rubyの書き方をしていました。trim関数は存じ上げなかったため、返信する前に調べてみたのですが、空白を削除してくれる関数なのですね。

コンソール上で試してみたところ、空白文字のみの文字列に対して！を先頭につけて呼び出すとtrueを返してくれるところまで観測できたのですが、なぜそうなるのかまでは腑に落ちていないので、色々と試して理解していこうと思います。

nullやundefinedにならない変数にはtrim関数も使用するのも手だということを勉強になりました。
ありがとうございます。

//以下はコンソール上で試したtrim関数の挙動です
> const orig = ' foo ';
undefined
> console.log(!orig.trim());
false
undefined
> const orig2 = ' ';
undefined
> console.log(!orig2.trim());
true
undefined
> console.log(orig2.trim());

undefined

Answer 2

console.logで正規表現がそもそも作動しているのか確認 => 作動していなかった？全てfalseになった

はい、文字列と正規表現を等号で比較しても、単に一致しないだけです。

/正規表現/.test(文字列)のような形でチェックする必要があります。

Comments

[shinchan_]

前回に続き、ご回答ありがとうございます。
if ((/\s*/).test(todoText)) return;　ご指摘通り、この記述にしたところ、求めていた挙動になりました。
今後、フロント側で正規表現にマッチするかどうか確認する際にはtest関数を使用して学習をしていこうと思います。

ありがとうございました。
モヤモヤしながら、飛ばして作業していたので解決でき、スッキリしました。