#0 Reactでプロプラ！Vol.2「Border7」：はじめに

連載「Reactでプロプラ！」はじめます。

はじめまして。プロプラ！管理人のはこだてたろうと申します。
連載『Reactでプロプラ！』では、ハンズオン形式でReactアプリケーションの開発を学びます。

プロプラ！は、まずはじめにアプリケーションとプログラムの概要、そして設計書を提示します。
そしてそれらをもとにプラモデルを作るようにプログラミングをしていきます。
プログラミングのプラモデル、それがプロプラです！

本連載の対象読者

プロプラ！は、主に入門書での学習を終えたプログラミング初学者の方を対象としています。
具体的には以下のような方を想定しています。

• JavaScriptの基本的な書き方がわかる
• Reactの基本的な書き方がわかる
• でも何を作るかが決まっていない

もちろん入門書で学習中の方でも問題ありません。「この書き方はなんだっけ？」とわからないことがあれば、調べながら取り組んでみてください。十分な効果が得られるはずです。

プロプラ！が解決する悩み

プログラミングを学習していて、以下のような悩みを感じたことはありませんか？

• 何か作ってみたい。でも何を作ればいいんだろう。。。
• 入門書はコンプリートしたけど、結局何が作れるの？
• なんとなく作ってみたけど、これ合ってるのかな？

プロプラ！はそんな悩みを解決していきます。

何か作ってみたい。でも何を作ればいいんだろう。。。

プログラミングは何かを作るための手段に過ぎません。
作るものがなければ学んだことは活かせません。

プロプラ！はお題として作るものを指定します。
作るものが決まっていないのであれば、まずはお題のアプリケーションを作ってみませんか？
「これができるなら、あんな機能も作れるんじゃないかな？」といったアイディアが作っているうちに浮かぶかもしれませんよ。

入門書はコンプリートしたけど、結局何が作れるの？

変数やメソッド、条件分岐などなど。入門書で学んだことはプログラムのパーツです。
パーツを組み合わせていくことでアプリケーションが出来上がります。

プロプラ！は、主にパーツ単位（JavaScriptの関数単位、Reactのコンポーネント単位）でアプリケーションの開発を進めていきます。
最終的にそれらのパーツを組み合わせることでアプリケーションとして動くようにしていきます。

「アプリケーションはこんなふうにできているのか！」と実感していただけるでしょう。

なんとなく作ってみたけど、これ合ってるのかな？

入門書での学習はお手本コードの写経（同じようにプログラムを書くこと）がメインですが、さらなるレベルアップのためには自分なりの処理を書く経験が不可欠です。
でも、最初のうちはそれが合っているのかわからなくて、不安になってしまいますよね。

プロプラ！では、JestというJavaScriptのテストツールを導入しています。
コンポーネントや関数ごとに答え合わせができるようにしているので、安心して作り進めることができます。
テストコードも公開しているので、余力があればそちらも参考にしてみてくださいね。

本連載で作るアプリケーション

『Reactでプロプラ！Vol.2』は、Kindleで出版中の『Vol.1 High and Low』に続く第二弾です。
今回は、トランプゲームのBorder7というアプリケーションを作ります。

山札から１枚カードを引き、そのカードの数字が 7より大きいか小さいか、あるいは7に等しいかを予想するゲームです。

本連載の動作環境

本連載のプログラムは、執筆時点（2023年10月）で下記の環境で動作することを確認しています。

macOS Ventura 13.5.1／ Node.js v18.18.0

免責事項

本連載はReact開発に関する筆者個人の知見の提供を目的としています。内容については正確な記述をつとめておりますが、本連載のプログラムを使用することで生じた損害等に関しては一切の責任を負いません。

環境構築

本連載は以下のGitレポジトリの出題ロジックを使用します。

https://github.com/hakolab/border7/tree/questions

ご自身の端末に、Git および Node.js がインストールされていることをご確認ください。

git -v
node -v

以下のコマンドで questions ブランチを指定して任意のディレクトリにリポジトリをクローンしてください。

git clone -b questions https://github.com/hakolab/border7.git

リポジトリのクローンができたら Border7 のプロジェクトルートに移動し、依存モジュールをインストールします。

cd border7
npm i

依存モジュールのインストールが完了したら、アプリケーションを起動してみましょう。

npm run start

以下のような茶色い背景の画面が表示されれば環境構築は完了です。
お疲れ様でした！
次回はBorder7アプリケーションの概要についてご説明します！