はじめに
この記事では、 JavaScript を初めて学ぶ方向けに JavaScript コードの実装方法や実行されるタイミング、開発に便利なコンソールの使い方について解説します。
プログラミングはバグがつきものであり、コンソールへ値を出力したり、エラーを確認したりといったことは実際によく行います。学習においても、コンソールの確認方法をはじめに学ぶことはスムーズに学習を進める上でとても重要であり、初歩的なミスを検知する際にとても役に立ちます。
コンソールへの出力と確認は JavaScript でプログラミングを行う際の基本的な手法であり、 JavaScript を効率よく学ぶための最初のステップです。 JavaScript をこれから学ぶ方は、実際にコードを書いて動作確認することをオススメします。
この記事の対象者
- ウェブ制作初学者の方
- HTML、CSSについて基本的な知識がある方
- JavaScriptについて学びたいと考えている方
この記事で学べること
- script要素の記述場所についての違い
- インラインスクリプトと外部ファイルの特徴
- コンソールの出力と確認方法
JavaScriptの実装方法
JavaScript のコードをウェブページに実装する方法として、インラインスクリプトとして組み込む方法と外部ファイルとして組み込む方法があり、どちらも script 要素を HTML に配置します。まずは二つの特徴について解説します。
インラインスクリプトの特徴
インラインスクリプトとしての組み込みは、 JavaScript ファイルを作成せずにコードを HTML ファイル内に記述することができ、単一のファイルでコードが完結するため依存性が少ないというメリットがあります。
その半面で、複数のページで同じ処理を行う必要があるときにインラインスクリプトでコードを組み込んだ場合、それぞれの HTML ファイルに同じコードを記述する必要があるため、保守性が大きく損なわれることになります。また、インラインスクリプトのコードはキャッシュとして利用することができないというデメリットもあります。
インラインスクリプトでの実装は、特定のページのみで小規模なプログラムを組み込みたい場合に適していると言えるでしょう。続いて、外部ファイルの組み込みの特徴について解説します。
外部ファイルの特徴
外部ファイルでの組み込みは、 JavaScript コードを別のファイルとして管理し、 HTML からそのファイルを読み込むことでコードを実行します。これによりコードの再利用性や保守性が向上するため、規模の大きいプログラムを組み込む場合に適しています。
また、読み込まれた外部ファイルはウェブブラウザがキャッシュとして利用できるので、複数ページで同じ外部ファイルを読み込む場合でもファイルのダウンロード自体は一度で済みます。
欠点として、初回はファイルのダウンロードが必要になるのでウェブページの読み込みに時間がかかる可能性があります。
インラインスクリプトと外部ファイルの特徴は以上です。続いて、これらの組み込み方法について解説します。
script要素の使い方
script 要素は HTML に JavaScript コードを組み込むために使用される要素です。基本的な使い方について解説します。
インラインスクリプトの場合
インラインスクリプトとしての実装は、HTMLに script 要素を配置して script 要素内に直接 JavaScript コードを記述することで組み込むことができます。
<script>
// ここにJavaScriptコードを記述
</script>外部ファイルの場合
外部ファイルとしての実装は、「 .js 」という拡張子を付けたファイルを作成し、HTML に配置した script 要素の src 属性にファイルパスを指定することで組み込むことができます。
<!-- script.jsファイルの読み込み -->
<script src="script.js"></script>script要素の記述場所
script 要素は HTML ファイル内のどこにでも記述することができますが、一般的には head 要素内や body 要素の末尾に記述することが推奨されます。
<!DOCTYPE html>
<html>
<head>
<title>ウェブページ</title>
<script>
// ここにJavaScriptコードを記述
</script>
</head>
<body>
<!-- ここにコンテンツを配置 -->
<script>
// ここにJavaScriptコードを記述
</script>
</body>
</html>HTML の解析は通常、一行目から順番に解析が行われますが、 script 要素を発見した場合は HTML の解析が中断され、 JavaScript コードが実行された後に HTML の解析を再開します。
このような仕様により、 head 要素に script 要素を記述した場合と body 要素の末尾に記述した場合では実装方法に若干の違いがあります。それぞれの違いについて簡単に解説します。
head要素に記述した場合
head 要素内に script 要素を記述して DOM 操作を行う場合、 head 要素内に記述すると DOM ツリーが完全に構築される前にコードが実行されるため、 HTML 要素を取得することができません。この問題に対処するには、 DOMContentLoaded イベントの追加や defer 属性の設定など、少し工夫をする必要があります。
以下は head 要素内で DOM 操作を行う場合の例です。
<!DOCTYPE html>
<html>
<head>
<!-- defer属性を使用する場合 -->
<script src="script.js" defer></script>
<!-- DOMContentLoadedイベントを使用する場合 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
// DOM操作のコードを記述
});
</script>
</head>defer 属性は script 要素で使用できる属性の一つで、外部ファイルを非同期に読み込み、ウェブページの読み込みが完了するまで外部ファイルの実行を待ちます。 DOM ツリーが完全に構築されてから外部ファイルのコードが実行されるようになり、これにより HTML 要素を取得して DOM 操作を行うことができます。ちなみに、 defer 属性はインラインスクリプトの場合では使用できません。
script 要素で使用できる属性として、「 async 」属性というものがあります。外部ファイルを非同期に読み込むところは defer 属性と同じですが、async 属性はウェブページの読み込み完了を待たないという違いがあります。そのため、async 属性で読み込まれた外部ファイルに DOM 操作を行うためのコードが記述されている場合は HTML 要素の取得ができない可能性があることに注意が必要です。
DOMContentLoaded イベントは、HTML の解析が終わって DOM ツリーが構築された直後に発火（処理の実行）し、 CSS や画像といった HTML 以外のリソースの読み込みは待ちません。HTML 以外のリソースの読み込みを待つ場合は onload イベントに処理を登録する必要があります。
document オブジェクトや addEventListener() メソッドでのイベントの追加については別の記事で解説を予定しています。ここでは、 script 要素を head 要素内に配置した場合は HTML 要素を取得するために工夫が必要ということだけ理解していただけたら問題ないです。
続いて、 body 要素の末尾に script 要素を記述した場合について解説します。
body要素の末尾に記述した場合
body 要素の末尾に script 要素を記述した場合、HTML の解析がほぼ終了しているため、DOM ツリーの構築ができている状態でコードが実行されることになります。よって、 defer 属性や DOMContentLoaded イベントの追加を行わなくても DOM 操作を行うことができる場合があります。
<!DOCTYPE html>
<html>
<head>
<title>ウェブページ</title>
</head>
<body>
<!-- ここにコンテンツを配置 -->
<script>
// DOM操作のコードを記述
</script>
</body>
</html>注意点として、記述量が少なくなるので head 要素内に記述するよりも簡単に思うかもしれませんが、 DOM ツリーの構築が完全に終わっていることが保証されるわけではないため予期せぬ不具合を招く可能性があります。この対処には、結局 defer 属性や DOMContentLoaded イベントを使用することになります。
また、 body 要素の末尾で外部ファイルを読み込んだ場合はウェブページの読み込みがほとんど終わっているため、 defer 属性などによる非同期読み込みの恩恵があまり得られない可能性があります。
ウェブページの読み込み速度は SEO の評価対象になっており、非同期読み込みはウェブページの高速化に対するアプローチです。 JavaScript ファイルの読み込み完了も SEO の評価対象に含まれるため、 body 要素の末尾で多くの外部ファイルを読み込むことには注意が必要です。
script 要素の基本的な使い方について解説しました。続いて、コンソールについて解説します。
コンソールにデータを出力して確認する
プログラミング言語を学ぶ際、基本を学ぶための最初のステップとして「 Hello World 」という文字列を出力することが慣習となっています。ここではコンソールとメソッドの呼び出し方について学び、コンソールに対して Hello World を出力します。
コンソールについて
ウェブブラウザには、ウェブ開発者がウェブページやウェブアプリケーションのデバッグなどを行うための開発ツールが実装されています。コンソールは開発ツールの機能の一つで、これを使用してデータが意図したものであるかを確認したり、オブジェクトにどのようなプロパティやメソッドが定義されているかを調べたりすることができます。
JavaScript において、コンソールの利用はバグの原因を調査するために不可欠なツールであり、初学者がスムーズに学習を進める上でとても重要です。
メソッドの呼び出し方法
JavaScript はオブジェクト指向プログラミング言語であり、ほとんどのものがオブジェクトとして表現されています。そのうちの一つとして console オブジェクトというものがあり、 console オブジェクトに定義されているメソッドを呼び出すことでコンソールにデータを出力することができます。コンソールに値を出力する場合は以下のように記述します。
// オブジェクト名.メソッド名();
console.log(コンソールに出力する値);JavaScript では、ピリオド「 . 」を使用して任意のオブジェクトのプロパティやメソッドにアクセスできます。上記の例では、 console オブジェクトの log() メソッドを呼び出しています。
また、メソッドを実行するにはメソッド名の後に「 () 」を使用します。「 () 」を使用しない場合はプロパティとして解釈され、メソッドは実行されません。
引数について
メソッドの「 () 」内にデータを記述することで、メソッドはデータに応じた処理を行うことができます。「 () 」内に記述するデータのことを「 引数 」と言います。
また、JavaScript で文字列をデータとして扱う際は、文字列をシングルクォート「 ‘ 」やダブルクォート「 ” 」で囲う必要があります。
console.log('Hello World');上記のコードでは、 log() メソッドの引数に「 Hello World 」という文字列を渡しています。このコードを実行することで、「 Hello World 」という文字列が開発ツールのコンソールに表示されます。
log() メソッドに必要な引数は一つだけですが、メソッドによっては複数記述するものがあります。引数を複数記述する場合はカンマ「 , 」区切りで記述していきます。また、コードが詰まって可読性が悪いのでカンマの後に半角スペースを記述することが慣習です。
// オブジェクト名.メソッド名(引数, 引数, 引数, … );
myObject.myMethod(argument, argument, argument);文末のセミコロンについて
JavaScript では文の終わりにセミコロン「 ; 」を使用することが一般的です。セミコロンは文の終了を明示的に示します。JavaScript は自動的にセミコロンを挿入する仕組みが働くのでセミコロンは省略可能ですが、可読性や予期せぬエラーを避けるためにも省略しないことをオススメします。
JavaScript の最も基本的な構文について解説しました。続いて、コンソールの開き方について解説します。
コンソールの開き方
コンソールを開くには、まず開発ツールを開く必要があります。開発ツールを開く方法は、ショートカットキーで開く場合と右クリックのコンテキストメニューから開く場合があります。
ショートカットキーで開く場合はウェブブラウザを選択した状態で「 F12 」キーか「 Ctrl + Shift + I 」キーを押します。コンテキストメニューから開く場合はウェブブラウザの任意の HTML 要素の上で右クリックし、「 検証 」を選択します。環境によって若干の違いがあると思いますが、Google Chrome であれば以下のような画面が現れるかと思います。
初期状態では「 Elements 」タブが選択されているので、「 Console 」タブをクリックします。
コンソールでは JavaScript を実行することができます。試しに、コンソールに以下のコードを入力して「 Enter 」キーを押してみましょう。
console.dir(console);上記のコードは、 console オブジェクトのプロパティやメソッドの一覧をコンソールに表示するというものです。実行すると以下のように出力されます。
「 console 」の左に表示されている矢印をクリックすると一覧が表示されます。
各プロパティ名の右側に「 f 」のような記述があるものがメソッドになります。 console オブジェクトには log() メソッドや dir() メソッド以外にも様々なメソッドが定義されていることがわかります。メソッドの使い方については調べる必要がありますが、使いどころの分からないメソッドをあえて学習する必要はありません。メソッド名を忘れた場合や、オブジェクトのメソッドやプロパティを調べたい場合に console.dir() はとても便利なので覚えておくと良いでしょう。
少し話がそれましたが、本題の「 Hello Worldをコンソールに出力する 」という実装を行いましょう。
Hello Worldをコンソールに出力する
実際に手を動かしながらこの記事を読み進めている方であれば、すでに HTML や外部ファイルにコードを記述してコンソールでの確認ができているかも知れません。そういった方は読み飛ばして頂いて問題ないです。
ここではシンプルにインラインスクリプトで記述します。任意のディレクトリを作成し、ディレクトリ内に index.html を作成します。 index.html の内容は以下です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
<script>
console.log('Hello World');
</script>
</body>
</html>ウェブブラウザで index.html を表示させましょう。 body 要素内が script 要素だけなので何も表示されませんが、コンソールを開くと出力が確認できるかと思います。
上記では、 index.html の9行目の記述により console.log() メソッドが実行されていることが分かります。ちなみに、 console.log() メソッドの引数のシングルクォートを削除すると、Google Chrome では以下のように表示されます。
SyntaxError は構文が正しくないことを意味しており、上記の例では index.html の9行目の17文字目に問題があることを示しています。このように、コンソールはエラーの種類や問題のある場所を表示してくれるのでとても便利です。
最後に
JavaScript を初めて学ぶ方向けに、JavaScript コードの実装方法や実行されるタイミング、コンソールへの出力、開発ツールを使用したコンソールの確認方法について解説しました。
これらは JavaScript でプログラミングを行う際の基本的な手法であり、JavaScript を効率よく学ぶための最初のステップです。
script 要素をどこに記述するかについては、プロジェクトやチームでルールが定められている場合があります。当サイトでは解説の冗長さを防ぐためにインラインスクリプトでコードを記述する場合がありますが、初学者向けにオススメなのは head 要素内で defer 属性を設定して外部ファイルとしてコードを記述する方法です。この方法はページの表示速度を意識しているため、多くの場合で良い選択であり、学習の段階で慣れておくことをオススメします。
また、プログラミングはバグがつきものであり、コンソールへ値を出力したり、エラーを確認したりといったことは実際によく行います。学習においても、コンソールの確認方法をはじめに学ぶことはスムーズに学習を進める上でとても重要であり、初歩的なミスを検知する際にとても役に立ちます。
コンソールでバグを確認する方法が分かれば、あとは実践あるのみです。深い理解がなくても簡単な実装であればできてしまうところがJavaScriptの強みなので、JavaScript初学者の方は以下の記事を参考にしていろいろ遊んでみると良いと思います。
