Nobisuke
Dekisugi
RAG
Community
Privacy policy
2024/09/30 07:32
こんにちは、v0すごいのですが、そもそもファイルがtsxという形で生成されてよくわかりませんでした。
どうやらNext.jsというフレームワークで作られているようですが、時代に取り残されています。
今後は自社でも活用していきたいと考えています。
LLMを使ってプログラミングをする時には全体の一体感を出しながらの開発が大変です。
Pythonでもバックエンドに機械学習やLLMなどを直接接続する関係上、Pythonを使う機会が多いので、flaskをよく使います。
ただ、flaskでテンプレートを管理する時にはjinja2を使うのですが、パラメータをPythonのapp.pyから都度渡す必要があり、その一貫性や処理に困ることが多いです。
一つの解決策としてフロントエンドとバックエンドを完全に切り離すことでより本格的な開発ができるのですが、踏ん切りつきませんでしたが、こうしたフロントエンドをきちんと作ってくれるサービスが出てくるとAPIで切り離したほうが楽な気がしてきました。
ということで、v0 by Vercelを使ってみます。
v0 by Vercel
フロントはv0で、適当にデザインをしました。
blueqatのRAGにはランディングページがなかったので、それを作ってもらいました。これをみてみるとtsxという見慣れないファイル拡張子になっています。html/css/jsをスクラッチで書いてきたおじさんなのでフレームワークのお作法がわかりませんので調べてみます。
v0 is a generative user interface system by Vercel powered by AI. It generates copy-and-paste friendly React code based on shadcn/ui and Tailwind CSS that people can use in their projects.
とありました。shadcn/uiとTailwind CSSを使っているとあります。そもそもNext.jsとはなんですかね。
Next.jsは、Reactをベースにしたオープンソースのフレームワークで、サーバーサイドレンダリング(SSR)、静的サイト生成(SSG)、APIルート、コード分割、ルーティングなどの高度な機能を提供します。開発者がReactでのWebアプリケーション開発をより効率的に行えるように設計されており、フロントエンド開発者の間で非常に人気があります。
Next.jsは特に、パフォーマンスの向上やSEO対策に強みを持ち、ブログやマーケティングサイト、eコマースサイトなど、多様なウェブサイトやアプリケーションで利用されています。
サーバーサイドレンダリング (SSR)
静的サイト生成 (SSG)
クライアントサイドレンダリング (CSR)
自動ルーティング
pages
ディレクトリ内のファイル名を基に、自動でルーティングを設定します。例えば、pages/index.tsx
はルート (/
) に対応し、pages/about.tsx
は /about
というURLに自動的にマッピングされます。APIルート
pages/api
ディレクトリ内にファイルを作成するだけでAPIを提供できます。増分静的再生成 (ISR)
コード分割
Image Optimization
国際化 (i18n)
TypeScriptサポート
Next.jsのプロジェクトは、通常以下のような構造になります。
my-next-app/
├── pages/
│ ├── index.tsx # ルートページ (/)
│ ├── about.tsx # /aboutページ
│ ├── api/
│ │ └── hello.ts # APIルート (/api/hello)
├── public/ # 静的ファイル (画像など)
├── styles/ # CSSやSASSファイル
├── components/ # 再利用可能なReactコンポーネント
├── next.config.js # Next.jsの設定ファイル
└── tsconfig.json # TypeScript設定ファイル (TypeScriptを使用する場合)
pages/
ディレクトリ: ここに配置されたファイルが自動的にルーティングされ、ページとして認識されます。public/
ディレクトリ: 静的ファイル(画像、フォントなど)を配置する場所。これらのファイルは、/public/
のURLパスでアクセス可能です。api/
ディレクトリ: サーバーサイドでAPIエンドポイントを定義できる場所です。APIエンドポイントの実装に便利です。とあります。
つまりReactというフロントエンドのウェブサイト表示などに適したJavascriptのフレームワーク上にさらに作られたフレームワークで、そのNext.jsを使うと色々な機能を作れるということに。デザイン部分はCSSを利用しますが、今回はTailwind CSSを利用して、さらにそこにshadcn/uiを利用することで、制御しやすくアプリを高性能・ハイクオリティで作れるということのようです。
v0を使ってみました。
作り方は超簡単で、
「blueqat RAGに関するランディングページを作って、ログインボタンと登録ボタンをつけて」
と指示をするだけです。そうすると、
こんな感じになります。ファイルの拡張子は.tsxですが、普通にhtmlなどをしている限りはあまり馴染みありません。
どうやらNext.js環境をmacのローカルに構築すれば良いようです。
まずはmacにNext.js環境を構築するために、Node.jsの環境が必要のようです。ターミナルから下記を実行しました。
brew install node
次にNext.js環境をインストールするために下記のようにしました。
npm install next react react-dom
そしてプロジェクトを作ります。
npx create-next-app@latest my-next-app --typescript
cd my-next-app
これで自動的にフォルダやファイルが準備されます。
先ほどv0で作成したテンプレートは、この中で、
Appというフォルダのpage.tsxというところを入れ替えると動きます。
サーバーは、
npm run dev
で動きました。ただ、おそらくエラーが起きます。フロントエンドのCSSフレームワークとして、Tailwindなどを使っています。
特に、テンプレートの最上部に、
import Link from 'next/link'
import { Button } from "@/components/ui/button"
とあります。コンポーネントのボタンが読み込まれないとエラーになります。どうやらTailwindではなく、shadcn/uiというもののようです。
まずはTailwindを導入します。
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
さらに、shadcn/uiをを設定する必要がありますが、npxでインストールできるようです。
npx shadcn@latest init
これで入ります。さらにこれだけでなく、ボタンを追加する必要がありました。
npx shadcn@latest add button
こんな感じでボタンを追加して、サーバーを先ほどのように、
npm run dev
すると、http://localhost:3000をブラウザで開くことにより、
のように、無事ウェブサイトが表示されました。
まとめますと、npmをインストール、nextjsやreactをインストールし、tailwindやshadcnをインストールするとようやく使えます。
.tsxの拡張子にビビりましたが、ちょっと覚えること多いですが、今回のv0の開発環境が固定されていますので、
それを用意してあげることで実現できそうで安心しました。
© 2024, blueqat Inc. All rights reserved