これは 2019/10/02(水)に行われたTypeScript meetup #3に参加した時のメモと感想記事です。 資料などは後から追加します。 イベントページ typescript-jp.connpass.com 会場：株式会社メルペイ様 ハッシュタグ：#tsjp sli.do:#TSJP3 講演内容(※敬称略) メル…

これは 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つ…

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

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

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

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