2022年4月23日 りあクト! 第5章 Reactの組み込みコンポーネント(p.39~)
復習
トランスパイル
一つのプログラミング言語で書かれたプログラムのソースコードを別のプログラミング言語と同等のソースコードを生成すること また、それを行うプログラムをトランスパイラといいます。
- BabelはES2015以降のJavaScriptやJSXをトランスパイルするトランスパイラです。
- tscは、TypeScriptで書かれたソースコードをJavaScriptへとトランスパイルします。
コンパイル
人間が理解しやすい言語や数式で記述されたプログラムを機械語に変換すること。 また、それを行うプログラムをコンパイラといいます。
- tscはJavaScriptの構文チェックのみで構文ではないPromiseなどの組み込みオブジェクトは型変換出来ないため、babelと併用する必要があります。
Reactの組み込みコンポーネント
Reactのコンポーネントにはユーザー定義コンポーネントと組み込みコンポーネントの2種類があります。
ユーザー定義コンポーネントの命名規則
- 大文字から始めなければなりません。
- 小文字から始めるとJSXから組み込みコンポーネントと解釈されるため呼び出し不可です。
Reactの組み込みコンポーネントのpropsと標準のHTML要素の属性の違い
JavaScriptの挙動とかぶってしまった事で名前自体が変更されているもの
- class ⇨ className
- for ⇨ htmlFor
HTMLと挙動が異なり、値の属性がBooleanになってるもの
- checked
- disabled
- selected
value
Reactではtextareaとselectタグもvalue属性が持てます。
<form> <textarea value="Fixed Text" /> <select value="uranus"> <option value="saturn">Saturn</option> </select> </form>
小文字の名前でコンポーネントを定義してみる
小文字の名前でコンポーネントを定義すると、JSXからコンポーネントとして呼び出すことができません。JSXでは小文字から始まる名前のコンポーネントは、全て組み込みコンポーネントだと解釈されるからです。そのため、ユーザー定義コンポーネントのコンポーネント名は、必ず大文字から始めましょう。
const message = (): JSX.Element => ( <h1>ハロー</h1> ); export default function App() { return ( <div className="App"> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> <message /> // => Property 'message' does not exist on type 'JSX.IntrinsicElements'.ts(2339) </div> ); }
組み込みコンポーネントだけが持つ属性
ref属性やkey属性はHTMLには存在しない組み込みコンポーネントが持つ属性です。
ref属性
コンポーネントを実際にレンダリングされるリアルDOMへ結びつける参照のための属性です。
Ref は render メソッドで作成された DOM ノードもしくは React の要素にアクセスする方法を提供します。 子要素を変更するには、新しい props でそれを再レンダーします。ただし、この一般的なデータフロー以外で、子要素を命令型のコードを使って変更する必要がある場合もあります。 公式: https://ja.reactjs.org/docs/refs-and-the-dom.html
いつ Ref を使うか
Refに適した使用例は以下の通りです。
- フォーカス、テキストの選択およびメディアの再生の管理
- アニメーションの発火
- サードパーティの DOM ライブラリとの統合
子要素を変更するには、新しい props でそれを再レンダーします。ただし、この一般的なデータフロー以外で、子要素を命令型のコードを使って変更する必要がある場合もあります。 宣言的に行えるものには ref を使用しないでください。
key属性
Reactが再レンダリングのための差分検出を効率的に行うのに必要とするものです。
Key は、どの要素が変更、追加もしくは削除されたのかを React が識別するのに役立ちます。配列内の項目に安定した識別性を与えるため、それぞれの項目に key を与えるべきです。 公式:https://ja.reactjs.org/docs/lists-and-keys.html#keys
基本ルールとしては、map() 呼び出しの中に現れる要素に key が必要です。 keyを指定しない場合はコンソールに警告が表示されます。
keyにmapの第二引数に指定するインデックスを使うのはユニークな値がない場合の最終手段です。
const Message = (): JSX.Element => ( <div> {[...Array(5)].map((_, index) => { return <div key={index}>アイウエオ</div>; })} </div> );
基本的には、そのオブジェクトなどが持つユニークなidをkey属性に指定します。
ユニークなidを持つオブジェクトの例
const listData = [{id:1,text:'1st'},{id:2,text:'2nd'},{id:3,text:'3rd'}];
参考
りあクト! TypeScriptで始めるつらくないReact開発 第3.1版【Ⅱ. React基礎編】 p.39~
Babelは「ES2015をコンパイルするコンパイラ」なのか、それとも「ES2015をトランスパイルするトランスパイラ」 なのか