評価の流れに関する図を追加

Author: chvmvd

docs/1-trial-session/05-expressions/addition-operator-evaluation.png

@@ -43,6 +43,8 @@ document.write(3 + 4 * 5);
 
 `3 + 4 * 5`の<Term>評価</Term>は、先に`4 * 5`が<Term>評価</Term>されて`20`になり、次に`3 + 20`が<Term>評価</Term>されることにより、`23`という<Term>値</Term>となると考えることができます。
 
+![3 + 4 * 5の評価](./operator-priority-evaluation.png)
+
 ## いろいろな<Term>演算子</Term>
 
 {/* prettier-ignore */}
@@ -67,6 +69,8 @@ document.write("Hello" + 1 + 2);
 
 `+`は、両辺が<Term>数値</Term>の場合のみ加算<Term>演算子</Term>として振る舞い、片方が<Term>数値</Term>で片方が<Term>文字列</Term>の場合は<Term>数値</Term>を<Term>文字列</Term>に変換してから<Term>文字列</Term>結合<Term>演算子</Term>として機能します。このため、最終的な<Term>式</Term>全体の<Term>評価</Term>結果は前者が`"7Hello"`、後者が`"Hello12"`となるのです。
 
+![3 + 4 + "Hello"と"Hello" + 1 + 2の評価](./addition-operator-evaluation.png)
+
 ### 代表的な演算子
 
 | 演算子 | 意味   | 例                                |

docs/1-trial-session/05-expressions/index.mdx

@@ -83,6 +83,9 @@ const canRideRollerCoasters = age >= 10 && height >= 120; // true
 
 次のコードは何を表示するでしょうか。そしてそれはなぜでしょうか。
 
+- JavaScript で、数値と論理値に比較<Term>演算子</Term>を適用すると、`true`は`1`として、`false`は`0`として比較されます。
+- `=`は代入演算子です。代入<Term>演算子</Term>の<Term>式</Term>が<Term>評価</Term>されると、右辺の<Term>値</Term>になります。
+
 {/* prettier-ignore */}
 ```javascript
 let takaoHeight = 599;
@@ -94,8 +97,16 @@ document.write(takaoHeight = everestHeight);
 
 <ViewSource url={import.meta.url} path="_samples/weird-comparison" />
 
-- JavaScript で、数値と論理値に比較<Term>演算子</Term>を適用すると、`true`は`1`として、`false`は`0`として比較されます。
-- `=`は代入演算子です。代入<Term>演算子</Term>の<Term>式</Term>が<Term>評価</Term>されると、右辺の<Term>値</Term>になります。
+<Answer>
+
+`<`の結合規則は左から右なので、`takaoHeight < everestHeight < fujiHeight`は`(takaoHeight < everestHeight) < fujiHeight`と解釈されることになります。
+まず`takaoHeight < everestHeight`が<Term>評価</Term>され、`true`になります。次に`true < fujiHeight`が<Term>評価</Term>されます。`true`は`1`として比較されるため、結果は`true`になります。
+
+![takaoHeight < everestHeight < fujiHeightの評価](./weird-comparison-evaluation.png)
+
+`takaoHeight = everestHeight`の評価結果は、右辺の評価結果である`8849`になります。
+
+</Answer>
 
 :::