6時だョ!!全員集合!!

Rails・JavaScrictを中心にアウトプットします。

2022年4月23日 りあクト! 第5章 Reactの組み込みコンポーネント(p.39~)

復習

トランスパイル

一つのプログラミング言語で書かれたプログラムのソースコード別のプログラミング言語と同等のソースコードを生成すること また、それを行うプログラムをトランスパイラといいます。

  • BabelはES2015以降のJavaScriptやJSXをトランスパイルするトランスパイラです。
  • tscは、TypeScriptで書かれたソースコードJavaScriptへとトランスパイルします。

コンパイル

人間が理解しやすい言語や数式で記述されたプログラムを機械語に変換すること。 また、それを行うプログラムをコンパイラといいます。

  • tscJavaScriptの構文チェックのみで構文ではない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をトランスパイルするトランスパイラ」 なのか

tscとBabel みどりのさるのエンジニア