refactor(use-case/ajaxapp): サンプルコードのディレクトリをexampleに移動

source/use-case/ajaxapp/display/README.md

@@ -52,7 +52,7 @@ const view = `
 
 <!-- `div#result` についてはno-use-prototype-hashのオプションで許可している。 -->
 
-[import, title:"index.html"](./src/index.html)
+[import, title:"index.html"](example/index.html)
 
 ここから、`div#result`要素の子要素としてHTML文字列を挿入することになります。
 [document.getElementById][]メソッドを使い、id属性が設定された要素にアクセスします。
@@ -143,9 +143,9 @@ result.innerHTML = view;
 これらの処理を前のセクションで作成した `fetchUserInfo` 関数の中で呼び出します。
 ここまでで、index.jsとindex.htmlは次のようになっています。
 
-[import, title:"index.js"](src/index.js)
+[import, title:"index.js"](example/index.js)
 
-[import, title:"index.html"](src/index.html)
+[import, title:"index.html"](example/index.html)
 
 アプリケーションを開いてボタンを押すと、次のようにユーザー情報が表示されます。
 
@@ -160,21 +160,21 @@ result.innerHTML = view;
 
 ここまでのアプリは次のURLで確認できます。
 
-- <https://jsprimer.net/use-case/ajaxapp/display/src/>
+- <https://jsprimer.net/use-case/ajaxapp/display/example/>
 
 <!-- sandpackの問題でindex.jsがscriptタグとは異なる読み方がされ、globalに関数が追加されない。そのためappendCodeでglobalThisに関数を追加する -->
 
 <!-- sandpack:{
   "files": {
     "/index.js": {
-      "path": "src/index.js",
+      "path": "example/index.js",
       "appendCode": "/* この行は本編とは無関係であるため無視してください。 */ window.fetchUserInfo = fetchUserInfo;"
     },
     "/index.html": {
-      "path": "src/index.html",
+      "path": "example/index.html",
       "active": true
     },
-    "/src/index.js": {
+    "/example/index.js": {
       "code": "/* このファイルは本編とは無関係のファイルなので無視してください。 本編のindex.jsは一つ上のディレクトリにあります */",
       "hidden": true
     }

source/use-case/ajaxapp/entrypoint/README.md

@@ -26,12 +26,12 @@ Webアプリケーションにおいては、常にHTMLドキュメントがエ
 エントリーポイントとして、まずは最低限の要素だけを配置したHTMLファイルを`index.html`というファイル名で作成しましょう。
 `body`要素の一番下で読み込んでいる`index.js`が、今回のアプリケーションの処理を記述するJavaScriptファイルです。
 
-[import, title:"index.html"](src/index.html)
+[import, title:"index.html"](example/index.html)
 
 次に同じディレクトリに`index.js`というファイルを作成します。
 `index.js`にはスクリプトが正しく読み込まれたことを確認できるよう、コンソールにログを出力する処理だけを書いておきます。
 
-[import, title:"index.js"](src/index.js)
+[import, title:"index.js"](example/index.js)
 
 ここでの`ajaxapp`ディレクトリのファイル配置は次のようになっていれば問題ありません。
 
@@ -118,20 +118,20 @@ JavaScriptとDOMはWebアプリケーション開発において切っても切
 
 ここまでのアプリは次のURLで確認できます。
 
-- <https://jsprimer.net/use-case/ajaxapp/entrypoint/src/>
+- <https://jsprimer.net/use-case/ajaxapp/entrypoint/example/>
 
 <!-- sandpackの問題でindex.jsがscriptタグとは異なる読み方がされ、globalに関数が追加されない。そのためappendCodeでglobalThisに関数を追加する -->
 
 <!-- sandpack:{
   "files": {
     "/index.js": {
-      "path": "src/index.js"
+      "path": "example/index.js"
     },
     "/index.html": {
-      "path": "src/index.html",
+      "path": "example/index.html",
       "active": true
     },
-    "/src/index.js": {
+    "/example/index.js": {
       "code": "/* このファイルは本編とは無関係のファイルなので無視してください。 本編のindex.jsは一つ上のディレクトリにあります */",
       "hidden": true
     }

source/use-case/ajaxapp/http/README.md

@@ -116,7 +116,7 @@ fetch(`https://api.github.com/users/${encodeURIComponent(userId)}`)
 
 ここまでの内容をまとめ、GitHubからユーザー情報を取得する関数を`fetchUserInfo`という名前で定義します。
 
-[import, index.js](src/index.js)
+[import, index.js](example/index.js)
 
 index.jsでは関数を定義しているだけで、呼び出しは行っていません。
 
@@ -127,7 +127,7 @@ index.jsでは関数を定義しているだけで、呼び出しは行ってい
 ボタンのclickイベントで`fetchUserInfo`関数を呼び出し、取得したいユーザーIDを引数として与えています。
 例として`js-primer-example`という書籍用に用意したGitHubアカウントを指定しています。
 
-[import, index.html](src/index.html)
+[import, index.html](example/index.html)
 
 準備ができたら、ローカルサーバーを立ち上げてindex.htmlにアクセスしましょう。
 ボタンを押すとHTTP通信が行われ、コンソールにステータスコードとレスポンスのログが出力されます。
@@ -181,21 +181,21 @@ XHRの詳しい使い方については、[XHRの利用についてのドキュ
 
 ここまでのアプリは次のURLで確認できます。
 
-- <https://jsprimer.net/use-case/ajaxapp/http/src/>
+- <https://jsprimer.net/use-case/ajaxapp/http/example/>
 
 <!-- sandpackの問題でindex.jsがscriptタグとは異なる読み方がされ、globalに関数が追加されない。そのためappendCodeでglobalThisに関数を追加する -->
 
 <!-- sandpack:{
   "files": {
     "/index.js": {
-      "path": "src/index.js",
+      "path": "example/index.js",
       "appendCode": "/* この行は本編とは無関係であるため無視してください。 */ window.fetchUserInfo = fetchUserInfo;"
     },
     "/index.html": {
-      "path": "src/index.html",
+      "path": "example/index.html",
       "active": true
     },
-    "/src/index.js": {
+    "/example/index.js": {
       "code": "/* このファイルは本編とは無関係のファイルなので無視してください。 本編のindex.jsは一つ上のディレクトリにあります */",
       "hidden": true
     }

source/use-case/ajaxapp/promise/README.md

@@ -61,7 +61,7 @@ function displayView(view) {
 
 ボタンのclickイベントで呼び出す関数もこれまでの`fetchUserInfo`関数から`main`関数に変更します。
 
-[import, title:"index.html"](./src/index.html)
+[import, title:"index.html"](./example/index.html)
 
 ## Promiseのエラーハンドリング {#error-handling}
 
@@ -185,11 +185,11 @@ async function main() {
 仕上げとして、今まで`js-primer-example`で固定としていたユーザーIDを変更できるようにしましょう。
 index.htmlに`<input>`タグを追加し、JavaScriptから値を取得するために`userId`というIDを付与しておきます。
 
-[import, title:"index.html"](src/index.html)
+[import, title:"index.html"](example/index.html)
 
 index.jsにも`<input>`タグから値を受け取るための処理を追加すると、最終的に次のようになります。
 
-[import, title:"index.js"](src/index.js)
+[import, title:"index.js"](example/index.js)
 
 アプリケーションを実行すると、次のようになります。
 要件を満たすことができたので、このアプリケーションはこれで完成です。
@@ -206,21 +206,21 @@ index.jsにも`<input>`タグから値を受け取るための処理を追加す
 
 この章で作成したアプリは次のURLで確認できます。
 
-- <https://jsprimer.net/use-case/ajaxapp/promise/src/>
+- <https://jsprimer.net/use-case/ajaxapp/promise/example/>
 
 <!-- sandpackの問題でindex.jsがscriptタグとは異なる読み方がされ、globalに関数が追加されない。そのためappendCodeでglobalThisに関数を追加する -->
 
 <!-- sandpack:{
   "files": {
     "/index.js": {
-      "path": "src/index.js",
+      "path": "example/index.js",
       "appendCode": "/* この行は本編とは無関係であるため無視してください。 */ window.main = main;"
     },
     "/index.html": {
-      "path": "src/index.html",
+      "path": "example/index.html",
       "active": true
     },
-    "/src/index.js": {
+    "/example/index.js": {
       "code": "/* このファイルは本編とは無関係のファイルなので無視してください。 本編のindex.jsは一つ上のディレクトリにあります */",
       "hidden": true
     }