プログラマーが落ち着かなくなるコードを書いてみた #3

こんにちはAtsu1209です。
今回はエンジニアが落ち着かなくなるコードを書いてみた 第三回です

**第一回**

https://qiita.com/Atsu1209jp/items/d4273320d5ce5f690e9a

**第二回**

https://qiita.com/Atsu1209jp/items/a1b051107bca65e87ceb

**番外編**

https://qiita.com/Atsu1209jp/items/b88c5e5ccbf037e76565

# 今回作るもの
今回は作るもの自体はまともですが、コメントアウトを大量に入れて
恐怖を覚えさせたいと思います。

今回はブログのHTML部分をかいて行きます。
ブログのHTML部分のコードは以前の記事から流用します。

記事↓

https://qiita.com/Atsu1209jp/items/75a0acb5c4410aa2754e

# HTML
前回ChatGPTが書いたHTMLがこちらです。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ブログサイト</title>
</head>
<style>
/* リセット */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ベーススタイル */
body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4;
    color: #333;
    padding: 20px;
}

/* ヘッダー */
header {
    background-color: #333;
    color: #fff;
    padding: 20px 0;
    text-align: center;
}

header h1 {
    margin-bottom: 10px;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 10px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 5px;
    transition: background-color 0.3s;
}

nav ul li a:hover {
    background-color: #575757;
}

/* メインコンテンツ */
main {
    margin: 20px 0;
}

article {
    background-color: #fff;
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

article h2 {
    color: #333;
    margin-bottom: 10px;
}

article p {
    margin-bottom: 10px;
}

/* フッター */
footer {
    text-align: center;
    padding: 20px 0;
    background-color: #333;
    color: #fff;
    border-top: 5px solid #575757;
}

footer p {
    margin: 0;
}

/* レスポンシブデザイン */
@media (max-width: 768px) {
    nav ul li {
        display: block;
        margin-bottom: 10px;
    }

    header h1 {
        font-size: 24px;
    }

    article {
        padding: 10px;
    }
}

</style>
<body>
    <header>
        <h1>私のブログ</h1>
        <nav>
            <ul>
                <li><a href="#home">ホーム</a></li>
                <li><a href="#about">私について</a></li>
                <li><a href="#contact">連絡先</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <article>
            <h2>最初のブログ記事</h2>
            <p>これは最初のブログ記事の内容です。ここにテキストを追加します。</p>
            <p>更に内容を追加する場合は、このように段落を増やします。</p>
        </article>
        
        <article>
            <h2>二番目のブログ記事</h2>
            <p>これは二番目のブログ記事の内容です。ここにテキストを追加します。</p>
            <p>更に内容を追加する場合は、このように段落を増やします。</p>
        </article>
    </main>
    
    <footer>
        <p>&copy; 2024 私のブログ. All rights reserved.</p>
    </footer>
</body>
</html>
```
![ブログサイト-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3374328/d25896b4-09ff-25f4-5b8c-5ef3646a600c.png)

こんな感じ

# ただの恐怖
ではクソ化しましょう
まずは恐怖の文字列
`/*これ消すと動かなくなるから消しちゃダメ!*/`を書きます。
実際に消しても動きますが、定番なので書きます。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ブログサイト</title>
</head>
<style>
/*これ消すと動かなくなるから消しちゃダメ!*/
/* リセット */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/*これ消すと動かなくなるから消しちゃダメ!*/
/* ベーススタイル */
body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4;
    color: #333;
    padding: 20px;
}
/*これ消すと動かなくなるから消しちゃダメ!*/
/* ヘッダー */
header {
    background-color: #333;
    color: #fff;
    padding: 20px 0;
    text-align: center;
}
/*これ消すと動かなくなるから消しちゃダメ!*/
header h1 {
    margin-bottom: 10px;
}
/*これ消すと動かなくなるから消しちゃダメ!*/
nav ul {
    list-style: none;
    padding: 0;
}
/*これ消すと動かなくなるから消しちゃダメ!*/
nav ul li {
    display: inline;
    margin-right: 10px;
}
/*これ消すと動かなくなるから消しちゃダメ!*/
nav ul li a {
    color: #fff;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 5px;
    transition: background-color 0.3s;
}
/*これ消すと動かなくなるから消しちゃダメ!*/
nav ul li a:hover {
    background-color: #575757;
}
/*これ消すと動かなくなるから消しちゃダメ!*/
/* メインコンテンツ */
main {
    margin: 20px 0;
}
/*これ消すと動かなくなるから消しちゃダメ!*/
article {
    background-color: #fff;
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
/*これ消すと動かなくなるから消しちゃダメ!*/
article h2 {
    color: #333;
    margin-bottom: 10px;
}
/*これ消すと動かなくなるから消しちゃダメ!*/
article p {
    margin-bottom: 10px;
}
/*これ消すと動かなくなるから消しちゃダメ!*/
/* フッター */
footer {
    text-align: center;
    padding: 20px 0;
    background-color: #333;
    color: #fff;
    border-top: 5px solid #575757;
}
/*これ消すと動かなくなるから消しちゃダメ!*/
footer p {
    margin: 0;
}
/*これ消すと動かなくなるから消しちゃダメ!*/
/* レスポンシブデザイン */
@media (max-width: 768px) {
    nav ul li {
        display: block;
        margin-bottom: 10px;
    }

    header h1 {
        font-size: 24px;
    }

    article {
        padding: 10px;
    }
}

</style>
<body>
    <header>
        <h1>私のブログ</h1>
        <nav>
            <ul>
                <li><a href="#home">ホーム</a></li>
                <li><a href="#about">私について</a></li>
                <li><a href="#contact">連絡先</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <article>
            <h2>最初のブログ記事</h2>
            <p>これは最初のブログ記事の内容です。ここにテキストを追加します。</p>
            <p>更に内容を追加する場合は、このように段落を増やします。</p>
        </article>
        
        <article>
            <h2>二番目のブログ記事</h2>
            <p>これは二番目のブログ記事の内容です。ここにテキストを追加します。</p>
            <p>更に内容を追加する場合は、このように段落を増やします。</p>
        </article>
    </main>
    
    <footer>
        <p>&copy; 2024 私のブログ. All rights reserved.</p>
    </footer>
</body>
</html>
```
とりあえず書けるだけ書いておきました

# いらん説明
次にコメントアウトで見ればわかることを説明していきます。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ブログサイト</title>
</head>
<style>
/*これ消すと動かなくなるから消しちゃダメ!*/
/* リセット */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/*これ消すと動かなくなるから消しちゃダメ!*/
/* ベーススタイル */
/*bodyのスタイル*/
body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4;
    color: #333;
    padding: 20px;
}
/*これ消すと動かなくなるから消しちゃダメ!*/
/* ヘッダー */
/*ヘッダーのスタイル*/
header {
    background-color: #333;
    color: #fff;
    padding: 20px 0;
    text-align: center;
}
/*これ消すと動かなくなるから消しちゃダメ!*/
/*ヘッダーのh1のスタイル*/
header h1 {
    margin-bottom: 10px;
}
/*これ消すと動かなくなるから消しちゃダメ!*/
/*navのulのスタイル*/
nav ul {
    list-style: none;
    padding: 0;
}
/*これ消すと動かなくなるから消しちゃダメ!*/
/*navのulのliのスタイル*/
nav ul li {
    display: inline;
    margin-right: 10px;
}
/*これ消すと動かなくなるから消しちゃダメ!*/
/*navのulのliのaのスタイル*/
nav ul li a {
    color: #fff;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 5px;
    transition: background-color 0.3s;
}
/*これ消すと動かなくなるから消しちゃダメ!*/
/*navのulのliのaのホバー時のスタイル*/
nav ul li a:hover {
    background-color: #575757;
}
/*これ消すと動かなくなるから消しちゃダメ!*/
/* メインコンテンツ */
/*mainのスタイル*/
main {
    margin: 20px 0;
}
/*これ消すと動かなくなるから消しちゃダメ!*/
/*articleのスタイル*/
article {
    background-color: #fff;
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
/*これ消すと動かなくなるから消しちゃダメ!*/
/*articleのh2のスタイル*/
article h2 {
    color: #333;
    margin-bottom: 10px;
}
/*これ消すと動かなくなるから消しちゃダメ!*/
/*articleのpのスタイル*/
article p {
    margin-bottom: 10px;
}
/*これ消すと動かなくなるから消しちゃダメ!*/
/* フッター */
/*フッターのスタイル*/
footer {
    text-align: center;
    padding: 20px 0;
    background-color: #333;
    color: #fff;
    border-top: 5px solid #575757;
}
/*これ消すと動かなくなるから消しちゃダメ!*/
/*フッターのpのすた*/
footer p {
    margin: 0;
}
/*これ消すと動かなくなるから消しちゃダメ!*/
/* レスポンシブデザイン */
@media (max-width: 768px) {
    nav ul li {
        display: block;
        margin-bottom: 10px;
    }

    header h1 {
        font-size: 24px;
    }

    article {
        padding: 10px;
    }
}

</style>
<body>
    <? ここからヘッダー ?>
    <header>
        <? ブログのh1 ?>
        <h1>私のブログ</h1>
        <? navだよ ?>
        <nav>
            <ul>
                <? liだよ ?>
                <li><a href="#home">ホーム</a></li>
                <? liだよ ?>
                <li><a href="#about">私について</a></li>
                <? liだよ ?>
                <li><a href="#contact">連絡先</a></li>
            </ul>
        </nav>
    </header>
   <? mainだよ ?> 
    <main>
        <? articleだよ ?>
        <article>
        <? ブログ記事のタイトルだよ ?>
            <h2>最初のブログ記事</h2>
            <? ブログの説明だよ ?>
            <p>これは最初のブログ記事の内容です。ここにテキストを追加します。</p>
            <? ブログの説明だよ ?>
            <p>更に内容を追加する場合は、このように段落を増やします。</p>
        </article>
        
        <? articleだよ ?>
        <article>
            <? ブログ記事のタイトルだよ ?>
            <h2>二番目のブログ記事</h2>
             <? ブログの説明だよ ?>
            <p>これは二番目のブログ記事の内容です。ここにテキストを追加します。</p>
             <? ブログの説明だよ ?>
            <p>更に内容を追加する場合は、このように段落を増やします。</p>
        </article>
    </main>

    <? フッター ?>
    <footer>
        <p>&copy; 2024 私のブログ. All rights reserved.</p>
    </footer>
</body>
</html>
```
かなりうるさくなりましたね

# 絵文字の多様
さらにうるさくしていきます
コメントアウトに絵文字を使ってやりましょう
```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ブログサイト</title>
</head>
<style>
/* これ消すと動かなくなるから消しちゃダメ!🙅 */
/* リセット⭐ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* これ消すと動かなくなるから消しちゃダメ!🙅 */
/* ベーススタイル🌞 */
/* bodyのスタイル🐔 */
body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4;
    color: #333;
    padding: 20px;
}
/* これ消すと動かなくなるから消しちゃダメ!🙅 */
/* ヘッダー🧠 */
/* ヘッダーのスタイル🧠🐔 */
header {
    background-color: #333;
    color: #fff;
    padding: 20px 0;
    text-align: center;
}
/* これ消すと動かなくなるから消しちゃダメ!🙅 */
/* ヘッダーのh1のスタイル📝 */
header h1 {
    margin-bottom: 10px;
}
/* これ消すと動かなくなるから消しちゃダメ!🙅 */
/* navのulのスタイル🚢 */
nav ul {
    list-style: none;
    padding: 0;
}
/* これ消すと動かなくなるから消しちゃダメ!🙅 */
/* navのulのliのスタイル📄 */
nav ul li {
    display: inline;
    margin-right: 10px;
}
/* これ消すと動かなくなるから消しちゃダメ!🙅 */
/* navのulのliのaのスタイル🔗 */
nav ul li a {
    color: #fff;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 5px;
    transition: background-color 0.3s;
}
/* これ消すと動かなくなるから消しちゃダメ!🙅 */
/* navのulのliのaのホバー時のスタイル🖱️ */
nav ul li a:hover {
    background-color: #575757;
}
/* これ消すと動かなくなるから消しちゃダメ!🙅 */
/* メインコンテンツ📝 */
/* mainのスタイル🌟 */
main {
    margin: 20px 0;
}
/* これ消すと動かなくなるから消しちゃダメ!🙅 */
/* articleのスタイル📚 */
article {
    background-color: #fff;
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
/* これ消すと動かなくなるから消しちゃダメ!🙅 */
/* articleのh2のスタイル📝 */
article h2 {
    color: #333;
    margin-bottom: 10px;
}
/* これ消すと動かなくなるから消しちゃダメ!🙅 */
/* articleのpのスタイル📜 */
article p {
    margin-bottom: 10px;
}
/* これ消すと動かなくなるから消しちゃダメ!🙅 */
/* フッター👣 */
/* フッターのスタイル💬 */
footer {
    text-align: center;
    padding: 20px 0;
    background-color: #333;
    color: #fff;
    border-top: 5px solid #575757;
}
/* これ消すと動かなくなるから消しちゃダメ!🙅 */
/* フッターのpのスタイル📝 */
footer p {
    margin: 0;
}
/* これ消すと動かなくなるから消しちゃダメ!🙅 */
/* レスポンシブデザイン📱 */
@media (max-width: 768px) {
    nav ul li {
        display: block;
        margin-bottom: 10px;
    }

    header h1 {
        font-size: 24px;
    }

    article {
        padding: 10px;
    }
}

</style>
<body>
    <? ここからヘッダー 🙇 ?>
    <header>
        <? ブログのh1 📝 ?>
        <h1>私のブログ</h1>
        <? navだよ 🚢 ?>
        <nav>
            <ul>
                <? liだよ 📄 ?>
                <li><a href="#home">ホーム</a></li>
                <? liだよ 📄 ?>
                <li><a href="#about">私について</a></li>
                <? liだよ 📄 ?>
                <li><a href="#contact">連絡先</a></li>
            </ul>
        </nav>
    </header>
   <? mainだよ 🌟 ?> 
    <main>
        <? articleだよ 📚 ?>
        <article>
        <? ブログ記事のタイトルだよ 📝 ?>
            <h2>最初のブログ記事</h2>
            <? ブログの説明だよ 📜 ?>
            <p>これは最初のブログ記事の内容です。ここにテキストを追加します。</p>
            <? ブログの説明だよ 📜 ?>
            <p>更に内容を追加する場合は、このように段落を増やします。</p>
        </article>
        
        <? articleだよ 📚 ?>
        <article>
            <? ブログ記事のタイトルだよ 📝 ?>
            <h2>二番目のブログ記事</h2>
             <? ブログの説明だよ 📜 ?>
            <p>これは二番目のブログ記事の内容です。ここにテキストを追加します。</p>
             <? ブログの説明だよ 📜 ?>
            <p>更に内容を追加する場合は、このように段落を増やします。</p>
        </article>
    </main>

    <? フッター 👣 ?>
    <footer>
        <p>&copy; 2024 私のブログ. All rights reserved.</p>
    </footer>
</body>
</html>
```
うん うるさくなった☆

# 最後に
コメントアウトはあったほうが良いですが、ありすぎたりよくわからんことを書いてあったら
なんか落ち着かないですよね

少なくとも職場ではやめましょう
では次の記事で