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

かくかくしかじか

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

どうすればいいかChatGPTに聞いた

TypeScriptはJavaScriptに静的型付けを追加する言語であり、Web開発において人気があります。以下は、TypeScriptを勉強するためのオンラインリソースです。

TypeScript公式サイト：TypeScriptの基本的な概念や構文、手順が説明されています。公式のハンドブックやドキュメントを読んで、TypeScriptの基礎から学びましょう。https://www.typescriptlang.org/

Udemy：Udemyは、オンライン学習プラットフォームであり、TypeScriptのコースを複数提供しています。プログラミング初心者から上級者まで、さまざまなレベルのコースがあります。

TypeScript Deep Dive：このオンラインブックは、TypeScriptの高度なトピックを詳しく説明しています。この本を読むことで、TypeScriptの概念を深く理解することができます。https://basarat.gitbook.io/typescript/

YouTubeチュートリアル：YouTubeには、TypeScriptの使い方を詳しく解説している動画がたくさんあります。例えば、TypeScriptの基礎から応用までを説明する動画や、プロジェクトでTypeScriptを使用する方法を説明する動画などがあります。

Stack Overflow：TypeScriptに関する質問と回答が豊富にあります。TypeScriptで何か問題が発生した場合は、Stack Overflowをチェックして解決策を見つけることができます。

以上のリソースを使用して、TypeScriptを学習しましょう。

らしい。

環境構築

ということで、環境を作るにあたって、Udemyの無料教材を利用した。

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

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
にアクセス

きたー！

番外編

vscodeから今回の作業ディレクトリを見たとき

当初、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に投下していいらしいので、定期的に投下するかもです。
もし、誰かのお役に立てたのなら光栄です。
最後まで読んでいただき、ありがとうございます！