非エンジニアのコーディングの学び方（HTML）

フロントエンドのプログラミング言語である、HTML・CSS・Javascriptの学習をしています。
これまで、書籍やオンラインの学習コンテンツを使って習得にトライしましたが、なかなか身に付きませんでした。
しかし、Chat GPTを活用することで、大幅に学習効率が上がりました。
Chat GPTにコーディングしてもらい、そのコードを解説してもらうのです。

まず、Chat GPTにコーディングにしてもらう、ポイントは以下です。

1. Chat GPTが参照できるコードを提示する

2. デザインのワイヤーフレームを提示する

3. ドキュメントで要件を提示する

実際にChat GPTにコーディングを依頼する方法は、以下の記事を書きました。よろしければ、こちらも見て下さい。

できあがったコードに対して、理解できない点をひたすらにしつこく聞いていきます。

HTMLの記法について質問です。
<div id="aaa" class="bbb _ccc">
なぜbbbの後に半角スペースが空いているの？

これに対して、Chat GPTからは以下のような回答が返ってきます。

クラス属性の説明
class="panel _left" の部分は、要素に対して複数のクラスを指定していることを意味します。
panel と _left はそれぞれ独立したクラス名です。
HTMLでは、複数のクラス名を指定する場合、それらをスペースで区切ることで一つの要素に複数のクラスを適用することができます。

スペースがない場合
もしスペースがないと、例えば class="panel_left" だと、panel_left という1つのクラス名として扱われ、panel クラスや _left クラスとは異なるものになります。

まとめ
半角スペース は複数のクラスを指定するために使用されます。
複数のクラスを適用したい場合は、スペースで区切って書く必要があります。

クラス属性の基本的な性質を説明してくれました。
Google検索でも、「HTML クラス属性 半角スペース」と検索すれば、ヒットします。
しかし、初学者にとっては、この要素が「クラス属性」と呼ばれることもピンとこないケースもあると思います。
私もクラス属性という名前は知っていましたが、実際のコードの中でどの要素を指すのかぱっとはわからないという状態でした。

コードをインプットすると、「それがそもそもどういうものか」という前提となる知識から解説してくれるのがありがたいです。

次回以降は、CSSやJavascriptの学習についても、Chat GPTとのやり取りした内容を記事にしていく予定です。

余談ですが、落合陽一さんが「魔法の世紀」という本の中で以下のようなことを言っています。

いかにリアルとネットが結びついた世界その全体性をデザインしプログラミングできるか、それこそが重要になるはずです。

魔法の世紀

ここでは、ウェブサイトにとどまらず、リアルな世界もプログラミングすることを念頭に置いています。
しかし、ポイントは、「技術の中身がブラックボックス化する中で、それを以下に活用して体験のデザインをし、具現化していけるか」に関するスキルが今後重要であることかと思います。

Chat GPTも仕組みはわからない魔法のような技術ですが、それを使って、技術を以下に活用するかを学ぶのは、非常に有用ではないかと考えています。