【最終回】React.js でプログラミング・プラモデル Vol.2 「Border7」：あとがき
これまで
これまで16回に渡る連載で、React.js でトランプのカードゲーム「Border7」を作りました。
現時点のコード
この連載で作成したコードは以下です。
もし「私も作ってみたい！」と思ったら、#3からぜひチャレンジしてみてください！
あとがき
プログラミング・プラモデル、いかがだったでしょうか？
お楽しみ頂けましたら幸いです。
2020年の暮れ、私は「React やってみよう！」と思い立ち、React.js の公式サイトのチュートリアルの「三目並べ」を作りました。
でもチュートリアルが終わった後、なかなかコードを書く筆は進みませんでした。
「何を作りたいんだろう…」
「いいアイディアないかな…」
そんな風に、悶々としていたことを思い出します。
ただ、今思うと、そのときはまだ「できる」が足りなかったんだと思います。
その後、新しく React.js の入門書を購入して、クラスコンポーネントの書き方からまた勉強し直しました。
その中に「クリックしたところに div 要素が追加されていく」という課題があり、「へ〜、こんなこともできるのか」と新しく「できること」が増えました。
そこからどんどん「やってみよう」というアイディアが生まれ、出来上がったのが Stamp という Web アプリです。
「できる」が増えたら「やってみよう！」
プログラミング・プラモデル Vol.2 での開発を通して、
「へ〜、こんなこともできるんだ」
「あ、ここをこうしたら別のゲームができそう！」
そんな思いが生まれたら、ぜひ忘れないうちにチャレンジしてみてください。
Border7 を作ったら
小さなことでもよいので、アイディアを出してゲームを大きくしてみましょう。
例えば…
・数字を三つのグループ（A〜４、５〜８、９〜K）に分けて、どのグループかを予想する
・賭けられるようにする
・High and Low、ブラックジャック、神経衰弱、７並べなど、他のゲームを作る
アイディアを実践して、だんだんアプリが大きくなってくると、フォルダ構成や state の管理などで新たな課題が見つかるかもしれません。
そんなときは「どんな作り方があるのかな？」と調べてみましょう。
ducks パターンや redux というツールが選択肢にあがってくるかもしれません。
「一つずつ」できるようになっていく
新しいことを取り入れると、苦労することもあるでしょう。
「使い方が複雑…」
「英語のドキュメントしかない…」
そんなときは「一つずつ」クリアしていきましょう。
「サンプルコードを削って削って、一番シンプルな形にする」
「理解はあと！まずは英語を翻訳する」
一つずつ「できる」を積み重ねていくと、ふと気づけば「あ、なんだこういうことか！」という瞬間が訪れます。
そうしたら後はもう筆を走らせるのみです！
なにはともあれ、やってみよう！
はこだてたろうでした。
この記事があなたのお役に立ちましたら、よろしければサポートをお願いいたします！ より良い記事をお届けできるよう、活動費に充てさせていただきます。