No.
2022-02-04
  • Jan
  • Feb
  • Mar
  • Apr
  • May
  • Jun
  • Jul
  • Aug
  • Sep
  • Oct
  • Nov
  • Dec
  • Sun
  • Mon
  • Tue
  • Wed
  • Thu
  • Fri
  • Sat
  • 27
  • 28
  • 29
  • 30
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

やったこと

ForwardRefについて

TODO コメント

TODOコメント

# TODO: 後でリファクタリングしたい

JSDoc

/**
 * スマートフォンのアクセスであるかを示す真偽値です。
 * @type {boolean}
 */
var isSmartphoneAccess = true;

最低限必要な内容

  1. 役割
  2. 各引数の説明
  3. 返り値の説明
  4. Note なぜこれを用意したのかなどの背景や、使う上での注意点など

JSDocコメントを読む

JSDocコメント

全てのファイル、クラス、メソッド、プロパティにJSDocコメントが、適切なタグとデータ型を伴って記されるべきです。また名前から明白に判断できる場合を除き、プロパティ、メソッド、メソッドの引数、メソッドの戻り値を説明する文章が含まれているべきです。

完全文（Complete sentence）で書くことを推奨しますが、必須ではありません。完全文を使う場合は適切に大文字で開始し、句読点で終わらせましょう。

  • ブロックタグ内で改行が必要な場合、コードの改行と同様にスペース4つ分インデントする
  • JSDocも多くのHTMLタグをサポートしています。<code>、<pre>、<tt>、<strong>、<ul>、<ol>、<li>、<a> 等々です。

メソッドと関数へのコメント

パラメータと戻り値について記述されるべきです。メソッドのパラメータと戻り値が自明である場合には、説明を省略してもかまいません。
メソッドの説明文は三人称の平叙文で書きます。

JSDocコメントのメリット

  1. コードヒント/コード補完の表示
  2. APIリファレンスの生成

Typescript JSDocリファレンス

JSDocリファレンス

@type

“@type”タグを使用すれば、型名(プリミティブ、TypeScript宣言やJSDocの”@typedef”タグで定義されたもの)を参照することができます。

/**
 * @type {string}
 */
var s;

@paramと@returns

// パラメータは様々な構文形式で宣言することができます
/**
 * @param {string}  p1 - 文字列パラメータ
 * @param {string=} p2 - 任意のパラメータ(Closure構文)
 * @param {string} [p3] - 任意のパラメータ(JSDoc構文).
 * @param {string} [p4="test"] - デフォルト値を持つ任意のパラメータ
 * @return {string} 結果
 */
function stringsStringStrings(p1, p2, p3, p4) {
  // TODO
}

@paramは@typeと同じ型の構文を使用しますが、パラメータ名を追加します。 また、パラメータ名を角括弧で囲むことで、パラメータを任意のものとして宣言することもできます

ForwardRefについて

ref のフォワーディングはあるコンポーネントを通じてその子コンポーネントのひとつに ref を自動的に渡すテクニックです。
まずはRef と DOMについておさらい
Ref と DOM
Ref は render メソッドで作成された DOM ノードもしくは React の要素にアクセスする方法を提供します。

いつ Ref を使うか

  • フォーカス、テキストの選択およびメディアの再生の管理
  • アニメーションの発火
  • サードパーティの DOM ライブラリとの統合

Ref を使いすぎない

最初はアプリ内で「何かを起こす」ために ref を使いがちかもしれません。そんなときは、少し時間をかけて、コンポーネントの階層のどこで状態を保持すべきかについて、よりしっかりと考えてみてください。多くの場合、その状態を「保持する」ための適切な場所は階層のより上位にあることが明らかになるでしょう。
state のリフトアップガイドを参照
state のリフトアップ

state のリフトアップ

しばしば、いくつかのコンポーネントが同一の変化するデータを反映する必要がある場合があります。そんなときは最も近い共通の祖先コンポーネントへ共有されている state をリフトアップすることを推奨します。
React アプリケーションで変化するどのようなデータも単一の “信頼出来る情報源” であるべきです。通常、state はレンダー時にそれを必要とするコンポーネントに最初に追加されます。それから、他のコンポーネントもその state を必要としているなら、直近の共通祖先コンポーネントにその state をリフトアップすることができます。

Ref を作成する

Ref は React.createRef() を使用して作成され、ref 属性を用いて React 要素に紐付けられます。
Ref は通常、コンポーネントの構築時にインスタンスプロパティに割り当てられるため、コンポーネントを通して参照が可能です。

Ref へのアクセス

ref が render メソッドの要素に渡されると、そのノードへの参照は ref の current 属性でアクセスできるようになります。

const node = this.myRef.current;

ref の値はノードの種類によって異なります。

  • HTML 要素に対して ref 属性が使用されている場合、React.createRef() を使ってコンストラクタ内で作成された ref は、その current プロパティとして根底にある DOM 要素を受け取ります
    • コンポーネントがマウントされると React は current プロパティに DOM 要素を割り当て、マウントが解除されると null に戻します。
  • ref 属性がカスタムクラスコンポーネントで使用されるとき、ref オブジェクトはコンポーネントのマウントされたインスタンスを current として受け取ります
  • 関数コンポーネント (function components) には ref 属性を使用してはいけません。なぜなら、関数コンポーネントはインスタンスを持たないからです
    • 関数コンポーネントに対して ref が使用できるようにしたい場合は、forwardRef を（必要に応じて useImperativeHandle と組み合わせて）利用するか、コンポーネントをクラスに書き換えます。

DOM の Ref を親コンポーネントに公開する

Ref のフォワーディングを使うと、コンポーネントは任意の子コンポーネントの ref を自分自身の ref として公開できるようになります。

コールバック Ref

createRef() によって作成された ref 属性を渡す代わりに、関数を渡します。この関数は、引数として React コンポーネントのインスタンスまたは HTML DOM 要素を受け取ります。これを保持することで、他の場所からアクセスできます。

DOM コンポーネントに ref をフォワーディングする

(例)ネイティブの button DOM 要素をレンダーする FancyButton というコンポーネント

function FancyButton(props) {
  return (
    <button className="FancyButton">
      {props.children}
    </button>
  );
}

React コンポーネントは、レンダーの結果も含め、実装の詳細を隠蔽します。
FancyButton を使用する他のコンポーネントは内側の button DOM 要素に対する ref を取得する必要は通常ありません 。これは、互いのコンポーネントの DOM 構造に過剰に依存することを防ぐので、良いことです。

このようなコンポーネントは、アプリケーションのいたるところで通常の DOM である button や input と同様に扱われる傾向にあり、フォーカス、要素の選択、アニメーションをこなすにはそれら DOM ノードにアクセスすることが避けられないかもしれません。

ref のフォワーディングはオプトインの機能であり、それにより、コンポーネントが ref を受け取って、それをさらに下層の子に渡せる（つまり、ref を “転送” できる）ようになります。

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));
// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

このように、FancyButton を使ったコンポーネントは下層の button DOM ノードの ref を取得することができ、必要であれば button DOM を直接使うかのように、DOM にアクセスすることができます。

  1. React.createRef を呼び、React ref をつくり、それを ref 変数に代入します。
  2. ref を <FancyButton ref={ref}> に JSX の属性として指定することで渡します。
  3. React は ref を、forwardRef 内の関数 (props, ref) => … の 2 番目の引数として渡します。
  4. この引数として受け取った ref を <button ref={ref}> に JSX の属性として指定することで渡します。
  5. この ref が紐付けられると、ref.current は <button> DOM ノードのことを指すようになります。

DevTools でのカスタム名表示

React.forwardRef は render 関数を受け取ります。React DevTools は ref をフォワーディングしているコンポーネントとして何を表示すべきかを決定するために、この関数を使います。

DevTools でのカスタム名表示