ともすたmedia

2022.03.10

npmってなに? Node.jsのバージョンを切り替えられるVolta / nとyarnも紹介

    記事を共有:

    • X
    • Pocket
    • クリップボードにコピー

    プログラミングやウェブ制作を学習すると、次のような記述によく出会います。

    npm install ...
    yarn add ...

    これらの記述はいったい何を意味しているのでしょう? これは「Node.js(ノードジェイエス)」を利用したコマンド。ここでは、このNode.jsの使い方とバージョンを管理するための「Volta」と「n」についてまとめて紹介していきましょう。

    JavaScriptは「ブラウザー上でしか動かない」

    Node.jsを理解するには、先にJavaScriptというプログラミング言語を知る必要があります。JavaScriptは、ウェブ制作などでよく利用されるプログラミング言語ですが「クライアントサイドスクリプト」などと呼ばれます。

    例えば、こちらもよく利用される「PHP」や「Python」、「Ruby」などは「サーバーサイドスクリプト」などと言われますが、JavaScriptと大きく異なる点があります。

    それは、「JavaScriptはブラウザーがないと動作できない」ということ。PHPやPythonは、自分のコンピューターにPHPやPythonをインストールすれば、直接動作させることができます。

    しかし、JavaScriptは従来ウェブブラウザーにファイルを読み込ませない限り、動作しませんでした。これは、JavaScriptの「実行エンジン」と呼ばれるエンジンが、ウェブブラウザーに組み込まれて提供されているため。

    Node.jsは、このJavaScript(正確にはECMAScript)の活用範囲を広げるべく、JavaScriptの実行エンジンをサーバーやコンピューターに提供するための実行環境です。

    Node.jsをインストールしよう

    Node.jsを利用すれば、ブラウザー上でしか動作しなかったプログラムを自分のコンピューター上で動作させたり、サーバー上で動作させることができ、JavaScriptの活用範囲が非常に広がります。

    そして今、このNode.jsを利用したさまざまなアプリケーションが提供されているのです。

    Node.jsを利用するには、次の公式サイトからインストールプログラムをダウンロードしてインストールする方法があります。

    ただし、実際には後述する「Volta」や「n」を使ってインストールするため、ここでは公式サイトを確認するだけで良いでしょう。これをインストールすると、次の各コマンドが利用できるようになります。

    node
    npm
    npx

    日々バージョンアップしていくNode.js

    Node.jsは日々開発が進んでいて、常にバージョンが変化しています。例えば、先の公式サイトにアクセスすると左右に分かれたボタンが並んでいますが、右側の「最新版」の他に左側に少し数字が古い「LTS」というバージョンが配布されています。

    LTS(Long Term Support)の略称で、いわゆる「安定版」などと言われます。それ以上の開発は止められている代わりに、セキュリティ的な懸念があるときには、積極的にそれを解決するバージョンアップは提供されるというバージョンになります。

    最新版の方は、激しく開発が進んでいるため、機能使っていた機能が使えなくなるといったこともありえるため、通常の利用ではLTSを利用した方が安心でしょう。

    さらに、Node.jsは「バージョンの依存」が激しく、15系で動作していたものが16系や17系では動作しないとか、16系以降の機能を使っているため15系以前では動作しないなど、さまざまな状況があります。

    そこで、Node.jsはさまざまなバージョンをインストールして切り替えて利用するケースが多くあります。

    それを実現するのが「Volta」と「n」です。

    Node.jsのバージョンを管理しよう

    Voltaやnは「バージョンマネージャー」や「ツールマネージャー」などと呼ばれるツールです。Node.jsなどを複数のバージョンを同時にインストールできるようになり、手軽に切り替えながら使いたいバージョンのツールを使うことができます。

    ここでは、Voltaを実際に使いながら確認してみましょう。

    Voltaをインストールしよう

    Voltaの公式サイトにアクセスします。

    macOSやLinuxの場合は、ターミナルを起動して次のコマンドを入力します。

    curl https://get.volta.sh | bash

    そしたらいったんターミナルを再起動しておきましょう。

    Windowsの場合は公式サイトからセットアッププログラムをダウンロードして、セットアップしましょう。その後、Windowsターミナルまたは、PowerShellを起動すれば利用できるようになります。

    インストールが完了しているかは、コマンドラインに次のコマンドを入力してみましょう。

    volta -v

    -vというのはコマンドのバージョンを調べるためのオプションで、ソフトウェアが正しくインストールされているかを確認するときなどによく使われます。

    VoltaでNode.jsをインストールしよう

    それでは、Voltaを使ってNode.jsをインストールしてみましょう。次のように入力します。

    volta install node

    すると、Node.jsの現在提供されているLTS版がインストールされます。次のコマンドでバージョンを確認してみましょう。

    node -v

    別のバージョンをインストールしよう

    では、他のバージョンをインストールしてみましょう。ここでは、LTS版が16として1つ前の15をインストールしてみます。次のように入力します。

    volta install node@15

    再びバージョンを調べてみましょう。

    node -v

    すると、バージョンが古くなっていることが分かります。

    再び、LTS版に戻したい場合は次のように入力します。

    volta install node

    すでにインストールされている場合でも、installというコマンドを利用することができます。バージョンを確認しましょう。

    node -v

    こうして、手軽にNode.jsのバージョンを切り替えられるようになりました。こちらでNode.jsを利用していきましょう。

    バージョン管理システム「n」

    nというのも、Node.jsのバージョン管理システムです(現状macOS/Linux専用)。Voltaよりもシンプルに利用できます。ここではインストール方法を紹介しますが、Voltaと一緒に入れてしまうと誤動作の原因となるため、どちらかを利用するようにしましょう。

    Voltaをアンインストールした場合は、macOSの場合は以下のフォルダを削除します。

    /Users/(ユーザー名)/.volta

    Windowsの場合は、通常のアプリのアンインストール方法でアンインストールできます。

    nをインストールする場合は、次のようなコマンドを入力します。

    curl -L https://git.io/n-install | bash

    すると、nというコマンドが利用できるようになります。

    nでNode.jsをインストールする場合は、例えばLTSバージョンをインストールする場合は、次のようにします。

    n lts

    他のバージョンをインストールしたい場合は、そのバージョン番号を指定します。

    n 15

    バージョンを切り替えたい場合は、シンプルにnというコマンドを使うと、バージョンを選ぶ画面が表示されます。

    n

    こうして利用できます。

    Node.jsでプログラムを作成してみよう

    では、せっかくなのでJavaScriptを使って簡単なプログラムを作成してみましょう。エディターを起動して、次のように入力します。

    let answer = 5 + 10
    console.log(answer)

    このファイルを「sample.js」などのファイル名で保存しておきましょう。そしたら、次のようにして実行します。

    node sample.js

    すると画面には「15」と表示されました。

    これは、「5+10」の計算結果が表示されたという訳です。こうして、JavaScriptを使ってアプリケーションを作成することができるようになります。

    Node.js製パッケージを管理できるパッケージマネージャー

    Node.jsで作られたツールは、それぞれのサイトでダウンロードして利用することはできますが、各サイトを探し回ったりが面倒だったり、各ソフトが他のソフトに依存していたりなどで、いろいろなソフトをインストールしなければならなかったりします。

    そこで、Node.jsでは「Node Package Manager」というツールが提供されています。これを使えば、簡単なコマンドでツール(パッケージといいます)をインストールすることができます。

    合わせて、これらのパッケージを管理するリポジトリーサイトの「npm」もあり、ここに世界中から優れたパッケージが日々登録されています。

    例えばここでは、CSSを生成するツールである「sass」をインストールしてみましょう。次のように入力します。

    npm install sass

    npm installの後に、インストールしたいパッケージの名前を指定します(短くnpm iと記述する事もできます)。パッケージの名前は、先の「npm」の中から探すことができます。

    https://www.npmjs.com/package/sass

    例えば、次のようなファイルを作成して「style.scss」というファイル名で保存してみましょう。

    $main: blue;
    
    header {
      h1 {
        color: $main;
      }
    }

    ここではSCSSの詳しい書式は省略するので、興味があったら「SCSS」について学習してみてください。これを変換すると、CSSファイルを作ることができます。次のように入力しましょう。

    npx sass style.scss style.css

    これで、同じフォルダー内に次のようなstyle.cssができあがります。

    header h1 {
      color: blue;
    }

    このように、自分に必要なツールをインストールして利用する事ができます。なお、ここで利用したnpxというコマンドも、Node.jsをインストールすると同梱されるコマンドです。「パッケージランナー」などと呼ばれ、インストールしたパッケージを直接インストールするためのコマンドです。

    Node.jsを利用する時は、先の通りnodenpmnpxコマンドを使い分けていくことになります。

    npmと互換性のあるYarn

    npmと合わせてよく聞かれるコマンドに「yarn(ヤーン)」があります。これは、npmと同じ「パッケージマネージャー」の1つで、npmに比べて高速で簡単に扱えるという特徴があります(ただし、その後npmも改良されて、今ではあまり差がなくなりました)。

    Yarnは、npmと互換性を保って開発されているため、npmと組み合わせて使ったりなども可能です。

    Yarnも、先の「Volta」を使えば簡単にインストールできます。次のコマンドを入力しましょう。

    volta install yarn

    インストールできたら、次のようにしてインストールされたか確認しましょう。

    yarn -v

    例えばここでは、先ほどnpmを使ってインストールした「sass」を、アンインストールしてみましょう。次のようなコマンドを入力します。

    npm uninstall sass

    これで起動できなくなりました。

    今度は、Yarnを使ってインストールしてみましょう。

    yarn add sass

    後は、次のようにしてSassを使うことができます。

    yarn sass style.scss style.css

    こうして、npmと同じように利用できます。現状、好みで使い分けると良いでしょう。

    Node.jsはこれからのプログラミングの必修科目

    Node.jsは誕生してから急激に発展して、今ではサーバーやデスクトップなどで欠かせないツールとなりました。プログラミングやウェブ制作に必要なツールも、npmを通じて配布されているケースがほとんどなので、ぜひ使い慣れていきましょう。

    ソフトウェア開発に必要なpackage.jsonなどについても、また別の機会に触れていきたいと思います。

    一覧に戻る