これは Reactのガイドを読んでいく記事です ガイドのリンク ja.reactjs.org 要素のレンダー 要素とはReactアプリケーションの最小単位の構成ブロック。 const element = <h1>Hello, world</h1>; React要素はDOM要素とは異なりプレーンなオブジェクトで、簡単に作成可…

これは Reactのガイドを読んでいく記事です ガイドのリンク ja.reactjs.org JSXの導入 UIなど見た目の部分について記述するために JavaScriptの機能を全て備えたJSXを使う。 JSXの構文の例 const element = <h1>Hello, world!</h1>; JSXを使う理由 ReactでJSXを使うこ…

ちょっと気になっていたので読んだ。 公式 www.ohtabooks.com インタビュー記事 ddnavi.com 気に入ったとこなど ・没頭とは幸福の要素の一つ。 →何かに集中しているときはそうでもないが、終わった後の爽快感や充実感がそれに当たる ・没頭、フロー状態、ゾ…

これは Reactのガイドを読んでいく記事です ガイドのリンク ja.reactjs.org なぜか この間までReactのチュートリアルをやっていました。 TypeScriptと組み合わせて学習して行くつもりだったのですが、 思ってた以上に難航しておりもう少しアウトできるように…

これはUnite Tokyo 2019 Eve2 LT Fesの参加メモです。 資料と動画が公開された後まとめたものを作成予定。 タイムテーブル events.unity3d.jp 会場：グランドニッコー東京 ハッシュタグ：#UniteTokyo 見た講演(1日目) ・『The Heretic』で学ぶ映像制作テクニ…

これは Reactチュートリアルをやっていく記事です。 参考 ja.reactjs.org タイムトラベル機能の追加 タイムトラベルの実装 昨日までで一通りチュートリアルでの実装が完了しました。 アドバンスとしてチュートリアルには以下のような課題が用意されています…

これは Reactチュートリアルをやっていく記事です。 参考 ja.reactjs.org タイムトラベル機能の追加 タイムトラベルの実装 keyの説明でもあったように、配列に登録された操作履歴にはidが振られています。 Gameコンポーネント内のrenderメソッドにkeyを追加…

これは Reactチュートリアルをやっていく記事です。 参考 ja.reactjs.org タイムトラベル機能の追加 key を選ぶ Reactではリストをレンダーする際に項目についてそれぞれある情報を保持します。 Reactはリストのどのアイテムが変更になったかを知る必要があ…

これは Reactチュートリアルをやっていく記事です。 参考 ja.reactjs.org タイムトラベル機能の追加 historyの表示 今日は昨日実装したhistory機能を表示していきます。 React要素の配列を使う。 JavaScriptにあるmap()メソッドを使ってデータを別のデータに…

これは Reactチュートリアルをやっていく記事です。 参考 ja.reactjs.org タイムトラベル機能の追加 Stateのリフトアップ再び Gameコンポーネント内で過去の履歴を表示するようにしたいので Gameコンポーネントをhistoryにアクセスできるようにする。 以前Sq…

これは Reactチュートリアルをやっていく記事です。 参考 ja.reactjs.org タイムトラベル機能の追加 操作履歴の保存 squaresをイミューテートで作成しているため、非常に簡単に実装できるようになっています。 squaresにはコピーした結果が入っているため、…

これは Reactチュートリアルをやっていく記事です。 参考 ja.reactjs.org ゲーム勝者の判定 いよいよ勝者を判定できるように作っていきます。 チュートリアル側でヘルパー関数として用意されているcalulateWinner関数を末尾に追加する。 function calculateW…

これは Reactチュートリアルをやっていく記事です。 参考 ja.reactjs.org 手番の処理 今までXだけだったゲームに◯を追加します。 デフォルトではXを先手にします。 xIsNextは手番、すなわち現在操作可能なプレイヤーを示すものになります。 gyazo.com handle…

これは Reactチュートリアルをやっていく記事です。 参考 ja.reactjs.org 関数コンポーネント Squareコンポーネントを関数コンポーネントにする。 ここでいう関数コンポーネントはrenderメソッドだけを有しstateを持たないコンポーネントをよりシンプルにす…

これは Reactチュートリアルをやっていく記事です。 参考 ja.reactjs.org イミュータビリティは何故重要なのか 昨日作成したコードでは配列を直接変更する代わりに、 .slice() メソッドを使って square 配列のコピーを作成し、それを変更することを行いまし…

これは 2019/09/13(金)に行われたImmersive Web Meetup (WebXR & Web Music)に参加した時のメモと感想記事です。気になったら追記したりするかも。 イベントページ connpass.com 会場：株式会社メルカリ様 ハッシュタグ：#webxraudiomidi 動画 www.youtube.c…

これは Reactチュートリアルをやっていく記事です。 参考 ja.reactjs.org チュートリアル：React の導入 Developer Tools ブラウザの開発ツールでReactのコンポーネントツリーを表示させるために以下のツールを導入すると良い。 ※chrome用のリンク chrome.go…

これは Reactチュートリアルをやっていく記事です。 参考 ja.reactjs.org チュートリアル：React の導入 インタラクティブなコンポーネントを作る Squareコンポーネントがクリックされた場合に"X"と表示されるようにする まずはSquareをクリックするとブラウ…

これは Reactチュートリアルをやっていく記事です。 参考 ja.reactjs.org チュートリアル：React の導入 データを Props 経由で渡す BoardコンポーネントにSquareコンポーネントへ値を渡すよう追記 gyazo.com Squareコンポーネントのrenderメソッドで渡され…

これは Reactチュートリアルをやっていく記事です。 参考 ja.reactjs.org チュートリアル：React の導入 スターターコードの中身を確認する スターターコードは以下 https://codepen.io/gaearon/pen/oWWQNa?editors=0010 オンラインだとCSS、HTMLも準備され…

これは Reactチュートリアルをやっていく記事です。 参考 ja.reactjs.org チュートリアル：React の導入 概要 Reactは宣言型で効率的かつ柔軟なJavaScriptライブラリ。 UIをコンポーネントという独立した部品として扱うことで簡単に作ることができるようにし…

これは Reactチュートリアルをやっていく記事です。 参考 ja.reactjs.org チュートリアル：React の導入 チュートリアルの準備 チュートリアルの進め方は二種類あるので好きな方を選ぶ。 ・オンラインの環境 →https://codepen.io/gaearon/pen/oWWQNa?editors…

これは Reactチュートリアルをやっていく記事です。 参考 ja.reactjs.org チュートリアル：React の導入 昨日までTypeScriptをやってましたが、今日からはReactのチュートリアルをやっていきます。 今回これを思い立ったのはこんな記事を読んだので、組み合…

これは TypeScriptの学習にとても役立ちそうなドキュメントを教えてもらったので コツコツと読んでいく記事です。 参考 著作権者：フューチャー株式会社（Future Corporation）様 future-architect.github.io Next.js（React）の環境構築 Next.js+TSのソース…

これは TypeScriptの学習にとても役立ちそうなドキュメントを教えてもらったので コツコツと読んでいく記事です。 参考 著作権者：フューチャー株式会社（Future Corporation）様 future-architect.github.io Next.js（React）の環境構築 Next.js+TSのソース…

これは TypeScriptの学習にとても役立ちそうなドキュメントを教えてもらったので コツコツと読んでいく記事です。 参考 著作権者：フューチャー株式会社（Future Corporation）様 future-architect.github.io Next.js（React）の環境構築 Next.js+TSのソース…

これは TypeScriptの学習にとても役立ちそうなドキュメントを教えてもらったので コツコツと読んでいく記事です。 参考 著作権者：フューチャー株式会社（Future Corporation）様 future-architect.github.io Next.js（React）の環境構築 ビルドのツールのイ…

これは TypeScriptの学習にとても役立ちそうなドキュメントを教えてもらったので コツコツと読んでいく記事です。 参考 著作権者：フューチャー株式会社（Future Corporation）様 future-architect.github.io Next.js（React）の環境構築 作業フォルダを作る…

これは TypeScriptの学習にとても役立ちそうなドキュメントを教えてもらったので コツコツと読んでいく記事です。 参考 著作権者：フューチャー株式会社（Future Corporation）様 future-architect.github.io Next.js（React）の環境構築 参考資料ではいろん…

これは TypeScriptの学習にとても役立ちそうなドキュメントを教えてもらったので コツコツと読んでいく記事です。 参考 著作権者：フューチャー株式会社（Future Corporation）様 future-architect.github.io CLIツール作成のための環境設定 バンドラーで1つ…