WEBVTT

1
00:00:00.000 --> 00:00:00.949
こんにちは。

2
00:00:00.949 --> 00:00:03.005
リアクト入門の第八回です。

3
00:00:03.005 --> 00:00:09.646
今回は、独自関数ノーマライズタイトルで、入力文字列の整形を部品化する方法を学びます。

4
00:00:09.646 --> 00:00:13.600
題材は、文章の見出しを一行に整える小さな処理です。

5
00:00:13.600 --> 00:00:19.846
前後の空白を取り除き、途中の連続した空白を一つにまとめるだけですが、この処理をコンポーネントの中に埋め込まず、

6
00:00:19.846 --> 00:00:26.092
独立した関数として切り出すことに意味があります。

7
00:00:26.092 --> 00:00:30.520
あわせて、通常の関数とフックはどう違うのかも整理します。

8
00:00:30.520 --> 00:00:34.632
状態を持たない処理は、名前や置き場所をどうすべきか。

9
00:00:34.632 --> 00:00:38.269
コードと一緒に、一つずつ確認していきましょう。

10
00:00:38.269 --> 00:00:46.492
小さな処理ほど、あちこちに直接書いてしまいがちですが、そうすると直し方も場所ごとにばらついてしまいます。

11
00:00:46.492 --> 00:00:49.644
まず、ノーマライズタイトルの位置づけです。

12
00:00:49.644 --> 00:00:53.696
この関数は、リアクトから提供されるものではありません。

13
00:00:53.696 --> 00:00:57.449
自分で定義する、通常のジャバスクリプトの関数です。

14
00:00:57.449 --> 00:01:01.951
ポイントは、中でステートやエフェクトを使っていないことです。

15
00:01:01.951 --> 00:01:07.354
フックは、ステートやエフェクトなど、リアクトの機能を使うための関数です。

16
00:01:07.354 --> 00:01:13.508
今回の整形処理は、入力を受け取って結果を返すだけで、リアクトの機能には触れません。

17
00:01:13.508 --> 00:01:16.210
そのため、名前にユースは付けません。

18
00:01:16.210 --> 00:01:23.264
ユースが付いていない関数は、リアクトの外でも使える部品だ、と読み分けられるようになりましょう。

19
00:01:23.264 --> 00:01:24.391
実装を見ます。

20
00:01:24.391 --> 00:01:32.283
ファイルは、エスアールシー配下のリブフォルダーに、ノーマライズタイトル・ティーエスとして置きます。

21
00:01:32.283 --> 00:01:35.988
引数はストリング型、戻り値もストリング型です。

22
00:01:35.988 --> 00:01:40.819
処理は一行で、本体はトリムとリプレイスの組み合わせだけです。

23
00:01:40.819 --> 00:01:45.812
元の入力を書き換えるのではなく、新しい文字列を作って返します。

24
00:01:45.812 --> 00:01:48.872
空白だけの入力は、空文字列になります。

25
00:01:48.872 --> 00:01:54.912
とても短い関数ですが、ファイルとして独立させることで、複数のコンポーネントからインポートして再利用できますし、

26
00:01:54.912 --> 00:02:00.952
サーバー側の処理から呼ぶこともできます。

27
00:02:00.952 --> 00:02:07.716
一行に見えますが、テストのしやすさと再利用のしやすさを両方得られる形になっています。

28
00:02:07.716 --> 00:02:09.725
二つの処理を分解します。

29
00:02:09.725 --> 00:02:14.076
まずトリムで、文字列の前後にある空白を取り除きます。

30
00:02:14.076 --> 00:02:22.110
次にリプレイスで、正規表現を使って、途中に残った空白の集まりを、半角スペース一つに置き換えます。

31
00:02:22.110 --> 00:02:27.467
この正規表現は、空白や改行やタブが一つ以上続く部分に一致します。

32
00:02:27.467 --> 00:02:30.647
だから、改行もスペースにまとまります。

33
00:02:30.647 --> 00:02:37.007
この関数は、同じ入力なら常に同じ結果を返し、通信もステート更新も行いません。

34
00:02:37.007 --> 00:02:39.852
こうした関数を純粋関数と呼びます。

35
00:02:39.852 --> 00:02:44.037
純粋関数については、後ほど動作確認でも確かめます。

36
00:02:44.037 --> 00:02:50.899
なお、タイプスクリプトの型は、実行時の入力チェックではない点にも注意してください。

37
00:02:50.899 --> 00:02:58.264
エスケープが必要な文字として扱うため、正規表現の中ではバックスラッシュを伴って書きます。

38
00:02:58.264 --> 00:03:03.076
次に、アプリ・ティーエスエックスで、この関数を画面から呼び出します。

39
00:03:03.076 --> 00:03:08.807
入力欄の編集中の値はドラフトというステートで保持し、反映ボタンを押したときに、

40
00:03:08.807 --> 00:03:14.539
ノーマライズタイトルにドラフトを渡して、結果をタイトルという別のステートに入れます。

41
00:03:14.539 --> 00:03:20.058
画面下の段落には、タイトルが表示され、空のときはタイトル未設定と表示されます。

42
00:03:20.058 --> 00:03:23.455
整形のルール自体は関数の中に閉じ込められているので、コンポーネント側は、

43
00:03:23.455 --> 00:03:26.852
渡して受け取るだけです。

44
00:03:26.852 --> 00:03:32.371
見た目と整形ロジックが分かれていることが、この構成の読みやすさにつながります。

45
00:03:32.371 --> 00:03:39.164
入力欄にはバリューとオンチェンジを組み合わせ、画面の値とステートが常に対応するようにしています。

46
00:03:39.164 --> 00:03:43.148
ここで、二つのステートを分ける理由を押さえます。

47
00:03:43.148 --> 00:03:50.618
入力途中の値は、そのまま保持しないと、入力のたびに空白が消えてしまい、打ちにくくなります。

48
00:03:50.618 --> 00:03:57.922
そこで、編集中のドラフトは未加工のまま持ち、確定した結果だけをタイトルに分けて持ちます。

49
00:03:57.922 --> 00:04:00.910
もう一つの注意は、ボタンの指定です。

50
00:04:00.910 --> 00:04:06.222
オンクリックには、ハンドルアプライという関数そのものを渡します。

51
00:04:06.222 --> 00:04:12.696
もし括弧を付けて書くと、画面を作るレンダーの途中で関数が実行されてしまいます。

52
00:04:12.696 --> 00:04:18.672
これまでの回でも出てきた、関数を渡すのか呼ぶのか、という大切な区別です。

53
00:04:18.672 --> 00:04:22.748
期待する変換結果を、三つの入力で確かめます。

54
00:04:22.748 --> 00:04:28.491
一つ目は、前後に空白があり、途中に連続した空白がある場合です。

55
00:04:28.491 --> 00:04:33.863
結果は、リアクト、スペース、入門、と空白が一つに整います。

56
00:04:33.863 --> 00:04:36.642
二つ目は、改行を含む場合です。

57
00:04:36.642 --> 00:04:42.570
改行も空白の一種として扱われ、半角スペース一つに置き換わります。

58
00:04:42.570 --> 00:04:45.349
三つ目は、空白だけの場合です。

59
00:04:45.349 --> 00:04:47.758
結果は空文字列になります。

60
00:04:47.758 --> 00:04:53.779
実際に画面で試すときは、連続スペースを含む文字列を入力して反映を押し、入力欄は元のまま、

61
00:04:53.779 --> 00:04:59.800
下の表示だけが整うことを確認してください。

62
00:04:59.800 --> 00:05:03.690
この三例が、関数の仕様そのものになります。

63
00:05:03.690 --> 00:05:08.692
実装を読む前に、結果を予想できるか試してみてください。

64
00:05:08.692 --> 00:05:12.263
実は、タイトル用のステートが不要な場合もあります。

65
00:05:12.263 --> 00:05:17.978
もし、送信や確定の操作がなく、常に整形結果だけを表示したいなら、レンダーの中で、

66
00:05:17.978 --> 00:05:23.692
タイトルはノーマライズタイトルにドラフトを渡した結果、と計算するだけで済みます。

67
00:05:23.692 --> 00:05:27.621
表示に必要な値は、既にある値から計算できるなら、新しいステートを増やさない、

68
00:05:27.621 --> 00:05:31.550
というこれまでの考え方と同じです。

69
00:05:31.550 --> 00:05:37.693
逆に、反映ボタンを押した時点の結果を残したい場合は、今回のようにステートで保持します。

70
00:05:37.693 --> 00:05:41.264
どちらの形が合うかは、画面の用途で決めてください。

71
00:05:41.264 --> 00:05:45.260
便利な関数ですが、使ってはいけない入力もあります。

72
00:05:45.260 --> 00:05:49.576
今回の関数は、文章の見出しを一行に整える用途専用です。

73
00:05:49.576 --> 00:05:52.133
パスワードに使ってはいけません。

74
00:05:52.133 --> 00:05:57.248
前後の空白も含めて、入力した文字列そのものが意味を持つからです。

75
00:05:57.248 --> 00:06:00.126
改行を保存したい本文にも向きません。

76
00:06:00.126 --> 00:06:03.322
改行がすべてスペースに潰れてしまいます。

77
00:06:03.322 --> 00:06:06.839
空白の数に意味があるソースコードも同様です。

78
00:06:06.839 --> 00:06:11.235
関数を作るときは、何をするかだけでなく、どこには使わないかまで決めておくことが、

79
00:06:11.235 --> 00:06:15.630
誤用を防ぐことにつながります。

80
00:06:15.630 --> 00:06:19.307
用途がはっきりした名前も、その助けになります。

81
00:06:19.307 --> 00:06:26.340
名前を見ただけで用途が伝わるようにしておくと、別の場所で誤って流用される事故も減ります。

82
00:06:26.340 --> 00:06:28.783
最後に、共通化の注意点です。

83
00:06:28.783 --> 00:06:35.238
用途ごとに空白のルールが違うなら、一つの関数に無理に統合しないでください。

84
00:06:35.238 --> 00:06:45.008
見出し用と本文用で求める整形が違うのは自然なことで、無理にまとめると、条件分岐だらけの読みにくい関数になります。

85
00:06:45.008 --> 00:06:52.336
もう一つ、文字列の整形は、エイチティーエムエルの無害化や、権限の確認とは別の話です。

86
00:06:52.336 --> 00:07:00.711
整形したから安全だという理由で、文字列をエイチティーエムエルとして画面に差し込んではいけません。

87
00:07:00.711 --> 00:07:06.294
リアクトの通常の方法で、文字列として表示する前提を守りましょう。

88
00:07:06.294 --> 00:07:12.400
関数の責務は小さく保ち、役割の違う処理は別の部品に分けるのが原則です。

89
00:07:12.400 --> 00:07:13.247
まとめです。

90
00:07:13.247 --> 00:07:17.835
表示とは独立した文字列の整形は、ユースを付けない通常の関数として切り出し、

91
00:07:17.835 --> 00:07:22.424
純粋関数にしておくと、再利用も動作確認も簡単になります。

92
00:07:22.424 --> 00:07:26.095
今回、記事のコードそのままをタイプスクリプトの厳密な型チェックにかけて、

93
00:07:26.095 --> 00:07:29.765
エラーがないことを確認しました。

94
00:07:29.765 --> 00:07:35.554
整形の入出力も、ノード・ジェーエスで実行して、期待通りになることを確かめています。

95
00:07:35.554 --> 00:07:41.907
一方、ブラウザー上で反映ボタンを押す操作を目で確認する作業は、実行環境の制約で未実施です。

96
00:07:41.907 --> 00:07:46.989
次回は、カスタムフックユーストグルで、状態を持つ処理の再利用を学びます。

97
00:07:46.989 --> 00:07:48.260
お疲れさまでした。