Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@XPT60

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

Last updated at Posted at 2022-10-23

はじめに: 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)

0
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?