Shinya Oguri

Node.jsでHelloWorld

#blog

Node.jsでHelloWorld

node.jsとは

  • ブラウザではなくデスクトップで動くJavaScriptの実行環境
  • イベント駆動型で非同期（ノンブロッキングI/O）なのが特徴
    • 比較対象としては，フロー駆動型とか手続き型とか
    • 次の処理を待たずに非同期的に動作する．
  • 超使われているので絶対にやれると良いのだけど，色々と問題があるのでDenoも熱いけどそれはまた別のお話

node.jsの実行環境はHomebrewで入れるのが普通

  • 小栗はnodenvから入れていて，さらにこのnodenvを入れるためにanyenvを入れています
  • 自分はこの辺は自動化して環境構築をしている．
  • 面倒な人はbrew install nodeでいいと思います．

REPLとして使うならnode と打つと動き出す

$ node
Welcome to Node.js v16.16.0.
Type ".help" for more information.
>

簡単なプログラムであれば電卓代わりのように使える

> a = "hello,nodejs"
'hello,nodejs'
> a.split("")
[
  'h', 'e', 'l', 'l',
  'o', ',', 'n', 'o',
  'd', 'e', 'j', 's'
]
> b = "shinya"
'shinya'
> console.log("hello,",b)
hello, shinya
> .exit

.exitで終了できる

REPL以外でも使いたいよね，ということで

コードをファイルとして保存してももちろん実行できる．

例えば

for (let i = 0; i < 10; i++) {
  console.log(i);
}

こんなコードを書いたとして

$ node example.js
0
1
2
3
4
5
6
7
8
9

こんな感じで実行できる

ただ，こんな調子で手書きをしているとライブラリを読み込んだりとか色々面倒なので，パッケージマネージャを使う．

それが「npm」．Python使うときの「pip」だとイメージすると伝わるだろうか

プログラムで色々なライブラリを使っていくと，ライブラリのバージョンによる依存関係があったりして，人力で解決するのは神業だと思うのでNode.jsのアプリを作るのであれば絶対にnpmは必要．

もしnpmがなかったらどうなるのかは考えたくない

npmというのはNode.jsのパッケージマネージャであり，それらに関係した処理をするためのコマンド

node環境を構築すると自動的にこいつも使えるようになっているはず．

%% npmパッケージになるように初期化する
$ npm init

%% npmのパッケージをインストールする
$ npm install hoge

さらに言えばnpmはNode.jsのパッケージを配信したり管理しているサービス「npm」の名前でもあるし，そのサービスの会社名(npm Inc.)でもある．その会社は2020年にGitHubに買収されている．そのGitHubも2018年にMicrosoftに買収されている．絶対にマイクロソフト様には足を向けて寝られない．

npmで管理されるパッケージにはpackage.jsonが必ず作られるようになる．

このpackage.jsonに必要なライブラリやら，実行するためのスクリプトやら，著作権情報やら色々な情報を書いていくことになる．

パッケージマネージャがnpmなのに対して，パッケージを実行するコマンドとして「npx」というやつもついている．

パッケージを入れるというよりコマンド機能って感じかな．

例えばnpxの動作確認

rium@so-mba13 ~> npx cowsay hello
 _______
< hello >
 -------
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
                ||----w |
                ||     ||

みたいな感じで，何かしらの機能が実行される．

だから，例えば，npmに「create-react-app」というパッケージがあるんだが，これはパッケージというよりもReactのアプリを作る時のテンプレートを生成するパッケージなので，インストールするのではなくてこのパッケージを実行したいとする．

$ npx create-react-app hoge

Creating a new React app in /Users/dclab/piyo/huga/hoge
...
...
(中略)
...
...
  cd hoge
  npm start

Happy hacking!

こんな感じで動きます．

以下のような Reactのプロジェクトが生成されています

.
└── hoge
    ├── README.md
    ├── node_modules
            ├── ...
            ├── ...
            └── ...
    ├── package-lock.json
    ├── package.json
    ├── public
    │      ├── favicon.ico
    │      ├── index.html
    │      ├── logo192.png
    │      ├── logo512.png
    │      ├── manifest.json
    │      └── robots.txt
    └── src
            ├── App.css
            ├── App.js
            ├── App.test.js
            ├── index.css
            ├── index.js
            ├── logo.svg
            ├── reportWebVitals.js
            └── setupTests.js

これがよく見るReactの一番ベーシックなテンプレートになるかと思う

参考

npm install hogeしたときに，npmからhogeをインストールしますよ，ということで，dependenciesに追加される．

npm install --save-dev hogeのようにすると，アプリの中にはhogeはいらないんだけど，開発する時だけにhogeが欲しいからという意味でdevDependenciesに追加される

途中で出てきたeslintってやつななんぞやということがあったり，Webpackってなんぞとか，そういう話も出てくるがとりあえずこの段階では呪文だと思っておけば良いと思う．

#blog