カテゴリー
サインイン 新規登録

間違いや改善の指摘

内容の技術的な誤り・誤字脱字やミスのご報告・解説やトピックの追記/改善のご要望は教材をさらに良くしていく上でとても貴重なご意見になります。

少しでも気になった点があれば、ご遠慮なく投稿いただけると幸いです🙏

実際には誤りではなく勘違いであっても、ご報告いただけることで教材のブラッシュアップにつながります。

質問ポリシー①

教材受講者みなさんのスムーズな問題解決のために、心がけていただきたいことがあります。

教材の内容に関する質問を投稿しましょう

教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。

その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。

1-1

Create React Appでアプリをセットアップしよう

まずはReactアプリを準備しましょう。
今回はFacebookが提供しているReactアプリ作成ツールの1つ[Create React App]を使用します。

Create React Appを使用することで、ビルドの設定やローカルでの開発サーバー起動処理など、Reactアプリ開発に必要なツールのインストールと設定をまとめて行うことができます。
このツールは、初回のセットアップ時のみ利用しますので、npx経由で実行しましょう。

Create React Appコマンドの使い方

Create React Appを実行するコマンドは、npx create-react-app <project-directory> [options]のように書きます。
つまり、作成したいアプリの名前を英語で指定することで、作成したアプリのディレクトリを見つけることが簡単になります。

今回作るアプリはAWS AmplifyとReact、そしてStripeを使うものですので、amplify-react-stripeを使用します。
アプリのディレクトリを作成したいディレクトリで、以下のコマンドを実行しましょう。

console
Copied!
npx create-react-app amplify-react-stripe --scripts-version "4.0.3"

アプリのセットアップが完了すると、以下のように英語で開発の進め方の紹介文が表示されます。

console
Copied!
Success! Created amplify-react-stripe at /Users/development/amplify-react-stripe Inside that directory, you can run several commands: npm start Starts the development server. npm run build Bundles the app into static files for production. npm test Starts the test runner. npm run eject Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back! We suggest that you begin by typing: cd amplify-react-stripe npm start Happy hacking!

cd amplify-react-stripeコマンドを実行して、作成されたアプリのディレクトリに入りましょう。

console
Copied!
cd amplify-react-stripe

ls -laコマンドを実行すると、様々なファイルが作成されていることが確認できます。

console
Copied!
ls -la total 1368 drwxr-xr-x 9 development staff 288 7 11 18:04 . drwxr-xr-x 3 development staff 96 7 11 18:02 .. -rw-r--r-- 1 development staff 310 7 11 18:04 .gitignore -rw-r--r-- 1 development staff 3369 7 11 18:04 README.md drwxr-xr-x 1040 development staff 33280 7 11 18:04 node_modules -rw-r--r-- 1 development staff 684168 7 11 18:04 package-lock.json -rw-r--r-- 1 development staff 823 7 11 18:04 package.json drwxr-xr-x 8 development staff 256 7 11 18:04 public drwxr-xr-x 10 development staff 320 7 11 18:04 src

インストールされているライブラリのパッチ・マイナーアップデートを反映する

続けてライブラリのバージョンをアップデートします。
これは本コースをスムーズに完了させるため、create-react-appコマンドでインストールするライブラリのバージョンを固定化しているためです。

本コースでは、今後のアップデートで挙動が変化し、アプリの構築ができなくなりリスクを避けるためにバージョンを固定しています。
--scripts-version "4.0.3"create-react-appコマンドに追加したことで、執筆時点の安定版であるバージョン4.0.3が常にインストールされます。

ただこの方法では、バグや脆弱性に対応したアップデート版がリリースされた場合、その変更が未反映のコードを利用することになります。
そのため、セットアップ完了後、amplify-react-stripeディレクトリで以下のコマンドを実行し、インストールされたライブラリの更新を行いましょう。

console
Copied!
npm install --save "react-scripts@4.0.*"

"react-scripts@4.0.*"とライブラリ名の後ろに@でバージョンを指定しています。また、*(ワイルドカード)を利用することで、「4.0.X系の最新バージョン」をインストールすることができます。

コマンドの実行が完了すると、実際にどのバージョンがインストールされたかが表示され、更新が完了します。

console
Copied!
+ react-scripts@4.0.3 updated 1 package and audited 1931 packages in 59.627s

セットアップしたReactアプリを動かしてみよう

Create React Appでアプリをセットアップすると、すぐにアプリをローカル環境で起動することができます。

react-amplify-stripeディレクトリで、以下のコマンドを実行しましょう。

console
Copied!
npm start

起動に成功すると、ブラウザで表示を確認するためのURLなどの情報が表示されます。

console
Copied!
Compiled successfully! You can now view amplify-react-stripe in the browser. Local: http://localhost:3000 On Your Network: http://192.000.00.000:3000 Note that the development build is not optimized. To create a production build, use npm run build.

Image from Gyazo

起動したサーバーは、[Control]キーと[c]キーを同時に押すことで停止できます。

[Tips] 別のデバイスでアプリの表示を確認する方法

On Your Networkとして表示されているアドレス(http://192.000.00.000:3000)は、作業中のPC以外からもアクセスができます。
アクセスできるデバイスの条件は、「npm startを実行しているPCと同じネットワークに接続していること」ですので、スマートフォンでの動作を確認したい場合などで活用しましょう。

Reactのコードを変更してみよう

Create React Appで作成したアプリは、ファイルの変更を自動で検知してブラウザを再読み込みしてくれます。

せっかくですので、1つファイルを変更してみましょう。

変化を体験するため、先ほど実行したnpm startコマンドは中断せず、Reactアプリをブラウザで開いたまま作業することをお勧めします。

react-amplify-stripe/src/App.jsをVS Codeで開き、9行目〜11行目のテキストを変更しましょう。

変更前

javascript
123
Copied!
<p> Edit <code>src/App.js</code> and save to reload. </p>

変更後

javascript
123
Copied!
<p> Hello React Stripe Amplify app! </p>

保存後、ブラウザの表示が変わっていることを確認しよう

src/App.jsの変更を保存すると、ブラウザで表示しているアプリのテキストが、いつの間にか変更されていることが確認できます。

Image from Gyazo

エラーが起きた時の表示を確認しよう

Create React Appで作成したアプリでは、マークアップに問題が起きた時などに、エラーを画面に表示してくれる機能も備わっています。

react-amplify-stripe/src/App.jsをVS Codeで開き、11行目の</p>を削除してみましょう。

変更前

javascript
123
Copied!
<p> Hello React Stripe Amplify app! </p>

変更後

javascript
123
Copied!
<p> Hello React Stripe Amplify app!

表示されたエラーを読んでみよう

</p>が不足している状態にわざと変更した状態で保存してみましょう。構文エラーが画面に表示されるようになりました。

Image from Gyazo

英文なのですこし「うっ」となるかもしれませんが、よく読むとExpected corresponding JSX closing tag for <p>. (20:6)と書かれています。
closing tag for <p>とあることから、「pの閉じタグ」について言及していることが伺えます。

このようにマークアップ構造がおかしくなったり、バグが発生した時には、画面に表示されたメッセージを確認し、必要ならばGoogle翻訳やDeepLなどで翻訳しつつ解決を目指すことをお勧めします。

最後に、削除した11行目の</p>タグを復活させて、保存し直しましょう。

変更後のsrc/App.js全コード

途中で独自のチャレンジをされた場合に、元に戻ることができなくなることがあるかもしれません。
もし迷ってしまった場合は、src/App.jsに以下のコードを丸ごとコピーアンドペーストして保存してください。

src/App.js
12345678910111213141516171819202122232425
Copied!
import logo from './logo.svg'; import './App.css'; function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Hello React Stripe Amplify app! </p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > Learn React </a> </header> </div> ); } export default App;

Checkpoint

  • npx create-react-app <ディレクトリ名>でReactアプリのセットアップができる
  • npm startですぐにReactアプリを動かすことができる
  • 同一ネットワークに接続しているデバイスであれば、On Your NetworkのURLでアクセスできる

次はBootstrapを使って見た目を簡単に整えることに挑戦します。

現在のパート (1)
全パート (3)
みんなで助け合おう!
現在のパートのディスカッション 全1件
1-1
Takao 2023-11-26
最終的な全てのライブラリ(メインのみでも)のバージョンを教えてください。

nvm install stable
nvm use stable

こちらを実行して良いですか?
最終的にそれぞれのライブラリはどのバージョンでしたか?
初めの指定のバージョンとソースコード提示の際に異なるケースが散見されています。

発生している問題

(py310_2) user@usernoMacBook-Pro waffle2 % npx create-react-app amplify-react-stripe --scripts-version "4.0.3"
npx: 67個のパッケージを5.03秒でインストールしました。
You are running Node 12.22.3.
Create React App requires Node 14 or higher.
Please update your version of Node.