LoginSignup
9
9

More than 5 years have passed since last update.

@Fudeko

フロントの基礎

Last updated at Posted at 2018-10-26

ここでは、フロントの基本的な概念やJavaScriptやjQueryを使った基礎的な処理について解説していこうと思います。

基礎的な考え方や、DOM構造について

Document Object Model (DOM)はHTMLやXML等を触れたことがある方なら必ず利用している構造です。

DOM
<body>
    <section>
        <div>
            <p>こんにちわ！</p>
        </div>
    </section>
</body>

こちら、見たことがあると思います。HTMLの基本的な構造ですね。
このような階層構造を主にDOM構造と呼びます。

webページなどに表示される文章は、HTMLで文書構造を構築し、スタイルはCSS、振る舞いはスクリプト言語といった役割分担がよくされます。

DOMのセレクタを指定して、CSSでスタイルを変更し、
DOMを操作することができるスクリプト言語を用いて動的に文章を書き換えたり値を与えたりします。

スクリプト言語についての解説はもう少し先にするとします。

DOM構造における要素やNodeについて

さて、DOM構造の話に戻りますが、DOM構造を考える上で必要な知識が二つあります。
まず、親要素と子要素について。
上に記述してあるHTMLのdivタグを中心だと考えて見ましょう、すると親要素と子要素は

DOM
<body>
    <section> ←親要素
        <div> ←自分自身
            <p>こんにちわ！</p> ←子要素
        </div>
    </section>
</body>

このような関係になります。
・中心として考えているタグを入れ子にしている要素のことを親要素
・中心として考えているタグに入れ子にされている要素のことを子要素
となります。
後にJavaScriptを扱う上で非常に役立つ知識なのでぜひ覚えてください。
そして、説明しているよりとても深いものなので是非、他の記事や本をみて理解を深めてください。

次に、Nodeについて。
Nodeは日本語で「節点」という意味です。
HTMLに記述されているタグ一つ一つがNodeです、タグ一つ一つからまるで木の枝のようにタグが広がっていきます。
そして、Nodeにさっそく親要素と子要素が関係してきます。

DOM
<body>
    <section> ←parentnode
        <div> ←自分自身
            <p>こんにちわ！</p> ←childnode
        </div>
    </section>
</body>

要素の名前を英語にしただけですね。
・親要素のことをparentnode
・子要素のことをchildnode
といいます。
このようなNodeの連なりをノードツリーと呼び、木構造と言うデータ構造に当てはめて考えます。
木構造については、説明するととても長くなってしまうので、各自で調べてみてください。

セレクタについて

DOMのスタイルを変更する上で重要になるセレクタ、というものについて説明していきたいと思います。

セレクタとは、タグ自身の要素名やタグに付与するidやclassの事をセレクタと呼びます。

DOM
<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を作成し、下記の記述を書いてみてください。

test.html
<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>
test.css
p{
  text-align:center;
}

p:hover {
  color:red;
}

その後、作ったHTMLにアクセスし、文字の上にマウスカーソルを持っていってみてください
マウスカーソルが乗った文字の色が赤くなるはずです。
これは、pの中にhoverで指定したスタイルが反映されているので、文字が赤くなっているのです。

このように、擬似クラスで指定したスタイルは指定されたセレクタに反映されます。
特にhoverやfocus等は使っていて楽しいのでどんどん試してみましょう。
擬似クラスの説明は終わりです。

擬似要素

次に、擬似要素について。
擬似要素は、文章中の最初の文字だけ色を変えたいときや、文章の前と後に付け加えて表示したいときに役に立ちます。
test.htmlとtest.cssを下記の記述に修正してみてください。

test.html
<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>
test.css
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)
let a = 1; //数字として扱ってくれます。

let b = "1" //文字として扱ってくれます。

a = 32; //代入できます。

変数宣言の際、letとしてます、これは再宣言は不可能だけど、再代入可能な変数の宣言時につける文です。
他にもvarやconstといったものがあります。
varは、JavaScriptのバージョンES2015(ES6)以前から使われている文です。
ES2015(ES6)以降ではletやconst文が登場したため、あまり使われなくなってはきていますが、ES2015(ES6)以前のバージョンのほうが普及しているので、constの説明の後に説明していきたいと思います。

変数宣言(const)
const a = "再代入できないよ"

a = "再代入"; //エラーになります。

constは、再代入不可能な変数の宣言時につける文です。
つまり定数を宣言することができ、ここは変わってほしくないなーとか、使いまわす値があるなーというときに使いましょう

ちなみにjavaだと

定数
public static final String GREETING = "こんにちは";

こんなかんじで定数を宣言します。
定数を宣言することで、処理の速度向上を図ることもできるので、是非活用していきましょう。

変数宣言(var)
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の使い方
document.getElementById("タグにつけたid名");

このようにJavaScriptにはdocument.getElementById()というHTML上のid名を用いて要素を取得するメソッドが用意されています。

さっそく情報を取得してみましょう。
セレクタの説明で使ったtest.htmlファイルを以下のように修正し、test.jsというファイルを同じディレクトリ内に作成し例のとおりに記述してみてください。

test.html
<html>
<head>
</head>
<body>
  <section>
    <div>
      <p id="myid">こんにちは</p>
    </div>
  </section>
<script src="test.js"></script>
</body>
</html>
test.js
let myid = document.getElementById("myid");

console.log(myid.innerText); //こんにちは；

作成が終了したらtest.htmlをダブルクリックし、F12キーを押してみてください。

front1.png

デベロッパーツールの右下に「こんにちは」と出ていますか？
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名");

このように使うことができます。

要素の情報を取得できるようになったので、次はイベントリスナーを設定しましょう。

イベントリスナー(test.js)
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の第二引数である処理の部分は

イベントリスナー(test.js)
let myid = document.getElementById("myid");

myid.addEventListener("click", function() {
    alert("クリックしましたね？");
});

このように中に入れることができます。
書き方もスタイリッシュでいい感じですし、下記のjQueryを使ったイベント型駆動にも用いているので是非活用してください。

jQueryを使ったイベント型駆動について

上記のように普通のJavaScriptを用いてイベント型駆動をするよりもっと簡潔にDOMを操作する方法があります。
それは、JavaScriptのライブラリーであるjQueryを使用することです。

jQueryの主な機能や書き方についてはここでは説明しきれないので、イベントのみを扱いたいと思います。

jQueryを使う準備をしましょう

jQueryを使うためには、少し準備が必要です。

test.html
<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を修正しましょう。

test.js
$(function(){
    $("#myid").on("click", function() {
        alert("クリックしましたね？");
    });
});

これがjQueryを使ったコードです。
いきなり「\$」といった記号や「on」といったメソッドや \$(function(){ といったおまじないのようなものが出てきて混乱しますね･･･。
できるだけわかりやすく説明したいと思います。

まずは「\$」を説明したいと思います。

「\$」マークは「この処理はjQueryで書かれていますよ」ということを知らせてくれるマークのようなものです。

本来jQueryはjQueryで書かれている処理の頭に「jQuery」と記すことで動作するものです。

jQuery
jQuery(function(){
    jQuery("#myid").on("click", function() {
        alert("クリックしましたね？");
    });
});

jQueryと毎回書くのはとても効率が悪く可読性も低くなってしまうので、jQueryは「\$」マークにおきかえることができます。
「\$」マークがついたらこれはjQueryなんだなっと思っていただければと思います。

次は、\$(function(){ を説明したいと思います。

readyメソッド
$(function(){
    //この中に処理を書く
});

\$(function)){ こう書いていましたが、正しくは、\$(function(){}); こうです。
このおまじないのようなものは、readyメソッドといいます。
「HTMLが完全に読み込まれた後に処理を実行します」という合図のようなものです。
大抵の場合HTMLが読み込まれる前にスクリプトが実行されると正しく動作しないため、DOMを操作する処理はreadyメソッド内に書かれていることが普通です。

次は、「on」について説明したいと思います。

onイベント
$("#myid").on("click", function() {
    alert("クリックしましたね？");
});

onというメソッドは平たく言えばaddEventListenerと同義です。
\$("#myid")はdocument.getElementByIdのような働きをしていて、id名がついているタグの情報を取得します。
取得した情報にイベントリスナーを付与してイベントが起こったら内部に書かれている処理を実行するという流れになります。

\$()の中身はタグでもclass名でもid名でも大丈夫です。
classを指定するときは「.」をid名を指定するときは「#」をつけましょう。
その際にダブルクォーテーションで囲むことを忘れないでください。

以上でjQueryを使ったイベント型駆動の説明を終わりにします。
スッと終わってしまったのでjQueryについて深く知りたい場合は、ネットの海にすばらしい解説記事があるので調べてみてください。

まとめ

今回は、DOM構造とセレクタ、イベント型駆動について説明させていただきました。
フロント側はいろいろとごちゃついてしまいがちなのですが、少しわかってくるととても楽しい分野です。最初はおもしろくないかもしれないですが、あきらめずにチャレンジしてみてください！

9
9
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
9
9