Node.jsとnpmってなに？初めてでも基本がなんとなくわかる！
🌟 はじめに
こんにちは！
先日macにCursorを導入することになり、久々に開発環境のセットアップをしました！
Cursorのインストール方法や開発環境で必要なNode.jsやnpmについてわかりやすくご紹介できればと思います！
今回はVue、ReactなどJavascriptを使ったWeb開発をしたい方に向けた記事となっています！
Cursorについても触れていますので、興味のある方はぜひご一読ください。
Node.jsとnpmについて知りたい！という方は目次よりNode.jsとnpmってなに？！に飛んでください。
📝 Cursorとは何か？
Cursorとはプログラミング初心者の強い味方となるAI搭載のコードエディタです。
コードエディタとは、プログラムのコードを編集するためのツールです。
CursorではAIがコードを記述してくれたり、説明したり、改善点を提案したり、エラーの内容を教えてくれたりしてくれます。
コードを書いていて困ったときに、エディタ上で直接AIに質問できるため、
賢い先輩プログラマーが隣で見守ってくれているような安心感があります。
以前はわからないコードがあったらGoogleで調査しての繰り返しでしたが、CursorではAIが分かりやすく教えてくれるので、学習になり時間短縮にもなります！
Cursorのインストール
Cursorは公式サイトからインストーラーをダウンロードましょう！
今回Cursorのセットアップ時にスクショを撮り忘れたため
Cursor使いたい！！！という方は、参考記事のリンクを以下に貼っておきますので、そちらから手順をご確認ください🙇
Cursorのセットアップができたらgitからソースコードを取得しました。
ソースコードを取得したら、最初にアプリ開発で必要となるパッケージをインストールします。
必要となるライブラリは「package.json」というファイルに記述されています。
以下のコマンドを入力すると「package.json」に記述されているパッケージがインストールされます。
npm install現時点で「npm」というものがmacにインストールされてないため
「npmないからこのコマンド使えないよ！」とエラーが表示されました。
Cursor先生に”表示されているエラー内容の対処方法を教えて”と質問すると以下のように教えてくれます！
こんな感じで丁寧に教えてくれるので毎回助かってます🙇✨
Cursor先生からはNode.jsとnpmのインストールが必要だよとのことなので
手順通りにコマンドを実行して、無事に開発環境が構築できました👏
ここから今回の本題です！！
Node.jsやnpmという単語が出てきてなんぞや！？と思っている方に向けて
Node.jsとnpmについてわかりやすく説明していきたいと思います！
gitって何？git使えない！という方は以下の記事をご確認ください！
👨💻 Node.jsとnpmってなに？！
Node.jsはJavaScriptをパソコン上で動かすための仕組み
npmはNode.jsに付属する便利な部品(パッケージ)を管理するシステム
JavaScriptは本来ブラウザでしか動かないプログラミング言語でしたが、Node.jsを使うことでパソコン上でも動かせるようになりました。
さらにnpmという仕組みで、便利な部品(パッケージ)を簡単に追加できるようになっています。
⚡️ Node.jsについて
すごい処理能力 💪
Node.jsの特徴的な能力は「ノンブロッキングI/O」という技です。
難しそうな言葉ですが「いくつものことを同時にこなせる」ということです！
例えば、お母さんが料理を作るとき、玉ねぎを炒めながらお米を研ぐことができるようなものです。
普通のプログラムだと、1つの作業が終わるまで次の作業に進めませんが、Node.jsでは複数のことが同時にできちゃいます！
大量アクセスもへっちゃら 🌏
「C10K問題」という、たくさんのアクセスがあったときに処理が遅くなる問題があります。
Node.jsは、その問題を解決できるスーパーヒーローなんです。
コンサートのチケット予約サイトとか、大勢の人が一度にアクセスするようなサイトでよく使われています。
開発が楽チンに 🛠️
Node.jsには「npm」という便利な道具箱がついています。
これは、プログラムを作るときに必要な部品（パッケージ）を簡単に管理できる仕組みです。
⚡️ npmについて
npmは「Node Package Manager」の略で、JavaScriptの開発に必要な部品(パッケージ)を簡単に追加・管理できるツールです。
例えるなら、スマートフォンのアプリストアのようなもので、必要な機能をサクッとインストールできる便利な仕組みです。
パッケージとは
パッケージとは、誰かが作った便利な機能をまとめたものです。
例えば、画像を加工する機能や、データベースに接続する機能、UIを作る部品など。
これらを1から作るのは大変ですが、npmを使えば既存のパッケージを簡単に追加できます。
🌈 Node.jsとnpmのインストール方法
Node.jsをインストールすればnpmも同時にインストールしてくれるため
公式サイトからインストーラーをダウンロードしましょう！
また、ターミナルからコマンドで実行したい場合、公式サイトからOSに合わせた実行コマンドが掲載されているのでご確認ください！
【Windows】
fnmをダウンロードしてインストールする
winget install Schniz.fnmNode.jsをダウンロードしてインストールする
fnm installNode.jsのバージョンを確認する
node -vnpmのバージョンを確認する
npm -v【macの場合】
Homebrewをダウンロードしてインストールする
curl -o- https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh | bashNode.jsをダウンロードしてインストールする
brew installNode.jsのバージョンを確認する
node -vnpmのバージョンを確認する
npm -vCursorをインストール済みの方は、「Node.jsとnpmをインストールしたい」と質問するとCursor先生が丁寧に手順を説明してくれます！
Cursorのチャット機能をぜひご活用ください👍
💡 さいごに
Cursor、Node.js、npmについていかがだったでしょうか？
Javascriptの開発ではNode.jsとnpmが必要！と覚えてもらえると良いと思います👍
Nodeのバージョン管理するnodenvも入れといて！と
社長に言われ、nodenvってなに？！となったので
次回「nodenv(ノードエンブ)」について詳しく見ていきたいと思います🙇
最後までありがとうございました。
引用元ブログ