MODULLO（モデュロ）中の人です。
MODULLO（モデュロ）は、CMSなので使いやすさは抜群ですが、CMSを使わなくてもWEBページって作りたいですよね？
と、いうことで、今回は、Javascript環境のnode.js環境設定用のビルド用パッケージのnpmについて、何が何をしているかぐらいを知っておいて損はないかなということで紹介したいと思います。

主なNode.jsの環境設定、ビルド用パッケージ

・npm

• node.jsのパッケージ管理ツール、パッケージマネージャ
• node.jsをインストールすればついてくる
• パッケージ管理だけでなくコマンドの実行なども行う

・npx

• npmをさらにインストールから実行までしてくれる機能

・yarn

• npmと同じくパッケージマネージャ
  • npmよりインストールが早く、バージョン管理も厳格
  • npmと互換性がある

・vite

• javascript環境用のビルドツール
  • webpackのようなビルド機能もある
  • react環境などもさくっと作れる
• 但しnext.jsの場合は別要素で完結してるので現状は使わない可能性あり

・babel

• 昔のversionのjavascriptに翻訳してくれるパッケージ
  • ブラウザが古くても対応できる
• chroniumのブラウザが標準化してからは使用機会が減少した印象

・tsc

• ブラウザが古くても対応できる

npmの使い方

npmとは

• ode package manager の略
• node環境においてパッケージ管理を行うツール
  • phpでいうcomposerのポジション
• またnodeのコマンドの実行にも用いる
• npm install, npm run さえされば後はググるだけで雰囲気使えること自体はできる

npm init

1. main.jsを作成
2. npm init を実行

• npmの初期設定をするコマンド
  • viteやnext.jsでデフォルト設定を行う場合は必要ない
    • .gitignore等の設定を含めると、むしろreactの場合はnpmを通して初期設定を行わない方が良いかもしれない
  • 今回はスクラッチで試すので実行する
• コマンドを実行するとpackage.jsonが作成される

package.json

1. package.jsonを開く
2. typeをmoduleに変更する

• npmの設定管理ファイル
• npm initの時に設定した内容が書き込まれている
• 今回は typeの値をmoduleに設定する
  • typeがcommonjsのままだとパッケージの読み込み方式がCommonjsになってしまい、紹介した内容でモジュール読み込みができないため
  • moduleにするとESmoduleの方式で読み込まれる

• 内容を書き換えることは滅多にない
  • コマンド省略のためにscriptを追加することがある程度

npm install {パッケージ名}

• パッケージのinstallコマンド

npm installを使用しパッケージをインストールして使用するまでの例

chalkというコンソール出力に色を付けるのパッケージのinstallをテストしてみる

https://github.com/chalk/chalk

1. npm install chalk をする
   • node_modulesというフォルダとpackeage-lock.jsonというファイルが作られ、chalkがインストールされる
     • 関連するパッケージがないのはレア

• package.jsonにもdependenciesの追加記述がある

2. javascriptファイルからchalkを使用する

import chalk from 'chalk';
console.log(chalk.blue('Hello world!'));

import chalk from 'chalk';
console.log(chalk.blue('Hello world!'));

node_modules

• インストールしたパッケージのソースコードが入っています
  • このnode_modulesのコードから必要な機能を参照する
• 一個のパッケージをインストールしただけで、それに必要なパッケージが雪崩のように入ってくる

• next.jsにaws周りのライブラリインストールした場合は、この様になる

• 動作や型の確認のために、参照でパッケージのコードを直接閲覧したりする
• 一度変更してセーブしたあとに、変更箇所を見失ったら変更が分からなくてなるので基本的に触らないのが鉄則

package_lock.json

• インストールしたパッケージの一覧が入っているファイル
  • 触らない。内容を直接書き換えることはまずない。
  • パッケージとバージョン情報以外にコードもないので見る機会や確認する際以外は、ほぼない。

# dependencies
/node_modules

# dependencies
/node_modules

npm uninstall {パッケージ}

• パッケージのuninstall用コマンド

npm run {コマンド}

• package.jsonのscriptsの項目は設定したコマンドをnpm run {コマンド名} で実行できる
  • 初期設定では testというコマンドが設定されている。 npm run test とするとコマンド設定どおりに以下の内容が出力される

• 例えば以下のようなコマンドを設定するとnpm run main でmain.jsが起動するようになる

  "scripts": {    
									"test": "echo \"Error: no test specified\" && exit 1",    
									"main": "node main"  
									}

  "scripts": {    
									"test": "echo \"Error: no test specified\" && exit 1",    
									"main": "node main"  
									}

• 正体は npm scriptsという仕組み。スクリプトは sh に渡されている
• スクラッチからやるのでなければめぼしいのはプロジェクト設定した時に記入してくれている 下のはnext.jsの例

"scripts": {    
"dev": "next dev --turbopack",    
"build": "next build",    
"start": "next start",    
"lint": "next lint" 
 },

"scripts": {    
"dev": "next dev --turbopack",    
"build": "next build",    
"start": "next start",    
"lint": "next lint" 
 },

npm install {パッケージ名} --save-dev

• 開発環境用のプラグインをinstall時に使用

npm install {パッケージ名} -g

• globalインストール

npm update

• パッケージ自動アップデート

npx

• npm install + コマンドの実行 公式サイトのあるアプリのtutorialで手軽に環境導入する時などに使う

⚠️コマンド一つでインストールできる分、npmでインストールしたパッケージがセキュリティ上で安全かは不明です。パッケージでインストールされたもの全部の管理は難しいが、パッケージで直接インストールするコマンドは、大丈夫なコマンドであるかを確認して注意すること。

次回予告

次回は、Javascriptのデータ型、module、非同期処理について書きたいとおもいます。