かくかくしかじか
・会社から自己学習の時間をもらった
・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に投下していいらしいので、定期的に投下するかもです。
もし、誰かのお役に立てたのなら光栄です。
最後まで読んでいただき、ありがとうございます！