躓きながら、React × TypeScript環境を構築した話

## かくかくしかじか
・会社から自己学習の時間をもらった
・ReactもTypeScriptも勉強してみたかった
<環境>
・windows10
・wsl2 + Ubuntu20.04
・vscode

## どうすればいいかChatGPTに聞いた
> TypeScriptはJavaScriptに静的型付けを追加する言語であり、Web開発において人気があります。以下は、TypeScriptを勉強するためのオンラインリソースです。
>
> 1. TypeScript公式サイト：TypeScriptの基本的な概念や構文、手順が説明されています。公式のハンドブックやドキュメントを読んで、TypeScriptの基礎から学びましょう。https://www.typescriptlang.org/
> 
> 1. Udemy：Udemyは、オンライン学習プラットフォームであり、TypeScriptのコースを複数提供しています。プログラミング初心者から上級者まで、さまざまなレベルのコースがあります。
> 
> 1. TypeScript Deep Dive：このオンラインブックは、TypeScriptの高度なトピックを詳しく説明しています。この本を読むことで、TypeScriptの概念を深く理解することができます。https://basarat.gitbook.io/typescript/
> 
> 1. YouTubeチュートリアル：YouTubeには、TypeScriptの使い方を詳しく解説している動画がたくさんあります。例えば、TypeScriptの基礎から応用までを説明する動画や、プロジェクトでTypeScriptを使用する方法を説明する動画などがあります。
> 
> 1. Stack Overflow：TypeScriptに関する質問と回答が豊富にあります。TypeScriptで何か問題が発生した場合は、Stack Overflowをチェックして解決策を見つけることができます。
> 
> 以上のリソースを使用して、TypeScriptを学習しましょう。

らしい。

## 環境構築
ということで、環境を作るにあたって、[Udemy](https://www.udemy.com/)の[無料教材](https://www.udemy.com/course/typescript-react-frontend/learn/lecture/20732876#overview)を利用した。

注：**こっから長いです。**
殴り書きなのと、口語(独り言)はご容赦してください。。

node.jsのインストール
```
zombie@DESKTOP-JLU30CD:~/working$ sudo apt install nodejs

E: Failed to fetch http://security.ubuntu.com/ubuntu/pool/main/c/c-ares/libc-ares2_1.15.0-1ubuntu0.1_amd64.deb  404  Not Found [IP: 185.125.190.36 80]
E: Unable to fetch some archives, maybe run apt-get update or try with --fix-missing?
```

なんかエラー出た。apt-get?更新しないとだめなのかな？
```
zombie@DESKTOP-JLU30CD:~/working$ apt-get update
Reading package lists... Done
E: Could not open lock file /var/lib/apt/lists/lock - open (13: Permission denied)
E: Unable to lock directory /var/lib/apt/lists/
W: Problem unlinking the file /var/cache/apt/pkgcache.bin - RemoveCaches (13: Permission denied)
W: Problem unlinking the file /var/cache/apt/srcpkgcache.bin - RemoveCaches (13: Permission denied)
```

管理者権限が必要なのね
```
zombie@DESKTOP-JLU30CD:~/working$ sudo apt-get update
Get:1 http://security.ubuntu.com/ubuntu focal-security InRelease [114 kB]
~~~
Get:34 http://archive.ubuntu.com/ubuntu focal-backports/universe amd64 c-n-f Metadata [880 B]
Fetched 11.9 MB in 6s (2065 kB/s)
Reading package lists... Done
```

成功。再度コマンド打ち込んでみる
```
zombie@DESKTOP-JLU30CD:~/working$ sudo apt install nodejs
Reading package lists... Done
~~~
Processing triggers for libc-bin (2.31-0ubuntu9.2) ...
Processing triggers for man-db (2.9.1-1) ...
```

成功。npmコマンド使えなかったからインストール
```
zombie@DESKTOP-JLU30CD:~/working$ sudo apt install npm
Setting up g++ (4:9.3.0-1ubuntu2) ...
~~~
Processing triggers for libc-bin (2.31-0ubuntu9.2) ...
```

20分くらいかかったけど成功。react-appをするためにcd ./typescript 後に実行
```
zombie@DESKTOP-JLU30CD:~/working/typescript$ npx create-react-app . --template typescript
npx: installed 67 in 9.497s
You are running Node 10.19.0.
Create React App requires Node 14 or higher.
Please update your version of Node.
zombie@DESKTOP-JLU30CD:~/working/typescript$
```

なんかNodeアップデートしろって書いてる
試しに、npm start
```
zombie@DESKTOP-JLU30CD:~/working/typescript$ npm start
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path /home/zombie/working/typescript/package.json
npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, open '/home/zombie/working/typescript/package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
```

またエラー・・・
package-lock.jsonだけはカレントディレクトリに生成された
うーんキャッシュ問題？
そんなこと考えながらpc自体を再起動
```
zombie@DESKTOP-JLU30CD:~/working/typescript$ sudo npm ci
[sudo] password for zombie:
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path /home/zombie/working/typescript/package.json
npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, open '/home/zombie/working/typescript/package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

zombie@DESKTOP-JLU30CD:~/working/typescript$ sudo npm cache clean --force
npm WARN using --force I sure hope you know what you are doing.
```

ちょっとしらべてみた
https://qiita.com/sum_nuts/items/06b2c2b12ba0a0487b61

ここを調べてみたら、ここの参考サイトに助けられたと書いてあった
https://www.suzu6.net/posts/295-node-update-windows/

ちょっとやってみる。ここを見ろって書いてる
https://nodejs.org/ja

→無料教材のほうでも、windowsよりnode.jsのパッケージ落とせって言っていたのにそれしてなかった。cliだけでいいとおもってた(泣)

インストール後。。
```
zombie@DESKTOP-JLU30CD:~/working/typescript$ npm start
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path /home/zombie/working/typescript/package.json
npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, open '/home/zombie/working/typescript/package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
```

変わらない
そもそもローカルライブラリにあるのか問題
```
zombie@DESKTOP-JLU30CD:~/working/typescript$ npm ls -g
/usr/local/lib
└── (empty)

zombie@DESKTOP-JLU30CD:~/working/typescript$ ls -al /usr/local/lib
total 20
drwxr-xr-x  5 root root  4096 Apr  3 15:22 .
drwxr-xr-x 10 root root  4096 Apr 23  2020 ..
drwxr-xr-x  3 root root  4096 Apr  3 16:27 docker
drwxrwsr-x  4 root staff 4096 Apr  3 15:33 python2.7
drwxrwsr-x  3 root staff 4096 Apr 23  2020 python3.8
```

草。ないやんけ。。とりあえずもう一度プロジェクトを作ってみる
```
zombie@DESKTOP-JLU30CD:~/working/typescript$ npx create-react-app --version
npx: installed 67 in 5.917s
You are running Node 10.19.0.
Create React App requires Node 14 or higher.
Please update your version of Node.
```

Nodeのバージョンが14以上必要？
```
zombie@DESKTOP-JLU30CD:~/working/typescript$  sudo npm install -g n
[sudo] password for zombie:
/usr/local/bin/n -> /usr/local/lib/node_modules/n/bin/n
n@9.0.1
added 1 package from 2 contributors in 0.493s
zombie@DESKTOP-JLU30CD:~/working/typescript$
zombie@DESKTOP-JLU30CD:~/working/typescript$
zombie@DESKTOP-JLU30CD:~/working/typescript$
zombie@DESKTOP-JLU30CD:~/working/typescript$
zombie@DESKTOP-JLU30CD:~/working/typescript$ node -v
v10.19.0
```

バージョン10じゃん。。。入らないよ・・
```
zombie@DESKTOP-JLU30CD:~/working/typescript$ n --stable
18.15.0
zombie@DESKTOP-JLU30CD:~/working/typescript$ sudo n stable
installing : node-v18.15.0
mkdir : /usr/local/n/versions/node/18.15.0
fetch : https://nodejs.org/dist/v18.15.0/node-v18.15.0-linux-x64.tar.xz
copying : node/18.15.0
installed : v18.15.0 (with npm 9.5.0)

Note: the node command changed location and the old location may be remembered in your current shell.
old : /usr/bin/node
new : /usr/local/bin/node
If "node --version" shows the old version then start a new shell, or reset the location hash with:
hash -r  (for bash, zsh, ash, dash, and ksh)
rehash   (for csh and tcsh)
zombie@DESKTOP-JLU30CD:~/working/typescript$ node -v
v10.19.0
```

再度、プロジェクト作ってみる
```
zombie@DESKTOP-JLU30CD:~/working/typescript$ npx create-react-app . --template typescript
node:internal/modules/cjs/loader:1078
throw err;
^

Error: Cannot find module 'libnpx'
Require stack:
- /usr/share/npm/bin/npx-cli.js
at Module._resolveFilename (node:internal/modules/cjs/loader:1075:15)
at Module._load (node:internal/modules/cjs/loader:920:27)
at Module.require (node:internal/modules/cjs/loader:1141:19)
at require (node:internal/modules/cjs/helpers:110:18)
at Object.<anonymous> (/usr/share/npm/bin/npx-cli.js:3:13)
at Module._compile (node:internal/modules/cjs/loader:1254:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
at Module.load (node:internal/modules/cjs/loader:1117:32)
at Module._load (node:internal/modules/cjs/loader:958:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12) {
code: 'MODULE_NOT_FOUND',
requireStack: [ '/usr/share/npm/bin/npx-cli.js' ]
}

Node.js v18.15.0
```

エラー変わった！例外はかれてる、、

このサイトを参考にコマンドプロンプトを管理者権限で実行し、アンインストールとインストールコマンド実行
https://qiita.com/mammothryousuke/items/4b7cced4d7d0416586e9
(たぶん意味ない)
```
C:\WINDOWS\system32>npm uninstall -g react-native-cli

up to date in 479ms

C:\WINDOWS\system32>
C:\WINDOWS\system32>
C:\WINDOWS\system32>npm install -g react-native-cli

added 82 packages in 10s

38 packages are looking for funding
run `npm fund` for details
npm notice
npm notice New minor version of npm available! 9.5.0 -> 9.6.3
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.6.3
npm notice Run npm install -g npm@9.6.3 to update!
npm notice
```

もう一回作ってみよう・・・
```
zombie@DESKTOP-JLU30CD:~/working/typescript$ npx create-react-app . --template typescript
node:internal/modules/cjs/loader:1078
throw err;
^

Error: Cannot find module 'libnpx'
Require stack:
- /usr/share/npm/bin/npx-cli.js
at Module._resolveFilename (node:internal/modules/cjs/loader:1075:15)
・・・・・
```

わからないときの、「管理者権限実行」
```
zombie@DESKTOP-JLU30CD:~/working/typescript$ sudo npx create-react-app . --template typescript
Need to install the following packages:
create-react-app@5.0.1
Ok to proceed? (y) y
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
The directory . contains files that could conflict:

package-lock.json

Either try using a new directory name, or remove the files listed above.
npm notice
npm notice New minor version of npm available! 9.5.0 -> 9.6.3
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.6.3
npm notice Run npm install -g npm@9.6.3 to update!
npm notice
```

エラー変わった。カレントディレクトリにてファイルが競合してる
確認
```
zombie@DESKTOP-JLU30CD:~/working/typescript$ ls -a
.  ..  package-lock.json
```

あった。とりあえず削除して実行してみよう
```
zombie@DESKTOP-JLU30CD:~/working/typescript$ rm package-lock.json
zombie@DESKTOP-JLU30CD:~/working/typescript$
zombie@DESKTOP-JLU30CD:~/working/typescript$
zombie@DESKTOP-JLU30CD:~/working/typescript$
zombie@DESKTOP-JLU30CD:~/working/typescript$ ls -a
.  ..
```

削除、消滅。実行
```
zombie@DESKTOP-JLU30CD:~/working/typescript$ sudo npx create-react-app . --template typescript

Creating a new React app in /home/zombie/working/typescript.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template-typescript...

~~~

cd /home/zombie/working/typescript
npm start

Happy hacking!
```

お！＞成功したか？？？？
```
zombie@DESKTOP-JLU30CD:~/working/typescript$ ls -al
total 728
drwxr-xr-x   6 zombie zombie   4096 Apr  3 17:22 .
drwxr-xr-x   6 zombie zombie   4096 Apr  3 13:24 ..
drwxr-xr-x   8 root   root     4096 Apr  3 17:22 .git
-rw-r--r--   1 root   root      310 Apr  3 17:22 .gitignore
-rw-r--r--   1 root   root     2117 Apr  3 17:22 README.md
drwxr-xr-x 827 root   root    36864 Apr  3 17:22 node_modules
-rw-r--r--   1 root   root   665628 Apr  3 17:22 package-lock.json
-rw-r--r--   1 root   root      971 Apr  3 17:22 package.json
drwxr-xr-x   2 root   root     4096 Apr  3 17:22 public
drwxr-xr-x   2 root   root     4096 Apr  3 17:22 src
-rw-r--r--   1 root   root      535 Apr  3 17:22 tsconfig.json
zombie@DESKTOP-JLU30CD:~/working/typescript$
```

おおー
ノードモジュールがある。これはいけたか？
```
zombie@DESKTOP-JLU30CD:~/working/typescript$ npm start
node:internal/modules/cjs/loader:1078
throw err;
^

Error: Cannot find module 'semver'
```

なんでやねん。。
わからんけどとりま管理者権限で実行
```
zombie@DESKTOP-JLU30CD:~/working/typescript$ sudo npm start
> typescript@0.1.0 start
> react-scripts start

Compiled successfully!

You can now view typescript in the browser.

Local:            http://localhost:3000
On Your Network:  http://XXXXXXXXXXXXXXXX

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully
Files successfully emitted, waiting for typecheck results...
Issues checking in progress...
No issues found.
```

これはいけたでしょ！！！！！
http://localhost:3000
にアクセス
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/748491/0d5017f8-ae2d-cdd7-20d6-8a6054625ba9.png)

きたー！

## 番外編
vscodeから今回の作業ディレクトリを見たとき
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/748491/62b73dca-fd47-7f73-7da6-b14dd0b1fe4e.png)

当初、App.tsxが書き込み更新ができなかった。
状況としては
権限: 644、
所有ユーザと所有グループ: root

「自分のpcだからいいや！」と思って
```
$ sudo chmod 777
-rwxrwxrwx 1 root   root    919 Apr  3 18:58 App.tsx
```
~~理解の果ての解決ではないけど、vscode側からの編集が可能になった。~~
↓↓↓↓↓↓↓ 参照 ↓↓↓↓↓↓↓

## 追記
あのあと、「やっぱりグループごとrootをzombie(実行者)に変えるのもなんかな」と思ったため
Reactに知見のある前職の先輩に話を伺いました。
「管理者権限で実行したからじゃない？」と言われたので、
「管理者権限じゃなかったらエラー出た気がしたんだよな。。。」と思いながら、ディレクトリ作って画面共有してやってみました。
```
zombie@DESKTOP-JLU30CD:~/working/typescript_mk2$ npx create-react-app . --template typescript
drwxr-xr-x   6 zombie zombie   4096 Apr  4 13:27 .
drwxr-xr-x   6 zombie zombie   4096 Apr  4 13:37 ..
drwxr-xr-x   8 zombie zombie   4096 Apr  4 13:39 .git
-rw-r--r--   1 zombie zombie    310 Apr  4 13:27 .gitignore
-rw-r--r--   1 zombie zombie   2117 Apr  4 13:27 README.md
drwxr-xr-x 827 zombie zombie  36864 Apr  4 13:27 node_modules
-rw-r--r--   1 zombie zombie 665636 Apr  4 13:27 package-lock.json
-rw-r--r--   1 zombie zombie    975 Apr  4 13:27 package.json
drwxr-xr-x   2 zombie zombie   4096 Apr  4 13:27 public
drwxr-xr-x   2 zombie zombie   4096 Apr  4 13:27 src
-rw-r--r--   1 zombie zombie    535 Apr  4 13:27 tsconfig.json
```

！？！？普通に通ったし、できました！
先輩感謝です！

vscodeからこのディレクトリに対するファイルも問題なく、できました。
src配下のファイルは全部644ですが、rootではなくzombieに変わりました。

## 最後に
自己学習で得た知見はqiitaに投下していいらしいので、定期的に投下するかもです。
もし、誰かのお役に立てたのなら光栄です。
最後まで読んでいただき、ありがとうございます！