📝: キャッシュに関するトラブルシュート作成

website/docs/react-native/common-pitfalls.md

@@ -1,5 +1,5 @@
 ---
-title: ハマりがちな落とし穴
+title: トラブルシューティング
 sidebar_label: はじめに
 ---
 

website/docs/react-native/common-pitfalls/clear-cache.md

@@ -0,0 +1,52 @@
+---
+title: キャッシュが残ってファイルの更新ができない
+---
+
+## エラー内容
+
+イメージファイルを追加し、エミュレータで確認する時に、キャッシュが残っていると次のようなエラーが発生します。
+
+```console
+The development server returned response error
+code: 500
+URL: http://localhost:8081/index.bundle?platform=android&dev=true&minify=false
+Body:
+("originModulePath":"path/
+image/Logo.tsx", targetModuleName"."assets/ logo.png
+""message": "Unable to resolve module
+assets/logo.pg from /path/
+image/Logo.tsx: assets/logo.png could not be found within the project or in these directories:
+In node_modules\n\nif you are sure the module exists, try these steps: In 1. Clear watchman
+watches: watchman watch-del-all\n 2. Delete node_modules and run yarn install\n 3. Reset Metro's cache: yarn start --reset-cacheln 4. Remove the cache: rm -rf/tmp/
+metro-*\n\u001b/0m\u001b|31m\u001b/1m>\u0
+01b(22m\u001b[39m\u001b[90m 1 /\u001b/39m
+lu001b|36mimport\u001b[39m logolmage
+lu001b/36mfrom\u001b[39m \u001b|32m'assets/ logo.png'\u001b[39m\u001b|33m; lu0016/39m\u001b|0m\n\u001b|0m lu001b[90m \u001b|39m \u001b|31m\u001b(1m^\u001b[22m\u001b|
+39m\u001b|0m\n\u001b|0m \u001b 90m 2 |
+\u0016[39m \u001b|36mimport\u001b[39m
+lu001b/33mReact\u001b 39m
+\u001b|36mfrom\u001 b 39m
+\u001b|32mreact\u001b(39m\u001b|33m;
+```
+
+## 対処方法
+
+### エミュレータの再起動
+
+エミュレータとターミナルを終了し、再起動します。<br/>
+再起動しでもエラーが発生する場合は[キャッシュ削除](/react-native/common-pitfalls/clear-cache#キャッシュ削除)を実行してください。
+
+### キャッシュ削除
+
+次のコマンドでキャッシュが削除されます。
+
+```bash
+npx expo start --clear
+```
+
+:::note info
+OSごとのキャッシュに関する詳細は下記を参照してください。
+
+* [macOS](https://docs.expo.dev/troubleshooting/clear-cache-macos-linux/)
+* [Windows](https://docs.expo.dev/troubleshooting/clear-cache-windows/)
+:::

website/docs/react-native/common-pitfalls/overview.md

@@ -25,6 +25,10 @@ const overviews = [
   {
     title: 'Xcodeでビルドが失敗する',
     to: '/react-native/common-pitfalls/cant-build-in-xcode',
+  },
+  {
+    title: 'キャッシュが残ってファイルの更新ができない',
+    to: '/react-native/common-pitfalls/clear-cache',
   }
 ]
 

website/docs/react-native/learn/getting-started/launch-created-app.mdx

@@ -13,7 +13,7 @@ React Nativeアプリの実行方法と仕組みをかんたんに説明しま
 
 実行方法で紹介しているコマンドは、全てプロジェクトのルートディレクトリ（`package.json`のあるディレクトリ）で実行してください。
 
-うまく起動できない場合は、[ハマりがちな落とし穴](../../common-pitfalls.md)を参照してください。
+うまく起動できない場合は、[トラブルシューティング](../../common-pitfalls.md)を参照してください。
 
 <!-- textlint-disable ja-technical-writing/sentence-length,ja-technical-writing/max-comma,ja-spacing/ja-no-space-around-parentheses,jtf-style/3.3.かっこ類と隣接する文字の間のスペースの有無,ja-technical-writing/ja-no-mixed-period,ja-technical-writing/no-unmatched-pair -->
 

website/docs/react-native/learn/todo-app/screens/logo.mdx

@@ -110,3 +110,7 @@ export * from './Logo';
 Welcome画面にロゴが表示されれば成功です。
 
 ![Welcome](../app-hands-on/welcome_with_logo.png)
+
+:::warning
+ロゴが表示されない場合は、キャッシュが残っている可能性があります。[こちら](/react-native/common-pitfalls/clear-cache)のリンクを参考にキャッシュを削除してください。
+:::

website/docs/sidebars.js

@@ -278,6 +278,7 @@ module.exports = {
         'react-native/common-pitfalls/debug-keystore-not-found',
         'react-native/common-pitfalls/react-native-cli-uninstall',
         'react-native/common-pitfalls/cant-build-in-xcode',
+        'react-native/common-pitfalls/clear-cache',
       ],
     },
   ],

website/docusaurus.config.js

@@ -95,7 +95,7 @@ module.exports = {
               to: 'react-native/santoku',
             },
             {
-              label: 'Pitfalls',
+              label: 'Trouble shooting',
               to: 'react-native/common-pitfalls',
             },
           ],
@@ -133,7 +133,7 @@ module.exports = {
               to: 'react-native/santoku',
             },
             {
-              label: 'Pitfalls',
+              label: 'Trouble shooting',
               to: 'react-native/common-pitfalls',
             },
           ],

website/src/pages/index.tsx

@@ -29,10 +29,10 @@ const reactNativeOverview = [
     summary: <>学習用コンテンツ</>,
   },
   {
-    title: 'Common Pitfalls',
+    title: 'Trouble shooting',
     to: 'react-native/common-pitfalls',
     imageUrl: 'img/undraw_void_3ggu.svg',
-    summary: <>ハマりがちな落とし穴</>,
+    summary: <>トラブルシューティング</>,
   },
   {
     title: 'Example Application',