Edited at

Reactで作る「令和」パズル


背景

仕事で使うので、Reactの勉強がてらパズルを作ってみた。

話題の「令和」と「平成」を使ったやつ…(すでにちょっと遅い感じも…)


完成品

下記のようなものができました。

スタートを押すと開始され、「令和」で揃えると完了!


See the Pen
reiwa puzzle
by hashito (@hashito)
on CodePen.


TODO(残課題)


  • ウィンドウを小さくすると正しく表示されない

  • HTMLからの定義をもらってlevelやら大きさを可変させたい

  • もう少し…コードを整理したい


詰まった所


thisstateが参照できない。

下記のようなコードで何度確認してもthis.stateが定義されていない!

class Puzzle extends React.Component {

constructor(props) {
super(props);
....
render() {
return (
<span
className="puzzle"
cal={this.state.y}


解決

コンストラクタでthis.render=this.render.bind(this);がされていない…

はい、ドキュメントを読みましょうってことですね。

class Puzzle extends React.Component {

constructor(props) {
super(props);
this.render=this.render.bind(this);
....
render() {
return (
<span
className="puzzle"
cal={this.state.y}


renderが呼び出されない

コンストラクタで受け取ったpropsを下記のようにstateに直接引き渡しをしていた。

コンストラクタはインスタンス生成時にしか呼び出されなかった…

class Puzzle extends React.Component {

constructor(props) {
super(props);
this.state= props;
....
render() {
return (
<span
className="puzzle"
cal={this.state.y}

下記のように改善…

しかし、更新されず…

class Puzzle extends React.Component {

constructor(props) {
super(props);
this.state.y {y:props.y};
....
render() {
return (
<span
className="puzzle"
cal={this.state.y}


解決

純粋にそのままpropsを見ればよかったのだ…

class Puzzle extends React.Component {

constructor(props) {
super(props);
....
render() {
return (
<span
className="puzzle"
cal={this.props.y}


感想

Reactは結構「こうしてください!」ってのが多い感じがした。

書き方やロジックが矯正されるので誰が書いても同じようなコードになるのが利点なのかな…

オブジェクト構成とかも…