見出し画像

急にReactやることになったのでNode.jsとnpmをインストールすることに

JavaScript、それも古い方のしか扱ったことがない人間が急にReactを扱うことになったので急遽Node.jsを導入することとなりました。

この記事はNode.jsとそのパッケージ管理システムであるnpmのインストールで学んだことをまとめます。

Node.jsというのはJavaScriptの実行環境

それまでブラウザ上で動作していたJavaScriptをパソコン上で動作させるための実行環境です。
サーバーサイドの実行環境として用いられ、その後ライブラリなどが充実するに従ってクライアントサイドでも開発環境に用いられるようになったとのことです。

npmというのはNode.jsのパッケージ管理システム

バージョンや、パッケージの依存関係を解決してくれるpipとかaptとかyumとかそんな感じだろうと思ってます。

Node.jsのインストール(npmも)

まずProgateの記事を元にWindowsのローカル環境にインストールしたのですが、この時点ですでにわけがわからなくなったので一旦手を止めて調べることとしました。

Envaderの「npmの使い方」というコースで仮想環境下で環境構築ができるので今回はまずそちらで学んでから実行することに。

sudo apt update
sudo apt install -y curl
curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash - 
sudo apt  install -y build-essential nodejs

上記のコマンドでインストールできます。

  1. まずaptをアップデート

  2. URLからDLするためにcurlをインストール

  3. curlでURL指定してaptでインストールする

といった内容です。

完了したら node -v でバージョンを表示してインストールが完了したことを確認します。

npmもインストールされているので同様に npm -v でバージョン確認をしておきます。

npmの使い方

パッケージ管理システムなので必要なライブラリなどがあったらインストールする感じです。

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

通常インストール。例ではaxiosというHTTPクライアントをインストールしています。

npm install axios

開発インストール
開発環境でのみ使う場合は-Dオプションを指定します。
例では構文チェックに使われるprettierとeslintをインストールしています。
いずれも本番環境には必要ないものです。

npm install -D prettier eslint

新規プロジェクトの初期化

ディレクトリ(例)appNameを作成し、以下のコマンドでプロジェクトを初期化することが出来ます。

cd appName/
npm init
npm init -y

※プロジェクト名や概要など必要に応じて内容は変更して下さい。

学んだこと

とりあえずWindowsにインストールしただけでわけがわからなかった状態を、実際に手を動かすことによって一通りのインストール手順とパッケージインストールといった用途を身につけることが出来、解消できました。

参考記事

今回Node.jsとnpmを学ぶに当たり参考にした記事です。先人の知見に感謝です!


この記事が気に入ったらサポートをしてみませんか?