diff --git a/src/pages/drafts/tips/coding.mdx b/src/pages/drafts/tips/coding.mdx
new file mode 100644
index 0000000..f8960f8
--- /dev/null
+++ b/src/pages/drafts/tips/coding.mdx
@@ -0,0 +1,9 @@
+---
+layout: "@/layouts/MarkdownLayout.astro"
+---
+
+export const title = "きれいなコードってなに？";
+
+# {title}
+
+このセクションはまだ何も書かれていません。
diff --git a/src/pages/drafts/tips/developper-tools.mdx b/src/pages/drafts/tips/developper-tools.mdx
new file mode 100644
index 0000000..a089a18
--- /dev/null
+++ b/src/pages/drafts/tips/developper-tools.mdx
@@ -0,0 +1,7 @@
+---
+layout: "@/layouts/MarkdownLayout.astro"
+---
+
+export const title = "開発者ツール";
+
+# {title}
diff --git a/src/pages/tips/developper-tools.mdx b/src/pages/tips/developper-tools.mdx
deleted file mode 100644
index a089a18..0000000
--- a/src/pages/tips/developper-tools.mdx
+++ /dev/null
@@ -1,7 +0,0 @@
----
-layout: "@/layouts/MarkdownLayout.astro"
----
-
-export const title = "開発者ツール";
-
-# {title}
diff --git a/src/pages/tips/naming.mdx b/src/pages/tips/naming.mdx
index f60f180..c19e510 100644
--- a/src/pages/tips/naming.mdx
+++ b/src/pages/tips/naming.mdx
@@ -6,6 +6,10 @@
 
 # {title}
 
+## TOC
+
+## ストーリー
+
 この関数は現実世界のなにかを計算を表していますが、なんだと思いますか？
 
 ```js
@@ -48,3 +52,54 @@
 
 console.log(doSomething(1000)); // 1100
 ```
+
+<br />
+
+こうなると、この関数自体がなにをしているのかが明確になります。  
+`doSomething`という曖昧な名前も、なにをする関数なのかがわかる名前に変えたくなりますね。  
+引数の名前も同様に名前を変えてしまいましょう。
+
+```js "calculateMidnightTaxiFare" {3, 6}
+const 深夜料金倍率 = 1.1;
+
+function calculateMidnightTaxiFare(通常料金) {
+  return 通常料金 * 深夜料金倍率;
+}
+console.log(calculateMidnightTaxiFare(1000)); // 1100
+```
+
+## まとめ
+
+### マジックナンバーを避ける
+
+マジックナンバーとは、ソースコードの中に直接書かれた数値のことです。  
+コメントがない限り、その数値がなにを意味しているのかがわかりません。
+
+こういった数値には意味のある名前をつけて、他の人が見てもわかるようにしましょう。  
+ここを怠るとき、最終的に困るのはあなた自身です。
+
+```js "1.1" del={4} add={1,5} showLineNumbers=false
+const 深夜料金倍率 = 1.1;
+
+function doSomething(value) {
+  return value * 1.1;
+  return value * 深夜料金倍率;
+}
+```
+
+### 曖昧な名前を避ける
+
+変数名や関数名は、その名前から具体的にな意味がわかるようにしましょう。
+
+今回の例では、`doSomething`、すなわち「なにかをする」という名前は曖昧すぎます。  
+修正後の`calculateMidnightTaxiFare`、すなわち「深夜のタクシー料金を計算する」という名前は具体的でわかりやすいです。
+
+```js del={3,5} add={4,6} showLineNumbers=false
+const 深夜料金倍率 = 1.1;
+
+function doSomething(value) {
+function calculateMidnightTaxiFare(通常料金) {
+  return value * 深夜料金倍率;
+  return 通常料金 * 深夜料金倍率;
+}
+```