ここでは、フロントの基本的な概念やJavaScriptやjQueryを使った基礎的な処理について解説していこうと思います。
基礎的な考え方や、DOM構造について
__Document Object Model (DOM)__はHTMLやXML等を触れたことがある方なら必ず利用している構造です。
<body>
<section>
<div>
<p>こんにちわ！</p>
</div>
</section>
</body>
こちら、見たことがあると思います。HTMLの基本的な構造ですね。
このような階層構造を主にDOM構造と呼びます。
webページなどに表示される文章は、__HTMLで文書構造を構築し、スタイルはCSS、振る舞いはスクリプト言語__といった役割分担がよくされます。
DOMの__セレクタ__を指定して、CSSでスタイルを変更し、
DOMを操作することができる__スクリプト言語__を用いて動的に文章を書き換えたり値を与えたりします。
スクリプト言語についての解説はもう少し先にするとします。
DOM構造における要素やNodeについて
さて、DOM構造の話に戻りますが、DOM構造を考える上で必要な知識が二つあります。
まず、親要素と子要素について。
上に記述してあるHTMLの__divタグを中心__だと考えて見ましょう、すると親要素と子要素は
<body>
<section> ←親要素
<div> ←自分自身
<p>こんにちわ！</p> ←子要素
</div>
</section>
</body>
このような関係になります。
・中心として考えているタグを入れ子にしている要素のことを親要素
・中心として考えているタグに入れ子にされている要素のことを子要素
となります。
後にJavaScriptを扱う上で非常に役立つ知識なのでぜひ覚えてください。
そして、説明しているよりとても深いものなので是非、他の記事や本をみて理解を深めてください。
次に、Node__について。
Nodeは日本語で「節点」という意味です。
HTMLに記述されているタグ一つ一つがNodeです、タグ一つ一つからまるで__木の枝のようにタグが広がっていきます。
そして、Nodeにさっそく親要素と子要素が関係してきます。
<body>
<section> ←parentnode
<div> ←自分自身
<p>こんにちわ！</p> ←childnode
</div>
</section>
</body>
要素の名前を英語にしただけですね。
・親要素のことをparentnode
・子要素のことをchildnode
といいます。
このようなNodeの連なりをノードツリーと呼び、木構造と言うデータ構造に当てはめて考えます。
木構造については、説明するととても長くなってしまうので、各自で調べてみてください。
セレクタについて
DOMのスタイルを変更する上で重要になる__セレクタ__、というものについて説明していきたいと思います。
セレクタとは、タグ自身の要素名やタグに付与するidやclassの事をセレクタと呼びます。
<body>
<section>
<div id="demo"> ←idセレクタ
<p class="sample">こんにちわ！</p> ←classセレクタ
</div>
</section>
</body>
セレクタには種類があり、以下のようにたくさんあります。
| セレクタ名 | スタイルを適用する対象 | セレクタの書式 |
|---|---|---|
| idセレクタ | id名をつけた要素 | #id名 |
| classセレクタ | class名をつけた要素 | .class名 |
擬似クラス
| セレクタ名 | スタイルを適用する対象 | セレクタの書式 |
|---|---|---|
| link | 未訪問のリンク | a:link {color:blue;} |
| visited | 訪問済のリンク | a:visited {color:blue;} |
| hover | カーソルが乗っている要素 | a:hover {color:blue;} |
| active | クリック中の要素 | a:active {color:blue;} |
| focus | フォーカスされている要素 | input:focus {background:blue;} |
| lang | 特定の言語を指定した要素 | p:lang(en) {color:blue;} |
擬似要素
| セレクタ名 | スタイルを適用する対象 | セレクタの書式 |
|---|---|---|
| first-line | 要素の最初の一行 | p::first-line {color:blue;} |
| first-letter | 要素の最初の一文字 | p::first-letter {color:blue;} |
| before | 要素の直前 | セレクタ::before {content:"『";} |
| after | 要素の直後 | セレクタ::after {content:"』";} |
代表的なものは以上になります。
その中でも擬似クラスや、擬似要素について補足したいと思います。
擬似クラス
まずは、擬似クラスについて説明したいと思います。
擬似クラスは要素がその状態にある場合に、まるでクラスを追加したかのようにスタイルを追加させることができるセレクタです。
同じディレクトリ内にtest.htmlとtest.cssを作成し、下記の記述を書いてみてください。
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<section>
<div>
<p>ホバーしたら色が変わるよ</p>
<p>ホバーしたら色が変わるよ</p>
<p>ホバーしたら色が変わるよ</p>
<p>ホバーしたら色が変わるよ</p>
<p>ホバーしたら色が変わるよ</p>
</div>
</section>
</body>
</html>
p{
text-align:center;
}
p:hover {
color:red;
}
その後、作ったHTMLにアクセスし、文字の上にマウスカーソルを持っていってみてください
__マウスカーソルが乗った文字の色が赤くなるはず__です。
これは、pの中にhoverで指定したスタイルが反映されているので、文字が赤くなっているのです。
このように、擬似クラスで指定したスタイルは指定されたセレクタに反映されます。
特にhoverやfocus等は使っていて楽しいのでどんどん試してみましょう。
擬似クラスの説明は終わりです。
擬似要素
次に、擬似要素について。
擬似要素は、文章中の最初の文字だけ色を変えたいときや、文章の前と後に付け加えて表示したいときに役に立ちます。
test.htmlとtest.cssを下記の記述に修正してみてください。
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<section>
<div>
<p id="first-char">最初の文字だけ色と文字の大きさが変わるよ</p>
<p>変わらないよ</p>
<p id="third-char">真ん中だよ</p>
<p>何も変わらないよ</p>
<p>変わらないよ</p>
</div>
</section>
</body>
</html>
p{
text-align:center;
}
#first-char::first-letter {
color:red;
font-size: 24px;
}
#third-char::before {
content:"左だよ";
color:red;
}
#third-char::after {
content:"右だよ";
color:blue;
}
修正した後、作ったHTMLにアクセスしてみると、文字に変化があるはずです。
まるで擬似的に要素を追加したかのようにスタイルを追加させることができるセレクタです。
一文字だけ変えたいというときは、まずspanタグで変えたい文字を囲みスタイルを変えてあげていましたが、first-letter擬似要素セレクタを使えば、囲まずともスタイルを変更してくれます。
マークアップ記法的に形を崩さずスタイルを変更できるので積極的に使っていきましょう。
擬似クラスの説明は以上です。
次は、簡単にJavaScriptの説明と、イベント型駆動の説明に入ります。
JavaScriptについて
まず、JavaScriptという言語はスクリプト言語という分類の言語です。
スクリプト言語とは、プログラムの記述や実行を比較的簡易に行うことができる言語のことです。
JavaScript Ruby PHP etc…
たくさんのスクリプト言語があります。
この中でも今回はJavaScriptについて説明していきたいと思います。
変数宣言
多くのスクリプト言語の変数宣言は、型推論__という__型を指定していなくても型を推論して変数に値を代入してくれる機能をもっています。
let a = 1; //数字として扱ってくれます。
let b = "1" //文字として扱ってくれます。
a = 32; //代入できます。
変数宣言の際、let__としてます、これは__再宣言は不可能だけど、再代入可能な変数の宣言時につける文__です。
他にも__varやconstといったものがあります。
varは、JavaScriptのバージョンES2015(ES6)以前から使われている文です。
ES2015(ES6)以降ではletやconst文が登場したため、あまり使われなくなってはきていますが、ES2015(ES6)以前のバージョンのほうが普及しているので、constの説明の後に説明していきたいと思います。
const a = "再代入できないよ"
a = "再代入"; //エラーになります。
constは、__再代入不可能な変数の宣言時につける文__です。
つまり定数を宣言することができ、ここは変わってほしくないなーとか、使いまわす値があるなーというときに使いましょう
ちなみにjavaだと
public static final String GREETING = "こんにちは";
こんなかんじで定数を宣言します。
定数を宣言することで、処理の速度向上を図ることもできるので、是非活用していきましょう。
var a = "こんにちは";
varはほぼletと同じような考え方で大丈夫です。
1つ気にしたいのが、__変数の巻き上げ__という現象が起こってしまう点です。
例えば
var a = "こんにちは";
function greeting () { // functionは関数の頭につける文です。下記で説明します。
console.log(a); //undefined
var a = "こんばんは";
console.log(a); //こんばんは
}
greeting();
このような場合
最初のaという変数には何も宣言されずにundefinedという初期化されてませんよという結果が返ってきます。
普通に上から読んでいくと
こんにちは
こんばんは
と出力されるはずなのですが、varで宣言した変数は違うようです。
これはなぜ起こっているかというと
var a = "こんにちは";
function greeting () {
var a; //関数の上で初期化された扱いになるのです。
console.log(a); //undefined
a = "こんばんは";
console.log(a); //こんばんは
}
greeting();
こんな感じで
varで宣言された変数は関数の一番上で宣言されている扱いになるからです。
こういった挙動を変数の巻き上げと言い、varの悩ましい挙動にあげられます。
letを使ったほうがミスも少なく変数を扱えるのでletを使いましょう。
変数の説明はここまでです。
関数
次は、関数の説明になります。
上の変数の説明にも少し出てきましたが
関数はfunctionという文を頭につけて宣言します。
function greeting() {
console.log("こんにちは");
}
greeting(); //こんにちは
また、関数には引数を入れることができます。
function math(a, b) {
console.log(a + b);
}
let a = 1;
let b = 2;
math(a, b); //3
returnをつけることによって値を返すことができます。
function math(a, b) {
return a + b;
}
let a = 1;
let b = 2;
console.log(math(a, b)); //3
関数は変数に入れることもできます。
let a = 1;
let b = 2;
const math = function (a, b) {
return a + b;
}
console.log(math(a, b)); //3
JavaScriptの基本的な部分の説明は以上になります。
JavaScriptには便利なメソッドや、便利な配列である連想配列など理解を深めるととても楽しいので、是非調べて理解を深めてください。
JavaScriptを用いたイベント型駆動について
JavaScriptを用いたDOMの操作について解説したいと思います。
大切な概念は、__セレクタ__と__イベント__です。
セレクタを使い要素の値を取得し、イベントリスナーというものを設定し、イベントが起きたら要素を変更する。といった流れが一般的です。
この流れに沿うとJavaScriptでDOMを操作するには、セレクタを使い要素の情報を取得する必要があります。
document.getElementById("タグにつけたid名");
このようにJavaScriptには__document.getElementById()というHTML上のid名を用いて要素を取得するメソッドが用意されています。__
さっそく情報を取得してみましょう。
セレクタの説明で使ったtest.htmlファイルを以下のように修正し、test.jsというファイルを同じディレクトリ内に作成し例のとおりに記述してみてください。
<html>
<head>
</head>
<body>
<section>
<div>
<p id="myid">こんにちは</p>
</div>
</section>
<script src="test.js"></script>
</body>
</html>
let myid = document.getElementById("myid");
console.log(myid.innerText); //こんにちは；
作成が終了したらtest.htmlをダブルクリックし、F12キーを押してみてください。
デベロッパーツールの右下に「こんにちは」と出ていますか？
console.logを用いてコンソールに情報を表示しているため、右下に表示されるようになっています。
今回は、myidというid名のテキストを表示するという処理を行っているので「こんにちは」と表示されているのです。
このようにすることでmyidというidをつけたタグの情報を取得し文章を参照することができます。
また、取得した情報が格納されている変数をElementといいます。
他にも__document.getElementsByClassName()__や__document.getElementsByTagName()__等があります。
この二つは、Elementからも情報を取得できるので
let myid = document.getElementById("myid");
let TagName = myid.getElementById("タグの名前");
let className = myid.getElementById("タグにつけたClass名");
このように使うことができます。
要素の情報を取得できるようになったので、次はイベントリスナーを設定しましょう。
let myid = document.getElementById("myid");
myid.addEventListener("click", clicked); //イベントリスナー
function clicked () {
alert("クリックしましたね？");
}
上記のようにtest.jsを修正し、「こんにちは」という文章をクリックしてみてください。
「クリックしましたね？」というアラートが表示されたことと思います。
なぜ表示されたのかというと、__addEventListener()というメソッドを使ってmyidというタグがついた要素がクリックされたときに関数を実行する__というフラグをつけたからです。
Element.addEventListener("イベント", "処理");
このように、取得した要素にイベントがおきたら処理を実行する。
というフラグをつけるメソッドがイベントリスナーです。
「イベント」と書いてあるaddEventListenerの第一引数に渡すイベントの代表的なものは下記の通りになります。
| イベント名 | 条件 |
|---|---|
| load | Webページの読み込みが完了した時に発動（画像などのリソースすべて含む） |
| DOMContentLoaded | Webページが読み込みが完了した時に発動（画像などのリソースは含まない） |
| click | マウスボタンをクリックした時に発動 |
| mousedown | マウスボタンを押している時に発動 |
| mouseup | マウスボタンを離したときに発動 |
| mousemove | マウスカーソルが移動した時に発動 |
| keydown | キーボードのキーを押したときに発動 |
| keyup | キーボードのキーを離したときに発動 |
| keypress | キーボードのキーを押している時に発動 |
| change | フォーム部品の状態が変更された時に発動 |
| submmit | フォームのsubmitボタンを押したときに発動 |
| scroll | 画面がスクロールした時に発動 |
また、addEventListenerの第二引数である処理の部分は
let myid = document.getElementById("myid");
myid.addEventListener("click", function() {
alert("クリックしましたね？");
});
このように中に入れることができます。
書き方もスタイリッシュでいい感じですし、下記のjQueryを使ったイベント型駆動にも用いているので是非活用してください。
jQueryを使ったイベント型駆動について
上記のように普通のJavaScriptを用いてイベント型駆動をするよりもっと簡潔にDOMを操作する方法があります。
それは、__JavaScriptのライブラリーであるjQueryを使用すること__です。
jQueryの主な機能や書き方についてはここでは説明しきれないので、イベントのみを扱いたいと思います。
jQueryを使う準備をしましょう
jQueryを使うためには、少し準備が必要です。
<html>
<head>
</head>
<body>
<section>
<div>
<p id="myid">こんにちは</p>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> ←jQueryを使えるようにするためのurl
<script src="test.js"></script>
</body>
</html>
jQueryを使用できるようにする方法はいくつかあります。
- 上記のようにjQueryを使うためにはjQueryの公式サイトからダウンロード用のurlを拝借する
- jQueryの公式サイトから直接jQueryのファイルをダウンロードしてディレクトリを指定する
- yarn又はnpmといったパッケージマネージャでインストールする
大きく分けて三つほどありますが、個人的に利用するのならばurlを拝借する方法がいいです。簡単ですし。
上記のように準備が完了したらtest.jsを修正しましょう。
$(function(){
$("#myid").on("click", function() {
alert("クリックしましたね？");
});
});
これがjQueryを使ったコードです。
いきなり__「$」といった記号や「on」といったメソッドや $(function(){ といったおまじないのようなもの__が出てきて混乱しますね･･･。
できるだけわかりやすく説明したいと思います。
まずは__「$」__を説明したいと思います。
「$」マークは「この処理はjQueryで書かれていますよ」ということを知らせてくれるマークのようなものです。
本来jQueryはjQueryで書かれている処理の頭に「jQuery」と記すことで動作するものです。
jQuery(function(){
jQuery("#myid").on("click", function() {
alert("クリックしましたね？");
});
});
jQueryと毎回書くのはとても効率が悪く可読性も低くなってしまうので、jQueryは「$」マークにおきかえることができます。
「$」マークがついたらこれはjQueryなんだなっと思っていただければと思います。
次は、$(function(){ を説明したいと思います。
$(function(){
//この中に処理を書く
});
$(function)){ こう書いていましたが、正しくは、$(function(){}); こうです。
このおまじないのようなものは、readyメソッドといいます。
__「HTMLが完全に読み込まれた後に処理を実行します」__という合図のようなものです。
__大抵の場合HTMLが読み込まれる前にスクリプトが実行されると正しく動作しない__ため、DOMを操作する処理はreadyメソッド内に書かれていることが普通です。
次は、「on」について説明したいと思います。
$("#myid").on("click", function() {
alert("クリックしましたね？");
});
onというメソッドは平たく言えばaddEventListenerと同義です。
__$("#myid")__はdocument.getElementByIdのような働きをしていて、id名がついているタグの情報を取得します。
取得した情報にイベントリスナーを付与してイベントが起こったら内部に書かれている処理を実行するという流れになります。
__$()の中身はタグでもclass名でもid名でも大丈夫です。
classを指定するときは「.」をid名を指定するときは「#」__をつけましょう。
その際にダブルクォーテーションで囲むことを忘れないでください。
以上でjQueryを使ったイベント型駆動の説明を終わりにします。
スッと終わってしまったのでjQueryについて深く知りたい場合は、ネットの海にすばらしい解説記事があるので調べてみてください。
まとめ
今回は、DOM構造とセレクタ、イベント型駆動について説明させていただきました。
フロント側はいろいろとごちゃついてしまいがちなのですが、少しわかってくるととても楽しい分野です。最初はおもしろくないかもしれないですが、あきらめずにチャレンジしてみてください！