概要
JavaScriptを学習、理解を深めるため「JavaScript Primer 迷わないための入門書」を読み、
理解した内容等を記載していく。
「【JavaScript】JavaScript入門一覧」に他の記事をまとめています。
この記事で理解できること
- 値の評価とは
- ブラウザにおける値の評価、表示方法
前提
当記事における動作環境
- PC：MacBook
- コードエディタ：Visual Studio Code
- ブラウザ：Google Chrome
値の評価とは
- 入力した値を評価してその結果を返すこと。
評価(※Wikipedia一部参照)
数学や計算機科学において、変数に関連づけられた値などをもとに関数（関数 (数学)、関数 (プログラミング)）などの式・表現が表す値を計算すること。> あるいは、不等式により値の範囲を絞り込むこと。
ブラウザでJavaScriptのコードを評価する
ブラウザで評価する方法として、大きく分けると以下の方法がある。
- ブラウザの開発者コンソールを利用する。
- HTMLでJavaScriptのコードを読み込む。
ブラウザの開発者コンソールを利用する
- Google Chromeを開き、開発者コンソールを開く(
⌘ + option + i) - 以下のキャプチャのような
REPLと呼ばれる開発者向けの機能を使用することで簡単に評価を行える。
// 以下の例を開発者コンソールに入力してみる
1 + 2 + 3;
// => 6(計算結果を返している)
const name = "Taro";
// => undefined(JavaScriptにおける式は何らかの結果(値)を返す特性があり、明示的に何らかの値を返さない場合は、undefinedを返す)
console.log(name);
// => Taro
console.log("Hello JavaScript");
// => Hello JavaScript
// => undefined(console.logは、文字列を出力するという式(正式には式文)であり、値は返していないのでundefinedが返されている)
HTMLでJavaScriptのコードを読み込む
今回は例として任意の場所に「demo」というフォルダを作成し、demoフォルダ内に以下のファイルを作成した。
- index.html
- script.js
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>値の評価と表示</title>
</head>
<body>
<!-- 同一階層に存在する「script.js」を読み込んでいる -->
<script src="script.js"></script>
</body>
</html>
script.js
// 先ほどと同一の例を試すため以下のように作成する
// 「.js」ファイルから評価 + ブラウザで確認を行うには、Console APIを使用する必要がある
console.log(1 + 2 + 3);
const name = "Taro";
console.log(name);
console.log("Hello JavaScript");
作成したindex.htmlを右クリック→「開く」→「開発者コンソールを開く(⌘ + option + i)」
すると以下のような結果が開発者コンソールに表示されている。
console.log(1 + 2 + 3);
// => 6
const name = "Taro";
console.log(name);
// => Taro
console.log("Hello JavaScript");
// => Hello JavaScript
コードの評価とエラー
評価時には、構文の誤りなど様々な要因でエラーが発生し、大きく分けると以下2種類のエラーが存在する。
- 構文エラー
- 実行時エラー
構文エラー
- 書かれたコードの文法が間違っている場合に発生するエラー。
- エラーメッセージに
SyntaxErrorというキーワードが含まれていることが多い。
// 例：constというJavaScript側で予約済みキーワードを変数名に使用する
const const = "test1";
// => Uncaught SyntaxError: Unexpected token 'const'
実行時エラー
- プログラムを実行している最中に発生するエラー。
- 実行時（ランタイム）におきるエラーであるため、
ランタイムエラーと呼ばれることもある。 - エラーメッセージに
TypeErrorやReferenceErrorというキーワードが含まれていることが多い。
// console.log()をconsol.log(eがない)と存在しない関数を実行する
consol.log("test2");
// => Uncaught ReferenceError: consol is not defined
上記の例をはじめ、各種エラーメッセージにおける詳細については『JavaScript エラーリファレンス』などで確認できる。