こんにちは。
エニタイムを退会することにしたはこだてたろうです。
Youtubeで、なかやまきんに君の良さそうな動画があったので、スキマ時間にコツコツと筋肉を痛めつけていこうと思います。
さて、最近はAI駆動開発にすっかりハマっているのですが、今回は私がどのようにPerplexityを使ってAI駆動開発をしているかをシェアしたいと思います。
初回ということで、まずはPerplexityに聞いて生成されたコードをコピペしたらすぐ動くようなお題を取り上げたいと思います。
Vite×React×TestingLibraryの環境構築をお願いする
この程度の内容であれば、おそらく一問一答で環境が出来上がってしまうと思います。
早速聞いてみましょう！
Vite と React と Testing Library で自動テストできる初期プロジェクトを構築したいです。
この質問で以下の回答が得られました。
※そのままコピペしているので、一部見づらいところがあります。
Vite、React、Testing Libraryを使用して自動テストが可能な初期プロジェクトを構築する方法を説明します。
プロジェクトの作成
まず、Viteを使用してReactプロジェクトを作成します。
- 以下のコマンドを実行してプロジェクトを作成します：
npm create vite@latestcd プロジェクト名
npm installテスト環境の設定
次に、テスト環境を設定します。
- 必要なパッケージをインストールします：
npm install --save-dev vitest jsdom @testing-library/react @testing-library/jest-dom/// <reference types="vitest" />
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
test: {
environment: 'jsdom',
globals: true,
setupFiles: './src/test/setup.ts',
}
})
src/test/setup.tsファイルを作成し、以下の内容を追加します：import '@testing-library/jest-dom'
package.jsonファイルのscriptsセクションに以下を追加します1："scripts": {
"test": "vitest"
}サンプルテストの作成
src/App.test.tsxファイルを作成し、以下のコードを追加します1：import { describe, it } from 'vitest'
import { render, screen } from '@testing-library/react'
import App from './App'
describe('App', () => {
it('renders headline', () => {
render(<App />)
const headline = screen.getByText(/Vite \+ React/i)
expect(headline).toBeInTheDocument()
})
})テストの実行
テストを実行するには、以下のコマンドを使用します：
npm run testこれで、Vite、React、Testing Libraryを使用した自動テストが可能な初期プロジェクトが構築されました。このセットアップを基に、さらにコンポーネントやユニットテストを追加していくことができます
上記の手順を行い、テストの実行をしてみたところ、私の環境ではエラーが発生しました。
エラーを見てみると、JSXの解釈ができずエラーになっているようでした。
Expected “>” but found “/”
5 | describe(‘App’, () => {
6 | it(‘renders headline’, () => {
7 | render()
| ^
8 | const headline = screen.getByText(/Vite + React/i)
9 | expect(headline).toBeInTheDocument()
「バベル入れないといけないっけ？いや、Viteなら確か入れなくてもよかったよな」と考えたのち、よくよく見たら App.test.tsx としないといけないところを、App.test.ts としてしまっていました。
ただの凡ミスでした(^_^;)
やはり一問一答で環境構築ができましたね！
ちなみに、Reactを始めたてのころwebpackとbabelで環境を作っていたときは、.js ファイルでもJSXが使えた記憶がありました。
なぜ、.jsx にしないとエラーになってしまうのか、なぜ前はうまくいっていたのかを整理しておきたくて、以下のような質問もしてみました。
テストファイルの拡張子を .ts としたところ、JSX の解釈ができずテスト実行時にエラーとなりました。拡張子が .ts でもJSXの解釈ができた記憶があるのですが、間違っていますか？
以下の回答が得られました。
テストファイルの拡張子を .ts としてJSXの解釈ができなかったのは、正常な動作です。JSXを含むファイルの場合、通常は .tsx 拡張子を使用する必要があります2。.ts 拡張子のファイルでJSXを使用できたと記憶している場合、以下の可能性が考えられます：
- プロジェクトの設定で特別な処理が行われていた可能性があります。
- 使用しているテストランナーやトランスパイラの設定が異なっていた可能性があります。
- 記憶違いの可能性もあります。
JSXを含むテストファイルを作成する場合は、以下の点に注意してください：
- ファイルの拡張子を .tsx に変更してください2。
- tsconfig.json ファイルで “jsx” オプションが適切に設定されていることを確認してください4。
- テストランナー（JestやVitest）の設定で、.tsx ファイルを適切に処理するよう設定されていることを確認してください4。
これらの設定を確認し、必要に応じて修正することで、JSXを含むテストファイルを正しく実行できるようになるはずです。
webpackとbabelで構築した過去のプロジェクトの設定ファイルをみたら、しっかりとトランスパイル対象を .js に設定していました。
コード生成をしてもらい、不明点も質問する
いかがだったでしょうか？
今回は、私のPerplexityを使ったAI駆動開発の方法を少しご紹介しました。
何か作ってみたいものがあったら、まずは「◯◯と△△で✕✕を作ってください」というお願いをしてコードを生成してもらいましょう。
簡単なものであれば、一問一答で動くプログラムが返ってきます。
返ってきたコードの中に疑問点や不明点がある場合は、「提案されたコードに、◯◯という記述があったのですがなぜですか？どのような意図がありますか？解説してください」のような感じで質問をぶつけてみてください。
せっかくなので、作ってもらいっぱなしではなく、自分の血肉になるような使い方をしていけると、より楽しいAIライフになるのではないかと思います！
次回も、AI駆動開発に関する記事を書いていこうと思いますので、ご興味のあるかたはぜひチェックをお願いしますね！
コメント