---
# System prepended metadata

title: 値の評価と表示

---

# 値の評価と表示

値の評価とは、入力した値を評価してその結果を返すこと。

```javascript=
>> 1 // 値
1    // 評価

>> 1 + 1 // 値
2        // 評価
```

<br/>

## ブラウザでJavaScriptを実行する

### 1. ブラウザの開発者ツールのコンソール上でJavaScriptコードを評価する方法
ブラウザなど多くの実行環境には、コードを評価してその結果を表示するREPL（read–eval–print loop）と呼ばれる開発者向けの機能があります。

* Google Chrome検証ツールのショートカット
`F12` または `⌘` + `option` + `I`

<br/>

**コンソールでの実行例**
```javascript=
» const bookTitle = "JavaScript Primer"; // 値(変数宣言)
undefined // 評価

» bookTitle // 値
"JavaScript Primer" // 評価
```

**注意点**
`const`で定義した変数に再代入するとエラーになる。

```javascript=
» const bookTitle = "JavaScript Primer";
undefined
» const bookTitle = "JavaScript Primer";
SyntaxError: redeclaration of const bookTitle // エラー
```
ページをリロードすると宣言がリセットされる。

<br/>

### 2. HTMLファイルを作成しJavaScriptを読み込む方法

HTMLファイルとJavaScriptファイルの2種類を使い、JavaScriptのコードを実行する準備をしていきます。 必ず文字コード（エンコーディング）はUTF-8、改行コードはLFにしてファイルを保存してください。

**index.js**
```javascript=
1;
```

**index.html**
```htmlmixed=
<html>
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <script src="./index.js"></script> // JSを読み込む記述
</head>
<body></body>
</html>
```

<br/>

**ブラウザで作成したindex.htmlを開く方法**
* ブラウザにHTMLファイルをドラッグアンドドロップする
* ファイルメニューから"ファイルを開く"でHTMLファイルを選択する
* VSCodeの拡張機能(Live Server等)で開く
* ターミナルで開いている場合、pwdコマンドを使って表示されたPATHをURLに貼り付ける

<br/>

## Console API

`console.log(引数)`の引数にコンソール表示したい値を渡すことで、評価結果がコンソールに表示されます。

**index.js**
```javascript=
console.log(1); // => 1
```

<br/>

次のように引数に式を書いた場合は先に引数の式を評価してから、その結果をコンソールに表示します。 そのため、1 + 1 の評価結果として 2 がコンソールに表示されます。

**index.js**
```javascript=
console.log(1 + 1); // => 2
```

<br/>

同じように引数に変数を渡すこともできます。 この場合もまず先に引数である変数を評価してから、その結果をコンソールに表示します。

**index.js**
```javascript=
const total = 42 + 42; // 値(変数宣言)
console.log(total); // => 84
```

<br/>

Console APIは原始的なプリントデバッグとして利用できます。 「この値は何だろう」と思ったらコンソールに表示すると解決する問題は多いです。 

**index.js**
```javascript=
// 式の評価結果の例（コンソールには表示されない）
1; // => 1

const total = 42 + 42;
// 変数の評価結果の例（コンソールには表示されない）
total; // => 84

// Console APIでコンソールに表示する例
console.log("JavaScript"); // => "JavaScript"
```

<br/>

## コードの評価とエラー
新しいプログラミング言語を学ぶ際にはトライアンドエラー（試行錯誤）することはとても重要です。エラーには大きく分けて構文エラーと実行時エラーの2種類があります。

<br/>

### 1. 構文エラー
構文エラーは書かれたコードの文法が間違っている場合に発生するエラーです。

JavaScriptエンジンは、コードをパース（解釈）してから、プログラムとして実行できる形に変換して実行します。 コードをパースする際に文法の問題が見つかると、その時点で構文エラーが発生するためプログラムとして実行できません。

次のコードでは、関数呼び出しに)をつけ忘れているため構文エラーが発生します。

**index.js**
```javascript=
console.log(1; // => SyntaxError: missing ) after argument list
```

<br/>

次のコードでは、`const`を`cosnt`とタイプミスしているため構文エラーが発生しています。

**index.js**
```javascript=
cosnt a = 1; // => SyntaxError: Unexpected identifier 'a'
```

なぜこのようなエラーメッセージになるかというと、`cosnt`（`const`のタイプミス）はキーワードではないため、ただの変数名として解釈されます。 そのため、このコードは次のようなコードであると解釈され、そのような文法は認められないということで構文エラーとなっています。

<br/>

### 2. 実行時エラー(ランタイムエラー)
実行時エラーが発生した場合は、そのコードは構文としては正しい（構文エラーではない）のですが、別のことが原因でエラーが発生しています。

次のコードではxという存在しない変数を参照したため、ReferenceErrorという実行時エラーが発生しています。

**index.js**
```javascript=
const value = "値";
console.log(x); // => ReferenceError: x is not defined
```

実行時エラーは該当する箇所を実行するまで、エラーになるかがわからない場合も多いです。 実行時エラーは構文エラーに比べてエラーの種類も多く、その原因もプログラムの数だけあります。 

<br/>

**実行時エラーが発生した時の対処方法**
* エラーメッセージを読む
* エラーが発生した周辺をよく見る
* どこまで実行出来たか順に追う(デバッグする)
* ググる

<br/>

## まとめ
エラーがWebコンソールに表示されているならば、そのエラーは修正できます。 エラーを過度に怖がる必要はありません。エラーメッセージなどのヒントを使ってエラーを修正していけるようにしましょう。

[JavaScriptでconsole.log()を使うのはやめよう](https://qiita.com/baby-degu/items/1046763163bc794870ea)

**皆さんからもぜひ追記修正お願いします！**

---

### 使えそうなconsole.api
https://qiita.com/mtoyopet/items/7274761af5424cee342a

```javascript!
const foo = { name: "momoko", age: 29 };
const bar = { name: "takeshi", age: 34 };
const baz = { name: "saori", age: 15 };

//個数分console.logの記載をするのは面倒くさい...
console.log(foo);
console.log(bar);
console.log(baz);


❯ n sample.js
{ name: 'momoko', age: 29 }
{ name: 'takeshi', age: 34 }
{ name: 'saori', age: 15 }
```

オブジェクトに入れてあげると...
```javascript=
console.log({foo,bar,baz})

❯ n sample.js
{
  foo: { name: 'momoko', age: 29 },
  bar: { name: 'takeshi', age: 34 },
  baz: { name: 'saori', age: 15 }
}

```

cssの適用

```javascript
console.log("%c お友達！", "color: red; font- weight:bold");
```
console.logしたいデータがとても重要で目立たせたい場合は、「"%c + 文字列", "CSSスタイル"」でCSSスタイリングを指定することも可能

オブジェクトの状態をテーブルで表示

```javascript=
 console.table([foo, bar, baz]);

┌─────────┬───────────┬─────┐
│ (index) │   name    │ age │
├─────────┼───────────┼─────┤
│    0    │ 'momoko'  │ 29  │
│    1    │ 'takeshi' │ 34  │
│    2    │  'saori'  │ 15  │
└─────────┴───────────┴─────┘

```

[console.traceによる関数のトレース](https://www.sejuku.net/blog/96123#:~:text=console.trace%E3%81%AB%E3%82%88%E3%82%8B%E9%96%A2%E6%95%B0%E3%81%AE%E3%83%88%E3%83%AC%E3%83%BC%E3%82%B9)
```javascript=
function test1() {
  function test2() {
      console.trace();
  }
  test2();
}
  
  test1();

//Trace
    //at test2 (/Users/mh/work/front_end/react_1/sample.js:3:13)
    //at test1 (/Users/mh/work/front_end/react_1/sample.js:5:3)
    //at Object.<anonymous> (/Users/mh/work/front_end/react_1/sample.js:8:1)
```

