これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 安全でないライフサイクルの特定 Strictモードを使用することでライフサイクルメソッドを非同期なReactアプリで使用する際に役立つことがある。 Strictモードが有効の時、Reactは…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org strict モード Strictモードはアプリケーションの潜在的な問題点を洗い出すためのツール。 Fragmentと同様目に見えるUIを描画しない。 注意したいのはstricモードは開発モードで…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 静的型チェック Kotlin JetBrainsの有名な静的型言語 JVM、Android、LLVM、JavaScriptといったプラットフォームで利用可能。 JetBrains がコミュニティのために便利なツールを作…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 静的型チェック Reason OCamlで動く新しい記法、ツールチェインらしい。 reasonml.github.io OCamlにJavaScriptを組み合わせている場合は見慣れた方法で実行できて、 NPM/Yarnを…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 静的型チェック 型宣言 他のライブラリを使用している型エラーやヒントを表示させるために型宣言ファイルを参照する。 型宣言ファイルにはライブラリが使用するすべての型情報が…

これはsora-unity-sdk-samplesをMacで動かした手順をまとめた記事です。 目次 目次 GitHubへのリンク この記事はどこまで？ 実行した環境 動かしたUnityのバージョン 事前準備 準備完了からシーンオープンまで 接続先はどうしよう 接続先の設定 Sora Laboの…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 静的型チェック TypeScriptの実行 ここまでの手順が済んでいれば、yarnとnpmそれぞれのコマンド一つで実行できます。 yarn build npm run build コマンド実行後にエラーが表示さ…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 静的型チェック ファイル拡張子 Reactは拡張子.jsでそのファイルに書いています。 TypeScriptには拡張子が二つ存在する。 .tsがデフォルトの拡張子になり、JSXが含まれているファ…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 静的型チェック TypeScript コンパイラの設定 装備を買っても装備しないと意味がないのと一緒で、TypeScriptを導入してもコンパイラの設定をしないと意味がありません。 コンパイ…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 静的型チェック TypeScript をプロジェクトに追加する まずはTypeScriptをインストールするところから。 プロジェクトフォルダでyarnかnpmのコマンドを実行するとTypeScriptが追…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 静的型チェック Create React App で TypeScript を使用する Create React Appは最初からTypeScriptのサポートが含まれている。 Flowと同じですね。 以下のコマンドで新規プロジ…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 静的型チェック TypeScript 昨日まで見ていたFlowはFacebookによって開発されてました。 TypeScriptはMicrosoftによって開発された言語です。 型ありのJavascripのスーパーセット…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 静的型チェック Flow の型定義の追記 初期設定の状態では// @flowが含まれているファイルのみチェックをする。 Shebangかな。 このコメントはファイルの頭に記載し、yarnやnpmで…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 静的型チェック Flow の実行 これまでやってきた手順でFlowを使う準備はできているので、 npmかyarnでコマンドをそれぞれ実行してあげることで開始される。 yarn flow npm run fl…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 静的型チェック Flow の型定義をコンパイル時にコードから剥がす FlowはJavaScriptを拡張したものだが、ブラウザ側はFlowの記法については知らないため、 ブラウザに送信されるコ…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 静的型チェック Flow をプロジェクトに追加する プロジェクトへflowを追加する場合はyarnかnpmを使ってできる。 yarn add --dev flow-bin npm install --save-dev flow-bin 上記…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 静的型チェック Flow JavaScript用の静的型チェック機能。 開発はFacebookが行っている。 React+Flowの組み合わせで使われることが多い。 Reactコンポーネントに型を足すことがで…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 静的型チェック FlowやTypeScriptのような静的型チェッカーを使用することで実行する前の早期段階に型の不整合などの問題に気づくことができる。 型解析言語を使用することで補完…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org レンダープロップ レンダープロップを React.PureComponent で使うときの注意点 renderメソッド内で関数を作成していると、React.PureComponentを使う利点が相殺される。 render…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org レンダープロップ render 以外の props を使う レンダープロップとはいいつつもrenderというpropsを使う必要はない点、注意が必要。 コンポーネントがレンダーするものを知るため…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org レンダープロップ 横断的関心事にレンダープロップを使う コンポーネントはReactでコードを再利用するための主な要素になるが、コンポーネントがカプセル化したstateや振る舞いを…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org レンダープロップ 値が関数であるpropsを使ってコンポーネント間でコードを共有するためのテクニックを指す。 レンダープロップを持つコンポーネントは、React要素を返す関数を受…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org RefとDOM コールバック Ref ReactにはコールバックRefと呼ばれるより細かい制御が可能な方法がある。 createRef()によって作成されたref属性を渡す代わりに、関数を渡す。 引数と…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org RefとDOM DOM の Ref を親コンポーネントに公開する 子のDOMノードのサイズや位置を計測するために親コンポーネントから子コンポーネントのＤＯＭノードにアクセスしたい場合があ…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org RefとDOM Ref と関数コンポーネント 関数コンポーネントはインスタンスがない。 そのためref属性を関数コンポーネントに使うことは不可能。 function ImpossibleComponent() { re…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org RefとDOM クラスコンポーネントへの Ref の追加 マウント直後にクリックされることをシミュレーションするためにラップしたい場合、 refを使用してカスタムインプットにアクセス…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org RefとDOM DOM 要素への Ref の追加 DOMノードへの参照を保持するためにrefを使っている例 コンポーネントがマウントされるとReactはcurrentプロパティにＤＯＭ要素を割り当ててマ…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org RefとDOM Ref へのアクセス renderメソッドの要素にrefが渡されると参照はcurrent属性でアクセスできるようになる。 refの値はノードの種類によって異なる。 ・HTML 要素に対して…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org RefとDOM Ref を作成する React.createRef()を使用することでRefは作成される。 ref属性を用いてReact要素に紐付けられる。 コンポーネントの構築時にインスタンスプロパティに割…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org RefとDOM Ref を使いすぎない refを設定すべき場所を考えるとき、初めのうちはアプリ内で何かを起こすためにrefを使うことが多い。 少し時間をかけて、状態を保持しておかないと…