Zenn
Closed7

ChatGPTと協力してWebアプリケーションの開発準備をする

React
Express
ChatGPT
mohimohi

最初にNodeを使える環境を用意
元々WSLを入れていたので、コンテナを開発環境として使うため、以下記事を参照してコンテナ作成
https://dev.classmethod.jp/articles/vscode-container-connect/

docker-compose.ymlは少し書き直し、

version: '3'
services:
  simple-container:
    image: node:alpine
    tty: true

imageをpythonからnodeへ

mohimohi

今回はReactとExpressで実装をしてみたいので、
まずはそれらのインストール方法をassistantに聞いてみる。

Q. reactとexpressの開発環境の手順を教えてください
A. npmを使用して、ReactとExpressをインストールする
次に、npmを使用して、ReactとExpressをインストールします。npmは、Node.jsに同梱されているパッケージマネージャーです。
npmを使用して、ReactとExpressをインストールするには、次のコマンドを実行します。

npm install react react-dom express --save

言われた通りコマンドを実行できたので、次はプロジェクトを作成する
ここまででChatGPTの回答も止まってしまったので、「続きをお願いします」と送り次の手順を待つ
（回答では手順が1～5まであり、今回は手順2）

assistantに提示された手順も置いておきます

  1. Node.jsをインストールする。
  2. npmを使用して、ReactとExpressをインストールする。
  3. Reactプロジェクトを作成する。
  4. Expressアプリケーションを作成する。
  5. ReactとExpressを組み合わせる。
mohimohi

assistantから手順3をもらったので以下に引用する

  1. Reactプロジェクトを作成する
    Reactプロジェクトを作成するには、次のようにします。
    作業用のフォルダを作成します。例えば、my-appという名前のフォルダを作成します。
mkdir my-app

作成したフォルダに移動します。

cd my-app

Reactプロジェクトを作成するために、create-react-appコマンドを実行します。

npx create-react-app .

このコマンドを実行すると、Reactプロジェクトが作成され、必要なファイルが自動的に作成されます。

無事全部実行後、npm startでlocalhost:3000の画面が開く
画面はお馴染みのreactです

では次に進んでみます

mohimohi

次は手順4です
assistantの言うことに従っておけばそこそこ正解ですし、
準備くらいならそのまま手順書として使えます
便利ですね…

  1. Expressアプリケーションを作成する
    次に、Expressアプリケーションを作成します。Expressアプリケーションを作成するには、次のようにします。
    作業用のフォルダを作成します。例えば、my-app/serverという名前のフォルダを作成します。
mkdir my-app/server

作成したフォルダに移動します。

cd my-app/server

Expressアプリケーションを作成するために、express-generatorコマンドを実行します。

npx express-generator

このコマンドを実行すると、Expressアプリケーションが作成され、必要なファイルが自動的に作成されます。

特にエラーが出ることなくできました
次で最後です

mohimohi

最後に5. ReactとExpressを組み合わせるを実施しますが、
ここから先はやり取りがかなり長いので抜粋しながら進めていきます

  1. 以下の内容でmy-app/server配下にindex.jsファイルを作成する
    ※routerディレクトリにも同じ名前のファイルが存在するが、それとは別です
const express = require('express')
const app = express()

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(3000, () => {
  console.log('Example app listening on port 3000!')
})

質問中、回答のソースコードが途中で途切れていた場合、
ファイル名を指定して「index.jsの内容をもう一度書いてください」のように送ると中途半端に送られたソースが全文送られてきます

  1. my-app配下のpackage.jsonのscriptsを以下に書き換える
{
  "name": "my-app",
  "version": "0.1.0",
  "scripts": {
    "start": "node server/index.js",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

変更点は"start": "node server/index.js"の部分です。
ReactとExpressを組み合わせたアプリケーションではapp.jsではなくserver/index.jsを呼び出す様子

  1. npm start
    localhost:3000を開くと、HelloWorldが開きます
    これで完了です

・・・と終ったところで疑問が
Web初心者なので、ExpressとReactの動きがよくわかっていません
なぜ、App.jsではなくIndex.jsなのか

当初のイメージでは、ExpressはNodeでAPIを作れる（Webサーバになりうる）ものとして理解しており、
App.jsからExpressのrouterにアクセスするのかなと思っていました

果たしてそれが正しいのか、assistantに質問を重ねていきます

mohimohi

ここからは 頭の悪いもひ vs assistant の攻防戦です

もひQ1.

ReactとExpressを組み合わせたアプリケーションでは、Expressのサーバを起動しますが
Reactとの処理の関係性がわかりません

assistant A.

ReactとExpressを組み合わせたアプリケーションでは、Expressのサーバーが起動されると、ReactとExpressが通信を行います。通信にはHTTPプロトコルが使用されます。

ReactがWebブラウザ上で動作している場合、通常はユーザーのインタラクションに応じてHTTPリクエストを送信します。そのリクエストはExpressのサーバーに送信され、Expressはそのリクエストを受け取り、処理を行います。処理が完了したら、ExpressはHTTPレスポンスをReactに送信します。Reactはそのレスポンスを受け取り、画面を更新します。

このように、ReactとExpressは通信を行いながら、それぞれの役割を果たしてアプリケーション全体を構成します。Reactがフロントエンドとしての役割を、Expressがバックエンドとしての役割を担っています。

おー…なるほど？
server/index.jsのサンプルコードだともう一点気になるところがあるので質問

もひQ2.

フロントを実装したい場合、server/index.jsに直接書くのですか？
それとも、index.jsからReactのコンポーネントを呼び出すイメージでしょうか？

assistant A.

ReactとExpressを組み合わせたアプリケーションでは、フロントエンドの実装はReactのコンポーネントを使用します。そのため、server/index.jsにReactのコンポーネントを直接書くことはありません。

通常は、server/index.jsはExpressのサーバーを起動するスクリプトとして実装されます。そのため、server/index.jsからReactのコンポーネントを呼び出すイメージです。server/index.jsでは、Expressのアプリケーションを初期化したり、RoutingやMiddlewareなどを設定します。

Reactのコンポーネントは、通常は「App.js」という名前のファイルに定義されます。このファイルをserver/index.jsから呼び出し、Reactのアプリケーションを初期化します。例えば、以下のように記述することができます。

const express = require('express');
const app = express();

// 以下省略

const App = require('./App');

app.use('/', App);

// 以下省略

このようにして、ReactのコンポーネントがExpressのサーバーに組み込まれます。そのため、Expressのサーバーを起動することで、Reactのアプリケーションも起動されます。

ありがとうございますassistant、納得できました
サンプルコードがExpressだけからレスポンスを返すものに当初なっていたので、
Reactはどこで出番があるのかわかりませんでした

最後に、server/index.jsについてもう少し詳しく説明をもらったので締めとする

const express = require('express');
const app = express();

const App = require('./App');

// RoutingやMiddlewareの設定

app.use('/', App);

// 以下省略

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

この例では、まず「express」モジュールを読み込み、「express()」関数を呼び出してExpressのアプリケーションを初期化しています。

次に、「App.js」という名前のファイルからReactのアプリケーションを読み込み、「app.use()」メソッドを使用してExpressのアプリケーションに組み込んでいます。

最後に、「app.listen()」メソッドを呼び出してExpressのサーバーを起動しています。
このようにして、Expressのサーバーが起動すると、Reactのアプリケーションも起動されます。そのため、HTTPリクエストを受け取ることができます。

…とのことでした。
ChatGPTが開発までやってくれる、というのがTwitterで出回ってきていましたが
確かにこれなら最後の開発まで付き合ってくれそうですね

ただ、途中でエラーになったりして画面更新を余儀なくされると、
今までの会話が一度なくなってしまうので注意が必要です（会話の前後関係がなくなります）

mohimohi

無事、サンプルコードを動かすところまで完了したので本スクラップはクローズとします
作りたいWebアプリケーションが浮かんでいるので、assistantにお願いして要件定義と実装を頑張っていこうと思います

このスクラップは2022/12/06にクローズされました