AIでWebサイトを作った最初の1時間、つまずいたのはコードではなかった

AIにWebサイトを作ってもらう、という作業を実際にやってみた。ローカルで画面が表示されるまで約1時間。

結論から書く。詰まったのは、一度もコードの中身ではなかった。 全部その手前だった。

なぜ自分で作ろうと思ったのか

記事を書く場所として note を使うか迷っていた。ただ、note に書いたものがAIに読まれるのか、自分には判断できなかった。

AIが回答を組み立てる材料としてWebが読まれる時代に、どこに何を置くかは無視できない。調べても、立場によって言っていることが違う。それなら自分でサイトを作って確かめたほうが早い、と考えた。

やったこと

手順	内容
1	構築のルールを決める（何を書くか、何を書かないか）
2	ドメインを取得する（Cloudflareを利用）
3	サイトの構築を依頼する

1と2は迷わず進んだ。問題は3からだった。

つまずき①　いきなりターミナルの話になった

AIに構築を頼んだら、いきなりターミナルにコマンドを打つ指示が返ってきた。

手順そのものは正しい。ただ、こちらには前提がなかった。

• ターミナルをどこで開けばいいのか
• そもそも「ターミナル」とは何なのか
• なぜ黒い画面に文字を打つ必要があるのか

VS Code を使うように書かれていたが、これまで使ったことがなかった。 環境を用意するところから始まる。正直、この時点で面倒だと思った。

npm install と言われても、それが何をするコマンドなのか分からないまま打つことになる。

つまずき②　エラーが出続けて、迷子になった

コマンドを打つとエラーが出る。直そうとしてまた打つ。またエラーが出る。

そのうち、自分が今どの作業をしているのか分からなくなった。

実際に出ていたエラーはこれだった。

npm error code ENOENT
npm error path C:\Users\<ユーザー名>\package.json
npm error enoent Could not read package.json

原因は単純で、コマンドを実行している場所が違っただけだった。

npm は「今いるフォルダ」にある package.json というファイルを読もうとする。私がいたのはホームフォルダで、そこにプロジェクトはない。だから見つからない。

答えはエラー文の中に書いてある。 path の行が、npmが探しに行った場所そのものだ。今なら分かるが、そのときは英語の行が並んでいるようにしか見えなかった。

抜け出せた方法

「次にやるべき作業を教えてほしい」と、もう一度聞き直した。

これが効いた。エラーを1つずつ潰そうとするのをやめて、現在地から整理し直してもらった。

そこから先は早かった。

1. AIが用意してくれたファイルを、指定されたフォルダに展開する
2. そのフォルダの場所でターミナルを開く
3. npm install を実行する

これで動いた。フォルダの場所でターミナルを開けば、移動コマンドを打つ必要すらなかった。

ここまでで1時間。そのほとんどは、コマンドを打つ場所を探していた時間だった。

一番難しかったのは、技術ではなかった

ローカルで表示できたあと、サイトを作った理由や自分の経歴を書く作業に入った。

これが一番難しかった。

コマンドは調べれば出てくるし、間違えてもやり直せる。でも「なぜこれをやるのか」は誰も教えてくれない。自分の中から出すしかない。

ただ、書き出してみると意外と書けた。 頭の中にはあったが、言葉にしていなかっただけだった。ざっと書いたものをAIに整えてもらう、という進め方が合っていた。

分かったこと

AIは正しい手順を出す。でも「その手順を実行できる前提」までは面倒を見てくれない。

経験者が無意識に飛ばしている部分が、初めての人間には全部見えない。ターミナルをどこで開くか、コマンドをどの場所で打つか、ファイルをどこに置くか。コードより手前で詰まる。

もうひとつ。AIの説明が難しく感じる場面が何度かあった。そこで流してしまうと、動いたとしても何も残らない。分かるまで聞き直す、を自分のルールにした。

次は、これをインターネット上に公開するところまでやる。