はじめに: Javascript がとにかく分からない

何度も挫折している、役立たずで仕事ができなかったのが、このjava script を用いたfrontend 開発です。今回、少し、心を落ち着けてメモしておきたいと思います。

とりあえず、node.js の導入をメモしておきます。

WSL2で作業しています。下記にある通りの内容をなぞっています。

内容

インストール

WSL2 ubuntu20.04 で、下記を行います。パッケージ管理ソフトでnode.js を導入することが推奨
されているようです。ここではnvm が使われていましたが、他にもあるそうです。まぁ面倒くさい。

nvm をインストール
nvm を利用してNode.js と Node Package Manager (npm) をインストールする

$ sudo apt-get install curl
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 15916  100 15916    0     0  27253      0 --:--:-- --:--:-- --:--:-- 27253
=> Downloading nvm from git to '/home/user/.nvm'
=> Cloning into '/home/user/.nvm'...
remote: Enumerating objects: 356, done.
remote: Counting objects: 100% (356/356), done.
remote: Compressing objects: 100% (303/303), done.
remote: Total 356 (delta 39), reused 162 (delta 27), pack-reused 0
Receiving objects: 100% (356/356), 214.58 KiB | 4.38 MiB/s, done.
Resolving deltas: 100% (39/39), done.
* (HEAD detached at FETCH_HEAD)
  master
=> Compressing and cleaning up git repository

=> Appending nvm source string to /home/user/.bashrc
=> Appending bash_completion source string to /home/user/.bashrc
=> Close and reopen your terminal to start using nvm or run the following to use it now:

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

nvm がインストールできたら、一度terminal を閉じます。WSL2 Ubuntu20.04 を再度開きます。

$ command -v nvm
nvm
$ nvm --version
0.39.2
$ nvm ls
            N/A
iojs -> N/A (default)
node -> stable (-> N/A) (default)
unstable -> N/A (default)

node は　N/A と読むようです。
nvm を使ってインストールします。LTSと最新のものを入れます。

$ nvm install --lts
Installing latest LTS version.
Downloading and installing node v16.18.0...
Downloading https://nodejs.org/dist/v16.18.0/node-v16.18.0-linux-x64.tar.xz...
################################################################################################################# 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v16.18.0 (npm v8.19.2)
Creating default alias: default -> lts/* (-> v16.18.0)
user@LAPTOP-SO488V02:~/git/myjava$ nvm install node
Downloading and installing node v19.0.0...
Downloading https://nodejs.org/dist/v19.0.0/node-v19.0.0-linux-x64.tar.xz...
################################################################################################################# 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v19.0.0 (npm v8.19.2)

LTSはv16.18.0、latest は v19.0.0 でした。

こうなっています。

$ nvm ls
       v16.18.0
->      v19.0.0
default -> lts/* (-> v16.18.0)
iojs -> N/A (default)
unstable -> N/A (default)
node -> stable (-> v19.0.0) (default)
stable -> 19.0 (-> v19.0.0) (default)
lts/* -> lts/gallium (-> v16.18.0)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.17.1 (-> N/A)
lts/carbon -> v8.17.0 (-> N/A)
lts/dubnium -> v10.24.1 (-> N/A)
lts/erbium -> v12.22.12 (-> N/A)
lts/fermium -> v14.20.1 (-> N/A)
lts/gallium -> v16.18.0
$ node --version
v19.0.0
$ npm --version
8.19.2

以下のようにnvs use hogehogeで、使用するnode を切り替えられるようです。

$ nvm use node
Now using node v19.0.0 (npm v8.19.2)
$ nvm use --lts
Now using node v16.18.0 (npm v8.19.2)
$ node --version
v16.18.0

利用可能な node の version は nvm ls-remote で表示できます。
コマンドを打つと、どー、とターミナルに表示されました。

動作確認

コマンドラインから実行することも、プロジェクトを作ることもできるようです。

node コマンドでjavascript ファイルを実行
npx でプロジェクトを作成

Hello World（コマンドライン実行）

app.js というファイルを作成します。

app.js

var msg = 'Hello World';
console.log(msg);

実行します。よく考えると、誰が何を動かしているのか分からない。

$ node app.js
Hello World

Express

これもチュートリアルに従っているだけです。^^;)

$ npx express-generator HelloWorld --view=pug
Need to install the following packages:
  express-generator@4.16.1
Ok to proceed? (y) y
npm WARN deprecated mkdirp@0.5.1: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)

   create : HelloWorld/
   create : HelloWorld/public/
   create : HelloWorld/public/javascripts/
   create : HelloWorld/public/images/
   create : HelloWorld/public/stylesheets/
   create : HelloWorld/public/stylesheets/style.css
   create : HelloWorld/routes/
   create : HelloWorld/routes/index.js
   create : HelloWorld/routes/users.js
   create : HelloWorld/views/
   create : HelloWorld/views/error.pug
   create : HelloWorld/views/index.pug
   create : HelloWorld/views/layout.pug
   create : HelloWorld/app.js
   create : HelloWorld/package.json
   create : HelloWorld/bin/
   create : HelloWorld/bin/www

   change directory:
     $ cd HelloWorld

   install dependencies:
     $ npm install

   run the app:
     $ DEBUG=helloworld:* npm start

言われる通りnpm installします。

$ npm install
npm WARN deprecated core-js@2.6.12: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.

added 124 packages, and audited 125 packages in 11s

8 packages are looking for funding
  run `npm fund` for details

4 vulnerabilities (2 low, 2 high)

To address issues that do not require attention, run:
  npm audit fix

To address all issues, run:
  npm audit fix --force

Run `npm audit` for details.

LTSのnode で作業しているのですが、古いversion で怒られているのかな。
とりあえず、動いた。

$ npx cross-env DEBUG=HelloWorld:* npm start
Need to install the following packages:
  cross-env@7.0.3
Ok to proceed? (y) y

> helloworld@0.0.0 start
> node ./bin/www

GET / 200 275.453 ms - 170
GET /stylesheets/style.css 200 6.298 ms - 111
GET /favicon.ico 404 26.875 ms - 1282
GET / 304 17.969 ms - -

これはnpx というものが全て良きに計らってくれて、正直に何を行っているのか分からない。app.js があり、routes 以下に index.jsなどあり、views以下に *.pug ファイルがある。
全て一式作られている。昔のVisual Studio でGUI作っていた時みたいな感じだ。

HTTP サーバ

他にもいくつかサイトを見て、npm hogehoge でインストールして、httpサーバをコードを動かすことができました。

まとめ

とりあえず、node を導入し、npm でモジュール？を管理することはできているようです。
さて次はどこに行くのだろう。。

いろいろ参考にしたのですが、整理できてません。

メモはこのあたりで。
(2022/10/22)

【javascript】とにかくはじめたい