Reactチュートリアルをやっていってみるその13

これは

Reactチュートリアルをやっていく記事です。

参考

ja.reactjs.org

タイムトラベル機能の追加

Stateのリフトアップ再び

Gameコンポーネント内で過去の履歴を表示するようにしたいので
Gameコンポーネントhistoryにアクセスできるようにする。

以前SquareコンポーネントにあったstateをリフトアップしてBoardに移動した時と同様に、
BoardにあるstateをGameコンポーネントにリフトアップします。

gyazo.com

BoardコンポーネントがsquaresとonClickプロパティをGameコンポーネントから受け取れるようにする。
以下の手順でBoardコンポーネントを修正する。
 ・Boardのconstructorを削除
 ・BoardのrenderSquareにあるthis.state.squares[i]をthis.props.squares[i]に置き換える
 ・BoardのrenderSquareにあるthis.handleClick(i)をthis.props.onClick(i)に置き換える

現状のBoardコンポーネントは以下のようになってます。

class Board extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      squares: Array(9).fill(null),
      xIsNext: true,
    };
  }

  handleClick(i) {
    const squares = this.state.squares.slice();
    if (calculateWinner(squares) || squares[i]) {
      return;
    }
    squares[i] = this.state.xIsNext ? 'X' : 'O';
    this.setState({
      squares: squares,
      xIsNext: !this.state.xIsNext,
    });
  }

  renderSquare(i) {
    return (
     <Square
      value={this.state.squares[i]}
      onClick={() => this.handleClick(i)}
     />
    );
  }

  render() {
    const winner = calculateWinner(this.state.squares);
    let status;
    if (winner) {
      status = 'Winner: ' + winner;
    } else {
      status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
    }

    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

Gameコンポーネントのrender関数を更新します。
現在はこうなってます。
gyazo.com

こうなります。
gyazo.com

Gameコンポーネントでテキスト表示できるようになったので、Boardのrenderメソッド内の類似コードは削除可能になります。

gyazo.com

削除後
gyazo.com

handleClickメソッドをBoardコンポーネントからGameに移動していきます。

gyazo.com

gyazo.com

明日はhistoryの表示を行います。

今日はここまで。

Reactチュートリアルをやっていってみるその12

これは

Reactチュートリアルをやっていく記事です。

参考

ja.reactjs.org

タイムトラベル機能の追加

操作履歴の保存

squaresをイミューテートで作成しているため、非常に簡単に実装できるようになっています。
squaresにはコピーした結果が入っているため、まずsquaresをhistory配列に保存するようにします。
history配列のイメージは以下のようになっていく想定で作っていきます。

history = [
  // 初期状態
  {
    squares: [
      null, null, null,
      null, null, null,
      null, null, null,
    ]
  },
  // 最初の動作後
  {
    squares: [
      null, null, null,
      null, 'X', null,
      null, null, null,
    ]
  },
  // 2手目
  {
    squares: [
      null, null, null,
      null, 'X', null,
      null, null, 'O',
    ]
  },
  // ...
]

明日は実装に移っていきます。

少ないですが今日はここまで。

Reactチュートリアルをやっていってみるその11

これは

Reactチュートリアルをやっていく記事です。

参考

ja.reactjs.org

ゲーム勝者の判定

いよいよ勝者を判定できるように作っていきます。
チュートリアル側でヘルパー関数として用意されているcalulateWinner関数を末尾に追加する。

function calculateWinner(squares) {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  return null;
}

render関数内にヘルパー関数を呼ぶように追加する。

gyazo.com

handleClickでゲーム決着がついている場合、マス目が埋まっている場合早期returnするように修正をくわえます。

gyazo.com

ここまでで一通りのゲームは完成になりました。

Image from Gyazo

明日は途中少し触れたタイムトラベル機能の追加です。

今日はここまで。

Reactチュートリアルをやっていってみるその10

これは

Reactチュートリアルをやっていく記事です。

参考

ja.reactjs.org

手番の処理

今までXだけだったゲームに◯を追加します。
デフォルトではXを先手にします。
xIsNextは手番、すなわち現在操作可能なプレイヤーを示すものになります。

gyazo.com

handleClickにはクリックしたらXを設定するように現状はなっていますのでここを変更します。

gyazo.com

これでプレイヤーが操作をするとxIsNextの値が変更され、プレイヤーが切り替わるようになります。

gyazo.com

◯とXが表示されるようになりました。

gyazo.com

statusテキストも変更してどちらの番なのかわかるようにします。

gyazo.com

NextPlayerが表示されるようになりました。

gyazo.com

gyazo.com

今日はここまで。

Reactチュートリアルをやっていってみるその9

これは

Reactチュートリアルをやっていく記事です。

参考

ja.reactjs.org

関数コンポーネント

Squareコンポーネントを関数コンポーネントにする。
ここでいう関数コンポーネントはrenderメソッドだけを有しstateを持たないコンポーネントをよりシンプルにする。
React.Componentを継承するクラスを定義する代わりにpropsを入力として受け取り、返す関数にする。

これを
gyazo.com

こうじゃ
gyazo.com

classで定義していたものがfunctionになってます。
動かすとこんな感じ。挙動で見る分には特に変化はないですね。

gyazo.com

明日は◯を登場させます。

今日はここまで。

Reactチュートリアルをやっていってみるその8

これは

Reactチュートリアルをやっていく記事です。

参考

ja.reactjs.org

イミュータビリティは何故重要なのか

昨日作成したコードでは配列を直接変更する代わりに、
.slice() メソッドを使って square 配列のコピーを作成し、それを変更することを行いました。
今回はイミュータビリティ(immutability; 不変性)の説明と重要性についてでした。

変化するデータについてのアプローチは2種類ある。
 ・データを直接いじってミューテート(書き換える)する
 ・変更した新しいデータのコピーで古いデータを置き換える

いずれも出力される結果は同じになります。
内部データの書き換えを行わないことでいくつか利点があります。
 ・複雑な機能が簡単に実装できる
  →チュートリアル後半で実装する予定のタイムトラベル機能を実装する際に
   直接値を変更していないからこそヒストリを維持して再利用が可能になる。

 ・変更の検出   →直接値が書き換えられてしまった場合変更を検知するのが難しい。
   イミュータブルであれば参照オブジェクトが前と別のものであれば変更とみなせる。

 ・React再レンダータイミングでの決定   →pure componentを構築しやすくなる。
   前述の通り変更があったか簡単に検知できるので、再レンダータイミングも意識しやすい
   詳細はパフォーマンス最適化のページに記載されているようなので後日実施する。

今日はここまで。

Immersive Web Meetup (WebXR & Web Music)に参加してきた

これは

2019/09/13(金)に行われたImmersive Web Meetup (WebXR & Web Music)に参加した時のメモと感想記事です。気になったら追記したりするかも。

イベントページ

connpass.com

会場:株式会社メルカリ様 ハッシュタグ:#webxraudiomidi

動画

www.youtube.com

主催者様・参加者様の記事(2019/9/17追記)

ryoyakawai.com

www.crossroad-tech.com

講演内容(※敬称略)

Talk Session (1) Hongchan Choi > テーマ:Web Audioの現在と今後(仮)

資料:
docs.google.com

講演内容:
WebAudioの9年と題された内容通り、この9年間での活動や歴史についての講演でした。

メモ:
・2010.09にChromium向けに初めて
・WebAudio APIが初コミットされたのは2011.06
MIDI APIは2012.12
・1日に25000万回AudioContextが作られている
・ブラウザでシンセの学習ができるのは非常に便利そう
learningsynths.ableton.com
・audio→WebAudio API→Audio Device Client
・Web PlatformではADC(Audio Device Client)を利用
・Spatialization using Web Audio API
 →PannerNode - Web APIs | MDN
 →OMNITONE
 →Resonance Audio - Resonance Audio SDK for Web
・XR体験のための良いAudioの仕組みがADCでは用意できる予定

講演時に自分が参照したリンクたち

OMNITONE

PannerNode - Web APIs | MDN

GitHub - WebAudio/web-audio-cg: W3C Web Audio Community Group

Learn synthesis in your browser | Ableton

Web Audio Conference 2019 - NTNU

Talk Session (2) Chris Wilson > テーマ:Web XRの現状について(仮)

資料:
docs.google.com

講演内容:
WebXRについての解説と現状どうなっているのかのお話。

メモ:
・three.jsみたいなフレームワークが便利になってきてる
・WebVRという概念はWebXRになっていく
・WebXRはデバイスとの連携を可能にする
・Oculusなどのコントローラからの入力はサポートしている
・数億台単位でVirtualRealityをサポートする端末が存在している
・WebXRを使えば既存の2Dサイトに新たなエクスペリエンスを提供できるようになる
・three.jsもA-Frameも3DAudioを実装している ・Immersive Web Working Groupがある

講演時に自分が参照したリンクたち
W3C Immersive Web Working Group
3Dアバターモデルを簡単にWebアプリケーション上で扱える 開発者向けライブラリ「pixiv three-vrm」をオープンソース化 ~3Dアバタープラットフォーム「VRoid Hub」で活用された技術を公開~|ピクシブ株式会社
2019-09-06 CEDEC 2019 Day 3 WebXRの現状と実社会への応用事例 / Talk about WebXR at CEDEC 2019 - Speaker Deck
iOS 12.2でWebVRとWebARが半ば終わった件について - Qiita

Short Talk Session (3)「PlayCanvasで始めるWebXR」

資料:

www.slideshare.net

講演内容:
PlayCanvasの概要と使い方のざっくりとした説明でした

メモ:
・PlayCanvasはざっくりというとブラウザ上で動くゲームエンジン
GMOは日本代理店として販売等を担っている
VRも自由に作れるようになっている
・photonが使えるので複数人でWeb共有も可能

講演時に自分が参照したリンクたち

PlayCanvas WebGL Game Engine
PlayCanvasでPhotonを使う - Qiita

LT (1)「Web Music API ~ Toward the spread of Web Music ~」@forever120527

資料:
docs.google.com

メモ:
・これすごい
 GitHub - Korilakkuma/Chrome-EQUALIZER: Chrome extension for Graphic Equalizer

LT (2)「円を3等分する選手権に捧ぐARを使ってケーキを3等分する方法」@gorillaPoweeeer

不在のため無し

LT (3)「(TBA)」(Web Music) @g200kg

メモ: ・ライブコーディングと自作アプリの紹介
・ちょっとすごすぎたのでビデオもう一回見てしまった。
・SpeechSynthesisが良さげ
 developer.mozilla.orgg200kg.github.io

展示デモ

体験してきたものを写真で
f:id:torikizi:20190916230011j:plain

f:id:torikizi:20190916225558j:plain
f:id:torikizi:20190916225707j:plain

suzuri.jp
f:id:torikizi:20190916225948j:plain

そのほか

英語の時はOtterを使おうと思った。
以前使おうと思ってメモしていたのを失念してしまっていたために残念なことになった。
iphoneアプリもあるので音声と文字起こし結果を見ながら聞けるので大変便利
otter.ai

Google Docsで話す内容も一緒にシェアされるやり方はすごい便利だなと感じた。