Node.jsとnpm (Node Package Manager) 、あとcreate-react-app

アルちゃん

Node.js

Node.jsは、JavaScriptをサーバーサイドで実行するためのオープンソースのクロスプラットフォームランタイム環境です。通常、JavaScriptはブラウザ内で実行されることが多いですが、Node.jsにより、サーバーサイドのアプリケーションやコマンドラインツールなど、ブラウザ外でJavaScriptを実行することが可能になります。

主な特徴は以下の通りです：

  1. 非同期I/O処理：Node.jsは非同期I/Oを採用しており、システムの待機時間を減らすことができます。これにより、高いスループットのアプリケーションを構築できます。

  2. シングルスレッドモデル：Node.jsはシングルスレッドで動作しますが、非同期処理により多数の接続を効率的に処理できます。これにより、リソースを節約しつつ高性能を実現します。

  3. npm（ノードパッケージマネージャー）：Node.jsにはnpmという強力なパッケージ管理システムが付属しており、数多くの再利用可能なパッケージ（ライブラリやツール）が提供されています。

  4. クロスプラットフォーム対応：Node.jsはLinux, macOS, Windowsなど多くのプラットフォームで動作します。

  5. コミュニティとエコシステム：Node.jsには活発なコミュニティがあり、多くのモジュールやツールが開発されています。これにより、様々なニーズに対応するアプリケーションの開発が容易になります。

npm (Node Package Manager)

npm (Node Package Manager) は、JavaScriptのためのパッケージマネージャーで、Node.jsのプロジェクトでライブラリやツールを管理するために広く使われています。

Node.jsとnpmのインストール

Node.jsは、公式サイトからダウンロードできます。
npmはNode.jsと一緒にインストールされるので、Node.jsをインストールするとnpmも利用できるようになります。また、Node.jsを最新のバージョンにすればnpmもだいたい最新になります。

Ubuntuの場合

UbuntuにNode.jsをインストールする最も簡単な方法は、NodeSource社のリポジトリを使用することです。ターミナルで以下のコマンドを実行します：

curl -fsSL https://deb.nodesource.com/setup_21.x | sudo -E bash - &&\
sudo apt-get install -y nodejs

特にバージョンなどに関してNodeSource社のリポジトリで確認してください。

Node.jsのバージョン確認コマンドを実行

コマンドラインまたはターミナルに次のコマンドを入力して実行します。

node -v

最新のバージョンにするには再び公式からダウンロードしてくるなりNodeSource社のリポジトリを利用する必要があります。

最新のnpmバージョンをインストール

npmはNode.jsに付属しているため、Node.js自体を最新バージョンに更新することもnpmを更新する一つの方法です。

npm自体を最新バージョンに更新するには、以下のコマンドを実行します：

npm install -g npm@latest

このコマンドは、npmをグローバルにインストールし、@latestタグを使用して最新バージョンを取得します。


プロジェクトの初期化

新しいプロジェクトでnpmを使用するには、プロジェクトのディレクトリで以下のコマンドを実行します。

npm init

これにより、`package.json`ファイルが生成され、プロジェクトのメタデータや依存関係を管理します。

また、create-react-appするならこの操作は不要です。package.jsonも作ってくれます。

パッケージのインストールと更新

パッケージをプロジェクトに追加するには、以下のコマンドを使用します。
これはpackage.jsonが存在するディレクトリで行います。-gしてグローバルインストールするならどこのディレクトリでも関係ありません。

npm install <パッケージ名>

開発用の依存関係としてパッケージを追加する場合は、--save-devオプションを使用します。

npm install <パッケージ名> --save-dev

インストールされたパッケージを使用する:

インストールしたパッケージは、プロジェクトのファイル内でrequire()関数を使って読み込むことができます。

const library = require('<パッケージ名>');

パッケージをアンインストールする:

不要になったパッケージは、以下のコマンドでアンインストールできます。

npm uninstall <パッケージ名>

グローバルパッケージのインストール:

システム全体で使用するツールは、-gオプションを付けてグローバルにインストールします。

npm install -g <パッケージ名>

パッケージの更新:

インストールされたパッケージを最新版に更新するには、以下のコマンドを使用します。

npm update <パッケージ名>

npx

`npx`は、Node.jsのパッケージランナーの一つであり、Node Package Manager (npm) の一部として提供されています。`npx`を使用すると、Node.jsパッケージをインストールせずに実行することができます。これは、一時的なツールやパッケージをテストしたり、CLI（コマンドラインインターフェース）ツールを実行する場合に特に便利です。

主な特徴と利点

  • パッケージの一時実行: `npx`を使用すると、npmレジストリにあるパッケージをダウンロードして実行することができますが、グローバルにインストールする必要はありません。これにより、ディスクの使用量を節約し、プロジェクト間の依存関係の衝突を避けることができます。

  • 自動インストール: 実行しようとしているパッケージがシステムにインストールされていない場合、`npx`は自動的にそれをインストールしてから実行します。これにより、手動でパッケージをインストールする手間を省くことができます。

  • 実行可能ファイルの直接実行: プロジェクトの`node_modules/.bin`ディレクトリにインストールされた実行可能ファイルを`npx`を使用して直接実行することができます。これにより、パスを指定する必要がなく、コマンドラインから簡単にツールを実行できます。

  • 特定バージョンの実行: `npx`を使用すると、パッケージの特定のバージョンを指定して実行することが可能です。これにより、異なるバージョンのツールやライブラリを簡単に試すことができます。

使用例

npx [パッケージ名]

例えば、`create-react-app`を使用して新しいReactアプリケーションを作成する場合、以下のコマンドを実行します。

npx create-react-app my-app

このコマンドは`create-react-app`を一時的にダウンロードして実行し、`my-app`という名前の新しいReactアプリケーションを作成します。実行後、`create-react-app`はシステムに残らず、必要ならば次回も`npx`を使用して同様に実行できます。

`npx`はNode.jsとnpmのバージョン5.2.0以降で利用可能です。もし既存のNode.jsやnpmのバージョンが古い場合は、最新バージョンにアップデートすることをお勧めします。


package.json

`package-lock.json`ファイル:

npm v5以降、`npm install`を実行すると`package-lock.json`ファイルが生成されます。これにより、プロジェクトの依存関係が正確に記録され、他の環境で同じバージョンのパッケージがインストールされるようになります。

npmスクリプトの実行:

`package.json`ファイル内の`scripts`セクションにコマンドを定義して、`npm run`を使ってこれらのスクリプトを実行できます。

これらはnpmの基本的な使い方といくつかの高度な機能ですが、npmは非常に強力で多機能なツールなので、詳細なドキュメントやチュートリアルを参照することをお勧めします。公式のnpmドキュメントは、より深い理解を得るための素


Create React App

Reactプロジェクトのセットアップには、`create-react-app`が便利です。これは、Reactプロジェクトのための構成を自動的に行ってくれます。コマンドラインで以下のコマンドを実行します：

npx create-react-app my-react-app
cd my-react-app

ここで、`my-react-app`は新しいプロジェクトの名前です。任意の名前に置き換えてください。

プロジェクトの構造

`create-react-app`によって、以下のようなディレクトリ構造が生成されます：

my-react-app/
  node_modules/
  public/
  src/
  package.json

主な開発は`src/`ディレクトリ内で行います。

サンプルコンポーネントの作成

`src/`ディレクトリ内に`HelloMessage.js`という名前のファイルを作成し、以下の内容を追加します：

import React from 'react';

class HelloMessage extends React.Component {
  render() {
    return <div>Hello, {this.props.name}!</div>;
  }
}

export default HelloMessage;

コンポーネントの使用

次に、`src/App.js`を開き、`HelloMessage`コンポーネントをインポートして使用します：

import React from 'react';
import HelloMessage from './HelloMessage';

function App() {
  return (
    <div className="App">
      <HelloMessage name="Altchan" />
    </div>
  );
}

export default App;

アプリケーションの実行

全ての設定が完了したら、以下のコマンドを使用してローカルサーバーを起動し、アプリケーションを実行します：

npm start

VSCodeを使用しているならVSCodeのターミナルから、
Ubuntuなどを使用しているならUbuntuなどのターミナルからstartします。

ローカルサーバーの終了

Reactアプリケーションを開発する際、特に`create-react-app`を使用している場合、開発サーバーはコマンドラインから起動されます。Visual Studio Code (VSCode) のターミナルや他のコマンドラインツールから`npm start`や`yarn start`コマンドを実行することで開発サーバーを起動します。この開発サーバーはブラウザのタブを閉じても自動的には終了しません。ブラウザのタブを閉じた場合でも、開発サーバーはバックグラウンドで実行され続けます。

開発サーバーを終了するには、サーバーを起動しているターミナルに戻り、通常は`Ctrl + C`（WindowsおよびLinux）または`Cmd + C`（macOS）を押して終了のシグナルを送信します。その後、終了するかどうかを確認するプロンプトが表示されるので、`y`を押して確認します。これにより、開発サーバーはシャットダウンされます。

VSCodeターミナルからReactアプリケーション（または他のサーバー）を起動した場合、VSCodeのターミナルを閉じる、あるいはVSCode自体を閉じればローカルサーバーは終了します。

UbuntuのターミナルからReactアプリケーション（または他のサーバー）を起動した場合、ターミナルを閉じるとそのプロセスも通常は終了します。これは、ターミナルがそのプロセスの親プロセスであり、ターミナルが閉じると子プロセスもシグナルを受けて終了するためです。

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