はこだてたろう

プログラムやアプリを作って解説する人。 「みて学ぶ〜〜」「プログラミング・プラモデル」…

はこだてたろう

プログラムやアプリを作って解説する人。 「みて学ぶ〜〜」「プログラミング・プラモデル」シリーズでプログラミング学習をブーストさせましょう！ Stampアプリを作りました。 https://stamp.hakodatetaro.com/ ぜひポチポチしてみてください。

  • プログラミング・プラモデル Vol.3「BlackJack」

    この連載では、アプリケーションのお題とそのプログラムの部品、設計書を提示します。 そして、それらをもとにプラモデルを作成するようにプログラミングをすることで、プログラミング学習をブーストさせていきましょう！ Vol.3で作成するアプリケーションは有名なカードゲーム「BlackJack」です！

  • 【やってみよう！React.js】

    Javascript ライブラリの React.js の基本的な使い方についての記事を不定期で投稿していきます。 まずは「できる」を集めよう！を合言葉に、React.js の使い方やできることを一つ一つ増やしていきましょう！

  • React.jsで、BlackJackを作る

    このマガジンでは、近日連載開始予定のプログラミング・プラモデル Vol.3 で取り上げる BlackJack というカードゲームを作る過程を投稿していきます。 言わずとしれた、トランプの数の合計が 21 に近くなるようにカードを引いていく、あのゲームです！

  • プログラミング・プラモデル Vol.2「Border 7」

    この連載では、アプリケーションのお題とそのプログラムの部品、設計書を提示します。 そして、それらをもとにプラモデルを作成するようにプログラミングをすることで、プログラミング学習をブーストさせていきましょう！ Vol.2で作成するアプリケーションは著者オリジナルのシンプルなカードゲーム「Border 7」です！

  • 固定された記事

お絵かきアプリ Stamp のご紹介

Stamp個人で作成したお絵かきアプリ Stamp をご紹介します。 画面上のキャンバスに、パレットでお好みの形・色にカスタマイズしたスタンプをぽちぽち押してお絵かきするアプリです（無料・登録不要）。 作品例このような作品が作れます。 束の間の空 夜道 春のにおい Stamp の使い方 Twitterにシェアもできますいい作品ができましたら、スクショを撮ってぜひシェアしてみください！

はこだてたろう

    • あとがき：React でプロプラ！ Vol.3 「BlackJack」

      「React.js でプログラミング・プラモデル」の連載第３弾。 React.js で、カジノゲーム「BlackJack」を作ろう！ これまで前回は、ボタンをキーボードで操作する処理を実装しました。 現時点の Sandbox連載を通して出来上がった Sandbox はこちら。 あとがき40回に渡る長編となりましたが、いかがだったでしょうか？ React だけでも、そこそこのゲームが作れましたね！ 今回は「少しずつ積み重ねる」を意識して、１記事あたりのコーディング量が少

      はこだてたろう

      • #40 ボタンをキーボードで操作する：React でプロプラ！ Vol.3 「BlackJack」

        「React.js でプログラミング・プラモデル」の連載第３弾。 React.js で、カジノゲーム「BlackJack」を作ろう！ これまで前回は、デッキが少なくなったらシャッフルする処理を実装しました。 現時点の Sandbox前回までの Sandbox はこちら。 はじめての方は、ここから一緒に作り始めることができます。 今回のゴール・ボタンをキーボードで操作できるようにする 今回の設計書src/components/BlackJackButtons.jsブラッ

        はこだてたろう

        • #39 デッキをシャッフルする②：React でプロプラ！ Vol.3 「BlackJack」

          「React.js でプログラミング・プラモデル」の連載第３弾。 React.js で、カジノゲーム「BlackJack」を作ろう！ これまで前回は、デッキの枚数が少なくなったら reducer() にディスパッチする処理を実装しました。 現時点の Sandbox前回までの Sandbox はこちら。 はじめての方は、ここから一緒に作り始めることができます。 今回のゴール・デッキをシャッフルする処理を実装する 今回の設計書src/BlackJack.jsレデューサー/

          はこだてたろう
        • 固定された記事

        お絵かきアプリ Stamp のご紹介

        はこだてたろう

        マガジン

        • プログラミング・プラモデル Vol.3「BlackJack」
          42本
        • 【やってみよう！React.js】
          3本
        • React.jsで、BlackJackを作る
          16本
        • プログラミング・プラモデル Vol.2「Border 7」
          19本

        記事

          #38 デッキをシャッフルする①：React でプロプラ！ Vol.3 「BlackJack」

          「React.js でプログラミング・プラモデル」の連載第３弾。 React.js で、カジノゲーム「BlackJack」を作ろう！ これまで前回は、ディーラーの Chip を実装しました。 現時点の Sandbox前回までの Sandbox はこちら。 はじめての方は、ここから一緒に作り始めることができます。 今回のゴール・デッキの枚数が少なくなったら、reducer() にディスパッチする 実装の前に・デッキの枚数が少なくなったときにカードを切り直すことを「シャッ

          はこだてたろう

          #38 デッキをシャッフルする①：React でプロプラ！ Vol.3 「BlackJack」

          はこだてたろう

          #37 ディーラーの Chip を表示する：React でプロプラ！ Vol.3 「BlackJack」

          「React.js でプログラミング・プラモデル」の連載第３弾。 React.js で、カジノゲーム「BlackJack」を作ろう！ これまで前回は、画面に勝敗を表示しました。 現時点の Sandbox前回までの Sandbox はこちら。 はじめての方は、ここから一緒に作り始めることができます。 今回のゴール・ディーラーの Chip を画面に表示する 実装の前に・Chip は、Material-UI のコンポーネントだよ！ ・以下の場合のみ、ディーラーの Chip

          はこだてたろう

          #37 ディーラーの Chip を表示する：React でプロプラ！ Vol.3 「BlackJack」

          はこだてたろう

          #36 勝敗を表示する③：React でプロプラ！ Vol.3 「BlackJack」

          「React.js でプログラミング・プラモデル」の連載第３弾。 React.js で、カジノゲーム「BlackJack」を作ろう！ これまで前回は、勝敗を判定する処理を実装しました。 現時点の Sandbox前回までの Sandbox はこちら。 はじめての方は、ここから一緒に作り始めることができます。 今回のゴール・BlackJackUtils.getLastScore(hand) を実装する 今回の設計書src/utils/BlackJackUtils.jsハン

          はこだてたろう

          #36 勝敗を表示する③：React でプロプラ！ Vol.3 「BlackJack」

          はこだてたろう

          #35 勝敗を表示する②：React でプロプラ！ Vol.3 「BlackJack」

          「React.js でプログラミング・プラモデル」の連載第３弾。 React.js で、カジノゲーム「BlackJack」を作ろう！ これまで前回は、勝敗を表示するための Chip コンポーネントを実装しました。 現時点の Sandbox前回までの Sandbox はこちら。 はじめての方は、ここから一緒に作り始めることができます。 今回のゴール・BlackJackUtils.judge(dealersHand, playersHand) を実装する 今回の設計書sr

          はこだてたろう

          #35 勝敗を表示する②：React でプロプラ！ Vol.3 「BlackJack」

          はこだてたろう

          #34 勝敗を表示する①：React でプロプラ！ Vol.3 「BlackJack」

          「React.js でプログラミング・プラモデル」の連載第３弾。 React.js で、カジノゲーム「BlackJack」を作ろう！ これまで前回は、ディーラーのスコアを表示しました。 現時点の Sandbox前回までの Sandbox はこちら。 はじめての方は、ここから一緒に作り始めることができます。 今回のゴール・勝敗を表示する Chip を実装する 実装の前に・「Chip」は Material-UI のコンポーネントだよ！ ・タグとかアバターで使われているのを

          はこだてたろう

          #34 勝敗を表示する①：React でプロプラ！ Vol.3 「BlackJack」

          はこだてたろう

          #33 ディーラーのスコアを表示する：React でプロプラ！ Vol.3 「BlackJack」

          「React.js でプログラミング・プラモデル」の連載第３弾。 React.js で、カジノゲーム「BlackJack」を作ろう！ これまで前回は、プレイヤーのスコアを表示しました。 現時点の Sandbox前回までの Sandbox はこちら。 はじめての方は、ここから一緒に作り始めることができます。 今回のゴール・ディーラーのスコアを画面に表示する 実装の前にプレイヤーのターンが終わるまで、ディーラーの２枚目のカードは伏せられています。 なので、ディーラーのスコ

          はこだてたろう

          #33 ディーラーのスコアを表示する：React でプロプラ！ Vol.3 「BlackJack」

          はこだてたろう

          #32 ハンドのスコアを表示する④：React でプロプラ！ Vol.3 「BlackJack」

          「React.js でプログラミング・プラモデル」の連載第３弾。 React.js で、カジノゲーム「BlackJack」を作ろう！ これまで前回は、ハンドに Ace が含まれているかを判定しました。 現時点の Sandbox前回までの Sandbox はこちら。 はじめての方は、ここから一緒に作り始めることができます。 今回のゴール・プレイヤーのスコアを画面に表示する 今回の設計書src/components/PlayArea.jsプレイエリアコンポーネント// J

          はこだてたろう

          #32 ハンドのスコアを表示する④：React でプロプラ！ Vol.3 「BlackJack」

          はこだてたろう

          #31 ハンドのスコアを表示する③：React でプロプラ！ Vol.3 「BlackJack」

          「React.js でプログラミング・プラモデル」の連載第３弾。 React.js で、カジノゲーム「BlackJack」を作ろう！ これまで前回は、画面表示用のスコアをゲットする処理を実装しました。 現時点の Sandbox前回までの Sandbox はこちら。 はじめての方は、ここから一緒に作り始めることができます。 今回のゴール・ハンドに Ace があるかを判定する 今回の設計書src/utils/BlackJackUtils.jsAce 所持確認// func

          はこだてたろう

          #31 ハンドのスコアを表示する③：React でプロプラ！ Vol.3 「BlackJack」

          はこだてたろう

          #30 ハンドのスコアを表示する②：React でプロプラ！Vol.3「BlackJack」

          「React.js でプログラミング・プラモデル」の連載第３弾。 React.js で、カジノゲーム「BlackJack」を作ろう！ これまで前回は、ハンドのスコアをゲットする処理を作成しました。 現時点の Sandbox前回までの Sandbox はこちら。 はじめての方は、ここから一緒に作り始めることができます。 今回のゴール・BlackJackUtils.getScoreForDisplay(hand) を実装する 実装の前に・ソフトハンドのとき、スコアは「｜」

          はこだてたろう

          #30 ハンドのスコアを表示する②：React でプロプラ！Vol.3「BlackJack」

          はこだてたろう

          #29 ハンドのスコアを表示する①：React でプロプラ！Vol.3「BlackJack」

          「React.js でプログラミング・プラモデル」の連載第３弾。 React.js で、カジノゲーム「BlackJack」を作ろう！ これまで前回は、「最初に配られたハンドがブラックジャックかどうか」を判定しました。 現時点の Sandbox前回までの Sandbox はこちら。 はじめての方は、ここから一緒に作り始めることができます。 今回のゴール・BlackJackUtils.getScore(hand) を実装する 実装の前に・「スコア」は、ハンドのランクを合計

          はこだてたろう

          #29 ハンドのスコアを表示する①：React でプロプラ！Vol.3「BlackJack」

          はこだてたろう

          #28 最初に配られたハンドがブラックジャックかどうかを判定する②：React でプロプラ！ Vol.3 「BlackJack」

          「React.js でプログラミング・プラモデル」の連載第３弾。 React.js で、カジノゲーム「BlackJack」を作ろう！ これまで前回は、reducer() のブラックジャック判定処理にディスパッチしました。 現時点の Sandbox前回までの Sandbox はこちら。 はじめての方は、ここから一緒に作り始めることができます。 今回のゴール・プレイヤーかディーラーのハンドがブラックジャックのとき、ターンを終了する 今回の設計書src/BlackJack.

          はこだてたろう

          #28 最初に配られたハンドがブラックジャックかどうかを判定する②：React でプロプラ！ Vol.3 「BlackJack」

          はこだてたろう

          #27 React でプロプラ！ Vol.3 「BlackJack」：最初に配られたハンドがブラックジャックかどうかを判定する①

          「React.js でプログラミング・プラモデル」の連載第３弾。 React.js で、カジノゲーム「BlackJack」を作ろう！ これまで前回は、カードが Ace であるか、フェイスカードであるかを判定しました。 現時点の Sandbox前回までの Sandbox はこちら。 はじめての方は、ここから一緒に作り始めることができます。 今回のゴール・カードが 2枚ずつ配られたら、reducer() のブラックジャック判定処理にディスパッチする 今回の設計書src/B

          はこだてたろう

          #27 React でプロプラ！ Vol.3 「BlackJack」：最初に配られたハンドがブラックジャックかどうかを判定する①

          はこだてたろう