# Discordコミュニティはこちらから はいどうもこんにちは 胸肩です このチャンネルでは今流行りのAIを使って 開発未経験からでもプログラミングを学ぼうというコンセプトで 開発の基礎知識や最新のAIツールについてお話ししていきます 今回はウェブサイトの作り方が大きく分けると2パターンあるんですけれども そちらの解説と AIにお願いしてウェブサイトを作るときに じゃあどうやってお願いしたらいいのっていう話をさせていただければと思います まずはおさらいなんですけれども AIを使ってどんなものが作るのがお勧めっていう話を以前させていただいたんですけれども 一番初心者で一番最初に作るもののお勧めとして 見るだけのサイト 自己紹介のポートポリオサイトとか 企業の紹介サイトとか 自分のSNSリンクを集めたサイトとかですね っていうのを最初作るのが簡単なし セキュリティのリスクもなくてお勧めだよって話をしたんですけれども それをどうやって作っていくのかという話と その前段階としてウェブページっていうのがどうやって作られているのかっていうのを知っておくと お得に開発を進められるかなと思いますので そちら話していきたいです まず大前提としてウェブページっていうのが どうやって構成されているかというと HTMLというプログラミング言語というものが使われていて 大なり小なりのかっこにHTMLとかですね ボディとかディブとか そういうタグが羅列されたようなものを 見たことがある方もいらっしゃると思うんですけれども そちらで構成されていて それを皆さんが普段使っている Safariなのか Chromeなのか Edgeなのかっていうブラウザでそれを読み取ると ここにこれが配置されて こういう見た目になるんだっていうのを解釈して ページが表示されるという仕組みになっております このHTMLっていうのを直接書いていくのが 一つ目のパターンですね 一つ目がHTMLという言語を使って 直接表示する内容を書くよっていうのがあります それに対してもう一つがフレームワークと呼ばれる 便利機能がいろいろと詰め込まれたキットみたいなものを利用する してウェブページを作るというパターンがあります これら簡単にそれぞれ特徴を紹介していくと まず直接書くパターンですね っていうのは直接書くので 非常にシンプルな構成で作ることができて もう書いたまま表示されるっていうのが とても分かりやすいというメリットがありますね ただ複雑な動きとか データをやり取りするとかになってくると できなくはないんですが 非常に難しくなるというのがあるのと 結構人の手で書くのだと 括弧の閉じ忘れとかで 一気に表示が崩れたりして なかなか人間がこの位置から手で書くっていうのは 僕もずっとウェブページを作るようなエンジニアをやってましたけど これを生のまま直接書くみたいなのは あんまりやったことがないなということで ちょっと失敗すると 一気に崩れることがあるなっていうのはありますね っていうぐらいで シンプルに書けるけど 人間が書くには難しいというか ミスしやすいのと あとは複雑なデータのやり取りとか すごい特別な動きをさせるとかには弱いというデメリットもあるよっていう話ですね それに対して もう一つのフレームワークというものを使うパターンについて紹介するんですけど フレームワークって具体的には AIが使いやすいやつで言うと Reactとか Next.js っていうんですけど その辺りをよく使ってきたり 何も指示しなくても勝手に使ってきたりするんですけど こいつのメリットとしては より大規模なウェブサイトに対応するために使われることが多いんですが 同じような見た目が繰り返されるときに 使い回しができたりとかですね あとは裏側でデータベースとか 外部の別のサービスとのデータのやり取りみたいなのがしやすいようにできていたりとか あとは人間が失敗しづらいような仕組みが備わっていたりということで 結構リアルタイムにデータが変化するようなページを 大規模にどんどん追加して作っていくみたいなものに特化していて 元気エンジニアが基本的には使うものになっております ただ ここで作るのは HTML という言語を直接使うんじゃなくて 別の方法で一回作って それを変換して ブラウザー ウェブページとして見れる形にするという 変換の工程が必要になるのと フレームワークの種類ごとに書き方が全然違うので 書き方を覚えなきゃいけないよというデメリットもあったりしますね ただ これらはあくまで人間が書く時の話であって AI にお願いするときでいうと やはり一つ目の直接 HTML というのを書かせる方が断然 AI も作りやすいし AI に書かせるときにタグの閉じ忘れとか そういうのってほぼ発生しないので 人間が書くときのデメリットっていうのは かなり抑えられるかなというところと 今 最初に話していたところの 見るだけのサイトを作るのであれば 別にデータベースと連携して リアルタイムでデータを変えるとか Twitter X みたいなタイムラインを作りたいっていうことでなければ 全然 この HTML というもので作ったほうが 作った内容をすぐに確認できたり またシンプルな仕組みになったりするので 断然こちらがおすすめという形になります 作るときにどうやって AI にお願いしたら そうなるのっていうところなんですけれども 本当にこれもまたシンプルで 例えば 僕のポートポリオサイトを作りたいのであれば 村方総理というエンジニアのポートポリオサイトを HTML で作ってっていうふうに 後半に HTML で作ってっていう 魔法の呪文というか この一文を入れるだけで 今言ったシンプルなほうの仕組みで AI は選んで作ってくれるので こちらの一言を入れるのを強くおすすめします というか 今日はこれだけ覚えておいて いただければいいなという放送なので 長々と仕組みについて解説しましたけれども この HTML っていうシンプルな構成で 作ってもらうようにすることで AI も無駄にフレームワークっていうので作ると だいたいフォルダが5個とかできて ファイルが20個 20個ぐらいできたりするんですけど HTML で作ってっていうと 1個だけファイルがポンとできて 終わりだったりするんですね 1個から3つぐらいっていうことが多くて しかも確認するときに フレームワークっていうものを使うと 作ったものを HTML っていうのに変換するための 開発サーバーというのを ずっと起動しておかないと ウェブページが確認できないっていう どんどん複雑な仕組みになっていって 多分これ AI プログラミングをなんとなくでやってると この開発サーバーが立ち上がってませんとか 立ち上がったままになってますとか そういう落とし穴にはまりがちだと思うんですけれども 本当にシンプルなページを作るときには このフレームワークはなるべく避けて 簡単なこの HTML で作ってというお願いをして まずはシンプルな構成で作ることをお勧めしたいと思います この辺り解説していくと かなり深い話になってくるので フレームワークとか 開発サーバーに関してはまた別途紹介したいと思います いろいろ話してるとこ 10分あっという間に過ぎていきますね ということで 今回はウェブサイトの作り方が 2種類あるよっていうお話をさせていただいて AI にお願いするときは 本当に見せるだけのサイトであれば HTML で作ってとお願いすることだけ覚えてもらえれば 今回はOKでございます ということで 今回は以上にしたいと思います 本日もお聞きくださいましてありがとうございました # メルマガ登録はこちらから 改めてメールマガジンについて 補足で説明させてください。 このVoicyで話した内容と同じ内容を 当日の12時にメールマガジンで送るようにしております。 ただ過去のものを振り返って送られたりはしないので 登録した時点から送られるので なるべく気になる方は早めに 登録していただけると大変ありがたいです。 どうしても口頭だと伝えきれないところとか 専門用語や英語になってくると 音で聞いても正式名称がわからなかったりするので それを振り返れるという形の位置づけで とりあえず試していっている形ですね。 僕もメールマガを作るのが初めてなので どうやって運用していくかはまた変化するかもしれませんが 今のところはVoicyで話した内容を文字起こししたものを 当日の12時になるべく送るようにするという話と たまに今後Udemyの教材を出したりとか 無料セミナーをやったりという時に そのお知らせだったり割引クーポンみたいなのも メールマガ経由で送ろうと思っておりますので よろしければ登録いただけると嬉しいです。 ということで今回もお聞きくださいまして ありがとうございました。