docs: add "Reading from Left to Right" section

fundamentals/code-quality/.vitepress/en.mts

@@ -86,6 +86,10 @@ function sidebar(): DefaultTheme.Sidebar {
                 {
                   text: "B. Simplifying Ternary Operators",
                   link: "/en/code/examples/ternary-operator"
+                },
+                {
+                  text: "C. Reading from Left to Right",
+                  link: "/en/code/examples/comparison-order"
                 }
               ],
               collapsed: true

fundamentals/code-quality/.vitepress/ja.mts

@@ -104,6 +104,10 @@ function sidebar(): DefaultTheme.Sidebar {
                 {
                   text: "B. 三項演算子をシンプルにする",
                   link: "/ja/code/examples/ternary-operator"
+                },
+                {
+                  text: "C. 左から右へ読めるようにする",
+                  link: "/ja/code/examples/comparison-order"
                 }
               ],
               collapsed: true

fundamentals/code-quality/.vitepress/ko.mts

@@ -98,6 +98,10 @@ function sidebar(): DefaultTheme.Sidebar {
                 {
                   text: "B. 삼항 연산자 단순하게 하기",
                   link: "/code/examples/ternary-operator"
+                },
+                {
+                  text: "C. 왼쪽에서 오른쪽으로 읽히게 하기",
+                  link: "/code/examples/comparison-order"
                 }
               ],
               collapsed: true

fundamentals/code-quality/.vitepress/zhHans.mts

@@ -98,6 +98,10 @@ function sidebar(): DefaultTheme.Sidebar {
                 {
                   text: "B. 简化三元运算符",
                   link: "/zh-hans/code/examples/ternary-operator"
+                },
+                {
+                  text: "C. 从左到右阅读",
+                  link: "/zh-hans/code/examples/comparison-order"
                 }
               ],
               collapsed: true

fundamentals/code-quality/code/examples/comparison-order.md

@@ -0,0 +1,53 @@
+# 왼쪽에서 오른쪽으로 읽히게 하기
+
+<div style="margin-top: 16px">
+<Badge type="info" text="가독성" />
+</div>
+
+범위를 확인하는 조건문에서 부등호의 순서가 자연스럽지 않으면, 코드를 읽는 사람이 조건의 의도를 파악하는 데 시간이 더 걸려요.
+
+## 📝 코드 예시
+
+다음 코드들은 값이 특정 범위 안에 있는지 확인하는 조건문이에요.
+
+```typescript
+if (a >= b && a <= c) {
+  ...
+}
+
+if (score >= 80 && score <= 100) {
+  console.log("우수");
+}
+
+if (price >= minPrice && price <= maxPrice) {
+  console.log("적정 가격");
+}
+```
+
+## 👃 코드 냄새 맡아보기
+
+### 가독성
+
+이 코드들은 논리적으로는 올바르지만, 읽을 때 자연스럽지 않아요. `a >= b && a <= c`처럼 작성하면 중간값인 `a`를 두 번 확인해야 해서, 코드를 읽는 사람이 조건을 이해하기 위해 더 많은 인지적 부담을 느껴요.
+
+수학에서 범위를 표현할 때처럼 `b ≤ a ≤ c` 형태로 왼쪽에서 오른쪽으로 자연스럽게 읽히면 더 직관적이에요.
+
+## ✏️ 개선해보기
+
+다음과 같이 범위의 시작점부터 끝점까지 왼쪽에서 오른쪽으로 읽히는 순서로 조건을 작성하면, 코드를 읽는 사람이 범위를 한눈에 파악할 수 있어요.
+
+```typescript
+if (b <= a && a <= c) {
+  ...
+}
+
+if (80 <= score && score <= 100) {
+  console.log("우수");
+}
+
+if (minPrice <= price && price <= maxPrice) {
+  console.log("적정 가격");
+}
+```
+
+이렇게 작성하면 `80 ≤ score ≤ 100`, `minPrice ≤ price ≤ maxPrice`처럼 수학의 부등식과 같은 형태로 읽혀서, 코드를 읽는 사람이 범위 조건을 직관적으로 이해할 수 있어요.

fundamentals/code-quality/en/code/examples/comparison-order.md

@@ -0,0 +1,53 @@
+# Make Comparisons Read from Left to Right
+
+<div style="margin-top: 16px">
+<Badge type="info" text="Readability" />
+</div>
+
+When the order of inequality operators in range-checking conditions is not natural, it takes more time for code readers to understand the intent of the condition.
+
+## 📝 Code Examples
+
+The following code examples check if values satisfy range conditions.
+
+```typescript
+if (a >= b && a <= c) {
+  ...
+}
+
+if (score >= 80 && score <= 100) {
+  console.log("Excellent");
+}
+
+if (price >= minPrice && price <= maxPrice) {
+  console.log("Affordable price");
+}
+```
+
+## 👃 Code Smell Detection
+
+### Readability
+
+While these code examples are logically correct, they don't read naturally. Writing conditions like `a >= b && a <= c` requires checking the middle value `a` twice, which makes readers' minds work harder to understand the condition.
+
+It would be more intuitive if it read naturally from left to right like mathematical range expressions: `b ≤ a ≤ c`.
+
+## ✏️ Improvement
+
+By writing conditions in an order that reads naturally from left to right (from range start to end), code readers can grasp the range at a glance.
+
+```typescript
+if (b <= a && a <= c) {
+  ...
+}
+
+if (80 <= score && score <= 100) {
+  console.log("Excellent");
+}
+
+if (minPrice <= price && price <= maxPrice) {
+  console.log("Affordable price");
+}
+```
+
+This way, conditions read like mathematical inequalities: `b ≤ a ≤ c`, `80 ≤ score ≤ 100`, `minPrice ≤ price ≤ maxPrice`, allowing code readers to intuitively understand range conditions.

fundamentals/code-quality/ja/code/examples/comparison-order.md

@@ -0,0 +1,53 @@
+# 左から右に読めるようにする
+
+<div style="margin-top: 16px">
+<Badge type="info" text="可読性" />
+</div>
+
+範囲チェックの条件文で不等号の順序が自然でないと、コードを読む人が条件の意図を理解するのに時間がかかります。
+
+## 📝 コード例
+
+以下のコードは、値が範囲条件を満たすかどうかをチェックします。
+
+```typescript
+if (a >= b && a <= c) {
+  ...
+}
+
+if (score >= 80 && score <= 100) {
+  console.log("優秀");
+}
+
+if (price >= minPrice && price <= maxPrice) {
+  console.log("適正価格");
+}
+```
+
+## 👃 コードの臭いを嗅ぎ取る
+
+### 可読性
+
+これらのコードは論理的には正しいですが、読む時に自然ではありません。`a >= b && a <= c`のように書くと、中間値の`a`を2回確認する必要があり、コードを読む人が条件を理解するために頭が複雑になります。
+
+数学で範囲を表現する時のように`b ≤ a ≤ c`の形で左から右に自然に読めると、より直感的です。
+
+## ✏️ 改善する
+
+次のように範囲の開始点から終点まで左から右に読める順序で条件を書くと、コードを読む人が範囲を一目で把握できます。
+
+```typescript
+if (b <= a && a <= c) {
+  ...
+}
+
+if (80 <= score && score <= 100) {
+  console.log("優秀");
+}
+
+if (minPrice <= price && price <= maxPrice) {
+  console.log("適正価格");
+}
+```
+
+このように書くと`b ≤ a ≤ c`、`80 ≤ score ≤ 100`、`minPrice ≤ price ≤ maxPrice`のように数学の不等式と同じ形で読めて、コードを読む人が範囲条件を直感的に理解できます。

fundamentals/code-quality/zh-hans/code/examples/comparison-order.md

@@ -0,0 +1,53 @@
+# 让比较从左到右阅读
+
+<div style="margin-top: 16px">
+<Badge type="info" text="可读性" />
+</div>
+
+在范围检查的条件语句中，如果不等号的顺序不够自然，代码阅读者理解条件意图就需要更多时间。
+
+## 📝 代码示例
+
+以下代码检查数值是否满足范围条件。
+
+```typescript
+if (a >= b && a <= c) {
+  ...
+}
+
+if (score >= 80 && score <= 100) {
+  console.log("优秀");
+}
+
+if (price >= minPrice && price <= maxPrice) {
+  console.log("合理价格");
+}
+```
+
+## 👃 代码异味检测
+
+### 可读性
+
+这些代码在逻辑上是正确的，但阅读起来不够自然。像 `a >= b && a <= c` 这样写需要检查中间值 `a` 两次，这让代码阅读者理解条件时感到复杂。
+
+如果能像数学中表示范围那样，按 `b ≤ a ≤ c` 的形式从左到右自然阅读，会更加直观。
+
+## ✏️ 改进方法
+
+按照从范围起点到终点、从左到右阅读的顺序编写条件，代码阅读者可以一眼看出范围。
+
+```typescript
+if (b <= a && a <= c) {
+  ...
+}
+
+if (80 <= score && score <= 100) {
+  console.log("优秀");
+}
+
+if (minPrice <= price && price <= maxPrice) {
+  console.log("合理价格");
+}
+```
+
+这样编写，条件读起来就像数学不等式：`b ≤ a ≤ c`、`80 ≤ score ≤ 100`、`minPrice ≤ price ≤ maxPrice`，让代码阅读者能够直观地理解范围条件。