はじめに
ChatGPTという新しいAIのベータ版が公開されていますね！
以前TwitterでDB設計がされていたり、ソースの相談ができている様子を見たので、
AIを使って電卓アプリが作れるのか、試したいと思います。
条件
- Reactでの実装を行う。
- Reactの導入は省略して、既存のシステムに新規ページを作って実装する。
そのため、ファイル名等の記載については実装時には都度変更を行います。
※Reactの導入方法も聞いたら答えてくれるので、１から試すのもありだと思います。 - 「Q」は こちらから質問した内容。 (わかりやすくなるよう太字にします)
- 「A」はChatGPTからの回答。
- 回答が途中で途切れた場合、続きを促すがその部分の記載はカットする。
うまく回答してくれなかった部分は適宜補完する。
聞いてみた
Q: Reactで電卓アプリを作る方法を教えて
A:
1.Create React App を使ってプロジェクトを作成します。これはReactアプリケーションのテンプレートを作成するためのものです。ターミナルで次のコマンドを実行します:
npx create-react-app calculator
2.作成したプロジェクトに移動し、アプリケーションを起動します。
cd calculator
npm start
3.アプリケーションが起動すると、ブラウザでhttp://localhost:3000にアクセスして確認できます。
4.アプリケーションのUIを作成します。srcフォルダの中にあるApp.jsファイルを編集して、電卓のUIを作成します。ReactはJSXと呼ばれる拡張JSの言語を使用してコンポーネントを書くことができます。これは、HTMLのように見えるが、実際にはJavaScriptのオブジェクトに変換されます。これにより、ReactコンポーネントとJavaScriptのロジックを結合できます。
5.電卓のロジックを実装します。電卓の計算ロジックは、JavaScriptで書くことができます。例えば、ユーザーが数字を入力し、それを計算し、結果を表示することができます。
6.stateを使ってUIとロジックを結びつけます。stateはReactアプリケーションの中で管理されるデータです。 stateはsetState関数を使って更新でき、これにより自動的にUIが更新されます
これらのステップに従って、Reactで電卓アプリを作成することができます。ただし、詳細には、実際にコードを書いていくことが必要です。
これで実装に当たってのステップはわかりそうですね。
実際のコードについて、聞いてみます。
Q: Reactで電卓アプリを実装するコードを教えて
A:
Reactで電卓アプリを実装するためのサンプルコードを提供することはできませんが、具体的な実装方法について説明します。
1.アプリケーションのUIを作成します。 srcフォルダの中にあるApp.jsファイルを編集して、電卓のUIを作成します。
import React from 'react';
function Calculator() {
return (
<div>
<input type="text" id="result" />
<br />
<button>1</button>
<button>2</button>
<button>3</button>
<button>+</button>
<br />
<button>4</button>
<button>5</button>
<button>6</button>
<button>-</button>
<br />
<button>7</button>
<button>8</button>
<button>9</button>
<button>*</button>
<br />
<button>c</button>
<button>0</button>
<button>=</button>
<button>/</button>
<br />
</div>
);
}
export default Calculator;
2.電卓のロジックを実装します。電卓の計算ロジックは、JavaScriptで書くことができます。例えば、ユーザーが数字を入力し、それを計算し、結果を表示することができます。
import React, { useState } from 'react';
function Calculator() {
const [result, setResult] = useState('');
const handleClick = (e) => {
const value = e.target.innerText;
if (value === 'c') {
setResult('');
} else if (value === '=') {
try {
setResult(eval(result).toString());
} catch (e) {
setResult('error');
}
} else {
setResult(result + value);
}
};
return (
<div>
<input type="text" id="result" value={result} />
<br />
<button onClick={handleClick}>1</button>
<button onClick={handleClick}>2</button>
<button onClick={handleClick}>3</button>
<button onClick={handleClick}>+</button>
<br />
<button onClick={handleClick}>4</button>
<button onClick={handleClick}>5</button>
<button onClick={handleClick}>6</button>
<button onClick={handleClick}>-</button>
<br />
<button onClick={handleClick}>7</button>
<button onClick={handleClick}>8</button>
<button onClick={handleClick}>9</button>
<button onClick={handleClick}>*</button>
<br />
<button onClick={handleClick}>c</button>
<button onClick={handleClick}>0</button>
<button onClick={handleClick}>=</button>
<button onClick={handleClick}>/</button>
</div>
);
}
export default Calculator;
3.stateを使ってUIとロジックを結びつけます。stateはReactアプリケーションの中で管理されるデータです。
stateはsetState関数を使って更新でき、これにより自動的にUIが更新されます。
具体的には、handleClick関数内でsetResult関数を使ってstateを更新し、それをinput要素のvalue属性にバインドして、表示を更新します。
import React, { useState } from 'react';
function Calculator() {
const [result, setResult] = useState('');
const handleClick = (e) => {
const value = e.target.innerText;
if (value === 'c') {
setResult('');
} else if (value === '=') {
try {
setResult(eval(result).toString());
} catch (e) {
setResult('error');
}
} else {
setResult(result + value);
}
};
return (
<div>
<input type="text" id="result" value={result} />
<br />
<button onClick={handleClick}>1</button>
<button onClick={handleClick}>2</button>
<button onClick={handleClick}>3</button>
<button onClick={handleClick}>+</button>
<br />
<button onClick={handleClick}>4</button>
<button onClick={handleClick}>5</button>
<button onClick={handleClick}>6</button>
<button onClick={handleClick}>-</button>
<br />
<button onClick={handleClick}>7</button>
<button onClick={handleClick}>8</button>
<button onClick={handleClick}>9</button>
<button onClick={handleClick}>*</button>
<br />
<button onClick={handleClick}>c</button>
<button onClick={handleClick}>0</button>
<button onClick={handleClick}>=</button>
<button onClick={handleClick}>/</button>
</div>
);
}
export default Calculator;
4.もし計算式に誤りがあった場合にエラーハンドリングをすることもできます。 上記のサンプルでは、eval関数を使用して計算を行っており、不適切な入力に対してはtry-catch文を使用してエラーをキャッチしています。
これらのステップを踏むことで、Reactを使って簡単な電卓アプリを作成することができます。ただし、これはあくまでサンプルの一例であり、実際のアプリケーションにはもう少し複雑な機能や拡張性を持たせることが必要です。
最後に、今回紹介したのは電卓アプリの基本的な実装方法で、具体的なコードはあくまでサンプルであり、参考にするにはいくつかの工夫や修正が必要になるかもしれません。もし不明点があったら、遠慮なく質問してください。
書いてみた
上述のコードを順番にコピペした結果が下記になります。
1.
シンプルな電卓のUI～～～～！！
すごい！そして処理は書いてないので動きません；；
2.
ここの見た目は何も変わらないのですが、ボタンを押すと…
動きました！
そして「＝」ボタンを押すと計算結果も出ました！
3.のコードは2と同じでした。。
結論
ChatGPTのみで電卓アプリは作れた！！！！
ただし、今回の実装ではシンプルな対応のみのため、
電卓アプリとしては物足りない結果になっているかと存じます。
※最近の電卓アプリだと「＝」を打つ前に計算結果を表示してくれたりしますので…。
また、実装するコードを教えて貰った際、2と3のコード内容が重複しました。
ChatGPTは回答で頓珍漢なことを返すときがあります。(おまけに記載)
回答されたコードをそのまま信じるのではなく、内容の理解を行った上での記述は必要になります。
あくまでChatGPTは実装する際のヒント、サポート、Google代わり、Googleへ質問する上での足がかり、として利用するのが良いかと存じます。
おまけ(Twitterで気に入ったAIとのやり取り集)
気に入った点：ChatGPTの結果だけを信じてはいけないことを表している例
気に入った点：読みがおかしい＋百人一首に入っていないのがある＝間違っているとわかっていながら、実際にあったら聴いてみたいと思ってしまうところ
気に入った点：簡単な説明をする上で役立ちそう（ただし、間違えた説明を返すこともあると思うので、要精査が必要になりそう。。）
気に入った点：技術の活用がすごい
気に入った点：実際にどうなるのか気になって試してしまったから
気に入った点：カラーデザインの相談までできることを知れたため
気に入った点：ChatGPTでの有用な使い方を知れた点