React.jsでWebプログラムを作り、リリースするまでの道のり。サーバーにアップロードするまで

2021年7月11日

最近、React.jsを始めまして、
本日、こちらのガチャ確率計算ツールが出来ました。
→https://daichanblog.blog/gacha_calc/

0からReactを始めて、ついに100を作ることができたので
（まだ不具合とかあるかもしれませんが）
その一連の流れを、今回の記事に記載していこうと思います。

開発環境

とりあえず使用したものを書いていきます。

ないものは、PCにインストールしておきます。

create-react-appで環境構築

まずは、Reactを使用してプログラミングが出来るよう環境づくりです。

いろいろ用意するのだるいので、
node.jsとかいう最強便利環境に「create-react-app」というコマンドを使い、
一括で用意してもらいます。

ターミナルを起動し、
cdを駆使して、プロジェクトを作りたいフォルダへ移動してください。
大体私の場合はデスクトップに「React」とかいうフォルダを作って
「cd Desktop/React/」と入力します。

その後、

npx create-react-app my-app --template typescript

を実行すると、
1分ほど待てば、
TypeScript＋Reactのプロジェクトが出来上がります。
my-appはアプリ名なのでなんでもどうぞ。

このプロジェクトをVScodeで読み込みます。

このプロジェクト内のファイルを使って
Webアプリを作っていくわけです。

ちなみにnpxはネットにつながっていないと使えません。
npmの方にもcreate-react-appはあったのですが、
いつの間にか非推奨になっておりました。

ページを起動

どっちでもいいんですが、

ターミナルの場合は、my-appフォルダに移動して、
VScodeの場合は、そのままターミナルに
下記を入力してください。

npm start

そうすると、ブラウザが起動し、
さっき作ったプロジェクトのページが
読み込まれます。

Node.jsがローカルサーバーを立ててくれて、
(localhost:3000)
普通にウェブページを見てるような感覚で
開発することができます。

これでReactのスタートページが開けば
成功です。

サーバーを止める方法は
Control + C でサーバーが止まります。

開発中は止めなくていいです。
プロジェクト内で上書き保存するたびに、
ページも書き換わってくれます。

設定

これだけは絶対やってください。
package.jsonに下記を追記

"homepage": "."

中身は連想配列になっているので、
追記する形で問題なしです。

これをやらないと、
いざプロジェクトをリリースしてページを
開こうとしても、真っ白な画面しか開きません。

他の設定は任意です。
私の場合、tailwind.cssの設定など、
いろんな設定が混ざっています。

プログラミング

いざ、プロジェクト内のコードを書き換えたり、
ファイルを追加していき、プロジェクトを完成させてください。

リリース

ターミナルに下記を入力します。

npm run build

そうすると、数秒待てば
プロジェクトに「build」という
フォルダが出来上がっています。

次に、FTPか何かでサーバーの任意の場所にフォルダを作り、
buildフォルダ内にあるファイルをすべて、
サーバーに作ったフォルダ内にアップロードします。

私の場合だと、このブログの
「daichan-blog.com」フォルダの中にある
「public_html」だったか何かに(WordPressが入っているため、うる覚え)
「gacha_calc」というフォルダを作り、
その中にbuild内のファイルを入れました。

そして
https://daichanblog.blog/gacha_calc/
にアクセスすると、作ったページが開けるというわけです。

まとめ

以上が、ReactでWebアプリを
実装する手順です。

Reactは学習コストが非常に高いと言われている
ライブラリです。

その分、出来たときの喜びは
かなり高いので、
レベルの高い作品を作りたい方にはオススメです。

とはいえ、私はReact初心者の状態で冒頭で紹介した
ガチャの確率計算ツールぐらいなら
2日ほどあれば作れました。

学習コストが高いと言われているものの、
意外と何とかなる印象。

参考程度にどうぞ。