ホームページ作成入門メモ2 #JavaScript

前回の記事の続き
HTML, JavaScript それぞれでよく使う項目について解説していく

HTML

head タグ

ページのヘッダ部分を示すタグで、ページ自体の情報などを載せる箇所

例えば以下のようなタグが入る

meta: 文字コードなどのメタ情報を示すタグ
title: 文章のタイトルを指定するタグ
link: リソースとのリンクを設定するタグ。cssやwebフォントとの結びつけに使われる

class, id について

class は同名の class を複数のタグにつけていいが、id は複数のタグにつけることが禁じられている
そのため、CSS でスタイリングをする場合はセレクタを id ではなく class で指定してあげるのが好ましいとされている
なお、p や div などのタグ名自体をセレクタにしてしまうと思わぬところで CSS が効いてしまい見た目が崩れる原因になるので、そういう意味でも CSS のセレクタは class が好ましい (bodyなどページに一つしかない要素にはその限りではないが)

js- jsc- jsi-

後述する JavaScript から参照する際のセレクタを意味する class のプレフィクスとして、js- をつける例がよく見られる。またその変形として JavaScript 用の class = jsc- をつけたり、JavaScript 用の id = jsi- をつけるところも散見される
ここで気をつけなくてはいけないのが、この js- のプレフィクスがついた class には css のスタイルを当ててはいけないということ
主な理由は二つ
1. JavaScript の機能が不要になった際にこの js- プレフィクスのついた class も一緒に消してしまい、思わぬ表示崩れが起こる
2. 逆に残しておいたために JavaScript のセレクタじゃないのに js- がついているややこしい状況が発生する

これらの状況を発生させないためにも、js- プレフィクスのついたクラスにはスタイルを当てないほうが無難

CSS

カラーコード

文字色、背景色、境界線色など様々なところで使う色だが、その指定方法で red や black を使うことは多くない。
実際は #ff0000 といった 16 進数のカラーコードを使う
カラーコードは {赤0~255}{緑0~255}{青0~255}を組み合わせて作られており、0が彩度が低く、255に彩度が最大だ。そのため、#000000は黒、#ffffffは白となる

例

p {
  color: #323232;
}

省略

カラーコードは3種の色全てが2桁とも同じ値の場合、省略して記述することができる
例えば#996611 は #961 と略すことができる

rgb と rgba

カラーを示す値の記法として、rgbとrgbaがある
r=red, g=green, b=blue a=alpha(不透明度)の略だ
rgbは0~255まで10進数で示すが、aは0~1までで表し、0が透明、1が不透明

例

p {
  color: rgb(255, 255, 255);//白が指定される
}

div {
  color: rgba(0, 0, 0, .5); // 半透明の黒が指定される。 0.5 は .5 と省略可能
}

JavaScript

タグ(DOM)を操作するための JavaScript

例えばカウンターを作ろうとした時、HTML と CSS で見た目を作って、JavaScript でカウントアップする関数と変数を作っても、HTML と JavaScript が結びついていなければ意味がない。

その結びつけを行うのが、以下の関数
| メソッド名 | 効果 | 引数 | 戻り値 |
|:-:|:-:|:-:|:-:|
| Document.getElementById | id を引数にして検出された DOM を返す | string | element オブジェクト or null |
| Document.getElementsByClassName | class を引数にして検出された DOM を返す | string | element オブジェクト or null |

メソッド名	効果	引数	戻り値
Document.getElementById	id を引数にして検出された DOM を返す	string	element オブジェクト or null
Document.getElementsByClassName	class を引数にして検出された DOM を返す	string	element オブジェクトの配列 or null
Document.querySelector	セレクタを元に検索された最初の DOM を返す	string	element オブジェクト or null
Document.querySelectorAll	セレクタを元に検索された全ての DOM を返す	string	element オブジェクトの配列 or null

例

試しに以下の HTML を適当な HTML ファイルに貼り付けて実行してみよう
それぞれの関数が機能していることが確認できるはずだ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>hoge</p>
    <p class="huga">huga</p>
    <p class="huga">hugahuga</p>
    <p id="piyo">piyo</p>

    <script>
        window.addEventListener('load', () => {
            const huga = document.getElementsByClassName('huga')
            const piyo = document.getElementById('piyo')
            const pTag = document.querySelectorAll('p')
            const foo = document.querySelectorAll('#piyo')
            if (huga) console.log(`class huga が ${huga.length} つ見つかりました`)
            if (piyo) console.log(`id piyo が見つかりました`)
            if (pTag) console.log(`p tag が ${pTag.length} つ見つかりました`)
            if (foo) console.log(`id piyo が見つかりました`)
        })
    </script>
</body>
</html>

ここで重要なのが、querySelector 系のメソッドの場合、引数に渡す文字列は CSS でのセレクタの指定方法と同じことだ。つまり、class なら . が id なら # がプレフィクスとして必要なのだ

addEventListener

上記の DOM を取得する関数で取得した DOM あるいはもとから用意されている window や document といった element から呼び出せる、イベントリスナーを追加する関数
イベントリスナーとは、イベントが起こった時にそれを感知して働く関数のこと
第一引数にイベント名、第二引数にリスナー関数を定義する。なお、第三引数には指定のプロパティを定義したオブジェクトを設定できるがここでは説明しない

例えば以下のようなコードがあったとして

    <script>
        window.addEventListener('click', () => console.log('click'))
    </script>

第一引数はクリックイベントを指し、第二引数の() => console.log('click') は実行されたらコンソールログを出す関数を定義している
つまり、クリックされたらコンソールログに click と出力されるようになる

addEventListenerのいいところ

addEventListener と似たメソッドに onxxxx メソッドがある。ロードなら onload, クリックならonclick。だがこれらのメソッドは一つの対象に一つのリスナーしか設定できず、しかもリスナーが設定されていた場合それを上書きしてしまうのだ
その点 addEventListener は上書きではなく追記なので、すでに設定されていたリスナーを消す心配がなく安全に利用できる。
もし今後イベントにリスナーを追加したい場合は、onxxxx メソッドではなく、addEventListener を使おう

ECMAScript

JavaScript の新しい呼び方
もともと一企業が開発していた JavaScript だったが、やがて欧州電子計算機工業会(ECMA)が標準化を行うようになってこのように呼ぶようになった
近年でも開発が進んでおり、新しい機能の導入が盛んにされている
くわしくはこちら

テンプレートリテラル

バッククォーテートで囲んだ文字列のこと。
シングルクォーテーションやダブルクォーテーションと基本的な使い方は一緒だが、改行がそのまま保持されたり変数展開ができたりするメリットがある。
ECMAScript6 で追加された

例

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let i = 0
        window.addEventListener('click', () => console.log(`------
${++i}回目のクリックです
-----`))
    </script>
</body>
</html>

このコードを適当な HTML に貼り付けて画面をクリックすると、${}の中が式として評価されていることがわかる。また、改行もそのまま出力されている

アロー関数

es5 までは関数を宣言する際には function キーワードが必須だったが es6からはアロー => を使うことで関数を宣言できるようになった

// es5 パターン1
function sum(x, y) {
    return x + y
}
// es5 パターン2
var sum = function(x, y) {
    return
}

// es6 パターン1
const sum = (x, y) => {
    return x * y
}

// es6 パターン2
const hello = name => `hello ${name}`

注目するべきは es6 のパターン2 だ。このようにアロー関数は引数が一つだけの場合は（）が不要になり、さらに処理が一行だけの時は return 文が自動で付与されるようになり明示的に書く必要がなくなった。そのためだいぶスッキリした見た目で書くことができるようになった

正規表現

文字列を扱う際、特定条件にのみ一致する文字列を判定して取得したいときなどがよくある。NGワードを弾く処理や、特定パターンの値を取得する際の処理などだ
そこで扱われるのが正規表現である

例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p class="js-welcome"></p>
    <script>
        window.addEventListener('load', () => {
            const welcomeText = 'ようこそ%name%様。%name%様にオススメの商品がございます！'
            const name = localStorage.getItem('name') || 'ご新規'
            document.querySelector('.js-welcome').textContent = welcomeText.replace(/\%name\%/g, name)
        })
    </script>
</body>
</html>

正規表現は document.querySelector('.js-welcome').textContent = welcomeText.replace(/\%name\%/g, name) の右辺で使われている
replace メソッドの第一引数が正規表現で、//に囲まれたところが探す文字列、g はフラグ(オプションのようなもの。gは本来一つしか検索に引っかからないところを、検索に引っかかるもの全てを返却巣量にするフラグ)
\% となっているのは、正規表現で特別な意味を持ってしまう記号 % をただの文字として認識させる、エスケープ処理を行うため。% に限らず、頭に \ がついた全ての文字は正規表現中エスケープされ、意味を持たないただの文字として認識されるようになる

今回の例では、%name% の文字を全て見つけ出し、第二引数の値と置換するという処理

URIエンコード

ホームページを作る上で欠かせないのがURIだ
URI はインタネーット上のルールや名前を指す言葉。似た言葉に URL があるが、URL は URI に含まれる。
さて、URI エンコードとは文字通り URI に沿った形に文字をエンコードすることを言う
例えば検索エンジンで日本語を検索すると、URL バーには日本語ではなく記号と数字の組み合わされたパラメータが付与されるはずだ。あれは、日本語が URI エンコードされた結果だ

URIのエンコードは、encodeURIComponent メソッドを使う。引数は文字列、戻り値は URI エンコードされた文字列
逆にデコードする場合は、decodeURIComponent メソッドを使う