「コード」という表記を「プログラム」に書き換え (#12)

chvmvd · web-flow · commit ff84d3535257 · 2024-06-18T23:56:43.000+09:00
diff --git a/docs/01-html/index.mdx b/docs/01-html/index.mdx
@@ -30,10 +30,10 @@ JavaScript は、ウェブサイトに動きを与えることができます。
 
 <video src={openJsfiddleVideo} controls />
 
-### JSFiddle で HTML のコードを書く
+### JSFiddle で HTML のプログラムを書く
 
-JSFiddle にアクセスすると画面左上に <Term>HTML</Term> のコードを書くことができます。
-次のコードを JSFiddle に貼り付けてください。
+JSFiddle にアクセスすると画面左上に <Term>HTML</Term> のプログラムを書くことができます。
+次のプログラムを JSFiddle に貼り付けてください。
 
 ```html
 <!doctype html>
@@ -52,17 +52,17 @@ JSFiddle にアクセスすると画面左上に <Term>HTML</Term> のコード
 
 ### 結果を確認する
 
-先ほど書いた <Term>HTML</Term> のコードを保存するために画面左上の `Save` というボタンを押してください。
+先ほど書いた <Term>HTML</Term> のプログラムを保存するために画面左上の `Save` というボタンを押してください。
 
-`Save` ボタンを押して保存すると、画面右下に <Term>HTML</Term> のコードを実行した結果が表示されます。
+`Save` ボタンを押して保存すると、画面右下に <Term>HTML</Term> のプログラムを実行した結果が表示されます。
 
 `こんにちは、世界！` と表示されているはずです。
 
 <video src={saveOnJsfiddleVideo} controls />
 
 ## HTML 要素
 
-次に、先ほど書いた HTML のコードの `こんにちは、世界！` を次のように `こんにちは、<strong>世界</strong>！` に書き換えてみてください。
+次に、先ほど書いた HTML のプログラムの `こんにちは、世界！` を次のように `こんにちは、<strong>世界</strong>！` に書き換えてみてください。
 
 ```html
 <!doctype html>
@@ -79,7 +79,7 @@ JSFiddle にアクセスすると画面左上に <Term>HTML</Term> のコード
 
 保存すると、`こんにちは、世界！` の `世界` のみが強調して表示されるはずです。
 
-![HTML 要素のサンプルコード](./html-element-sample-code.png)
+![HTML 要素のサンプルプログラム](./html-element-sample-code.png)
 
 `<strong>世界</strong>` の部分に注目してください。
 
@@ -92,7 +92,7 @@ HTML では、**タグ**というものを使うことで、文書に意味を
 
 ## HTML 属性
 
-次に、先ほど書いた HTML のコードの `こんにちは、<strong>世界</strong>！` を次のように `こんにちは、<a href="https://ja.wikipedia.org/"><strong>世界</strong></a>！` に書き換えてみてください。
+次に、先ほど書いた HTML のプログラムの `こんにちは、<strong>世界</strong>！` を次のように `こんにちは、<a href="https://ja.wikipedia.org/"><strong>世界</strong></a>！` に書き換えてみてください。
 
 {/* prettier-ignore */}
 ```html
@@ -110,7 +110,7 @@ HTML では、**タグ**というものを使うことで、文書に意味を
 
 保存すると、`世界` が Wikipedia へのハイパーリンクになるはずです。
 
-![HTML 属性のサンプルコード](./html-attribute-sample-code.png)
+![HTML 属性のサンプルプログラム](./html-attribute-sample-code.png)
 
 `<a href="https://ja.wikipedia.org/">～</a>` は `a` 要素です。
 `a` 要素は、ハイパーリンクを作成します。
@@ -126,7 +126,7 @@ HTML では、**タグ**というものを使うことで、文書に意味を
 
 ## HTML の文法
 
-それでは、はじめの HTML のコードをもう一度見直してみましょう。
+それでは、はじめの HTML のプログラムをもう一度見直してみましょう。
 
 ```html
 <!doctype html>
@@ -174,7 +174,7 @@ HTML では、**タグ**というものを使うことで、文書に意味を
 
 #### 3. 周辺知識を信頼できる情報源で調べる
 
-見つかったウェブサイトに掲載されているコードをもとに、信頼できる情報源を読みなおします。
+見つかったウェブサイトに掲載されているプログラムをもとに、信頼できる情報源を読みなおします。
 HTML、CSS、JavaScript の場合は、[MDN](https://developer.mozilla.org/ja/) が便利でしょう。
 例えば「HTML 強調」と調べて紹介されるのは `strong` <Term>要素</Term>なので、MDN でこの<Term>要素</Term>について調べておきましょう。
 
diff --git a/docs/02-css/index.mdx b/docs/02-css/index.mdx
@@ -13,9 +13,9 @@ import writeCssCodeVideo from "./write-css-code.mp4";
 
 まずは、CSS を用いて `こんにちは、世界！` の文字を赤くしてみましょう。
 
-次の HTML のコードと CSS のコードを JSFiddle に貼り付けてください。
+次の HTML のプログラムと CSS のプログラムを JSFiddle に貼り付けてください。
 
-```html title="HTML のコード"
+```html title="HTML のプログラム"
 <!doctype html>
 <html lang="ja">
   <head>
@@ -28,7 +28,7 @@ import writeCssCodeVideo from "./write-css-code.mp4";
 </html>
 ```
 
-```css title="CSS のコード"
+```css title="CSS のプログラム"
 #greeting {
   color: red;
 }
@@ -40,14 +40,14 @@ import writeCssCodeVideo from "./write-css-code.mp4";
 
 ## CSS の仕組み
 
-先ほどのコードを詳しく見ていきます。
+先ほどのプログラムを詳しく見ていきます。
 
 ### `id` 属性の指定
 
 CSS を記述する際には、まずスタイルを適用する対象となる HTML 要素を指定する必要があります。
 このために、スタイルを適用する対象となる HTML 要素に `id` 属性を指定します。
 
-先ほどの例では、HTML のコードで `p` 要素に対して、`greeting` という `id` 属性を指定しました。
+先ほどの例では、HTML のプログラムで `p` 要素に対して、`greeting` という `id` 属性を指定しました。
 
 ```html
 <p id="greeting">こんにちは、世界！</p>
@@ -58,7 +58,7 @@ CSS を記述する際には、まずスタイルを適用する対象となる
 次に、CSS でどの HTML 要素に対してスタイルを適用するのかを指定します。
 ここで、使用するのが**セレクタ**です。
 
-先ほどの例では、CSS のコードで `#greeting` のように書くことで、`greeting` という `id` 属性を持つ HTML 要素に対してスタイルを適用するように指定しています。
+先ほどの例では、CSS のプログラムで `#greeting` のように書くことで、`greeting` という `id` 属性を持つ HTML 要素に対してスタイルを適用するように指定しています。
 
 ```css
 #greeting {
diff --git a/docs/03-javascript/index.mdx b/docs/03-javascript/index.mdx
@@ -13,7 +13,7 @@ import writeJavascriptCodeVideo from "./write-javascript-code.mp4";
 
 <Term>JavaScript</Term> を用いて画面に `こんにちは、世界！` と表示してみましょう。
 
-次の JavaScript のコードを JSFiddle に貼り付けてください。
+次の JavaScript のプログラムを JSFiddle に貼り付けてください。
 
 ```javascript
 document.write("こんにちは、世界！");
diff --git a/docs/04-operators/index.mdx b/docs/04-operators/index.mdx
@@ -4,15 +4,15 @@ title: 値と演算子
 
 ## 値
 
-次のコードを実行すると、`こんにちは、世界！` と画面に表示されました。
+次のプログラムを実行すると、`こんにちは、世界！` と画面に表示されました。
 
 ```javascript
 document.write("こんにちは、世界！");
 ```
 
 `"こんにちは、世界！"` や `"Hello World!"` などのように `"` (ダブルクォーテーション) で囲まれたものを、**文字列**と呼びます。<Term>文字列</Term>は、**値**の一種です。
 
-次のコードを実行すると、`3` と画面に表示されます。
+次のプログラムを実行すると、`3` と画面に表示されます。
 
 ```javascript
 document.write(3);
@@ -27,7 +27,7 @@ document.write(3);
 **演算子**を用いると、<Term>値</Term>を用いて計算をすることができます。
 
 例えば `+` (加算演算子) を使うと、2 つの<Term>数値</Term>を足すことができます。
-次のコードを実行すると、`7` と画面に表示されます。
+次のプログラムを実行すると、`7` と画面に表示されます。
 
 ```javascript
 document.write(3 + 4); // 7
@@ -51,7 +51,7 @@ document.write(3 + 4); // 7
 
 数学の計算と同様に、`*` は `+` よりも優先順位が高く設定されています。
 
-そのため、次のコードを実行すると、先に `4 * 5` が計算されて `20` になり、次に `3 + 20` が計算されて `23` という<Term>値</Term>となります。
+そのため、次のプログラムを実行すると、先に `4 * 5` が計算されて `20` になり、次に `3 + 20` が計算されて `23` という<Term>値</Term>となります。
 
 ```javascript
 document.write(3 + 4 * 5);
diff --git a/docs/09-dom/index.mdx b/docs/09-dom/index.mdx
@@ -14,7 +14,7 @@ HTML の要素を JavaScript で直接操作することができます。
 
 準備として、下のような HTML を用意しましょう。
 
-```html title="HTML のコード"
+```html title="HTML のプログラム"
 <!doctype html>
 <html lang="ja">
   <head>
@@ -33,19 +33,19 @@ HTML の要素を JavaScript で直接操作することができます。
 ![こんにちは、世界！と表示された画面](./before-change.jpg)
 
 では、この ウェブサイトの HTML 要素を JavaScript を使って操作してみましょう。
-下記の JavaScript のコードを書いて実行してください。
+下記の JavaScript のプログラムを書いて実行してください。
 
 ```js
 document.getElementById("greeting").textContent = "こんばんは、世界！";
 ```
 
 <ViewSource url={import.meta.url} path="_samples/get-element-by-id" />
 
-すると、HTML のコードを書き換えていないのにもかかわらず、テキストが `こんばんは、世界！` に変わりました。
+すると、HTML のプログラムを書き換えていないのにもかかわらず、テキストが `こんばんは、世界！` に変わりました。
 
 ![こんばんは、世界！と表示された画面](./changed-by-dom.jpg)
 
-上記のコードの各部分について説明します。
+上記のプログラムの各部分について説明します。
 
 - `document.getElementById("greeting")` の部分で、`id` 属性が `greeting` である要素を取得しています。
 - `.textContent` と書くことで要素の中身のテキストにアクセスでき、テキストの取得や変更が行えます。ここでは `こんにちは、世界！` という文字列に変更しています。
@@ -54,7 +54,7 @@ document.getElementById("greeting").textContent = "こんばんは、世界！";
 
 CSS の章で扱った「色」や「文字サイズ」などのスタイルも JavaScript から操作することができます。
 
-下記のコードを実行してみましょう。
+下記のプログラムを実行してみましょう。
 
 ```js
 document.getElementById("greeting").style.backgroundColor = "red";
diff --git a/docs/10-events/index.mdx b/docs/10-events/index.mdx
@@ -20,7 +20,7 @@ import projectMovieForDom from "./project-movie-for-dom.mp4";
 <button id="greet-button" type="button">クリック</button>
 ```
 
-次に、ボタンがクリックされたときに実行される JavaScript のコードを書いていきます。
+次に、ボタンがクリックされたときに実行される JavaScript のプログラムを書いていきます。
 
 ```javascript
 function clicked() {
diff --git a/docs/11-project/index.mdx b/docs/11-project/index.mdx
@@ -86,7 +86,7 @@ function greet() {
 setInterval(greet, 1000);
 ```
 
-このコードを実行すると、1 秒ずつ画面に `<p>Hello World</p>` が書き加えられていきます。
+このプログラムを実行すると、1 秒ずつ画面に `<p>Hello World</p>` が書き加えられていきます。
 
 - ボタン<Term>要素</Term>がクリックされたら `setInterval` <Term>関数</Term>を実行し、タイマーを開始しましょう。
 
