Fix links

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

@@ -232,7 +232,7 @@ document.write(`<p>空の配列の最大値は ${findMaxNumber([])} です。</p
 <!-- オブジェクトはまだ扱っていないためコメントアウト
 ## 配列とオブジェクト
 
-配列はオブジェクトの一種です。しかしながら、JavaScript のオブジェクトとは、[オブジェクトの節](../../1-trial-session/11-object/index.md)で扱ったように、プロパティ名とプロパティ値の組み合わせでした。
+配列はオブジェクトの一種です。しかしながら、JavaScript のオブジェクトとは、[オブジェクトの節](/docs/trial-session/object/)で扱ったように、プロパティ名とプロパティ値の組み合わせでした。
 
 配列もこの原則に従って動作しています。次の図に示すように、配列とは、各要素のインデックスがプロパティ名になっているオブジェクトだと考えることができるのです。
 

docs/2-browser-apps/02-reference/index.md

@@ -4,7 +4,7 @@ title: オブジェクトの参照
 
 ## 参照
 
-[オブジェクト](../../1-trial-session/11-object/index.md)で扱ったように、JavaScript の値はオブジェクトとプリミティブに分けられます。前回は、プリミティブを「それ以上分解できない値」のように説明しました。もう少し詳しくみてみましょう。
+[オブジェクト](/docs/trial-session/object/)で扱ったように、JavaScript の値はオブジェクトとプリミティブに分けられます。前回は、プリミティブを「それ以上分解できない値」のように説明しました。もう少し詳しくみてみましょう。
 
 ![オブジェクトとプリミティブ](../../1-trial-session/11-object/value-types-with-object.drawio.svg)
 
@@ -48,7 +48,7 @@ const person = {
 };
 ```
 
-[以前](../../1-trial-session/11-object/index.md)にも記載した通り、オブジェクトのプロパティ名として使用可能なのは文字列のみですが、プロパティの値としては任意の JavaScript の値が使用できるのでした。
+[以前](/docs/trial-session/object/)にも記載した通り、オブジェクトのプロパティ名として使用可能なのは文字列のみですが、プロパティの値としては任意の JavaScript の値が使用できるのでした。
 
 オブジェクトがネストされている場合、次のようにプロパティの値として別のオブジェクトへの参照が格納されていると考えることができます。
 
@@ -74,7 +74,7 @@ document.write(tanaka.age);
 
 <ViewSource url={import.meta.url} path="_samples/object-mutated-by-function" />
 
-このコードは、[オブジェクト](../../1-trial-session/11-object/index.md)の項で扱った課題でした。実はこのコードには問題があり、`tanaka` に対して `incrementAge` を適用すると、関数が適用された `tanaka` にも影響が及んでしまいます。これは、関数に渡される値はオブジェクトへの参照で、このオブジェクトは呼び出し元の変数が参照するものと同一のものだからです。
+このコードは、[オブジェクト](/docs/trial-session/object/)の項で扱った課題でした。実はこのコードには問題があり、`tanaka` に対して `incrementAge` を適用すると、関数が適用された `tanaka` にも影響が及んでしまいます。これは、関数に渡される値はオブジェクトへの参照で、このオブジェクトは呼び出し元の変数が参照するものと同一のものだからです。
 
 `incrementAge` 関数の実装を変更し、関数に渡したオブジェクトが書き換えられないようにしてください。
 

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

@@ -349,7 +349,7 @@ Answerタグもその時に追加してください。 -->
 
 ![HTMLDivElementの継承関係](./html-inheritance.drawio.svg)
 
-実は、[DOM](./../../1-trial-session/13-dom/index.md) の節で使用した `textContent` プロパティは、この `Node` クラスで定義されています。
+実は、[DOM](/docs/trial-session/dom/) の節で使用した `textContent` プロパティは、この `Node` クラスで定義されています。
 
 `HTMLDivElement` クラスを自分でインスタンス化し、`textContent` プロパティに適当な値を代入して、`document.body.appendChild` 関数を用いて、作成した `div` 要素を `body` 要素の中に追加しましょう。
 

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

@@ -4,7 +4,7 @@ title: 無名関数
 
 ## 無名関数
 
-[イベント](../../1-trial-session/14-events/index.md)の節で、関数もオブジェクトの一種であることを説明しました。このため、関数は通常の値と同じように変数やプロパティに代入したり、関数の引数や戻り値になったりできます。
+[イベント](/docs/trial-session/events/)の節で、関数もオブジェクトの一種であることを説明しました。このため、関数は通常の値と同じように変数やプロパティに代入したり、関数の引数や戻り値になったりできます。
 
 しかしながら、通常の記法で関数を記述することが煩わしい場合があります。イベントハンドラを登録する場合を考えてみましょう。
 
@@ -90,7 +90,7 @@ document.write(pricesWithTax); // [110, 220, 330, 440, 550]
 
 :::tip プリミティブ値のラッパーオブジェクト
 
-数値や文字列、論理値には、それぞれ対応するクラスが存在し、そのクラスのメソッドが使用できます。[クラスとインスタンスの節](../03-class/index.md)でこうしたプリミティブ値に対して `toString` メソッドが使用できたのは、これらのクラスが `Object` クラスを継承しているからです。
+数値や文字列、論理値には、それぞれ対応するクラスが存在し、そのクラスのメソッドが使用できます。[クラスとインスタンスの節](/docs/browser-apps/class/)でこうしたプリミティブ値に対して `toString` メソッドが使用できたのは、これらのクラスが `Object` クラスを継承しているからです。
 
 | プリミティブ値 | 対応するクラス                                                                                   |
 | -------------- | ------------------------------------------------------------------------------------------------ |

docs/3-web-servers/02-node-js/index.md

@@ -100,7 +100,7 @@ Windows 上での作業は、WSL のターミナルを利用するようにし
 
 ## Node.js で Hello World
 
-まずは、新しいフォルダを作成し、Visual Studio Code で開きます。Mac の場合は[はじめての Web 開発](../../1-trial-session/01-get-started/index.md)で作成した `Projects` フォルダの中に別のフォルダを作れば問題ありませんが、Windows の場合は WSL 上にフォルダを作成します。
+まずは、新しいフォルダを作成し、Visual Studio Code で開きます。Mac の場合は[はじめての Web 開発](/docs/trial-session/get-started/)で作成した `Projects` フォルダの中に別のフォルダを作れば問題ありませんが、Windows の場合は WSL 上にフォルダを作成します。
 
 :::info WSL 上にプロジェクトフォルダを作る
 
@@ -124,7 +124,7 @@ console.log("Hello World");
 
 ## Node.js のデバッグ
 
-[ブラウザの開発者ツールを利用する](../../2-browser-apps/01-inspector/index.md) 節で JavaScript のデバッグを行ったのと同様に、Node.js では、VS Code 標準の機能を用いてデバッグを行えます。
+[ブラウザの開発者ツールを利用する](/docs/browser-apps/inspector/) 節で JavaScript のデバッグを行ったのと同様に、Node.js では、VS Code 標準の機能を用いてデバッグを行えます。
 
 Node.js のデバッグを開始するには、ブレークポイント等を設定したうえで、`F5` キーを押します。初回はデバッグ構成を選択するメニューが出現するので、`Node.js` を選択しましょう。デバッグが開始されると、VS Code 下部の青いバーが橙色に変化します。`console.log` は `DEBUG CONSOLE` タブに出力されるので注意しましょう。
 

docs/3-web-servers/04-server/index.md

@@ -4,7 +4,7 @@ title: Express によるサーバー構築
 
 ## ウェブサイトが動作する仕組み
 
-[「Web プログラミングの基礎を学ぼう」](../../1-trial-session/index.md) の章では、ウェブサイトを表示するために HTML ファイルと JavaScript ファイルを作成し、ブラウザから開きました。しかしながら、通常のウェブサイトではこのような手順は踏まず、URL をブラウザに入力することにより閲覧することができます。
+[「Web プログラミングの基礎を学ぼう」](/docs/trial-session/) の章では、ウェブサイトを表示するために HTML ファイルと JavaScript ファイルを作成し、ブラウザから開きました。しかしながら、通常のウェブサイトではこのような手順は踏まず、URL をブラウザに入力することにより閲覧することができます。
 
 Web では、通常インターネットを介してデータをやり取りします。インターネットを人間が直接利用することはできないので、何らかのコンピューターを使用しなければなりません。このとき、通常は
 

docs/4-advanced/01-fetch-api/index.md

@@ -81,7 +81,7 @@ app.listen(3000);
 
 <ViewSource url={import.meta.url} path="_samples/send-post-request" />
 
-HTML のフォームで送ったものと同じ形式でデータを送信するには、[GET リクエストと POST リクエスト](../../3-web-servers/06-get-post/index.md)節で扱ったように、<Term type="httpHeaderBody">リクエストボディ</Term>が<Term type="queryString">クエリ文字列</Term>の形式になっている必要があります。[`URLSearchParams` クラス](https://developer.mozilla.org/ja/docs/Web/API/URLSearchParams)を用いると、<Term type="queryString">クエリ文字列</Term>を簡単に扱うことができます。この例では、<Term type="httpHeaderBody">リクエストボディ</Term>には `name=入力された名前&age=入力された年齢` といった文字列が格納されます。
+HTML のフォームで送ったものと同じ形式でデータを送信するには、[GET リクエストと POST リクエスト](/docs/web-servers/get-post/)節で扱ったように、<Term type="httpHeaderBody">リクエストボディ</Term>が<Term type="queryString">クエリ文字列</Term>の形式になっている必要があります。[`URLSearchParams` クラス](https://developer.mozilla.org/ja/docs/Web/API/URLSearchParams)を用いると、<Term type="queryString">クエリ文字列</Term>を簡単に扱うことができます。この例では、<Term type="httpHeaderBody">リクエストボディ</Term>には `name=入力された名前&age=入力された年齢` といった文字列が格納されます。
 
 ## <Term type="httpHeaderBody">リクエストボディ</Term>に <Term type="json">JSON</Term> を使用する
 
@@ -151,7 +151,7 @@ app.listen(3000);
 
 ### ヒント
 
-[掲示板を作ったとき](../../3-web-servers/06-get-post/index.md) と同じく、`messages` という配列をサーバー側に用意し、メッセージが送信されたらその配列に要素を追加するようにしましょう。
+[掲示板を作ったとき](/docs/web-servers/get-post/) と同じく、`messages` という配列をサーバー側に用意し、メッセージが送信されたらその配列に要素を追加するようにしましょう。
 
 ```javascript title="/server.js"
 const messages = [];

docs/4-advanced/02-bundler/index.md

@@ -21,7 +21,7 @@ JavaScript は、当初は Web サイトに簡易的な動きを追加させる
 
 ### <Term type="moduleBundler">モジュールバンドラ</Term>
 
-通常、規模の大きなプログラムは、見通しが良くなるよう複数のファイルに分割されます。HTML から複数の JavaScript を読み込むためには `script` タグを並べれば良いですが、[HTTP サーバー](../../3-web-servers/04-server/index.md)の節で学んだように、`script` タグの数だけ <Term type="httpRequestResponse">HTTP リクエスト</Term>が発行されてしまうため非効率的です。
+通常、規模の大きなプログラムは、見通しが良くなるよう複数のファイルに分割されます。HTML から複数の JavaScript を読み込むためには `script` タグを並べれば良いですが、[HTTP サーバー](/docs/web-servers/server/)の節で学んだように、`script` タグの数だけ <Term type="httpRequestResponse">HTTP リクエスト</Term>が発行されてしまうため非効率的です。
 
 [webpack](https://webpack.js.org) のような<Term type="moduleBundler" strong>モジュールバンドラ</Term>を用いることで、複数の JavaScript ファイルを統合できます。
 
@@ -88,7 +88,7 @@ dist/assets/index-44b5bae5.js        1.45 kB │ gzip: 0.75 kB
 
 これにより、カレントディレクトリに `dist` ディレクトリが作成され、<Term type="transpile">トランスパイル</Term>と<Term type="moduleBundler">バンドル</Term>の結果が格納されます。
 
-出力されたファイルを元のファイルと比較してみましょう。元の `index.html` や `main.js` が、変換された状態で出力されていることがわかります。ディレクトリごと [Netlify Drop](../../1-trial-session/16-deploy-application/index.md) などにアップロードすれば使用可能になるでしょう。
+出力されたファイルを元のファイルと比較してみましょう。元の `index.html` や `main.js` が、変換された状態で出力されていることがわかります。ディレクトリごと [Netlify Drop](/docs/trial-session/deploy-application/) などにアップロードすれば使用可能になるでしょう。
 
 <video src={buildVideo} controls />
 

docs/4-advanced/04-react/index.md

@@ -7,7 +7,7 @@ import componentRenderingVideo from "./component-rendering.mp4";
 
 ## 宣言的な UI
 
-これまで、JavaScript により HTML 要素を操作するために、[DOM](../../1-trial-session/13-dom/index.md) を用いることができることを学んできました。しかしながら、ナイーブな方法により DOM を使用すると、アプリケーションの規模の限界がすぐにやってきます。
+これまで、JavaScript により HTML 要素を操作するために、[DOM](/docs/trial-session/dom/) を用いることができることを学んできました。しかしながら、ナイーブな方法により DOM を使用すると、アプリケーションの規模の限界がすぐにやってきます。
 
 簡単な ToDo アプリケーションを例に考えてみましょう。
 
@@ -746,7 +746,7 @@ export default function App() {
 
 :::tip React とイミュータビリティ
 
-[オブジェクトの参照](../../2-browser-apps/02-reference/index.md)節で扱ったように、JavaScript オブジェクトは参照として扱われます。React では、**状態として保存されたオブジェクトの参照先への変更は許可されていません**。例えば、先ほどのプログラムの `addTodo` 関数と `removeTodo` 関数は、次のように書き換えることはできません。これは、この方法では React が状態が変化したことを検知できないからです。
+[オブジェクトの参照](/docs/browser-apps/reference/)節で扱ったように、JavaScript オブジェクトは参照として扱われます。React では、**状態として保存されたオブジェクトの参照先への変更は許可されていません**。例えば、先ほどのプログラムの `addTodo` 関数と `removeTodo` 関数は、次のように書き換えることはできません。これは、この方法では React が状態が変化したことを検知できないからです。
 
 ```tsx
 const addTodo = () => {

docs/6-exercise/1-basis-of-web/index.md

@@ -8,7 +8,7 @@ import Answer from "@site/src/components/Answer";
 import ViewSource from "@site/src/components/ViewSource";
 import BubbleSortVideo from "@site/docs/6-exercise/1-basis-of-web/bubble-sort-video.mp4";
 
-この章では教材の「[初めてのウェブ開発](../../1-trial-session/01-get-started/index.md)」から「[ウェブサイトの見た目を整える](../../1-trial-session/12-css/index.md)」までの内容を扱っています。
+この章では教材の「[初めてのウェブ開発](/docs/trial-session/get-started/)」から「[ウェブサイトの見た目を整える](/docs/trial-session/css/)」までの内容を扱っています。
 
 ---
 

docs/6-exercise/10-typescript/index.md

@@ -6,7 +6,7 @@ sidebar_position: 9
 import Answer from "@site/src/components/Answer";
 import ViewSource from "@site/src/components/ViewSource";
 
-この章では教材の「[TypeScript](../../4-advanced/03-typescript/index.md)」の内容を扱っています。
+この章では教材の「[TypeScript](/docs/advanced/typescript/)」の内容を扱っています。
 
 ---
 

docs/6-exercise/11-react/index.md

@@ -6,7 +6,7 @@ sidebar_position: 10
 import todoAppVideo from "./todo-app.mp4"
 import ViewSource from "@site/src/components/ViewSource";
 
-この章では教材の「[React](../../4-advanced/04-react/index.md)」の内容を扱っています。
+この章では教材の「[React](/docs/advanced/react/)」の内容を扱っています。
 
 ---
 
@@ -30,7 +30,7 @@ import ViewSource from "@site/src/components/ViewSource";
 
 いきなりデザインも機能も同時に本格的にするのは複雑なので、まずは最小限の機能に焦点を絞るのがよいでしょう。手始めに、カテゴリなどは考えず ToDo を追加・削除・編集するアプリを作ってみましょう。
 
-この教材の [React の章](../../4-advanced/04-react/index.md#課題-2)で簡単な ToDo アプリを実際に作っている箇所もあるので、そちらも参考にしてみましょう。
+この教材の [React の章](/docs/advanced/react/#課題-2)で簡単な ToDo アプリを実際に作っている箇所もあるので、そちらも参考にしてみましょう。
 
 #### ヒント２
 

docs/6-exercise/2-easy-apps/index.md

@@ -10,7 +10,7 @@ import calculatorVideo from "./calculator.mp4";
 import objectEventVideo from "./object-event.mp4";
 import drawingVideo from "./drawing.mp4";
 
-この章では教材の「[オブジェクト](../../1-trial-session/11-object/index.md)」から「[プロジェクト](../../1-trial-session/15-project/index.md)」までの内容を扱っています。
+この章では教材の「[オブジェクト](/docs/trial-session/object/)」から「[プロジェクト](/docs/trial-session/project/)」までの内容を扱っています。
 
 ---
 

docs/6-exercise/3-javascript/index.md

@@ -6,7 +6,7 @@ sidebar_position: 3
 import Answer from "@site/src/components/Answer";
 import ViewSource from "@site/src/components/ViewSource";
 
-この章では教材の「[ブラウザの開発者ツール](../../2-browser-apps/01-inspector/index.md)」から「[無名関数](../../2-browser-apps/04-anonymous-function/index.md)」までの内容を扱っています。
+この章では教材の「[ブラウザの開発者ツール](/docs/browser-apps/inspector/)」から「[無名関数](/docs/browser-apps/anonymous-function/)」までの内容を扱っています。
 
 ---
 

docs/6-exercise/5-browser-apps/index.md

@@ -8,7 +8,7 @@ import Answer from "@site/src/components/Answer";
 import timerVideo from "./timer.mp4";
 import flashcardVideo from "./flashcard.mp4";
 
-この章は教材の「[ブラウザで動作するアプリを構築しよう](../../2-browser-apps/index.md)」までの項目の総合問題です。
+この章は教材の「[ブラウザで動作するアプリを構築しよう](/docs/browser-apps/)」までの項目の総合問題です。
 
 ---