JSが苦手なフロントエンドエンジニアが語る「JavaScriptと仲良くなるための基本の「き」」

writer

2020.10.09

2022.12.23

目次

JavaScriptとは？
1. JavaScriptを用いて出来ること
JavaScriptの使い方
JavaScriptのつまずきポイント「オブジェクト」とはなにか？
1. オブジェクトを取得して表示するHTMLの見本
JavaScriptのつまずきポイント「DOM」とはなにか？
1. DOMの構成イメージ
2. DOMで文字列を取得するHTMLの見本
JavaScriptの便利なライブラリ「jQuery」とはなにか？
「JavaScriptと仲良くなるための基本の「き」」まとめ

フロントエンドエンジニアとして何年目かぱっと思い出せない私ですが、未だにJavaScriptってややこしい、難しい。

いくつかのサイトを担当する中で、ちょっと難しいことにも挑戦してみて、なんとなく「こうしたらウェブサイトの見た目が変わるんだよな！」「こうしたらクリックのアクションが取れるから、こちらを動かして・・・」と、JavaScriptがどういう物なのかが、ちょっとずつですが分かってきました。

手を動かして、やってみて覚えていくこともありますが、最初の取っ掛かりはやっぱり大切です。
やりたいことを検索するにも、JavaScriptがどういうものかわからないと難しい。

今回は、ちょっとJavaScriptと仲良くなってきた私が、JavaScriptへの理解をちょっとだけお助けする、基本の「き」をまとめます。

JavaScriptとは？

「JavaScript」はプログラミング言語です。「js」と略して表記されることもあります。
似た名前の「Java」というプログラミング言語もありますが、これは今回解説するJavaScriptとは全く別の言語となりますので検索の際などには注意してください。

HTMLとスタイルシートで作り上げたウェブサイトは、静止している状態が基本です。
JavaScriptを用いることで、計算をした結果やそのデータの内容を表示をしたり、要素をクリックすることによって表示を変更させるなど、ユーザーのウェブサイトの閲覧をサポートする動きを付けることが可能です。

JavaScriptを用いて出来ること

クリックしたら要素の色やデザインが変わる
スライダーやモーダルウィンドウを追加する
スクロール量に合わせてふわっと要素が浮き出る
フォームの入力チェックをして、エラーを表示する　・・・etc

より一層ユーザーを惹きつけて、使いやすい＆便利なサイトにすることが出来るのがJavaScriptです。

JavaScriptの使い方

JavaScriptの読み込みが開始されると、その間はページの読み込みが止まります。
その為、 JavaScriptの外部ファイルの読み込みは、ページの読み込みが完了するソースの最後の方になる</body>の前に記述するのが推奨です。

<!DOCTYPE html> 
<html lang="ja"> 
<head> 
    <meta charset="utf-8"> 
    <title>JavaScriptの構成見本</title> 
</head> 
<body> 
    <main> 
        ここにコンテンツが入ります。 
    </main> 
    <script> 
        ここにscriptを書き込んでいきます。 
    </script> 
</body> 
</html>

<!DOCTYPE html>

<head>

<title>JavaScriptの構成見本</title>

</head>

<body>

<main>

ここにコンテンツが入ります。

</main>

ここにscriptを書き込んでいきます。

</script>

</body>

</html>

JavaScriptのつまずきポイント「オブジェクト」とはなにか？

いざ、JavaScriptを使ってみよう！習得しよう！と思ったときに、どんな解説サイトでもどんな書籍でも出てくる言葉が「オブジェクト」です。
右を見ても左を見ても、どこを見ても載っています。

オブジェクトとは何なのか。
これがJavaScriptの第一のつまずきポイントです。

JavaScriptでは、数値も文字列も配列も「すべてはオブジェクトである（everything is an object）」とされています。
「全てとはなに？？」と、今も昔も私は思っているわけですが、『その処理に使う必要な値を集めた塊がオブジェクト』と、考えればなんとなく理解が出来ました。

そして、オブジェクトの様々な定義とそれを動かすプログラム全体を構築する手法が「オブジェクト指向」であり、JavaScriptです。

オブジェクトを取得して表示するHTMLの見本

<!DOCTYPE html> 
<html lang="ja"> 
<head> 
    <meta charset="utf-8"> 
    <title>オブジェクトの取得</title> 
</head> 
<body> 
    <main> 
        <h1>オブジェクトの取得 </h1> 
        <p><button onclick="getAlert()">ボタンを押して下さい</button></p> 
    </main> 
    <script> 
        var writer = {  // オブジェクト、プログラムに必要な情報の塊 
            company: "株式会社PLAN-B",  
            lastName : "山下",  
            firstName : "由依乃",  
        　　Job : "フロントエンドエンジニア"  
        }  
        function getAlert() {  // オブジェクトwriterの中のcompanyの値をalertに表示する処理 
            alert(writer.company); 
        } 
    </script> 
</body> 
</html>

<!DOCTYPE html>

<head>

<title>オブジェクトの取得</title>

</head>

<body>

<main>

<h1>オブジェクトの取得 </h1>

<p><button onclick="getAlert()">ボタンを押して下さい</button></p>

</main>

var writer = { // オブジェクト、プログラムに必要な情報の塊

company: "株式会社PLAN-B",

lastName : "山下",

firstName : "由依乃",

　　Job : "フロントエンドエンジニア"

}

function getAlert() { // オブジェクトwriterの中のcompanyの値をalertに表示する処理

alert(writer.company);

}

</script>

</body>

</html>

例えば上記では、scriptタグの中に「今この記事を書いている私の情報」が、writerというオブジェクトとして塊で記載されています。

オブジェクトとして記載したものは、jsで操作をすることができるので、ウェブページ上に表示したボタンをクリックすると、オブジェクトの中から会社名（company）を取得してアラートでページ上に表示してみましょう。

表示のプレビュー

JavaScriptのつまずきポイント「DOM」とはなにか？

ウェブサイト上にメッセージの表示をしたり、 HTMLのソース内に後からidやclassを追加したい場合も出てきます。
そんなときに出てくる単語「DOM（Document Object Model）」です。

JavaScriptはHTMLを直接操作することが出来ません。
そのため、別の方法でHTMLにアクセスして編集することが必要になります。
そんなときに使用するHTMLを JavaScriptから編集したり、追加したりすることが出来る技術がDOMです。

DOMでは、 HTMLのさまざまなものが要素オブジェクト、属性オブジェクト、テキストオブジェクトという形で「オブジェクト」として存在しています。

このDOMオブジェクトをDOMツリーと呼び、DOMツリーを形成する一つ一つのオブジェクトをノード（Node）と呼びます。

DOMツリーの内容がわかりさえすれば、JavaScriptでHTML文書内にある要素にアクセスが可能になります。

DOMの構成イメージ

<html> 
    <head> 
        <meta charset="utf-8"> 
  　</head> 
    <body> 
        <main> 
            <h1>DOMのイメージ</h1> 
            <p>DOMの構成をイメージするための、テスト文章です。</p> 
        </main> 
    </body> 
</html>

<html>

<head>

　</head>

<body>

<main>

<h1>DOMのイメージ</h1>

<p>DOMの構成をイメージするための、テスト文章です。</p>

</main>

</body>

</html>

html
　├ head
　│　└ meta
　└ body
　　　└ main
　　　　　├ h1
　　　　　└ p

上記例はシンプルなものですが、「html」という大きな枠があり、その中で「head」「body」の２つの枠に分けています。
h1の位置を示したい場合には、「“html”の中の“body”の中の“main”の中の“h1”」という形で指定を行います。

DOMの構成を追っていく他にも、idやclass、 bodyのような HTMLを構成しているタグに対してでも指定できます。
ここでは、getElementById(id)という要素を取得するためのメソッドを使って、指定したテキストを取得してみましょう。
メソッドとは、オブジェクトに属する処理や操作のことです。

DOMで文字列を取得するHTMLの見本

<!DOCTYPE html> 
<html lang="ja"> 
<head> 
    <meta charset="utf-8"> 
    <title>DOMの操作</title> 
</head> 
<body> 
    <main> 
        <h1>DOMの操作</h1> 
        <p id="text">DOMの構成をイメージするための、テスト文章です。</p> 
        <p><button onclick="getAlert()">ボタンを押して下さい</button></p> 
    </main> 
    <script> 
        var p = document.getElementById('text').textContent;　// id名textのテキストを取得 
        function getAlert() {  // pに代入された値をalertに表示する処理 
            alert(p); 
        } 
    </script> 
</body> 
</html>

<!DOCTYPE html>

<head>

<title>DOMの操作</title>

</head>

<body>

<main>

<h1>DOMの操作</h1>

<p id="text">DOMの構成をイメージするための、テスト文章です。</p>

<p><button onclick="getAlert()">ボタンを押して下さい</button></p>

</main>

var p = document.getElementById('text').textContent;　// id名textのテキストを取得

function getAlert() { // pに代入された値をalertに表示する処理

alert(p);

}

</script>

</body>

</html>

表示のプレビュー

JavaScriptの便利なライブラリ「jQuery」とはなにか？

ここまでで、簡単なJavaScriptの説明を行いました。
JavaScriptは便利ですが、記述が長くわかり辛い面があります。

例えば、DOMの説明で使用した“document.getElementById”。便利ですが覚えにくい・・・。
そんな、JavaScriptの書き方などを、使いやすく簡単にすることが出来るのが、jQueryというライブラリになります。
他にも、ブラウザ間で起こるJavaScriptの挙動の違いを合わせてくれることもjQueryのメリットです。

jQueryの使い方

jQueryはサイトに読み込むことで、使用が出来ます。
ファイルをダウンロードしてサーバ内でパスを指定して読み込むことも出来ますが、GoogleなどにホストされているCDNを使って読み込む方法が主流となっています。

CDNを使うことで、サーバーの負荷が軽くなり、データのダウンロードが安定するメリットがあります。

CDN使用例

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

1	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

jQueryファイルをホストしているCDNには下記のようなものがあります。
内容は同じですので、好みに合わせて使用してください。

◯jQuery
https://code.jquery.com/

◯Google
https://webkaru.net/jquery/google-hosted-file-load/

◯Microsoft
http://www.asp.net/ajaxlibrary/cdn.ashx

jQueryを使用するメリット – 記述の短縮

JavaScriptで何行も書く必要のがあったコードも、jQueryを使えば数行で同じ機能を作成することが可能になります。
前項で行ったDOMを用いたテキストの取得をjQueryで記述してみます。
ポイントは、idの指定箇所です。

JavaScriptの場合・・・document.getElementById(‘text’)
jQueryの場合・・・$(‘#text’)

jQueryの場合には、idは「#（シャープ）」。classは「.（ドット）」を指定することで、簡単に取得が可能になります。

DOMで文字列を取得するHTMLの見本（jQuery）

<!DOCTYPE html> 
<html lang="ja"> 
<head> 
    <meta charset="utf-8"> 
    <title>DOMのイメージ</title> 
</head> 
<body> 
    <main> 
        <h1>DOMのイメージ</h1> 
        <p id="text">DOMの構成をイメージするための、テスト文章です。</p> 
        <p><button onclick="getAlert()">ボタンを押して下さい</button></p> 
    </main> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script> 
        var p = $('#text').text(); // id名textのテキストを取得 
        function getAlert() {  // pに代入された値をalertに表示する処理 
            alert(p); 
        } 
    </script> 
</body> 
</html>

<!DOCTYPE html>

<head>

<title>DOMのイメージ</title>

</head>

<body>

<main>

<h1>DOMのイメージ</h1>

<p id="text">DOMの構成をイメージするための、テスト文章です。</p>

<p><button onclick="getAlert()">ボタンを押して下さい</button></p>

</main>

var p = $('#text').text(); // id名textのテキストを取得

function getAlert() { // pに代入された値をalertに表示する処理

alert(p);

}

</script>

</body>

</html>

jQueryを使用するメリット – アニメーションの作成

CSSを使用することでもアニメーションを作成することが出来ますが、 CSS3に対応していないブラウザでは利用することができません。
jQueryはJavaScriptのライブラリであるため、古いブラウザでも対応することが可能です。

アニメーションを実装するHTMLの見本

<!DOCTYPE html> 
<html lang="ja"> 
<head> 
    <meta charset="utf-8"> 
    <title>アニメーションのイメージ</title> 
</head> 
<body> 
    <main> 
        <h1>アニメーションのイメージ</h1> 
        <div id="fade"> 
            <p id="text">アニメーションを確認するための、テスト文章です。</p> 
        </div> 
        <p><button onclick="animFade()">ボタンを押して下さい</button></p> 
    </main> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script> 
        // ボタンをクリックしたら発動 
        function animFade() { 
            $('#fade').fadeOut(500);  // 0.5秒かけて要素をフェードアウトさせる　 
        }; 
    </script> 
</body> 
</html>

<!DOCTYPE html>

<head>

<title>アニメーションのイメージ</title>

</head>

<body>

<main>

<h1>アニメーションのイメージ</h1>

<p id="text">アニメーションを確認するための、テスト文章です。</p>

</div>

<p><button onclick="animFade()">ボタンを押して下さい</button></p>

</main>

// ボタンをクリックしたら発動

function animFade() {

$('#fade').fadeOut(500); // 0.5秒かけて要素をフェードアウトさせる　

};

</script>

</body>

</html>

表示のプレビュー

jQueryを使用するメリット – Ajaxのデータ読み込み

Ajax（Asynchronous JavaScript + XML）は、 JavaScriptとXMLを使って非同期にサーバとの間の通信を行うことをいいます。
通常、ウェブサイトの表示内容を更新するには通画面遷移やリロードすることでページをリフレシュさせる必要がありますが、ajaxを使用すればリロードせずにページの内容を変更することができます。

通信頻度を下げることでのサーバーの負荷軽減や、リロードの時間の解消によるUX(ユーザーエクスペリエンス)の向上などが利点としてあげられます。

Ajaxでテキストを取得するHTMLの見本 – HTML（本体）

<!DOCTYPE html> 
<html lang="ja"> 
<head> 
    <meta charset="utf-8"> 
    <title>Ajaxのデータ取得</title> 
</head> 
<body> 
    <main> 
        <h1>Ajaxのデータ取得</h1> 
        <p><button onclick="getAjax()">ボタンを押して下さい</button></p> 
        <div id="text"></div> 
    </main> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script> 
        function getAjax() {  // Ajaxで情報を読み込みする 
            $.ajax("ajax.html") 
                .done(function (data) {  // 通信が成功したときの処理 
                    // alert("success"); 
                    $('#text').html(data); 
                }) 
                .fail(function () {  // 通信に失敗したときしたときの処理 
                    alert("error"); 
                }) 
                .always(function () {  // 通信が完了したときの処理 
                    alert("complete"); 
                }); 
            }); 
        }; 
    </script> 
</body> 
</html>

<!DOCTYPE html>

<head>

<title>Ajaxのデータ取得</title>

</head>

<body>

<main>

<h1>Ajaxのデータ取得</h1>

<p><button onclick="getAjax()">ボタンを押して下さい</button></p>

</main>

function getAjax() { // Ajaxで情報を読み込みする

$.ajax("ajax.html")

.done(function (data) { // 通信が成功したときの処理

// alert("success");

$('#text').html(data);

})

.fail(function () { // 通信に失敗したときしたときの処理

alert("error");

})

.always(function () { // 通信が完了したときの処理

alert("complete");

});

};

</script>

</body>

</html>

Ajaxでテキストを取得するHTMLの見本 – HTML（読み込み用） ajax.html

<!DOCTYPE html> 
<html lang="ja"> 
<head> 
    <meta charset="utf-8"> 
    <title>Ajaxのイメージ</title> 
</head> 
<body> 
    <main> 
        <p>Ajaxテスト用のsampleファイルです。</p> 
    </main> 
</body> 
</html>

<!DOCTYPE html>

<head>

<title>Ajaxのイメージ</title>

</head>

<body>

<main>

<p>Ajaxテスト用のsampleファイルです。</p>

</main>

</body>

</html>

表示のプレビュー

「JavaScriptと仲良くなるための基本の「き」」まとめ

私がつまずいたJavaScriptのポイントを書き出してみましたがいかがでしょうか。
最初は、サンプルデータを使用したり、そこから改修を行ってJavaScriptに慣れていくと思います。

今回、出てくる用語それぞれを説明していませんが、「これはこういうことなのか」が分かれば、理解のスピードはグン！と上がります。

ウェブページの外観のデザインや使い心地をアップさせるためのプログラムがJavaScript
JavaScript処理に使う必要な値を集めた塊がオブジェクト
HTML上のソースコードを取得、編集するための技術がDOM
JavaScriptをより使いやすく、それだけでは行えない処理をするためのライブラリがjQuery

これだけまず覚えておけば、きっと検索にも役立つと思います。

WRITER

山下由依乃

システム開発部 Cast Me!グループ

フロントエンドエンジニアとしてHTMLでのサイト制作とCMSのサイト構築を担当。現在はシステム開発本部にて新規プロダクトのフロントエンドの開発に携わる。休日は光の戦士をしています。

DOWNLOAD

無料資料ダウンロードはこちら

CONTACT

お問い合わせはこちら

JSが苦手なフロントエンドエンジニアが語る 「JavaScriptと仲良くなるための基本の「き」」

JavaScriptとは？

JavaScriptを用いて出来ること

JavaScriptの使い方

JavaScriptのつまずきポイント「オブジェクト」とはなにか？

オブジェクトを取得して表示するHTMLの見本

表示のプレビュー

JavaScriptのつまずきポイント「DOM」とはなにか？

DOMの構成イメージ

DOMで文字列を取得するHTMLの見本

表示のプレビュー

JavaScriptの便利なライブラリ「jQuery」とはなにか？

jQueryの使い方

CDN使用例

jQueryを使用するメリット – 記述の短縮

DOMで文字列を取得するHTMLの見本（jQuery）

jQueryを使用するメリット – アニメーションの作成

アニメーションを実装するHTMLの見本

表示のプレビュー

jQueryを使用するメリット – Ajaxのデータ読み込み

Ajaxでテキストを取得するHTMLの見本 – HTML（本体）

Ajaxでテキストを取得するHTMLの見本 – HTML（読み込み用） ajax.html

表示のプレビュー

「JavaScriptと仲良くなるための基本の「き」」まとめ

山下 由依乃

RELATED POSTS

フロントエンドエンジニアから見たアジャイル開発

JSが苦手なフロントエンドエンジニアが語る「JavaScriptと仲良くなるための基本の「き」」

山下由依乃