⛳
boltを使ってAI駆動開発

まっすー
2024/11/22に公開
 TL;DR⛳ boltとVercelを活用して、AI駆動の開発を行う方法を紹介します。

本記事では、ほぼノーコードでポートフォリオサイトを構築する手順を解説します。以下は完成イメージの例です。

https://masuda-yosuke.vercel.app/

 私たちの研究室(NISLab)https://nisk.doshisha.ac.jp/

 使用するツールGitHub: コードのホスティングとバージョン管理
bolt.new: AIを活用した開発プラットフォーム
Vercel: 簡単にアプリケーションをデプロイ可能なホスティングサービス

 はじめに最近は開発を補助してくれるツールが大量に出てきている中で、今回は「bolt」というサービスを使用してAI駆動開発を行ってみました。

僕の所感ですが、このサービスは「非常に使える」と感じました。

用途は限定されますが、大規模なアプリケーションでは無い場合、ほとんどこのサービスで開発することが可能です。

このサービスは、Reactを使用しているため、Reactに慣れている人は特に使いやすいと思います。

しかし、バックエンドの処理が必要な場合は、別途APIを用意する必要があります。

僕の考えではほとんどの場合、ビジネスロジックはバックエンドに依存しているため、そこはまだ人間が担うべきかなと思っています。

今回は、このサービスを使ってポートフォリオサイトを作成するための手順をステップバイステップで解説します。

今までデザインやフロントエンドが苦手な人、またこれまで開発した経験が無い人も、誰でもAI駆動開発を行うことができるようになります。

 アカウントの登録
 1. Githubまずは、Githubのアカウントを作成します。

https://github.com/

 2. bolt次に、boltのアカウントを作成します。この時、Githubのアカウントと連携することで、リポジトリをスムーズに作成することができます。

https://bolt.new/

 3. vercel最後に、vercelのアカウントを作成します。この時、Githubのアカウントと連携することで、デプロイをスムーズに行うことができます。

https://vercel.com/

 ポートフォリオサイトの作成
 構成今回作るポートフォリオの情報は以下の通りです。
ヘッダー
名前: [ここに名前を入力]
短い自己紹介: [ここに「ソフトウェアエンジニア」などの自己紹介を入力]
ナビゲーションリンク:
自己紹介
プロジェクト
スキル
連絡先


自己紹介
専門性と興味分野: [例: フロントエンド開発に特化し、最新のUI/UXデザインに興味を持つ]
主要なスキル: [例: React, TypeScript, AWS, CI/CD]
個人的な背景: [例: 音楽制作が趣味で、UXデザインにおける直感的な操作性に興味がある]

経験:
タイトル: [例: 大規模システムのバックエンド開発]
職種: 「例:ソフトウェアエンジニア」
業務内容: [例: 〇〇というアプリのシステムの設計に従事]
会社名: [例: ABCテクノロジー]

タイトル: [例: 大規模システムのバックエンド開発]
職種: 「例:ソフトウェアエンジニア」
業務内容: [例: 〇〇というアプリのシステムの設計に従事]
会社名: [例: ABCテクノロジー]


プロジェクト
プロジェクト名: [例: タスク管理アプリ]
説明: [例: チームメンバー間のタスク共有と進捗管理が簡単に行えるアプリケーション]
リンク:
GitHub [GitHubリンク]
公開サイトUR [公開サイトURL]

画像URL: [プロジェクトスクリーンショットのURL]

プロジェクト名: [例: IoTホームセキュリティシステム]
説明: [例: IoTデバイスを使用してホームセキュリティを強化するシステム]
リンク:
GitHub [GitHubリンク]
公開サイトUR [公開サイトURL]

画像URL: [プロジェクトスクリーンショットのURL]


スキル
フロントエンド: [例: HTML, CSS, JavaScript, React, Tailwind CSS]
バックエンド: [例: Node.js, Express, Python, SQL, MongoDB]
ツール: [例: Git, Docker, Terraform]
その他: [例: AWS, CI/CD, テスト自動化]

リンク
メールアドレス: [例: yourname@example.com]
GitHub: [GitHubのURL]
Zenn: [ZennのURL]
X: []
Instagram: []
LinkedIn: []

コピー用- ヘッダー
	- 名前: [ここに名前を入力]
	- 短い自己紹介: [ここに「ソフトウェアエンジニア」などの自己紹介を入力]
	- ナビゲーションリンク:
		- 自己紹介
		- プロジェクト
		- スキル
		- 連絡先
- 自己紹介
	- 専門性と興味分野: [例: フロントエンド開発に特化し、最新のUI/UXデザインに興味を持つ]
	- 主要なスキル: [例: React, TypeScript, AWS, CI/CD]
	- 個人的な背景: [例: 音楽制作が趣味で、UXデザインにおける直感的な操作性に興味がある]
- 経験: 
	- タイトル: [例: 大規模システムのバックエンド開発]
		- 職種: 「例:ソフトウェアエンジニア」
		- 業務内容: [例: 〇〇というアプリのシステムの設計に従事]
		- 会社名: [例: ABCテクノロジー]
	- タイトル: [例: 大規模システムのバックエンド開発]
		- 職種: 「例:ソフトウェアエンジニア」
		- 業務内容: [例: 〇〇というアプリのシステムの設計に従事]
		- 会社名: [例: ABCテクノロジー]
- プロジェクト
	- プロジェクト名: [例: タスク管理アプリ]
		- 説明: [例: チームメンバー間のタスク共有と進捗管理が簡単に行えるアプリケーション]
		- リンク:
			- GitHub [GitHubリンク]
			- 公開サイトUR [公開サイトURL]
		- 画像URL: [プロジェクトスクリーンショットのURL]
	- プロジェクト名: [例: IoTホームセキュリティシステム]
		- 説明: [例: IoTデバイスを使用してホームセキュリティを強化するシステム]
		- リンク:
			- GitHub [GitHubリンク]
			- 公開サイトUR [公開サイトURL]
		- 画像URL: [プロジェクトスクリーンショットのURL]

- スキル
	- フロントエンド: [例: HTML, CSS, JavaScript, React, Tailwind CSS]
	- バックエンド: [例: Node.js, Express, Python, SQL, MongoDB]
	- ツール: [例: Git, Docker, Terraform]
	- その他: [例: AWS, CI/CD, テスト自動化]
- リンク
	- メールアドレス: [例: yourname@example.com]
	- GitHub: [GitHubのURL]
	- Zenn: [ZennのURL]
	- X: []
	- Instagram: []
	- LinkedIn: []

 作成手順
bolt.newにアクセスします。
次のプロンプトを入力します。
Reactを用いてエンジニア・プログラマ向けのポートフォリオサイトを作成してください。以下の詳細をもとに各セクションを構築し、プロフェッショナルでシンプルながらも直感的にナビゲートできるデザインを整えましょう。
デザインは添付された画像を元に作成してください。

# 各セクションの内容

### 1. ヘッダー
- **名前**: ヘッダーには氏名を表示してください（例: `[ここに名前を入力]`）。
- **短い自己紹介**: 自己紹介を簡潔に記載してください（例: `[例: ソフトウェアエンジニア]`）。
- **ナビゲーションリンク**
  - サイト内の各セクションに簡単にアクセスできるリンクを用意してください。
  - リンク例: 自己紹介、プロジェクト、スキル、連絡先。

### 2. 自己紹介
- **専門性と興味分野**: 自分の専門性および特に関心がある技術分野を紹介してください（例: `[フロントエンド開発、最新のUI/UXデザインに興味]`）。
- **主要なスキル**: 使いこなせるプログラミング言語・技術スタックを明記してください（例: `[React, TypeScript, AWS, CI/CD]`）。
- **個人的な背景**: 趣味やインスピレーション、取り組んでいることについて書いてください（例: `[音楽制作やUXデザインにおける直感的な操作性への情熱]`）。

### 3. 経験
各経験には下記の情報を含めてください。
- **タイトル**: 職務経験や役割（例: `[大規模システムのバックエンド開発]`）。
- **職種**: 担当していた職種を記載してください（例: `[ソフトウェアエンジニア]`）。
- **業務内容**: 業務の具体的な内容（例: `[〇〇というアプリのシステム設計に従事]`）。
- **会社名**: 勤務した企業名（例: `[ABCテクノロジー]`）。

### 4. プロジェクト
各プロジェクトの詳細を以下の形で紹介してください。
- **プロジェクト名**: 取り組んだプロジェクトのタイトルを記載（例: `[タスク管理アプリ]`）。
- **説明**: プロジェクトの目的や特徴を簡潔に紹介（例: `[チームメンバー間のタスク共有と進捗管理が簡単なアプリケーション]`）。
- **リンク**: リンク先があれば記載。
  - GitHub リンク（例: `[GitHubリンク]`）。
  - 公開サイトURL（例: `[公開サイトURL]`）。
- **画像URL**: プロジェクトのスクリーンショットへのリンクを記載（例: `[プロジェクトスクリーンショットのURL]`）。

### 5. スキル
技術スキルをカテゴリごとにリストアップしてください。
また、それぞれ`react-icons/fa`や`react-icons/si`を使用してそれぞれの技術のアイコンも表示してください。
- **フロントエンド**: [例: `HTML, CSS, JavaScript, React, Tailwind CSS`]
- **バックエンド**: [例: `Node.js, Express, Python, SQL, MongoDB`]
- **ツール**: [例: `Git, Docker, Terraform`]
- **その他**: [例: `AWS, CI/CD, テスト自動化`]

### 6. リンク（連絡先とSNS）
- メールアドレス: （例: `[yourname@example.com]`）
- GitHub: （例: `[GitHubのURL]`）
- Zenn:（例: `[ZennのURL]`）
- X（旧Twitterアカウント）: 必要に応じて記載。
- Instagram: 必要に応じて記載。
- LinkedIn: 必要に応じて記載。

---

# 出力フォーマット

HTMLやJSXでポートフォリオ構築に使用することを前提にしたデータ構造を作成してください。Reactコンポーネントとして読みやすく、情報が個別のセクションに整理される形を整えます。

# 出力例（JSX形式）

\```jsx
export default function Portfolio() {
  return (
    <>
      <Header
        name="[ここに名前を入力]"
        intro="[例: ソフトウェアエンジニア]"
        links={["自己紹介", "プロジェクト", "スキル", "連絡先"]}
      />
      <About
        expertise="[例: フロントエンド開発に特化し、最新のUI/UXデザインに興味を持つ]"
        skills={["React", "TypeScript", "AWS", "CI/CD"]}
        background="[例: 音楽制作が趣味で、UXデザインにおける直感的な操作性に興味がある]"
      />
      {/* 以下も同様の構造で各セクションを追加 */}
    </>
  );
}
\```

# 注意事項

特定の情報は必ず存在するとは限らないので、各セクションについて柔軟に表示を変更できるように実装してください（必須ではない項目が空の場合にはそれを非表示にする機能を検討してください）。


# 情報
<ここに先ほどの構成の情報を入力してください>
自分の好きなデザインのスクショを添付します。
!アップロードするファイルは5MB未満にしてください
しばらくすると、boltがプロジェクトの作成を開始します。
!エラーが起こる際には自分で修正するか、boltに解決してもらうようにしましょう

無料版の場合、1日に使用できるtokenは150,000トークンです。

なるべく自分で解決できるエラーは自分で解決しまししょう。
成功すると以下のように表示されます。


!表示されない場合はbolt内のリロードボタンを押してください。
右上の「Open in StackBlitz」をクリックして、StackBlitzでプロジェクトを開きます。
左側のPROJECTの下の「Create a Repository」をクリックして、リポジトリを作成します。


レポジトリ名を入力して、「Create a Repository」をクリックします。
!Vercelを無料で使っている場合は、必ずPrivateにしないでください。


9. 作成されると、レポジトリに紐づいたStackBlitzのプロジェクトが表示されます。



10. Githubにアクセスして、リポジトリが作成されていることを確認します。



11. 作成されたレポジトリをクリックします



12. README.mdにはStackBlitzのプロジェクトのリンクが記載されています。



13. ここまできたら、次はvercelにデプロイする手順に進みます。

14. 右上の「Add New Project」をクリックします。



15. 先ほど作成したレポジトリをインポートします



16. Project Nameを入力し、デフォルトの設定のままで「Deploy」をクリックします。



17. デプロイに成功すると以下のように表示されます。「Continue to Dashboard」をクリックして、デプロイされたサイトを確認します。



18. デプロイされたサイトのダッシュボードが表示されます。



19. Domainsの右側にあるURLをクリックすると、デプロイされたサイトが表示されます。


 最後に以上で、AI駆動開発を行う方法を紹介しました。

誰でも簡単にフロントエンドのアプリケーションを開発することができました。

このサービスを使って、自分のアイデアを形にしてみてください。
何か質問やフィードバックがあれば、コメントで教えてください！