初めに

先日、ChatGPTにブロック崩しゲームを作成してもらい、Webページに埋め込むことに成功しました。
機能的には問題なく動いていますが、私自身がHTML、CSS、JavaScriptに関する知識が不足しているため、コードが完全にブラックボックス状態です。
コードを自分で理解し、何がどのように動いているのかを読み取れるようにするために、基礎から学び直すことにしました。

HTML: Webページの構造を定義し、どの部分にどんな要素が配置されているかを知る。
CSS: デザインやレイアウトを担当し、見た目をどのように調整しているかを理解する。
JavaScript: ゲームの動作を制御し、どのような条件でボールやブロックが動いているのかを把握する。

今回の目的

HTML, CSS, JavaScriptの理解
HTML: Webページの構造を定義し、どの部分にどんな要素が配置されているかを知る。
CSS: デザインやレイアウト、見た目をどのように調整しているかを理解する。
JavaScript: ゲーム動作の制御、どのような条件でボールやブロックが動いているのかを把握する。

Git/GitHubの使い方を習得し、プロジェクトをアップロードする
バージョン管理の基礎であるGitとGitHubの操作方法を学び、プロジェクトを公開して他の人にも見てもらえる状態にします。
これにより、個人開発、チーム開発に向けての学習します。

ポートフォリオサイトの更新
GPTから出力されたブロック崩しを改修しポートフォリオを更新する。
学んだことや成果を公開することで、今後の活動につなげていきます。

本日のメニュー

Paizaの無料講座でざっくりとHTML,CSS,JavaScriptを学ぶ
⇒10月11日に無料範囲を学習しました。
先日、ChatGPTを使用して作成したブロック崩しゲームのコードを分解して理解しようと思います。
⇒今回はHTMLに焦点を当てて、構造を理解し、自分で同じようなコードを書けるようにしたいと考えています。

環境

ブラウザ
GoogleChrome
テキストエディタ
VSCode Ver: 1.94.1

学習メモ

まずは、コードを理解しやすくするために、ChatGPTにHTML、CSS、JavaScriptに分解してもらいました。
それぞれの部分にコメントをつけてもらい、初心者の自分でも理解できる状態に仕上げてもらいました。
正直、それでいいのかはまだ分かりませんが、自分なりに一歩ずつ進めています。
数年前には考えられないほど便利なモノがでてきましたね・・・

今回は、表面をさらっとなぞる感じで学習を進めていきます、今後はこちらの記事に更新と共にさらに深掘りしていきたいと考えています。
まずは全体を把握しながら少しずつ理解を進め、次のステップではより詳細な部分の理解に挑戦していきます。
それではよろしくお願いします。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <!-- ページがモバイルデバイスでも正しく表示されるようにする -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>簡易ブロック崩しゲーム</title>
  <!-- 外部スタイルシートをリンクする -->
  <link rel="stylesheet" href="style.css">
</head>

*meta charset="UTF-8"
このコードは文字化けを防ぐおまじないとして今は覚えておきます。

meta name="viewport" content="width=device-width, initial-scale=1.0"
ページを読み込んだときの表示倍率→スマホでも画面のスケールを適正にしてくれる？今だと1.0のため、小さくする必要がある場合は適宜調整？

Chromeの検証画面で1,0と0,5での表示を確認してみましたが、現時点だとCSS,JavaScriptを分けているため分かりません、最終的にはPCとモバイルのどちらでも適切に動作できるようにする必要があるかと思います。

titleタグ
そのまま？ここでは使う意味や用途については後程改めて学習します。

link rel="stylesheet" href="style.css"
スタイルシートとのリンクはcssファイルの読み込みですね、次回確認します。

次

 <!-- スタート画面 -->
  <div id="startScreen">
    <h1>ブロック崩しゲーム</h1>
    <!-- ゲームを開始するボタン -->
    <button id="startButton">スタート</button>
  </div>

div id
button id
各要素にidを付けることができこのidは、HTML内で一意の識別子として使用され、JavaScriptと組み合わせて特定の要素を操作する際に使用できるということですので、JavaScriptの学習時に再度確認していきます。

div_htmlで調べるとフローコンテンツと出てきたのですが現時点では少し難しそうなので、後ほど深く学習する予定です。
ひとまず、

タグはWebページのレイアウトを構成するためのブロック要素として使われるという認識で進めていきます。ブロック要素も正しく理解がいりますね。
buttonはクリック時の動作実行として覚えておきます。


  <!-- ゲームが実行されるキャンバス -->
  <canvas id="gameCanvas" width="1120" height="500"></canvas>
  
  <!-- ゲームオーバー画面 -->
  <div id="gameOverScreen" style="display:none;">
    <h1>ゲームオーバー</h1>
    <!-- リトライボタン -->
    <button id="retryButton">リトライ</button>
    <!-- ホームに戻るボタン -->
    <button id="homeButton">ホームに戻る</button>
  </div>

  <!-- ゲームクリア時の画面 -->
  <div id="congratsScreen" style="display:none;">
    <h1>Congratulations!</h1>
    <!-- ゲームを最初から始めるボタン -->
    <button id="restartButton">最初から</button>
  </div>

canvas id
要素は、グラフィックス（図形、アニメーション、画像など）を描画するために使用されますが、単体では何も描画せず、JavaScriptと連携することで初めて描画が行われます
*ChatGPTより
少し調べてみたところ、アニメーションの描画に関しては非常に深い知識が必要なようで、今はこの基本的な解釈をもとに、次のステップに進む準備をしておこうと思います。

style="display:none;
HTML要素の表示を非表示にするためのCSSプロパティ
→現時点ではスタートやゲームプレイ画面を一時的に隠して表示させたいものを一番上に見せるものという認識です。
画像編集で言うところの一番上のレイヤーでしょうか。

  <!-- 難易度確認画面 -->
  <div id="difficultyScreen" style="display:none;">
    <h1>難易度を下げますか？</h1>
    <!-- 難易度を下げるボタン -->
    <button id="lowerDifficultyButton">はい</button>
    <!-- 難易度を下げないボタン -->
    <button id="noDifficultyButton">いいえ</button>
  </div>

  <!-- スコア表示やポーズボタン、ホームボタンの領域 -->
  <div id="scoreBoard" style="display: none;">
    <!-- スコアの表示 -->
    <div id="scoreDisplay">スコア: 0</div>
    <!-- ゲームを一時停止するポーズボタン -->
    <button id="pauseButton">PAUSE</button>
    <!-- ホームに戻るボタン -->
    <button id="homeButtonFixed">HOME</button>
  </div>

  <!-- 外部JavaScriptファイルをリンクする -->
  <script src="script.js"></script>
</body>
</html>

これらの機能は私の好みで追加したもので、最初の学習では不要かとも思いました。
ゲームオーバー画面で難易度を下げる、下げないのボタンの表示。
プレイ画面の上部にスコア、一時停止、ホームに戻るボタンの追加。

script src="script.js"></script
外部ファイル(script.js)を読み込むscriptタグ
srcは「source（ソース）」の略で、この属性を使うことで、Webページに外部リソースを取り込んで表示や実行が可能になります。
src属性を使う主なタグ
imgタグ: 画像ファイルのソースを指定する
scriptタグ: JavaScriptファイルのソースを指定する
iframeタグ: 別のHTMLページを埋め込むためのソースを指定する
audioタグやvideoタグ: 音声や動画ファイルのソースを指定する
*ChatGPTより

これらのタグは今回出てきませんでしたが勉強になりました。
src=外部参照という認識で今は覚えておきます。

あとがき

今回の学習では、教材や動画などで学ぶことも大切だと思いましたが、今回はChatGPTに丸投げしてコードを生成してもらい、それを一つ一つひも解いて理解していく方法を取りました。
現時点では作りたいものや実際に作られているものから必要な情報を学ぶことが、自分にとって今一番身になる学習方法だと感じました。(他の方法を知らないため・・・　)
今後は他の方のソースコードを読むなどもしていきたいと思います。

今はCSSやJavaScriptの知識が十分ではないので、まずはその勉強をしてから、次に進んでいきたいと考えています。

また、この3連休に動画やwebを漁っていましたので今後の勉強したいなと思うものを忘れないようにこちらに記載しておきます。

Document Object Model（DOM）の使用と操作
Vercelでのデプロイ(できればCI/CDについて学ぶ)
テストケース作成(そもそもテストケースについて学ぶ)
使用するライブラリなどのメリット・デメリット比較(ライブラリについての勉強)
技術選定について深く考える(使用する言語やそれを使用する理由など説明ができるように)
スライド作成/マインドマップ作成(自分が作成したものについて全て説明できるように)
ドキュメント制作技術の向上/要約力の向上(上と同じ)
作成した理由や使用技術の説明のためのスキル証明

以下はできれば

使用客、データ容量、アクセス数を予測して設計を行う(要件定義～について学ぶ)
フルスタックレベルでの資料作成（画面遷移図、ER図など、フロント-サーバ間について学ぶ）
ライトニングトーク（LT）について知る(現時点では観るだけになるかと)

最後に

今後のドキュメント作成や説明資料作成のため、記事の各見出しや内容の見やすさを勉強する必要があると感じた。
当たり前ですが、Qiitaでの見やすい記事作成が、READMEのようなドキュメント作成にも繋がりますよね。
また、こうやって勉強過程を書くことで、サボりがちな習慣を克服し、勉強が楽しくなることにも気づきました。
次はCSSの学習を進めていきます。

ここまでご覧いただきありがとうございます。
学習を進める中で、まだ至らない点があるかもしれませんが、少しずつ成長していきたいと思っています。
もしご指摘やアドバイスなどがありましたら、ぜひコメントいただけると嬉しいです。
引き続き、楽しみながら学習を続けていきますので、よろしくお願いいたします。

参考

https://developer.mozilla.org/ja/docs/Web/HTML/Element/div