Node.jsでHelloWorld
次の処理を待たずに非同期的に動作する.
[[]]
面倒な人はbrew install nodeでいいと思います.
<環境構築できた前提として>
code:例
$ node
Welcome to Node.js v16.16.0.
Type ".help" for more information.
簡単なプログラムであれば電卓代わりのように使える
code:例
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以外でも使いたいよね,ということで
コードをファイルとして保存してももちろん実行できる.
例えば
code:example.js
for (let i = 0; i < 10; i++) {
console.log(i);
}
こんなコードを書いたとして
code:例
$ node example.js
0
1
2
3
4
5
6
7
8
9
こんな感じで実行できる
ただ,こんな調子で手書きをしているとライブラリを読み込んだりとか色々面倒なので,パッケージマネージャを使う.
プログラムで色々なライブラリを使っていくと,ライブラリのバージョンによる依存関係があったりして,人力で解決するのは神業だと思うのでNode.jsのアプリを作るのであれば絶対にnpmは必要.もしnpmがなかったらどうなるのかは考えたくない npmというのはNode.jsのパッケージマネージャであり,それらに関係した処理をするためのコマンド node環境を構築すると自動的にこいつも使えるようになっているはず.
code:例
%% npmパッケージになるように初期化する
$ npm init
%% npmのパッケージをインストールする
$ npm install hoge
さらに言えばnpmはNode.jsのパッケージを配信したり管理しているサービス「npm」の名前でもあるし,そのサービスの会社名(npm Inc.)でもある.その会社は2020年にGitHubに買収されている.そのGitHubも2018年にMicrosoftに買収されている.絶対にマイクロソフト様には足を向けて寝られない. このpackage.jsonに必要なライブラリやら,実行するためのスクリプトやら,著作権情報やら色々な情報を書いていくことになる.
パッケージマネージャがnpmなのに対して,パッケージを実行するコマンドとして「npx」というやつもついている. パッケージを入れるというよりコマンド機能って感じかな.
code:cowsay
rium@so-mba13 ~> npx cowsay hello
_______
< hello >
-------
\ ^__^
\ (oo)\_______
(__)\ )\/\
||----w |
|| ||
みたいな感じで,何かしらの機能が実行される.
だから,例えば,npmに「create-react-app」というパッケージがあるんだが,これはパッケージというよりもReactのアプリを作る時のテンプレートを生成するパッケージなので,インストールするのではなくてこのパッケージを実行したいとする.
code:create-react-app
$ npx create-react-app hoge
Creating a new React app in /Users/dclab/piyo/huga/hoge
...
...
(中略)
...
...
cd hoge
npm start
Happy hacking!
こんな感じで動きます.
以下のような Reactのプロジェクトが生成されています
code:生成されたプロジェクト
.
└── 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ってなんぞとか,そういう話も出てくるがとりあえずこの段階では呪文だと思っておけば良いと思う.