初めてのJavaScript！ウェブサイトでJavaScriptを動かすには？サンプルコードで手順を解説！

ウェブ

こんにちは。うしろの制作室です。
今回は、初心者でJavaScriptをウェブサイトで使用したいと思っている方向けに、どのようなことができるのかや、スクリプトを実装する手順について解説していこうと思います。

JavaScriptで何ができる？

WebサイトでJavaScript（以下：JS）を使用すると何ができるのでしょうか？
ある程度ウェブ制作を学んだ方はすでにご存知かもしれませんが、JSを使用することで、HTML、CSSだけで実装できないプログラムの部分やアニメーションなどを作ることが可能です！

ウェブサイトではユーザーの目に見える部分をフロントエンド、サーバー上で動いているプログラムなどのことをバックエンドと呼ぶことがあります。

JSはフロントエンドでも使用できるプログラミング言語で、HTMLやCSSを操作することも可能です。
また、JQueryなどのJSのライブラリを使用することで簡単に実装することもできます。

JavaScriptを書いてみよう！

準備

基本的なHTMLやCSSについての説明は割愛しますが、まずはエディターを開いて簡単な処理を実行させてみましょう！

今回はVSコード（Visual Studio Code）を使用して解説しています。

index.htmlを開いて以下のコードを準備しましょう。
bodyタグの背景の色を変えてh1タグを表示しています。CSSはStyleタグを使用し、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>

    <style>
        body {
            background-color: antiquewhite;
        }
    </style>
</head>

<body>
    <h1>初めてのJavaScript</h1>
</body>

</html>

※HTML表示画面

JSを読み込む

HTMLファイルにJSを読み込むには2種類あります。

  1. 外部ファイルを読み込む
  2. HTMLファイルに直接記述する

基本的に設定方法は変わりませんが、JSは<script>タグを使用して実装します。
※今回はscript.jsをhtmlファイルと同階層のディレクトリに設置し、相対パスで記述した例です。

<script src="script.js"></script>

JSの処理は一般的にbodyタグの内の最下部に記載することが多いです。
それはJSの処理のタイミングによりプログラムがうまく動作させるためであり、bodyタグの最下部に記載することで、HTML要素（divタグやpタグなどのエレメント）を読み込んだうえで処理することができるからです。

実際にscriptタグを記載したコードはこのような感じです。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        body {
            background-color: antiquewhite;
        }
    </style>
</head>

<body>
    <h1>初めてのJavaScript</h1>
    <script src="script.js"></script>
</body>

</html>

console.log()

それでは準備もできたことなので、実際にプログラムの処理を実行していきましょう。
とはいえ、JSでは様々なことができるのでまずは簡単なものから説明します。

console.log("処理が実行されました。");

こちらはコンソールに文字を出力するための処理です。
実際に画面上に表示するわけではないのですが、ブラウザのコンソール画面から文字を確認することが出できます。
script.jsの中にこの一文を記載して確認してみましょう。

こちらを記述すればブラウザのコンソール画面に『処理が実行されました。』と出力されるはずです。

ブラウザのコンソール画面はGoogle Chromeの場合、ブラウザを開いてF12キーを押すことで検証ツールが開くのでそこからコンソールタブをチェックしましょう。

画像のように右側の表示欄に、『処理が実行されました。』という文字が表示されていればうまく処理が実行できています！script.js:1と表示されているので、script.jsというファイルの1行目の処理が実行されなことが分かりますね。

もし表示されない場合は、scriptタグでうまくJSが読み込まれていない可能性が高いので、間違いがないか再度確認して見ましょう。

このconsole.log();という処理は、今試したようにプログラムがちゃんと動いているのかという確認をするときに記載したり、分岐処理での実行結果の確認、プログラムで使う変数などの値を確認するときに非常に便利でよく使用するものになります。必ず覚えておきましょう！

alert()

次に紹介するのは実際にサイトなどを閲覧しているときに、見たことがあるようなスクリプトになります！

let name = '太郎';
alert('こんにちは、' + name + 'さん！');

こちらをscript.jsの中に記載してブラウザで確認してみましょう。
※ちなみにletというのは変数というもので値を代入したりすることができるのですが、詳しくは別で解説しますので、一旦このような記述ができるということを覚えておきましょう。

こちらはブラウザ上でアラートを表示する機能になります！ブラウザによって表示画面は少し異なりますが、エラーを表示したり、確認画面を表示したりするときに使用され、実際に見たことがあるものではないでしょうか？

document.querySelector()

次はHTML要素と組み合わせて使用するスクリプトを紹介します。

まずはこちらのように、新しくidをつけた<button>タグとidをつけた<p>タグを記述します。
そして<script>タグの中に実際の処理を記載していきましょう。
今回はHTMLファイルに直接記述しました。script.jsの中に記載しても構いません。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        body {
            background-color: antiquewhite;
        }
    </style>
</head>

<body>
    <h1>初めてのJavaScript</h1>
    <button id="btn">クリックしてね</button>
    <p id="text">こんにちは！</p>

    <script src="script.js"></script>

    <script>
        document.querySelector('#btn').addEventListener('click', function () {
            document.querySelector('#text').textContent = 'JavaScriptが動いたよ！';
        });
    </script>
</body>

</html>

ボタンの見た目などはCSSで記載していないので、ブラウザによって異なるかもしれませんが、こんな感じの画面ができたでしょうか？

実際にボタンをクリックするとどのようなスクリプトになっているか分かるかと思いますが、HTML要素の<botton>タグをクリックすることで、<p>タグの中のテキストが変更される処理になっています。

document.querySelector('#btn').addEventListener('click', function () {
    document.querySelector('#text').textContent = 'JavaScriptが動いたよ！';
});

上記の内容は、document.querySelector(‘#btn’)がHTMLのid=”btn”と記載された要素を取得するという内容になっており、そのあとに続く、addEventListener(‘click’, function ()というのがクリックされたときに実行する処理というようになっています。

JSではクリックなどのユーザーの動作をイベントと呼んでおり、様々なイベントが用意されているのでそれに合わせて処理を実行することができます。

HTML要素を操作したり、内容を取得するには、【document.】というような記述になることが多くいのでこちらも覚えておきましょう。

イベント後の処理に記載されいてる.textContentというのは実際の<p>タグの中身のことになりますね。
ここの内容を変えることでクリックしたときに表示される文字を変更することもできます。

まとめ

まだまだJSでできることはたくさんあるのですが、
今回は一旦ここまでということで、どのようにJSを読み込むのかや、簡単にできることを紹介してきました。

実際は、JQueryなどのライブラリを使用して簡単に記述したり、外部ファイルを読み込ませてアニメーションなどを実装することも多いですが、今回紹介したものを覚えていると役に立つ機会も多いかと思いますので是非ご参考にしてください。

今回は初心者向けのものでしたが、中には3Dモデルを動かしたりできるJSなどもあります。JSを使ったWebサイト制作の中級編や上級編などもご紹介していきますのでそちらもよろしくお願いします！