# 値の評価と表示
値の評価とは、入力した値を評価してその結果を返すこと。
```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)
```
Sign in with Wallet
Connect another wallet