Merge branch 'jsruby'

Author: osamu377

docs/01_00_JavaScriptを始める前に.html

@@ -35,7 +35,7 @@
             const path_to_root = "";
             const default_light_theme = "light";
             const default_dark_theme = "navy";
-            window.path_to_searchindex_js = "searchindex-4726fa95.js";
+            window.path_to_searchindex_js = "searchindex-ab132495.js";
         </script>
         <!-- Start loading toc.js asap -->
         <script src="toc-8186ac84.js"></script>
@@ -177,7 +177,7 @@ <h1 class="menu-title">留学生のためのJavaScript学習ガイド</h1>
                         <h1 id="オブジェクトの中を見てみてみよう"><a class="header" href="#オブジェクトの中を見てみてみよう">オブジェクトの中を見てみてみよう</a></h1>
 <h2 id="i-オブジェクトとは"><a class="header" href="#i-オブジェクトとは">I. オブジェクトとは？</a></h2>
 <p>オブジェクトについて、もう少し詳しく説明しましょう。</p>
-<p>ここまでは「オブジェクトを使う」という目的のために必要なことを、できるだけ簡単に説明してきました。いわば、自動販売機を外側から見ていたようなものです。</p>
+<p>ここまでは「オブジェクトを使う」という目的のために必要なことを、できるだけ簡単に説明してきました。いわば、自動販売機を<ruby>外側<rt>そとがわ</rt></ruby>から見ていたようなものです。</p>
 <p>自動販売機を使うには</p>
 <ol>
 <li>お金を入れて</li>
@@ -186,18 +186,18 @@ <h2 id="i-オブジェクトとは"><a class="header" href="#i-オブジェク
 </ol>
 <p>という点だけ理解していれば、ふつうは大丈夫でしょう。機械の蓋を開いて、中に何が入っているか見る必要はありません。しかし、それでは、中身をまったく知らない小さな子供のように、お菓子の自動販売機からジュースを出そうして、困ってしまうことになるかもしれません。</p>
 <p>なので、ここではちょっとだけ、オブジェクトの中身を見てみましょう。自動販売機だって、「この中にジュースの缶やボトルがたくさん入っているんだ」「入れたコインが何円かを計算する装置が入っているんだ」ということを知っていた方が、より間違いなく使えるというものです。</p>
-<p>心配しなくても、難しいことはありません。</p>
+<p>心配しなくても、<ruby>難<rt>むずか</rt></ruby>しいことはありません。</p>
 <p>一言でいうと、オブジェクトは <strong>「関係（かんけい）がある 情報を まとめたもの」</strong> です。</p>
-<p>ここでは、<strong>「プロフィールのカード」</strong> や <strong>「キャラクター」</strong> に例えて説明します。</p>
-<h2 id="ii-イメージは自己紹介じこしょうかいカード"><a class="header" href="#ii-イメージは自己紹介じこしょうかいカード">II. イメージは「自己紹介（じこしょうかい）カード」</a></h2>
-<p>例えば、ある留学生のことを変数（へんすう）で表してみます。すると、こんなふうになります。</p>
+<p>ここでは、<strong>「プロフィールのカード」</strong> や <strong>「キャラクター」</strong> に<ruby>例<rt>たと</rt></ruby>えて説明します。</p>
+<h2 id="ii-イメージは自己じこ紹介じこしょうかいカード"><a class="header" href="#ii-イメージは自己じこ紹介じこしょうかいカード">II. イメージは「<ruby>自己<rt>じこ</rt></ruby>紹介（じこしょうかい）カード」</a></h2>
+<p><ruby>例<rt>たと</rt></ruby>えば、ある留学生のことを<ruby>変数<rt>へんすう</rt></ruby>で表してみます。すると、こんなふうになります。</p>
 <ul>
 <li><code>let name = "マリア";</code></li>
 <li><code>let age = 20;</code></li>
 <li><code>let country = "ブラジル";</code></li>
 </ul>
 <p>しかし、これだと、情報がバラバラで管理（かんり）が大変です。そこで、これらを1枚のカードにまとめてみます。</p>
-<h2 id="iii-オブジェクトの書き方"><a class="header" href="#iii-オブジェクトの書き方">III. オブジェクトの書き方</a></h2>
+<h2 id="iii-オブジェクトの書かき方かた"><a class="header" href="#iii-オブジェクトの書かき方かた">III. オブジェクトの<ruby>書<rt>か</rt></ruby>き<ruby>方<rt>かた</rt></ruby></a></h2>
 <p>JavaScriptでは <code>{ }</code> を使って、このように書きます。</p>
 <pre><code class="language-javascript">const student = {
   name: "マリア",  // 名前
@@ -208,51 +208,51 @@ <h2 id="iii-オブジェクトの書き方"><a class="header" href="#iii-オブ
 </code></pre>
 <p>このように、<strong>いくつかの情報を1枚のカードにまとめたもの</strong> 、それが「オブジェクト」です。</p>
 <h2 id="iv-プロパティ"><a class="header" href="#iv-プロパティ">IV. プロパティ</a></h2>
-<p>カードの中の一つ一つの情報を <strong>「プロパティ」</strong> と言います。カードの中から情報を取り出すときは、<strong>「.（ドット）」</strong> を使います。</p>
+<p>カードの中の一つひとつの情報を <strong>「プロパティ」</strong> と言います。カードの中から情報を取り出すときは、<strong>「.（ドット）」</strong> を使います。</p>
 <ul>
 <li><code>student.name</code> → 「マリア」が出てくる！</li>
 <li><code>student.age</code> → 「20」が出てくる！</li>
 </ul>
-<p>ブラウザオブジェクトでの例：</p>
+<p>ブラウザオブジェクトでの<ruby>例<rt>れい</rt></ruby>：</p>
 <pre><code>document.body.style.backgroundColor = "red";
 </code></pre>
 <p>このコードは、documentオブジェクトの中のbodyオブジェクトの、backgroundColor（プロパティ）を“red“に変えるという命令です。</p>
-<h2 id="v-メソッド-特徴と動きをセットにできる"><a class="header" href="#v-メソッド-特徴と動きをセットにできる">V. メソッド: 「特徴」と「動き」をセットにできる</a></h2>
-<p>オブジェクトのすごいところは、<strong>データ（特徴）</strong> だけでなく、<strong>関数（動き）</strong> も一緒にまとめられることです。オブジェクトに含まれる関数を <strong>メソッド</strong> と言います。</p>
+<h2 id="v-メソッド-特徴と動うごきをセットにできる"><a class="header" href="#v-メソッド-特徴と動うごきをセットにできる">V. メソッド: 「特徴」と「<ruby>動<rt>うご</rt></ruby>き」をセットにできる</a></h2>
+<p>オブジェクトのすごいところは、<strong>データ（特徴）</strong> だけでなく、<strong><ruby>関数<rt>かんすう</rt></ruby>（<ruby>動<rt>うご</rt></ruby>き）</strong> も一緒にまとめられることです。オブジェクトに含まれる<ruby>関数<rt>かんすう</rt></ruby>を <strong>メソッド</strong> と言います。</p>
 <ul>
 <li><strong>プロパティ（特徴）：</strong> 名前、身長、色、値段など</li>
-<li><strong>メソッド（動き）：</strong> 走る、話す、計算するなど</li>
+<li><strong>メソッド（<ruby>動<rt>うご</rt></ruby>き）：</strong> 走る、話す、計算するなど</li>
 </ul>
-<h2 id="vi-ゲームのキャラクターで例えると"><a class="header" href="#vi-ゲームのキャラクターで例えると">VI. ゲームのキャラクターで例えると：</a></h2>
-<p>「オブジェクト」の考え方は、ゲームのキャラクターに例えると非常に分かりやすくなります。</p>
+<h2 id="vi-ゲームのキャラクターで例たとえると"><a class="header" href="#vi-ゲームのキャラクターで例たとえると">VI. ゲームのキャラクターで<ruby>例<rt>たと</rt></ruby>えると：</a></h2>
+<p>「オブジェクト」の考え方は、ゲームのキャラクターに<ruby>例<rt>たと</rt></ruby>えると非常に分かりやすくなります。</p>
 <ul>
-<li>オブジェクト： キャラクター自身（例：勇者アレン）</li>
-<li>プロパティ： ステータス（例：hp や name）</li>
-<li>メソッド： 行動（例：attack() や heal()）</li>
+<li>オブジェクト： キャラクター自身（<ruby>例<rt>れい</rt></ruby>：<ruby>勇者<rt>ゆうしゃ</rt></ruby>アレン）</li>
+<li>プロパティ： ステータス（<ruby>例<rt>れい</rt></ruby>：hp や name）</li>
+<li>メソッド： 行動（<ruby>例<rt>れい</rt></ruby>：attack() や heal()）</li>
 </ul>
-<p>コードでの例:</p>
+<p>コードでの<ruby>例<rt>れい</rt></ruby>:</p>
 <pre><code class="language-javascript">const hero = {
   name: "Allen"      // 特徴（プロパティ）
   hp: 100,           // 特徴（プロパティ）
   level: 5,          // 特徴（プロパティ）
 
   attack: function() { 
-    alert("エイッ！と攻撃しました"); // 動き（メソッド）
+    alert("エイッ！と攻撃しました"); // &lt;ruby&gt;動&lt;rt&gt;うご&lt;/rt&gt;&lt;/ruby&gt;き（メソッド）
   }
 };
 
 </code></pre>
 <h2 id="vii-なぜオブジェクトを使うの"><a class="header" href="#vii-なぜオブジェクトを使うの">VII. なぜ「オブジェクト」を使うの？</a></h2>
-<p>世界にあるものは、すべて「名前」や「状態（じょうたい）」や「動き」を持っていますよね。</p>
+<p>世界にあるものは、すべて「名前」や「状態（じょうたい）」や「<ruby>動<rt>うご</rt></ruby>き」を持っていますよね。</p>
 <ul>
-<li><strong>車：</strong> 名前、色、スピード、ブレーキをかける動き</li>
-<li><strong>スマホ：</strong> モデル名、電池の残り、アプリを開く動き</li>
+<li><strong>車：</strong> 名前、色、スピード、ブレーキをかける<ruby>動<rt>うご</rt></ruby>き</li>
+<li><strong>スマホ：</strong> モデル名、電池の残り、アプリを開く<ruby>動<rt>うご</rt></ruby>き</li>
 </ul>
 <p>オブジェクトを使うと、<strong>現実（げんじつ）の世界と同じようにプログラムが書ける</strong> ので、複雑（ふくざつ）なアプリも作りやすくなるんです。</p>
 <blockquote class="blockquote-tag blockquote-tag-tip">
 <p class="blockquote-tag-title"><svg viewbox="0 0 16 16" width="18" height="18"><path d="M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z"></path></svg>Tip</p>
 <p><strong>「オブジェクト ＝ 便利な情報のセット」</strong> だと教えてあげてください。
-“Object“という英語を辞書で見ると、難しい漢字の「対象物（たいしょうぶつ）」と出てきます。プログラムでは、そう考えるより、<strong>「データとアクションをひとまとまりにしたもの」</strong> と覚えるのが近道です！</p>
+“Object“という英語を辞書で見ると、<ruby>難<rt>むずか</rt></ruby>しい漢字の「対象物（たいしょうぶつ）」と出てきます。プログラムでは、そう考えるより、<strong>「データとアクションをひとまとまりにしたもの」</strong> と覚えるのが<ruby>近道<rt>ちかみち</rt></ruby>です！</p>
 </blockquote>
 <p>オブジェクトのイメージはつかめたでしょうか？</p>
 <p>上で見た<code>student</code>や<code>here</code>のように、自分でオブジェクトを作ることもできます（その方法については、第５章で説明します）。でも、そのまえに、すでに用意されているオブジェクトを利用してみましょう。</p>
@@ -292,6 +292,22 @@ <h2 id="vii-なぜオブジェクトを使うの"><a class="header" href="#vii-
         <template id=fa-play><span class=fa-svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Free 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --><path d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"/></svg></span></template>
         <template id=fa-clock-rotate-left><span class=fa-svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --><path d="M75 75L41 41C25.9 25.9 0 36.6 0 57.9V168c0 13.3 10.7 24 24 24H134.1c21.4 0 32.1-25.9 17-41l-30.8-30.8C155 85.5 203 64 256 64c106 0 192 86 192 192s-86 192-192 192c-40.8 0-78.6-12.7-109.7-34.4c-14.5-10.1-34.4-6.6-44.6 7.9s-6.6 34.4 7.9 44.6C151.2 495 201.7 512 256 512c141.4 0 256-114.6 256-256S397.4 0 256 0C185.3 0 121.3 28.7 75 75zm181 53c-13.3 0-24 10.7-24 24V256c0 6.4 2.5 12.5 7 17l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-65-65V152c0-13.3-10.7-24-24-24z"/></svg></span></template>
 
+        <!-- Livereload script (if served using the cli tool) -->
+        <script>
+            const wsProtocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
+            const wsAddress = wsProtocol + "//" + location.host + "/" + "__livereload";
+            const socket = new WebSocket(wsAddress);
+            socket.onmessage = function (event) {
+                if (event.data === "reload") {
+                    socket.close();
+                    location.reload();
+                }
+            };
+
+            window.onbeforeunload = function() {
+                socket.close();
+            }
+        </script>
 
 
         <script>