太子プログラミングクラブ3-2～HTMLを生成AIに書かせてみる～
太子プログラミングクラブは、WEBデザインに挑戦中です。まずは、基本中の基本のHTMLの学習から。
タイピング練習は欠かしません
WEBデザインでも、タッチタイピングは欠かしません。「コードを書く」という機会は減ってきつつありますが、表示すべきコンテンツは自分で書かないといけません。なんにしろ、タイピングは必須です。
使うツールは変わりません。
- 無料タイピング
https://manabi.benesse.ne.jp/gakushu/typing/ - 寿司打
https://sushida.net
生成AIに真っ白のコードを書かせてみる
生成AIを使えば、コードの中身を理解しなくても、それっぽく作れます。
が、それでは品質の高いWEBコンテンツは作れません。Pythonと比較して、HTML・CSSは理解しやすいので、こちらで生成AIプログラミングを習得します。
そして、前回環境設定したVScodeを使います。VScodeは他の言語での開発でも使えます。もちろんこれまで学習してきたPythonでも使えます。
真っ黒い画面で、初心者はとっつきにくいかもしれません。しかし、慣れたら手放せないほどに優れたツールです。しかも無料です。
プログラミングを学習するには、無料の良いツールがたくさん世の中にあります。当クラブでは、無料の優れたツールを取り入れることで、運営コストを抑えています。初心者にとってのとっつきにくさは、わたしたちスタッフの力量でカバーしております。
真っ白いページとは？
さて、生成AIに「真っ白いページ」を書かせると、概ね以下の2つが答えとして示されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>空白ページ</title>
<style>
body {
margin: 0;
padding: 0;
background-color: white;
}
</style>
</head>
<body>
</body>
</html>sample1.htmlは、白い画用紙を例にすると全く何も描かずに提出した例です。sample2.htmlは、白い画用紙を白い絵の具で提出した例です。
どちらが正解かというと、どちらも正解です。ただし、わたしが欲しかったのは、sample1.htmlのほうです。ちなみに、sample1.htmlはGPT4.1、sample2.htmlはClaude3.7が出してきたコードです。
これまでの経験上、GPTはシンプルにコードにおこします。Claudeは、先を見越して設定項目を厳密にコードにおこしてきます。このように、生成AIのモデルによって出力結果が変わることを知っておくべきでしょう。どちらがいいかというと、時と場合によります。選ぶのは、わたしたち人間です。
これから先、生成AIを使わないという選択肢は無いでしょう。わたしの住んでいる光都でも、外部の業者が「中高年の女性向けに家事を生成AIにサポートさせる講座」を開くみたいです。猫も杓子も生成AIです。
優秀な生成AIが世間にあまねく利用されるのは良いことだと思いますが、生成AIの特性・弱点も知って使ってください。包丁で日々の料理を作ることもできれば、誰かを殺めることもできるのです。
パソコンの操作に慣れよう
これまでは、プログラムを動かすことが優先で、細かいパソコンの操作は後回しにしてきました。WEBデザインを進めるには、ディレクトリ構造の理解が絶対に必要なので、細かいパソコン操作をしながらディレクトリ構造を理解してもらいます。
ディレクトリ構造以外にも、ファイル名の付け方とか、よく使うショートカットキーとか、地味だけど重要なスキルです。野球で言うなら、走り込みとか、マウンドのレーキのかけ方とか、グローブの手入れの仕方とか、そんな要素です。
パソコンを使う底力をつけつつ、WEBデザインを進めていきたいと思います。
次回は？
次回は、コンテンツを作ってみましょう。かんたんな自己紹介文をHTMLだけでローカルに作ってみましょう。その次はCSSで装飾かな。
