Loochs

M1 macでnode.jsの開発環境を整備する

パッケージのインストール

  • node.js

$ brew install node

  • nvm(node version manager)
    • node.jsのバージョンを管理・切り替え

$ brew install nvm

インストール完了後に以下を実施

$ mkdir ~/.nvm # nvmのワーキングディレクトリ
$ vim ~/.zshrc # nvmの環境変数を設定、以下の記述を構成ファイルに追加する

export NVM_DIR=”$HOME/.nvm”
[ -s “/opt/homebrew/opt/nvm/nvm.sh” ] && \. “/opt/homebrew/opt/nvm/nvm.sh” # This loads nvm
[ -s “/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm” ] && \. “/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm” # This loads nvm bash_completion

ただしNVM_DIR は任意の場所に設定できますが、/opt/homebrew/opt/nvm から変更しないままだと、アップグレード/再インストール時に nvm でインストールされた node はすべて壊れてしまう、という警告が出ています。これはどう対応したら良いのだろうか？？#TODO

  • npm(node package manager)
    • node.jsのパッケージ管理

$ brew install npm

それぞれインストール完了後にコマンドライン上でnode/nvm/npmと叩いて正しく呼び出せるか確認すると良いでしょう。

ローカルサーバーを立てる

適当なリポジトリを作っておいて公式ドキュメントをもとにコードを写経してみます。

コードを書き終わったら以下コマンドを実行してサーバーを走らせます。

$ node app.js
Server running at http://127.0.0.1:3000/

localhost:3000にアクセスするとHellor Worldが返されます。

デバッグ

先ほどのコードを以下コマンドで実行することでデバッグクライアントが待機するようです。

$ node –inspect app.js
Debugger listening on ws://127.0.0.1:9229/21ab3436-839a-405f-8081-dd3dce1cf83a
For help, see: https://nodejs.org/en/docs/inspector
Server running at http://127.0.0.1:3000/

コマンドのレスポンス1行目がインスペクタクライアントのURLになります。ChromiumベースのWebブラウザでchrome://inspect/#devicesと入力してインスペクタクライアントを開いてサーバーの挙動を確認すると良いかもしれません。

ファイルシステムAPIを使う

htmlを使わない環境下でも使える様々なAPIがあるようです。たとえば以下。

const fs = require('fs');

fs.writeFileSync('notes.txt', 'Hi there!')
  • このrequireはcommonJSというサーバーサイドなどの環境下におけるJSの仕様らしい
    • Wikipedia見る限りそんな主流というわけでもないのか・・・？

ECMAScript形式だと以下のようになる

import * as fs from 'fs';

fs.writeFileSync('notes.txt', 'Hi there!')

ただし上記の形式の場合は以下のように拡張子に”m”をつけて実行する。

$ node app.mjs

外部モジュールの呼び出し

まずはメインファイル

import { name } from './utils.mjs'
console.log(name);

次にutilsファイル

console.log('utils.mjs')
export const name = 'Mike';

以下コマンドを実行するとutils内の関数呼び出しとexportされた変数を参照できていることがわかる。

$ node app.mjs

util.js
Mike

さらに関数のexportも確認する。

console.log('util.js')

export const name = 'Mike';

export const add = function(a, b) {
    return a + b;
};
import { name, add } from './utils.mjs'

console.log(name);

console.log(add(2, 1));

以下コマンドを実行すると関数addを呼び出せていることが確認できる。

$ app.mjs

util.js
Mike
3

気づき（なんでもあり）

  • シングルクォート「’」とバッククォート「`」は文字列の処理において使い分けられる
    • 後者は文字列の変数置換”${hoge}”で使われる
  • requireかimportか
    • commonJSかECMAScriptのどちらに従うかっぽいが後者のやり方がようわからんかった。

admin

, ,