Next.jsでchatGPTを活用して電卓アプリを作ってみました

はじめに
-
この記事では、初学者がNext.jsのキャッチアップのために電卓アプリを作成しました。
読者はこの記事を通じてNext.jsを使用した電卓アプリの作成方法と、基本的なAIプロンプトエンジニアリングについて学ぶことができます。

開発環境
---

- OS:windows11
- 言語:Javascript、html/css
- JSフレームワーク:React.js 18
- React.jsフレームワーク:　Next.js 14.2.15
- CSSフレームワーク:tailwindcdd 3.4.1

### 1.作業ディレクトリの作成
自分の好きな階層で以下のコマンドを実行
```
C: \Desktop>mkdir testcalculator
C: \Desktop>cd testcalculator
```
下記に移動
```
C: \Desktop\testcalculator>
```
### 2.[chatgpt](https://chatgpt.com/)にNext.jsを使用したアプリの作成方法を質問する
```
あなたはNext.jsの専門家です。
Nextjsで簡単な電卓のアプリを作成してください
```
![スクリーンショット 2024-10-10 090100.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3906068/6b1d1835-9b0c-da19-1808-60c742ae2858.png)

:::note info
ここからは手順に従ってアプリを作成していきます。
ここでは例として、私のAI出力結果による実装手順を以下に掲載させて頂きます。
:::


### 3.Next.jsプロジェクトの作成
下記のコマンドを実行し、Next.jsプロジェクトを作成
```
C: \Desktop\testcalculator>npx create-next-app mycalculator
```
インストールが始まるので完了するまで待ち、下記のコマンドを実行してプロジェクトのルートに移動

```
C: \Desktop\testcalculator>cd　mycalculator
C: \Desktop\testcalculator\mycalculator>
```
下記のコマンドを実行し、開発サーバーを起動できるか確認
```
C: \Desktop\testcalculator\mycalculator>npm run dev
```
下記の画面が表示されていれば、開発サーバーが起動できています
![スクリーンショット 2024-10-10 112050.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3906068/363bb092-358d-b979-f385-33a5c68e615f.png)

別タブでターミナルを開き、再度プロジェクトのルートディレクトリに移動
下記のコマンドを実行し、vscodeを開く
```
C: \Desktop\testcalculator\mycalculator>code .
```
chatGPTが作成したcodeをルートディレクトリの/app/page.tsxに上書き貼り付け

:::note warn
code記述後は必ず保存しておくこと。保存しないとブラウザに反映されません。
:::

```mycalculator/app/page.tsx
'use client'

import { useState } from 'react'

export default function Home() {
  const [display, setDisplay] = useState('')

  const appendToDisplay = (value: string) => {
    setDisplay(display + value)
  }

  const clearDisplay = () => {
    setDisplay('')
  }

  const calculate = () => {
    try {
      // Note: eval is used for simplicity, but it's not recommended for production use
      const result = eval(display)
      setDisplay(result.toString())
    } catch (error) {
      setDisplay('Error')
    }
  }

  return (
    <div className="flex justify-center items-center min-h-screen bg-blue-300">
      <div className="bg-white rounded-lg shadow-md p-6">
        <input
          type="text"
          className="w-full h-12 text-2xl text-right mb-4 p-2 border rounded"
          value={display}
          readOnly
        />
        <div className="grid grid-cols-4 gap-2">
          {['7', '8', '9', '+', '4', '5', '6', '-', '1', '2', '3', '*', '0', '.', 'C', '/'].map((btn) => (
            <button
              key={btn}
              onClick={() => btn === 'C' ? clearDisplay() : appendToDisplay(btn)}
              className={`h-12 text-lg ${
                ['+', '-', '*', '/'].includes(btn)
                  ? 'bg-orange-400 text-white hover:bg-orange-500'
                  : 'bg-gray-200 hover:bg-gray-300'
              }`}
            >
              {btn}
            </button>
          ))}
          <button
            onClick={calculate}
            className="col-span-4 h-12 text-lg bg-orange-400 text-white hover:bg-orange-500"
          >
            =
          </button>
        </div>
      </div>
    </div>
  )
}
```
完成です、お疲れ様でした。
Next.jsでのプロジェクト作成時にtailwindCSSも標準搭載されていますので、chatGPTに聞いたりtailwindCSSチートコードなどを活用して遊んでみるのもおすすめです。
![スクリーンショット 2024-10-10 091330.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3906068/0ae59266-5a00-d8f1-d95c-8d800b8912f0.png)


# 参考文献
[chatgpt](https://chatgpt.com/)