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」というゲームのルールについて確認します。
いいなと思ったら応援しよう！
