注意、この文章を読むには待機リストに参加する必要があります。
起因#
誰かが 2023 年は待機リスト元年だと言っています。なぜなら、さまざまなプロジェクト（主に AI）がユーザーの前に初めて登場する際、ユーザーに求めることは一つ：待機リストに参加すること（join the waitlist）です。
待機リストは、ユーザーのアクセスと利用を管理するための一般的な戦略です。これは通常、新製品やサービスの導入時に使用され、ユーザーの流入を制御し、システムの安定性を確保するために行われます。この概念は、大学の入学申請においても見られ、学生が大学に入学申請を提出し、学校がその中から学生を選んで入学を許可することを指します。
待機リストの利点は以下の通りです：
しかし、私はまだ準備が整っていない多くの製品が急いでリリースし、皆に待機リストに参加させることには耐えられません。これは理解できますが、非常に滑稽です。
そこで「私」は、手軽に皮肉のウェブサイトを作成しました：JoinTheWaitlist。
そうです、ウェブサイトにはボタンが一つだけあります：JOIN THE WAITLIST。これは「待機リスト」のウェブサイトで、待機リストに参加すれば、待機リストに参加するために並ぶことができます。
そして「私」はツイートをしました：
ツイートの内容自体（例えば、目を引く絵文字や文体）も非常にクラシックで皮肉的です。これは GPT-4 のおかげです：
このツイートを書くのは、GPT-4 が私のこのプロジェクトのために行った最後の作業でした。それ以前、彼はわずか 1 時間で、ほぼプロジェクト全体のコード作成を手伝ってくれました。
何！？ほとんど全て GPT-4 が手伝ってくれたの？はい。なぜなら、このアイデアは私がもう一つの待機リストに登録した後に思いついたもので、私は本当にコードを書く時間をかけたくなかったからです。その時、私は突然、Twitter で皆が GPT-4 がプロジェクトを直接書いてくれると言っているのを思い出しました。本当にそんなに素晴らしいのか疑問に思い、実験的な目的でこのプロジェクトを GPT に試してみました。
結果は非常に成功しました。
だから、私が「私」と言った時には引用符を付ける必要があったのです。
それでは、これがどのように実現されたのでしょうか？
第零歩：プロジェクトの作成#
私は Next.js（React）を使用してプロジェクトを開発し、直接スキャフォールドを使用しました。時間は 10 秒かかりませんでした。この部分は省略します。
もしあなたがプログラミングの基礎が全くない場合、GPT にフロントエンドプロジェクトの作成方法を尋ねてみてください。きっと簡単にできるでしょう。
第一步：打字口号（Typing Slogans）#
想几个口号#
空白のプロジェクトを前にして、私はおおよそのレイアウトを考えました。最上部には大きなスローガンエリアが必要で、「Waitlist can help you....」と打ち続ける必要があります。
どんなスローガンがありますか？GPT に聞いてみましょう：
素晴らしい、非常に皮肉的です。私は一言も変更せず、コピーして私のプロジェクトに貼り付けました。
打字效果#
次に、React で打字効果を実現する方法を尋ねました：
彼は直接、typeit-reactを使うことができると教えてくれ、使用コードも直接書いてくれました。私はどのライブラリを使うか調べる必要がありませんでした。
しかし、途中のinstance文は少し煩雑だったので、簡略化できるか尋ねました：
私は軽く指示を出しただけなのに、彼は書くだけでなく、説明もしてくれました。本当に、私は泣きそうです。😭😭😭
感動を止めて、すぐにコピーしました！
闪动光标#
次に、末尾に常に点滅する打字カーソルを追加したいと思いました。このような小さなタスクは、私は直接 Copilot に書いてもらうことにしました：
図のように、私が行ったことは：
- コメントを書いて、Copilot に次のコードが何をするものかを伝えました（つまり、アニメーション付きの点滅カーソルで、テキストの高さと同じです）。
- 改行。Copilot はこの行をこう書けると提案しました。
- Enter で確認。
- 改行。Copilot はこの行をこう書けると提案しました。
- Enter で確認。
- 改行。Copilot はこの行をこう書けると提案しました。
- Enter で確認。
- 「書き」終わりました……
私は告白します：これは本当に私の日常の大部分で、私はコメントを書いて、狂ったように改行と Enter を押すだけで、Copilot がコードを書いてくれます。最後にコメントを削除するのを忘れずに、痕跡を残さず、犯罪現場を壊します。
成果：
第二步：酷炫按钮#
待機リストなので、もちろん参加するための大きなボタンが必要です。このボタンを非常にクールにしたいと思います。GPT に聞いてみましょう：
今、非常に輝くボタンを作成してください。ホバー、クリック、発光、アニメーション、トランジション、グラデーションなどの究極のアニメーション効果を持たせて、誰もがクリックしたくなるようにしてください！CSS コードを見せてください。
私は良いプロンプトエンジニアではないことを認めますが、彼はそれでも私に書いてくれました。
注意すべきは、ウェブ版の ChatGPT の返信が長すぎると途切れることです。慌てずに「continue」または「続けて」と入力すれば大丈夫です。
2 回の continue の後、ボタンが完成し、非常に素晴らしい効果が得られました！
しかし、ボタンにクリック効果がないことに気付きました。大丈夫、この小さなことは Copilot に手伝ってもらいましょう ——
効果を見てみましょう：
よし、だいたいこんな感じです！
第三步：用户评价卡片#
次に、ページにユーザーの評価を表示したいと思います。
今、Twitter ユーザーの評価を書いて、「JoinTheWaitlist」が素晴らしいと褒めてください。
さらに面白い偽のユーザー名を生成してください。
この時、私は突然、コメントと名前を一つ一つコピーして、コード内のデータ構造に書かなければならないことに気付き、非常に面倒だと思いました。そこで、私は直接尋ねました：
以下のデータ構造を使って、これらのデータを混ぜてください。
これで直接コピーできるようになりました。
ああ、そういえば、UI コンポーネントのコードを直接頼むのを忘れていました：
Tailwind React コンポーネント「UserReviews」を作成し、Twitter スタイルでこれらのコメントを表示してください。
コピーして、効果を見てみましょう：
最終的な効果の形成には、他にも Copilot の力を借りました。また、アバターにはPravatarのランダム生成サービスを使用しました。
本当に完璧です。
第四步：加上 Rick Roll#
他の実装についてはここでは省略しますが、ほとんど同じです —— 尋ねれば、彼が教えてくれ、あなたはコピー＆ペーストするだけです。
ここで面白いと思ったのは、JOIN THE WAITLIST ボタンをクリックすると、YouTube の Rick Roll 動画にジャンプする効果を実現したいと思ったことです。
私は試してみるつもりで、https://youtと打ち込んだところ：
Copilot が動画リンクを提案しました。
私は心の中で「まさか……」と思いました。
次に、その動画リンクを開いてみると —— https://youtu.be/dQw4w9WgXcQ。
この瞬間、私は非常に楽しい気持ちになりました。
第五步：部署上线#
最後に小さな手を加え、コードをGitHubにプッシュし、Vercelの自動デプロイサービスを利用しました。JoinTheWaitlistは 1 分でデプロイされました。
第六步：发条推特#
冒頭に示したように、私は GPT にマーケティングを手伝ってもらいました。
收尾的话#
私が外に食事に行った時間を除けば、全体のプロセスは 1 時間未満で、現在の GPT-4 ウェブ版の 25 件 / 3 時間の制限を超えることはありませんでした。多くの質問の回答はほぼ一発で的中し、追加の修正や追求は必要ありませんでした！また、私は非常に注意深くプロンプトを考えたわけではなく、簡単に彼と対話しました。
終わった後、私はこの全てのことを振り返り、私の参加は主に以下の部分に限られていました。
- アイデアを提案する
- GPT にプロンプトを書く
- コピー＆ペースト
- Copilot に手直しを頼む、いくつかの小機能 / テンプレートコードを書くのを手伝ってもらう
- コードを保存し、プッシュし、デプロイする
私はその中で何かを創造したのでしょうか？🤔
私の何年ものコーディング経験は、経験以外に何を私にもたらしたのでしょうか？🤔
今後の製品開発はどのようになるのでしょうか？🤔
……
パソコンを閉じると、私は思考にふけり、心が締め付けられる思いでした。
感慨にふけっていると、突然、私は驚きました ——
Oh shit！