ホームページ作成入門メモ1

前知識

HTML

ハイパー・テキスト・マークアップ・ランゲージの略
タグと呼ばれる<>で囲まれた文字を組み合わせたもので、IE や Chrome などのブラウザに文字や段組を表示させることができる
他にも意味を決めたり、別ページへのリンクを貼ることもできる
昔は色や文字サイズも細かくいじれたが、今は CSS でいじる決まりになっている

CSS

カスケーディング・スタイル・シートの略
HTML が文字を表示するなら、CSS は表示された HTML を飾る
色をつけたり文字サイズを変えたりアンダーバーを引いたり、見た目を飾れる(見た目のシート=スタイルシート)

JavaScript

そのままジャバスクリプトと読む
機能をつける為のもの。Javaという言語の人気にあやかってJavaScriptと名付けたとか。最近は HTML や CSS の領域にまで手を出しつつあるイケイケのプログラミング言語

エディタ

エディット(編集)する為のソフト。ここではHTML/CSS JavaScript などのプログラミング言語を編集する為のソフト。おすすめは VSCodeという、Windows を開発した MicroSoft が開発したエディタ
デビューした頃からの人気者で、無料なのに加え、その使いやすさと汎用性が好評を博している
早速インストールしてみよう。

HTML 実践

一番最初のファイルを作る

デスクトップか書類フォルダに新規フォルダを作る
VSCode のファイル -> Open... から 1 で作ったフォルダを開く
VSCode 左のエリアを右クリックして new file から新しいファイルを作り、index.html と名付ける
以下のソースコードをコピーして貼り付けて保存(保存は(mac)cmdキー + sキー　か (win)ctrlキー + sキー)

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ホームページ入門</title>
</head>
<body>
    hello world
</body>
</html>

作ったファイルを、ブラウザのURLバーにドラッグアンドドロップして開く。ファイル名(ここではindex.html)をクリックすると引っ張れる
5. 画面にhello world と表示されていたら成功
6. どうやってもうまくいかない場合は、jsfiddleを開いて、html のところに上記の html を貼り付けて、左上の RUN ボタンを押すと右下の result に結果が表示されるので試してみよう

いじってみる

<body>と</body>に囲まれた内容を編集すると、画面に反映される
好きにいじって保存してみると、文字が変わる
例えば hello world と書かれた箇所を hogehoge world に書き換えて保存し、ブラウザを更新すると画面には hogehoge world と表示されている

色々なタグを使ってみる

タグには色々な種類がある

<h1>: ヘッダー1、1番大きな見出しを意味する
<h2>: ヘッダー2、2番大きな見出しを意味する。同様に以下6番目まで大きな見出しが存在する
<p>: パラグラフ、段落を意味する。文章の一段落文を表現するのに使う
<br />: ブレイク、改行するのに使います
<a>: アンカー、外部ページへのリンクを設定するのに使う。
<img />: イメージ、画像を設定するのに使う
<ol>: オーダードリスト、順番に並んだ箇条書きのリストを表現するのに使う。なお、順不同の場合は<ul>アンオーダードリストを使う
table: テーブル、表組みを作るのに使う。昔はレイアウトを組むのに CSS ではなくこのタグを使っていた

これらのタグを、<body></body>の間に組み合わせて書き込むと、意味を持った文章が出来上がる。

上記のタグを組み合わせてみた例

<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ホームページ入門</title>
</head>
<body>
  <h1>ホームページ入門</h1>
  <h2>HTML</h2>
  <p>pタグはパラグラフを意味します</p>
  <a href="https://google.com">aタグはリンクを意味します</a>
  <br />
  <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png" />
  <h2>CSS</h2>
  <p>カスケーディングスタイルシート</p>
  <p>見た目の装飾に使います</p>
  <h2>JavaScript</h2>
  <p>以下のような用途に使います</p>
  <ul>
    <li>通信</li>
    <li>動きをつける</li>
    <li>様々な機能の実装</li>
  </ul>
  <p>JavaScriptを書く上で気をつけるのは以下の通りです</p>
  <ol>
    <li>エラーを残さない。大前提です</li>
    <li>処理を重くしない</li>
    <li>簡潔に実装する</li>
  </ol>
  <br />
  <h2>テーブルタグについて</h2>
  <p>テーブルタグは以下のように使います</p>
  <table>
    <thead>
      <tr>
        <th>色コード表</th>
      </tr>
      <tr>
        <th>白</th>
        <th>黒</th>
       </tr>
    </thead>
    <tbody>
      <tr>
        <td>#fff</td>
        <td>#000</td>
      </tr>
    </tbody>
  </table>
  <br>
</body>
</html>

これを index.html にコピペ、保存しブラウザを更新すると、ブラウザによってスタイリングされたタグの内容が出力されている

テーブルタグについて

<table>タグの中が複雑になっているように見えるが、そこまで複雑ではない。

<thead>: テーブルヘッド。テーブルの見出しグループを意味する
<tbody>: テーブルボディ。テーブルの本体を意味する
<tr>: テーブルロウ。テーブルの横一列の行を意味する。
<th>: テーブルヘッダー。行、列単位の見出しを意味する
<td>: テーブルデータ。文字通りデータを意味する

CSS 実践

CSSを使用する方法は3パターンある
1. HTML に直接<style>タグを使って記入する
2. CSS ファイルを分けて作り、HTML ファイルから読み込む
3. CSS in JS を使って、js に CSS を書き込み、その js を HTML に読み込ませる

最近流行りの react や vue では 3 の手法が取られるが、それ以外では基本的に 2 を使う。1 はほぼほぼ使われない。

CSS の読み込ませ方

.css拡張子のファイルを作る。例えばcommon.cssとする
htmlから、linkタグを使って読み込ませる。

<link rel="stylesheet" href="common.css">

上記のlinkタグを<head>タグで囲まれたエリアの中に記載する

CSS の書き方

セレクタにプロパティを当てることで CSS は適用される。

セレクタ: {
  プロパティ名: 値;
  プロパティ名: 値;
}

セレクタとは

どの要素なのかを示す識別子。タグの名前、class の名前、 id の名前の 3 つの基本的なセレクタがあり、さらにそのセレクタの親子セレクタ、兄弟セレクタなど、特別なセレクタが存在する。

例えば

<p class="hoge" id="huga">ぬわあああん</p>

というHTMLタグがあったとして、このタグを指定できるセレクタは、
- p というタグ名
- hoge というclass
- huga というid

の 3 つになる
それぞれのセレクタの指定方法は

タグ名

// そのまま指定する
タグ名: {
  略
}

class 名

// 頭に『.』をつける
.class名: {
  略
}

id 名

// 頭に『#』をつける
#id名: {
  略
}

なので、上記のタグでいうと指定方法は

p: {
  略
}

.hoge: {
  略
}

#huga: {
  略
}

と表せる

プロパティと値

どのような属性にどのような値を設定するかという指定の方法を指す
例えば
background-color: red;は読んで字のごとく、背景色を赤くする
なので、全ての<p>タグの背景色を赤くしたい場合は、

p {
  background-color: red;
}

と表せる。なお、セミコロンを忘れると次の行以降が認識されないので注意
どのようなプロパティがあるのかはここをみると参考になる。

プロパティの書き順

プロパティの書き順はよく話題に上がるが、だいたい以下の 2 パターンになる
1. abc　順
2. 外側から内側へ定義していく（余白、ボーダー、文字色といった順）
よくわからないうちは 1 の abc 順で書いていくといい

css animation

海外産のクールな動きのある CSS はだいたい CSS Animatino を利用して作られている
CSS Animation とは特定プロパティに CSS プロパティを記載することで HTML にアニメーションを加えさせることのできる機能だ

設定方法は単純で、@keyframes 名前と名付けた、アニメーションの進捗パーセンテージとそれに応じたプロパティを指定の方法で記入するだけだ。

@keyframes anime1 {
0% {width: 50px; height: 50px; background-color: aqua;}
100% {width: 200px; height: 50px; background-color: blue;}
}

例えば上記の例でいうと、anime1と名付けた css アニメーションを定義している
その内容は、進捗率が0% の時は幅 50px 、高さ 50px、背景色 aqua とし、進捗率が 100% の時は幅 200px 、高さ 50px、背景色: blue とするものだ
つまり幅が広がって背景色の青が濃くなるアニメーションが定義されている
これに手を加えて、50% { background-color: red;}と入れれば、アニメーションの途中で背景色が赤くなり、また青に戻っていく

さて、これで定義されたアニメーションを、今度はセレクタを指定して当ててやる必要がある
設定の方法は以下のように行う

セレクタ {
  animation: anime1 5s ease -2s infinite alternate;
}

これらは前からanimationというプロパティ名の後から順番に
animation-nameの値、 animation-durationの値、 animation-timing-functionの値、 animation-delayの値、 animation-iteration-countの値、 animation-directionの値
となっている。

つまり、指定するアニメーションの名前、アニメーションにかける時間、アニメーションの変化具合（最初が早い、あとが遅い、一定など）、アニメーションが動き出すまでどれだけ遅延させるか、アニメーションの繰り返し回数、アニメーションを交互に反転再生させるかどうか、をスペースで区切って表示している

上記の例でいうと、anime1 というアニメーションを、5secの間、ease(最初が遅くあとが早い)という変化具合で、-2sec遅延させて、無限に、0% -> 100% -> 0% を繰り返すという設定をしている

JavaScript 実践

式と評価

JavaScriptは、ソースコードの上から下まで順々に一行ずつ評価(≒実行)している
例えば 3 と書かれた行があれば、3と評価して返却するし、3 + 4 と書かれた行があれば 7 と評価して結果を返却する
JavaScript に限らずプログラムの多くは式の評価とその返却の繰り返しを行なっている

例えばここに画面に alert を出すための命令 alert(3)があったとして、この命令が書かれた式が評価されると undefined(未定義)が返却される

変数

varキーワードを使うことで、変数を宣言することができる
変数とは値の入れ物のことで、例えば

var hoge

とすると、hogeという入れ物を用意することができる

代入式 =

変数とセットでよく使われるのが代入式である
代入とは、変数に値を入れることを指す言葉
代入式の使い方は簡単で

var hoge = 3

とすることで、hoge という変数(入れ物)に 3 を代入することができる

また、=は右の式を先に評価する性質があり

var hoge = 3 + 5

という式では、変数 hoge に 3 + 5の計算結果である 8 が代入される

変数は上書き可能で、

var hoge = 3 + 5
hoge = 2

とすると、変数 hoge には 2 が代入されている。

var hoge = alert(3)

という式があれば、hoge には undefined(未定義) が代入されている。なぜなら、先にも書いたが alert の評価結果が undefined だからだ。もし alert の評価結果が100なら、この場合 hoge には 100 が代入されている

メソッド（関数）、引数、返値

メソッド（関数）: 何かをさせる命令のこと。クラス（jsの場合はオブジェクト）に定義されている命令はメソッド、それ以外は関数と呼ぶ
引数: メソッド(関数)が引き取る値のこと `alert(3)` この例でいうと3が引数
返値: メソッド（関数）が評価された時に返す値のこと `alert(3)` この例でいうとundefined が返値

算術演算子

プログラムに計算を行わせる際に使う演算子(記号)の一種。
以下のような意味合いがある

+: 足し算
-: 引き算
*: 掛け算
/: 割り算
%: 残算例) 5 % 3 = 2, 9 % 8 = 1

型

jsの値には型がある。文字だったり数字だったり。

number: 数字。
string: 文字
boolean: 真偽値。日本語で言えば有りか無しか。true か false で表現される。なお、全ての値は真偽値で評価可能。その際 false として評価されるのは、false, 0, ''(空文字), NaN, undefined, null の 6 つである
array: 配列。配列とは要素の並びを指す。['ほげほげ', 'ふがふが', 'ぴよぴよ']とあったら、見た通りほげほげ　と　ふがふが　と　ぴよぴよ　が入った配列を表す。さらに['ほげほげ', 'ふがふが', 'ぴよぴよ'][0]とすると、ほげほげが返却される。お尻についている[]の中身は0始まりの数字。この数字のことを添字という
object: 配列の添字に整数以外のものを使ったのがobject。正確には逆で、整数を添字にしているobjectが配列。{a: 'aaaa', b: 'bbbb', c: 'cccc'}というkey: valueで表現し、{a: 'aaaa', b: 'bbbb', c: 'cccc'}.a という風に.キーとすると、オブジェクトのうち指定されたキーと相対するvalueを返却する
NaN, undefined,null: それぞれ唯一の型。NaNはNot a Numberの略で、数字ではないことを示す。undefinedは先ほども書いている通り未定義を示す。nullは空を指す

比較演算子

式を boolean として評価するための演算子（記号）

演算子	説明
>	左辺が右辺より大きい
>=	左辺が右辺以上
<	左辺が右辺より小さい
<=	左辺が右辺以下
==	左辺と右辺は等しい(型変換は行われる)
===	左辺と右辺は等しい(型変換は行われない)
!=	左辺と右辺は等しくない(型変換は行われる)
!==	左辺と右辺は等しくない(型変換は行われない)

繰り返し文

文字通り繰り返しを行う命令文として、for や while が存在している

for

初期化式;条件式;変化式の3つで構成される繰り返し文
以下は 0~99 をコンソールのログに出力する命令。コンソールのログは(win)ctrl + shift + c (mac)cmd + shift + c で開発者メニューを開き、consoleタブをクリックすると表示できる

// for (初期化式; 条件式; 変化式)
for (var i = 0; i < 100; i += 1) {
  console.log(i)
}

var i を初期化し、iが100未満の限り、繰り返すたびにiを１ずつ足していくというのが上記式。

while

whileの引数がtrueの限り実行され続ける

// この例では hoge が false にならない限り実行され続ける
var hoge = true
while(hoge) {
  document.addEventListener('click', () => {hoge = false})
  console.log('わん')
}

上記はクリックされない限り console の log にわんと出力され続ける式

その他

++: インクリメント(1を足す)。式の前に置いても後に置いてもいい。hoge ++ とすると、hoge に 1 を足す。hoge ++ なら hogeが評価された後にインクリメントされ、 ++ hoge ならインクリメントされた後に評価される
--: デクリメント(1を引く)。こちらも式の前に置いても後においてもいい。 hoge --とすると hoge から 1 を引く。 hoge -- なら hoge が評価された後にデクリメントされ、 -- hoge ならデクリメントされた後に式が評価される

他

メモ2に続く。誤字脱字間違った記載がありましたら修正いたします。

前知識