React.js でプログラミング・プラモデル Vol.3 「BlackJack」：まえがき

カウンターアプリやTODOアプリを作り終えたそこのあなた。次は何を作りますか？

この質問に答えられた方は、この連載を読む必要はないでしょう。
それを全力で実現してください！応援しています！

逆に、この質問に答えられなかった方は、ようこそお越しくださいました。一緒に「BlackJack」を作りましょう！

プログラミング・プラモデルって？

プログラミング・プラモデルは、その名の通り「プラモデルを作るようにプログラミングする」ことです。

他と何が違うの？

プログラミング・プラモデルは、サンプルコードを「書き写す」のではなく、「処理を埋めていく」ようにプログラミングをしていきます！

処理を埋めていくってどういうこと？

まず最初に、中身が空っぽになっている「処理の枠組み」を提示します。
例えば以下のようなコードです。

function someProcess(){}

次に、この someProcess() に、どのような処理を実装するかという「設計書」を提示します。

引数に、x と y を取り、それらを足して 2 で割る
その数字を「」で囲った文字列を返却する

あなたはその設計書に従って処理を実装してください。

function someProcess(x, y){
	let num = (x + y)/2
	return "「" + num + "」"
}

なんでそんなことするの？

上記の例の処理を実現するためには、以下の技術が必要です。

・引数を受け取ること
・変数を使用した計算
・文字列の連結

これらの技術を知らなければ、どこかから調達して使えるようになる必要があります。

入門書などから技術を「インプットする学習」から、「(適宜インプットして)アウトプットする学習」へとシフトすることが、このプログラミング・プラモデルの目的です。

それをするとどうなるの？

「アウトプットする学習」へとシフトすることで以下のようなメリットが得られます。

・自分の理解度を確認できる
・自分で作ることで定着しやすくなる
・「もっと○○したい」が生まれやすくなる

一つずつ見ていきましょう。

自分の理解度を確認できる

例えば、設計書に「 useState() を使用して state x を定義する。初期値は 0」と書かれていたとします。
これを実現するためには、useState() を使用した state の定義の仕方、その初期値の設定の仕方を理解している必要があります。

それらが理解できていなければ、あなたは useState() を使うことができません。

自分で作ることで定着しやすくなる

チュートリアルでやっていたときはちゃんと書けたけど、いざ実際に使ってみたらちゃんと書けなかった、なんてことはよくありますよね。

調べ直して「あー、useState() はこうやって使うんだった」と思い出すことで、知識は段々と定着していきます。

「もっと○○したい」が生まれやすくなる

ここが一番重要です！
プログラミング・プラモデルは、色々な技術を組み合わせてアプリケーションを作り上げていきます。
そのときに考えてみてほしいことは「自分だったらどうするか？」ということです。

「ここで useState() を使っているけど、これ useReducer() とか redux でやったほうがいいんじゃないかな？」
「この処理フロー、ちょっと無駄が多いなぁ。自分ならこうするかな」
「こんなことできるんなら、きっとあんなこともできるよな！」

もし、このような「もっと○○したい」というアイディアが浮かんだら、ぜひそれを実現してみてください。

できる→作りたい→実現する→できる→作りたい→... というループを作り出す

「もっと○○したい」というアイディアは大抵、今までの問題と比べて難しいものでしょう。

それを乗り越えるためには、新しいプラグインを導入しないといけないかもしれませんし、英語のドキュメントを読まないといけないかもしれません。

そして、新しい技術は体に馴染むまでに時間がかかります。試してバグって書き直して...という繰り返しで、心が折れそうになることもあるでしょう。

でもそうして新たな「できる」を得たあなたは、きっと新しい「作りたい」を見つけていることでしょう。

これを繰り返して「できる→作りたい→実現する→できる→作りたい→... 」というループが生まれれば、その先にはもっと楽しい世界が待っていると思いませんか？

次回

次回は、これから作る「BlackJack」というゲームのルールについて確認します。