自己紹介がてら「自分を紹介するホームページでも作ってみない？」4日目

# 初手からソースコード
```html:index.html
<html>
    <head>
        <meta charset="utf-8">
        <title>NattyanTV</title>
        <script>
            window.addEventListener("load", (() => {
                const userNameElement = document.querySelector(".user-name");
                if (userNameElement !== null) {
                    userNameElement.innerHTML = "NattyanTV"
                }
                setInterval((() => {
                    document.getElementById("deeply-world").insertAdjacentHTML("beforeend", "!");
                }), 1000);
            }));
        </script>
    </head>
    <body>
        <h1 class="user-name">Loading...</h1>
        <div id="deeply-world">Welcome to 深淵!</div>
        <style>
            body {
                background: #d3d9db;
            }

            .user-name {
                max-width: 80%;
                width: 50rem;
                margin: 0 auto;
                font-family: serif;
            }

            #deeply-world {
                max-width: 80%;
                width: 50rem;
                margin: 0 auto;
                font-family: sans-serif;
            }
        </style>
    </body>
</html>
```
※これはもう何度も載せてるやつです。

# CSSの書き方

```css
セレクタ {
    プロパティ: 値;
}
```
まずこれが基本です。

## セレクタ？
セレクタとは、「どの要素に対してCSSを適応させるか」の範囲みたいなものです。
セレクタには「HTMLタグ」、「ID」、「クラス」を指定することができます。 [^selector]

[^selector]: HTMLタグ、ID、クラスでの指定が基本っていう感じであって、別にそれ以外でも指定はできます。

HTMLタグとは`div`とか`h1`とかのことで、IDとは先ほど説明した属性の`id`のことで、クラスとは属性の`class`のことです。

HTMLタグを指定するときはタグだけ、IDで指定するときは`#ID名`、クラスで指定するときは`.クラス名`とセレクタに書くことで指定することができます。

```css
body {
    ...
}

.user-name {
    ...
}

#deeply-world {
    ...
}
```

先ほどの例を参考にするなら、上から順に...
- `body { ... }`: `body`タグのエレメントに適応させる
- `.user-name { ... }`: クラス名が`user-name`のエレメントに適応させる
- `#deeeply-world { ... }`: idが`deeply-world`のエレメントに適応させる

※ **エレメント** = **要素**
「エレメント」とは「要素」のことです。
「`<div>Hello, World!</div>`」これが1つの`div`エレメントです。
「`<body> <div>Hello</div> <div>World</div> </body>`」これも1つの`body`エレメントです。

すなわち、開始タグと終了タグで囲まれた部分が1つのエレメントです。

## プロパティ？

`max-width`や`width`、`margin`や`font-family`といったCSSの設定のことです。
さっき書いてあったCSSだと以下の通りです。

- `background`: 背景色
  背景色を自由に変える効果を持つ
- `max-width`: エレメントの最大幅
  そのエレメントの最大の幅を決めることができる
- `width`: エレメントの幅
  そのエレメントの幅を決めることができる
- `margin`: エレメントのマージン（余白） [^margin]
  エレメントの周りの余白を決めることができる
- `font-family`: エレメントのフォント
  どのフォントを使うかを選べる

[^margin]: マージンとは、エレメントの周りの余白のことです。ちなみに余白には[`margin`と`padding`があります。](https://saruwakakun.com/html-css/basic/margin-padding)

というような感じです。

その内容というのを次の「値」で設定します。

## 値？

`#d3d9db`や`80%`、`50rem`、`0 auto`、`serif`や`sans-serif`といったCSSの設定の値のことです。

さっきのプロパティと組み合わせることで、そのプロパティの内容を決めることができます。

- `background: #d3d9db;`: 背景色を`#d3d9db`に設定する
- `max-width: 80%;`: 最大幅を80%に設定する
- `width: 50rem;`: 幅を50remに設定する
- `margin: 0 auto;`: マージンを上下0、左右を自動で設定する
- `font-family: serif;`: フォントをセリフ体に設定する

というような感じです。

さてまぁ`%`とか`rem`とか出てきましたね。
これらは「単位」と言います。

## 単位？

`%`や`rem`といったCSSの設定の単位のことです。
例えば`width: 50rem`は、「幅を`50rem`にする」という意味ですが、`rem`とはなんでしょう。

...と、説明するのは大変なので、参考となる記事を貼らせていただきます。

https://zenn.dev/bom_shibuya/articles/d874b1f6b1f3d4870e5a

# JavaScriptの書き方

```javascript
window.addEventListener("load", (() => {
    const userNameElement = document.querySelector(".user-name");
    if (userNameElement !== null) {
        userNameElement.innerHTML = "NattyanTV"
    }
    setInterval((() => {
        document.getElementById("deeply-world").insertAdjacentHTML("beforeend", "!");
    }), 1000);
}));
```

先ほどの`script`部で紹介したJavaScriptのコードです。
このコードについて解説していきましょう。

## プログラムの基本
まぁこの記事を見てる人がプログラミングを理解してないはずはないので、簡単に説明します。

```javascript
anyFunction();
anyFunctionWithArg("Hello, World!");
```

JavaScriptでは、関数を呼び出すときは`関数名(引数)`という形で呼び出します。

つまり最初のコードである

```javascript
window.addEventListener("load", (() => {
    ...
}));
```

では、`window.addEventListener`という関数を呼び出しています。
第一引数に`"load"`、第二引数に`(() => { ... })`を渡しています。

### 「それはわかるんだけど`(() => { ... })`って何？」

これは関数です。
`() => { ... }`というのは、関数を定義するときの書き方です。[^arrow-function]

[^arrow-function]: アロー関数と呼ばれるものです。詳しくは[こちら](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions)を参考にしてください。

```javascript
const callFunction = (arg) => {
    arg();
};

const anyFunction = () => {
    console.log("Hello, World!");
};

callFunction(anyFunction);
```
は以下と同じ意味になります。
```javascript
const callFunction = (arg) => {
    arg();
};

callFunction(() => {
    console.log("Hello, World!");
});
```


つまり、第二引数は関数をまるまる渡しているということです。
あんまり関数を渡すというのは見たことない人もいるかもしれませんが、そういうこともできる言語です。

## `window.addEventListener`

```javascript
window.addEventListener("load", (() => {
    ...
}));
```

これは、ウィンドウに対して「イベント」を設定できる関数です。
ウィンドウというのは、今あなたが見ているこのブラウザの画面のことです。
イベントとは、例えば「クリックされた」とか「スクロールされた」とか「ページが読み込まれた」とかそういうことです。

第一引数には「イベント名」、第二引数には「イベントが発生したときに実行する関数」を渡します。

今回は、`"load"`というイベント名を渡しています。
これは「ページが読み込まれたとき」に実行する関数を渡しています。

## `document.querySelector`

では次にそのイベント発生時関数の中身を見ていきましょう。

```javascript
const userNameElement = document.querySelector(".user-name");
if (userNameElement !== null) {
    userNameElement.innerHTML = "NattyanTV"
}
setInterval((() => {
    document.getElementById("deeply-world").insertAdjacentHTML("beforeend", "!");
}), 1000);
```

最初は`const userNameElement = document.querySelector(".user-name");`ですね。

...`const`の説明もする？

### `const`？

`const`は「定数」を宣言するときに使います。
JavaScriptにおいて変数を定義する方法は、`const`と`let`の2つがあります。[^const-let]

[^const-let]: 他にも`var`というのがありますが、これはあまり好まれません。`var`を使っていいのは小学生までだよね～。

基本的には下記の方の記事が参考になると思うのでそちらを参考にしてください。

https://qiita.com/ist-t-s/items/49ed558bd837452353b8

### じゃあ`document.querySelector`は？

```javascript
const userNameElement = document.querySelector(".user-name");
```

これは、`document.querySelector`という関数を呼び出しており、第一引数に`".user-name"`を渡しています。

`document.querySelector`は、ドキュメント（HTML）の中から、セレクタに一致するエレメントを取得する関数です。
お、「セレクタ？　どっかで聞いた覚えが...」となった人は少し上に戻ってください。

セレクタを使って、エレメントを取得し、`userNameElement`に代入します。

## `if (userNameElement !== null) { ... }`

```javascript
if (userNameElement !== null) {
    userNameElement.innerHTML = "NattyanTV"
}
```

これは、`userNameElement`の中身を`NattyanTV`に変更する処理です。
それが`userNameElement.innerHTML = "NattyanTV"`です。

しかし、`userNameElement`は`document.querySelector`で取得したエレメントで、もしかしたらそのエレメントが存在しないかもしれません。
そこで、`if (userNameElement !== null) { ... }`という処理をしています。

`userNameElement`が`null`でない場合、つまり`userNameElement`が存在する場合は、`userNameElement.innerHTML = "NattyanTV"`を実行します。

もし存在しないエレメントに対してこんな処理をおこなおうものなら...

## `setInterval`

```javascript
setInterval((() => {
    document.getElementById("deeply-world").insertAdjacentHTML("beforeend", "!");
}), 1000);
```

これは、`setInterval`という関数を呼び出しています。
第一引数には、`(() => { ... })`を渡しています。
第二関数には`1000`を渡しています。

どのような関数なのかというと、第一引数の関数を第二引数の時間ごとに実行する関数です。いわゆるインターバルですね。

今回であれば、`1000`ミリ秒(1秒)ごとに、`document.getElementById("deeply-world").insertAdjacentHTML("beforeend", "!");`を実行します。

## `document.getElementById`

```javascript
document.getElementById("deeply-world")...
```

さっきの`document.querySelector`と似たような感じで、ドキュメント（HTML）の中から、IDに一致するエレメントを取得する関数です。
この関数では普通にidを渡すだけでいいので、`#`はいりません。

## `insertAdjacentHTML`

```javascript
document.getElementById("deeply-world").insertAdjacentHTML("beforeend", "!");
```

これはエレメントに対して、HTMLを挿入する関数です。
第一引数には、挿入する位置を指定します。
第二引数には、挿入するHTMLを指定します。

今回は、`"beforeend"`という位置に、`"!"`というHTMLを挿入しています。
`"beforeend"`というのは、そのエレメントの最後に挿入するという意味です。

https://pontaro.net/236/#toc5

こちらの記事が参考になるかもしれません。

## じゃあこのページを実際に開いてみると...？

![スクリーンショット 2023-11-27 211953.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1107984/30b4d00a-5e52-c507-accb-3812326b6754.png)
最初はこうなって...

![スクリーンショット 2023-11-27 212029.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1107984/299c4bea-a7b9-a0fc-789f-b08cd560901b.png)
次第にはこうなっていきます。

# まとめ
4日間にわたって、HTML、CSS、JavaScriptの基本的な書き方を紹介してきました。
これであなたもホームページを作れますね。

というわけで、「自分を紹介するホームページでも作ってみない？」