Merge pull request #548 from ut-code/migrate-admonition-syntax

Migrate admonition syntax to v3 version

Author: chvmvd

docs/1-trial-session/02-html/index.mdx

@@ -36,7 +36,7 @@ VS Code の画面左端には、ファイル一覧が表示されています。
 
 <video src={openInBrowserVideo} controls />
 
-:::info 拡張子
+:::info[拡張子]
 
 VS Code 上で作成したファイルは `index.html` でした。しかしながら、Windows でフォルダの中身を見ると `index` しか表示されません（Mac の場合は正しく表示されます）。なぜでしょうか？
 
@@ -80,7 +80,7 @@ VS Code 上で作成したファイルは `index.html` でした。しかしな
 
 ![ファイルを保存する](./save-file.png)
 
-:::tip ショートカットキー
+:::tip[ショートカットキー]
 
 ショートカットキーがうまく押せませんか？ `command / Ctrl + S` はよく、「`command (macOS)` または `Ctrl (Windows)` キーと `S` キーを同時に押す」と言われますが、実は同時に押すと半分くらいの確率で失敗します。`command / Ctrl` キーを押した後、キーから指を離す前に `S` キーを押しましょう。
 

docs/1-trial-session/08-loop/index.mdx

@@ -61,7 +61,7 @@ document.write(sum);
 
 </Answer>
 
-:::tip 複合代入演算子
+:::tip[複合代入演算子]
 
 [**複合代入演算子**](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#%E4%BB%A3%E5%85%A5%E6%BC%94%E7%AE%97%E5%AD%90) は、計算と代入を同時に行うことができる演算子です。
 
@@ -160,7 +160,7 @@ for (let x = 0; x < 5; x += 1) {
 
 <ViewSource url={import.meta.url} path="_samples/nested-loop" />
 
-:::tip テンプレートリテラル
+:::tip[テンプレートリテラル]
 
 テンプレートリテラルは、文字列をプログラム中に記述する方法の一種です。ただ、文字列中に別の式を埋め込めるという特徴があります。
 
@@ -232,7 +232,7 @@ document.write(product);
 （ヒント: 変数の性質を利用します）
 :::
 
-:::tip 豆知識
+:::tip[豆知識]
 自然数`n`を`i`で割ったあまりは `n % i`で求められます。
 :::
 

docs/1-trial-session/09-functions/index.mdx

@@ -133,7 +133,7 @@ greet();
 
 この例における、`greet` <Term type="javascriptFunction">関数</Term>は、呼び出されるたびに `guestCount` に 1 を加えています。
 
-:::warning <Term type="javascriptVariable">変数</Term>の<Term type="javascriptScope">**スコープ**</Term>
+:::warning[<Term type="javascriptVariable">変数</Term>の<Term type="javascriptScope">**スコープ**</Term>]
 
 {/* prettier-ignore */}
 <Term type="javascriptScope">スコープ</Term>が終わった<Term type="javascriptVariable">変数</Term>は、その時点で破棄されます。

docs/1-trial-session/10-array/index.mdx

@@ -20,7 +20,7 @@ document.write(studentNames[2]); // 鈴木
 studentNames[1] = "内藤";
 ```
 
-:::warning 配列のインデックス
+:::warning[配列のインデックス]
 
 配列のインデックスは `0` から始まります。このため、`2` 番目の要素のインデックスは `1` で、`n` 番目の要素のインデックスは `n - 1` になります。
 
@@ -248,7 +248,7 @@ const scores = { math: 90, science: 80 };
 document.write(`${subject} の点数は ${scores[subject]} です。`); // math の点数は 90 です。
 ```
 
-:::tip オブジェクトのプロパティ
+:::tip[オブジェクトのプロパティ]
 
 オブジェクトのプロパティに数値は使用できません。それではなぜ、配列の場合は `studentNames[2]` のように記述できるのでしょうか。
 

docs/1-trial-session/11-object/index.mdx

@@ -22,7 +22,7 @@ const person = { name: "田中", age: 18 };
 
 ![プロパティ](properties.png)
 
-:::tip ほかの言語の経験者へ
+:::tip[ほかの言語の経験者へ]
 
 JavaScript の<Term type="javascriptObject">オブジェクト</Term>は、ほかの言語でいう**辞書**や**連想配列**、**Map** に近いものです。ただ、こういったものと比べ、JavaScript の<Term type="javascriptObject">オブジェクト</Term>は使用頻度が非常に高いです。
 
@@ -47,7 +47,7 @@ person.age += 1;
 document.write(person.age);
 ```
 
-:::tip プロパティの追加
+:::tip[プロパティの追加]
 プロパティは取得や変更のほかに、追加もできます。
 
 ```javascript
@@ -57,7 +57,7 @@ document.write(person.favoriteFood); // 餃子
 
 :::
 
-:::note <Term type="javascriptObject">オブジェクト</Term>とプリミティブ
+:::note[<Term type="javascriptObject">オブジェクト</Term>とプリミティブ]
 
 この章よりも前に扱ってきたような「それ以上分解できない」<Term type="javascriptValue">値</Term>のことを<Term type="javascriptPrimitive">**プリミティブ**</Term>といい、<Term type="javascriptPrimitive">プリミティブ</Term>でない値はすべて<Term type="javascriptObject">オブジェクト</Term>です。
 
@@ -81,7 +81,7 @@ const scores = { math: 90, science: 80 };
 document.write(`${subject} の点数は ${scores[subject]} です。`); // math の点数は 90 です。
 ```
 
-:::tip オブジェクトのプロパティ名
+:::tip[オブジェクトのプロパティ名]
 
 オブジェクトのプロパティ名に数値は使用できません。それではなぜ、配列の場合は `studentNames[2]` のように記述できるのでしょうか。
 

docs/1-trial-session/12-css/index.mdx

@@ -66,7 +66,7 @@ CSS を記述する際には、まずスタイルを適用する対象となる
 | `.element` | `class` 属性に `element` が含まれる要素 |
 | `element`  | タグ名が `element` である要素           |
 
-:::info 高度なセレクタ
+:::info[高度なセレクタ]
 
 また、セレクタをスペースで区切ると子孫要素、`>`で区切ると直属の子要素を表すことができます。そのまま繋げば and 条件とみなされます。
 
@@ -103,7 +103,7 @@ CSS の `{` から `}` で囲まれたブロックの中に、<Term type="cssPro
 
 :::
 
-:::tip HTMLの <Term type="styleAttribute">`style` 属性</Term>
+:::tip[HTMLの <Term type="styleAttribute">`style` 属性</Term>]
 `style.css` を作らずとも、 HTML 内に直接 CSS を指定することもできます。例えば、 `p` <Term type="element">要素</Term> の <Term type="styleAttribute"><code>style</code> 属性</Term>に `color: red;` を指定するとどうなるでしょうか。
 
 ```html title="index.html"
@@ -130,7 +130,7 @@ CSS の `{` から `}` で囲まれたブロックの中に、<Term type="cssPro
 
 CSS の<Term type="cssProperty">プロパティ</Term>には `color` (文字色) や `font-size` (文字サイズ) だけでなく、`background-color` (背景色)、`text-decoration` (文字装飾)等、数えきれないほどの種類が定義されています。
 
-:::tip どうやって調べたらいいの？
+:::tip[どうやって調べたらいいの？]
 
 プログラミングを始めたての間は、分からないことがあったときにどのように調べたら良いのか戸惑うことが多いと思います。そんなときは、次のような手順で調べてみましょう。例として、「文字を赤くする方法」を調べてみます。
 

docs/2-browser-apps/01-inspector/index.mdx

@@ -9,7 +9,7 @@ import { GrSelect } from "react-icons/gr";
 
 Google Chrome などのブラウザに搭載されている**開発者ツール**には、ウェブ開発をサポートする様々な機能が提供されています。
 
-:::info Google Chrome 以外の開発者ツール
+:::info[Google Chrome 以外の開発者ツール]
 
 Google Chrome 以外のブラウザにも開発者ツールは搭載されています。ほとんど同等の機能が提供されているので、基本的にはどれを使っても構いません。しかしながら、Google Chrome のものが最も多く使用されており、本カリキュラムでも基本的には Google Chrome を用いるものとします。
 
@@ -103,7 +103,7 @@ JavaScript の実行がブレークポイントを設定した地点に差し掛
 
 ![ステップ アウト](./step-out.png)
 
-:::tip `console.log`
+:::tip[`console.log`]
 
 デバッガを使わずに、`console.log` を使ってデバッグすることもできます。`console.log` は、ブラウザの開発者ツールの `Console` に値を出力する関数です。
 以下のプログラムは `x` と `y` の和を出力するプログラムですが、`console.log` を使ってプログラムの実行中に値の変化を確認したり、エラーが発生した際に原因を特定することができます。

docs/2-browser-apps/03-class/index.mdx

@@ -42,7 +42,7 @@ document.write(tanaka.age); // age プロパティのデフォルト値は 18
 
 ![クラスとインスタンス](./class-instance.png)
 
-:::tip `undefined` という値
+:::tip[`undefined` という値]
 
 上で定義した `Student` <Term type="javascriptClass">クラス</Term>には、デフォルト値の指定されていない<Term type="javascriptProperty">プロパティ</Term> `name` が存在します。`new Student` をした直後の<Term type="javascriptObject">オブジェクト</Term>の `name` <Term type="javascriptProperty">プロパティ</Term>の値はどうなっているのでしょうか。
 
@@ -101,7 +101,7 @@ tanaka.age = 18;
 tanaka.introduceSelf();
 ```
 
-:::tip メソッドやプロパティの表記と `prototype`
+:::tip[メソッドやプロパティの表記と `prototype`]
 
 多くの言語で、<Term type="javascriptClass">クラス</Term> `Class` の<Term type="javascriptMethod">メソッド</Term>や<Term type="javascriptProperty">プロパティ</Term> `method` を、`#` 記号を用いて `Class#method` と表記します。本資料では他言語の慣習に習い、この表記を用いるものとします。たとえば、上の例で定義されている<Term type="javascriptMethod">メソッド</Term>は `Student#introduceSelf` <Term type="javascriptMethod">メソッド</Term>です。
 
@@ -322,7 +322,7 @@ document.write(myBirthDay.getFullYear()); // 2014
 
 `getFullYear` <Term type="javascriptMethod">メソッド</Term>は、年となる数値を返す<Term type="javascriptMethod">メソッド</Term>です。
 
-:::tip `Object` クラス
+:::tip[`Object` クラス]
 
 JavaScript では、**全ての<Term type="javascriptObject">オブジェクト</Term>は[`Object` クラス](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object)を自動的に継承します**。このため、全ての<Term type="javascriptObject">オブジェクト</Term>は `Object` <Term type="javascriptClass">クラス</Term>の<Term type="javascriptMethod">メソッド</Term>を使用することができます。また、プリミティブな値でも、<Term type="javascriptMethod">メソッド</Term>を呼び出すと自動的に<Term type="javascriptObject">オブジェクト</Term>に変換されます。
 

docs/2-browser-apps/04-anonymous-function/index.mdx

@@ -43,7 +43,7 @@ JavaScript における関数式の構文は、次のとおりです。`=>` の
 }
 ```
 
-:::tip 無名関数を用いて関数定義を書き換える
+:::tip[無名関数を用いて関数定義を書き換える]
 
 通常の関数定義の構文は、ほとんど関数式を使用して書き換えることができます。次のプログラムにおいて、`add1` と `add2` はほとんど等価なものとみなすことができます。
 
@@ -59,7 +59,7 @@ const add2 = (a, b) => {
 
 :::
 
-:::tip アロー関数
+:::tip[アロー関数]
 
 この項で扱った無名関数式を、`=>` 記号が矢のように見えることから、<Term type="arrowFunction">**アロー関数**</Term>と呼ぶことがあります。JavaScript には、アロー関数の他にもう一つ、無名関数を記述する方法があります。
 
@@ -88,7 +88,7 @@ const pricesWithTax = originalPrices.map((price) => {
 document.write(pricesWithTax); // [110, 220, 330, 440, 550]
 ```
 
-:::tip プリミティブ値のラッパーオブジェクト
+:::tip[プリミティブ値のラッパーオブジェクト]
 
 数値や文字列、論理値には、それぞれ対応するクラスが存在し、そのクラスのメソッドが使用できます。[クラスとインスタンスの節](/docs/browser-apps/class/)でこうしたプリミティブ値に対して `toString` メソッドが使用できたのは、これらのクラスが `Object` クラスを継承しているからです。
 
@@ -121,7 +121,7 @@ const students = ["Hazel", "Dorian", "Scarlett", "Daisy"];
 // ここで HTML 要素を取得し、学生の名前をリストアイテムとして表示
 ```
 
-:::info ヒント
+:::info[ヒント]
 
 - `innerHTML` プロパティにより、HTML要素を取得・変更できます。
 - 箇条書きには `ul` タグや `li` タグを使用します。
@@ -152,7 +152,7 @@ if (/* すべての点数が 50 点以上なら */) {
 }
 ```
 
-:::info ヒント
+:::info[ヒント]
 
 「全ての要素が特定の条件を満たすかどうか」を調べるメソッドがあります。
 

docs/3-web-servers/01-wsl-setup/index.mdx

@@ -18,7 +18,7 @@ WSL のインストールは、10 分程度で終わる簡単な作業です。
 
 まずは `ターミナル` アプリを管理者として実行します。
 
-:::tip 管理者として実行
+:::tip[管理者として実行]
 
 `管理者として実行` メニューを使用してアプリを起動することで、アプリは強い権限を行使できるようになります。WSL のインストールにはこのような強い権限が必要なので、起動時に特殊な操作が必要になります。
 
@@ -67,7 +67,7 @@ WSL は、Windows から独立した別のコンピュータのように振舞
 
 ![WSL 側のファイルを Windows のエクスプローラーから表示する](./show-linux-files.png)
 
-:::info Windows10 を使っている場合の注意
+:::info[Windows10 を使っている場合の注意]
 
 Windows10 では上記のようにしても WSL 上にあるファイルを確認することができません。
 代わりに以下のようにします。