オンラインのボードゲーム(OXゲーム)とかを作りたいと思って、Unityで作ったが、Chromeやモバイルで動かないので、Reactで作りたくなった。ReactのチュートリアルがちょうどOXゲームを作るものだったのでやってみる。
1日目
コンセプトからひとつひとつ学んでいきたい人のためのガイドHello World – Reactを読んでみるが、途中で飽きて、読み飛ばすことにする。
開発をブラウザで行うか、ローカル環境で行うか選べるが、将来的にローカルで開発することを考えて、ローカル環境を構築する。チュートリアルに従って問題なく環境構築できた。(Node.jsのインストールはMacにNode.jsをインストール – Qiitaを参考にした。)ローカル環境で実行できたので1日目は終了。
40分くらい。
2日目
概要とゲームを完成させるをやる。なんとなくReactがどんなものかわかってきた。
1時間くらい。
メモ: 関数コンポーネントとクラスコンポーネント
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}↑のthis.propsが何かわからないなら、ドキュメントにわかりやすく書いてある。↑は↓と等価。
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}コンポーネントにはpropsとstateがあるらしい。 React Devtools 拡張機能を使用してブラウザから確認できる。
3日目
タイムトラベル機能の追加を行う。Reactについてなんとなくわかった気がする。
30分くらい。
今後
サーバと通信できるOXゲームに改良する。
終わりに
初めてReactを試した。
JavaScriptと比べて良さがいまいちわからなかった。
チュートリアルとしてはとてもわかりやすかったので、今後また使うことがあれば、もう一度このチュートリアルをやるのは良さそう。
Comments