SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

Reactの独自関数normalizeTitle：入力文字列の整形を部品化するの解説動画

再生時間 7:48動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

  1. 0:00こんにちは。
  2. 0:00リアクト入門の第八回です。
  3. 0:03今回は、独自関数ノーマライズタイトルで、入力文字列の整形を部品化する方法を学びます。
  4. 0:09題材は、文章の見出しを一行に整える小さな処理です。
  5. 0:13前後の空白を取り除き、途中の連続した空白を一つにまとめるだけですが、この処理をコンポーネントの中に埋め込まず、
  6. 0:19独立した関数として切り出すことに意味があります。
  7. 0:26あわせて、通常の関数とフックはどう違うのかも整理します。
  8. 0:30状態を持たない処理は、名前や置き場所をどうすべきか。
  9. 0:34コードと一緒に、一つずつ確認していきましょう。
  10. 0:38小さな処理ほど、あちこちに直接書いてしまいがちですが、そうすると直し方も場所ごとにばらついてしまいます。
  11. 0:46まず、ノーマライズタイトルの位置づけです。
  12. 0:49この関数は、リアクトから提供されるものではありません。
  13. 0:53自分で定義する、通常のジャバスクリプトの関数です。
  14. 0:57ポイントは、中でステートやエフェクトを使っていないことです。
  15. 1:01フックは、ステートやエフェクトなど、リアクトの機能を使うための関数です。
  16. 1:07今回の整形処理は、入力を受け取って結果を返すだけで、リアクトの機能には触れません。
  17. 1:13そのため、名前にユースは付けません。
  18. 1:16ユースが付いていない関数は、リアクトの外でも使える部品だ、と読み分けられるようになりましょう。
  19. 1:23実装を見ます。
  20. 1:24ファイルは、エスアールシー配下のリブフォルダーに、ノーマライズタイトル・ティーエスとして置きます。
  21. 1:32引数はストリング型、戻り値もストリング型です。
  22. 1:35処理は一行で、本体はトリムとリプレイスの組み合わせだけです。
  23. 1:40元の入力を書き換えるのではなく、新しい文字列を作って返します。
  24. 1:45空白だけの入力は、空文字列になります。
  25. 1:48とても短い関数ですが、ファイルとして独立させることで、複数のコンポーネントからインポートして再利用できますし、
  26. 1:54サーバー側の処理から呼ぶこともできます。
  27. 2:00一行に見えますが、テストのしやすさと再利用のしやすさを両方得られる形になっています。
  28. 2:07二つの処理を分解します。
  29. 2:09まずトリムで、文字列の前後にある空白を取り除きます。
  30. 2:14次にリプレイスで、正規表現を使って、途中に残った空白の集まりを、半角スペース一つに置き換えます。
  31. 2:22この正規表現は、空白や改行やタブが一つ以上続く部分に一致します。
  32. 2:27だから、改行もスペースにまとまります。
  33. 2:30この関数は、同じ入力なら常に同じ結果を返し、通信もステート更新も行いません。
  34. 2:37こうした関数を純粋関数と呼びます。
  35. 2:39純粋関数については、後ほど動作確認でも確かめます。
  36. 2:44なお、タイプスクリプトの型は、実行時の入力チェックではない点にも注意してください。
  37. 2:50エスケープが必要な文字として扱うため、正規表現の中ではバックスラッシュを伴って書きます。
  38. 2:58次に、アプリ・ティーエスエックスで、この関数を画面から呼び出します。
  39. 3:03入力欄の編集中の値はドラフトというステートで保持し、反映ボタンを押したときに、
  40. 3:08ノーマライズタイトルにドラフトを渡して、結果をタイトルという別のステートに入れます。
  41. 3:14画面下の段落には、タイトルが表示され、空のときはタイトル未設定と表示されます。
  42. 3:20整形のルール自体は関数の中に閉じ込められているので、コンポーネント側は、
  43. 3:23渡して受け取るだけです。
  44. 3:26見た目と整形ロジックが分かれていることが、この構成の読みやすさにつながります。
  45. 3:32入力欄にはバリューとオンチェンジを組み合わせ、画面の値とステートが常に対応するようにしています。
  46. 3:39ここで、二つのステートを分ける理由を押さえます。
  47. 3:43入力途中の値は、そのまま保持しないと、入力のたびに空白が消えてしまい、打ちにくくなります。
  48. 3:50そこで、編集中のドラフトは未加工のまま持ち、確定した結果だけをタイトルに分けて持ちます。
  49. 3:57もう一つの注意は、ボタンの指定です。
  50. 4:00オンクリックには、ハンドルアプライという関数そのものを渡します。
  51. 4:06もし括弧を付けて書くと、画面を作るレンダーの途中で関数が実行されてしまいます。
  52. 4:12これまでの回でも出てきた、関数を渡すのか呼ぶのか、という大切な区別です。
  53. 4:18期待する変換結果を、三つの入力で確かめます。
  54. 4:22一つ目は、前後に空白があり、途中に連続した空白がある場合です。
  55. 4:28結果は、リアクト、スペース、入門、と空白が一つに整います。
  56. 4:33二つ目は、改行を含む場合です。
  57. 4:36改行も空白の一種として扱われ、半角スペース一つに置き換わります。
  58. 4:42三つ目は、空白だけの場合です。
  59. 4:45結果は空文字列になります。
  60. 4:47実際に画面で試すときは、連続スペースを含む文字列を入力して反映を押し、入力欄は元のまま、
  61. 4:53下の表示だけが整うことを確認してください。
  62. 4:59この三例が、関数の仕様そのものになります。
  63. 5:03実装を読む前に、結果を予想できるか試してみてください。
  64. 5:08実は、タイトル用のステートが不要な場合もあります。
  65. 5:12もし、送信や確定の操作がなく、常に整形結果だけを表示したいなら、レンダーの中で、
  66. 5:17タイトルはノーマライズタイトルにドラフトを渡した結果、と計算するだけで済みます。
  67. 5:23表示に必要な値は、既にある値から計算できるなら、新しいステートを増やさない、
  68. 5:27というこれまでの考え方と同じです。
  69. 5:31逆に、反映ボタンを押した時点の結果を残したい場合は、今回のようにステートで保持します。
  70. 5:37どちらの形が合うかは、画面の用途で決めてください。
  71. 5:41便利な関数ですが、使ってはいけない入力もあります。
  72. 5:45今回の関数は、文章の見出しを一行に整える用途専用です。
  73. 5:49パスワードに使ってはいけません。
  74. 5:52前後の空白も含めて、入力した文字列そのものが意味を持つからです。
  75. 5:57改行を保存したい本文にも向きません。
  76. 6:00改行がすべてスペースに潰れてしまいます。
  77. 6:03空白の数に意味があるソースコードも同様です。
  78. 6:06関数を作るときは、何をするかだけでなく、どこには使わないかまで決めておくことが、
  79. 6:11誤用を防ぐことにつながります。
  80. 6:15用途がはっきりした名前も、その助けになります。
  81. 6:19名前を見ただけで用途が伝わるようにしておくと、別の場所で誤って流用される事故も減ります。
  82. 6:26最後に、共通化の注意点です。
  83. 6:28用途ごとに空白のルールが違うなら、一つの関数に無理に統合しないでください。
  84. 6:35見出し用と本文用で求める整形が違うのは自然なことで、無理にまとめると、条件分岐だらけの読みにくい関数になります。
  85. 6:45もう一つ、文字列の整形は、エイチティーエムエルの無害化や、権限の確認とは別の話です。
  86. 6:52整形したから安全だという理由で、文字列をエイチティーエムエルとして画面に差し込んではいけません。
  87. 7:00リアクトの通常の方法で、文字列として表示する前提を守りましょう。
  88. 7:06関数の責務は小さく保ち、役割の違う処理は別の部品に分けるのが原則です。
  89. 7:12まとめです。
  90. 7:13表示とは独立した文字列の整形は、ユースを付けない通常の関数として切り出し、
  91. 7:17純粋関数にしておくと、再利用も動作確認も簡単になります。
  92. 7:22今回、記事のコードそのままをタイプスクリプトの厳密な型チェックにかけて、
  93. 7:26エラーがないことを確認しました。
  94. 7:29整形の入出力も、ノード・ジェーエスで実行して、期待通りになることを確かめています。
  95. 7:35一方、ブラウザー上で反映ボタンを押す操作を目で確認する作業は、実行環境の制約で未実施です。
  96. 7:41次回は、カスタムフックユーストグルで、状態を持つ処理の再利用を学びます。
  97. 7:46お疲れさまでした。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

通常の関数とHooksの違いを整理し、入力文字列の整形・イベント処理・純粋関数のテストを実例で学びます。

解説記事・サンプルコードを読む：Reactの独自関数normalizeTitle：入力文字列の整形を部品化する →