76
72

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

nodebrew,npm,yarnなどNode.js関連をざっくり学びながらインストール【初学者向け】

Last updated at Posted at 2018-03-26

Node.js周辺をざっくり学びながらインストールしていく

Node.jsの環境を初めて構築するインターン生あたりを対象

インストール手順に加えて、
業務でNode.jsを導入するインターン生と関わる機会があり、その時思ったこと含め、初学者がどうインストールし、どうその周辺を学んでいくべきかも記述(あくまで個人的見解)

前置き長いので、インストールを勧められた方は**ここ(メイン)**からどうぞ。

想定するシチュエーション

  • 業務等で**Node.js**を使うことに
  • Node.js関連をMacにインストールしたい
  • node,npm,yarn等使うツールチェーン・バージョンは記載されてるが具体的なインストール方法は不明

想定される気持ち

  • インストール方法も分からないが、そもそもそれらが何者なのか分からない
  • 分からなくてもとりあえずインストールすべきか…それぞれ理解しながらインストールすべきか…

個人的見解

  • 正しい理解をするのはとても大切
  • だがツールの理解だけに業務の大部分を費やすのはあまり好ましくない
  • というより芋づる式に分からない言葉が出現全て詳しく調べると時間がかかりインストールに全然取り掛かれないケースも(その姿勢や意欲は大歓迎!!)
  • インストール後に開発しながらも学べる
  • とはいえ、何も分からずただインストールは好ましくない

結論

  • まずはざっくり学ぶ
  • 学びつつ順にインストールする
  • インストール後、開発と並行して都度正しく詳しく学ぶ
  • 正しく詳しく学ぶには公式リファレンスがBest

まずはNode関連をざっくり学ぶ

Node.jsとJavaScript

  • JavaScript

    • 主にWebブラウザ上で実行されるプログラミング言語(だった)
    • 特に最近需要が高まる
  • Node.js

    • ChromeのJavaScriptエンジンV8で動作するJavaScript実行環境(runtime)
    • 要は、Webブラウザ以外でJavaScriptを実行するための環境の1つ
    • これにより、Webブラウザで動くJavaScriptからサーバサイド(とは限らないが)でも動くJavaScriptに変遷
    • 非同期型のイベント駆動で「ノンブロッキングI/O & イベントループ」と言う特徴を持つ(キーワードだけを知っておき詳しくは後々調べるというのをオススメ)

パッケージ管理ツール

npm

  • Node.jsの大事なエコシステムの1つ
  • Node.jsのパッケージ管理ツール
  • ざっくり言うと、Node.jsのパッケージの依存関係やらを解決して色々インストールやアップデート等の管理をしてくれるツール
  • localとglobalなど環境ごとに分けてパッケージをインストール可
  • package.jsonでProjectのパッケージを管理(ここでscriptの登録等も可能)

yarn

  • npmと同じくパッケージ管理ツール
  • npmと同じくpackage.jsonで管理
  • 速度が改善されており、速い

Node.jsのバージョン管理

  • Node.jsの世界では特に、開発ごとにバージョンをコロコロ変更すると言うシチュエーションが頻繁に起こる
  • Node.jsのアップデートが激しい

上記の理由により、Node.jsのバージョン管理を行ってくれるツールがあると便利
(あくまで必須ではなく推奨)

今回はNode.jsのバージョン管理ツールの1つ**nodebrewをインストールする。
Windowsなら
nodist**がオススメ。nodistのインストール手順はこちらで紹介。

インストール手順

  • ターミナル上でコマンドを打つ時に以下等に気をつける。
  • 空白がはいってない
  • 半角ではなく全角になっている
  • 大文字と小文字が違う
  • 今回はMacOSにインストールすることを想定。
  • ざっくり学んだことを思い出し大まかな流れを把握しながら順にインストールする

Node.jsのバージョン管理ツールnodebrewのインストール

1.**nodebrew**のインストール

curl -L git.io/nodebrew | perl - setup
export PATH=$HOME/.nodebrew/current/bin:$PATH
source ~/.bash_profile

2.バージョン確認

以下のコマンドを打って、nodebrewのバージョンが出ればOK。

nodebrew -v

nodebrewでNode.jsをインストール

  • nodebrewでNode.jsのあるバージョンをインストール
  • nodebrewでインストールしたNode.jsのうち使用するバージョンを指定

1.インストール可能なNode.jsのバージョンを確認

nodebrew ls-remote

2.今回は試しにNode.jsのバージョン6.11.4をインストール
(versionは自分のinstallしたいversionに変更する)

nodebrew install-binary v6.11.4

3.installできていることを以下のコマンドで確認
v6.11.4があればOK。

nodebrew ls

4.nodebrewで使用するNode.jsのバージョン指定

(このコマンドによって複数installしたNode.jsのバージョンを簡単に切り替えれる)

nodebrew use v6.11.4

5.version確認
以下のコマンドでversionがv6.11.4になっていれば成功

$ node -v

npmの指定バージョンをインストール

1.使用するバージョンを@以降に指定してnpmをinstall

npm install -g npm@5.7.1

2.version確認

以下のコマンドで5.7.1になっていることを確認

npm -v

nodebrew useでNodeのバージョンが切り替わると、Nodeのバージョンだけでなく、そのバージョンごとでnpm install -gしたnpmのバージョンに一緒に切り替わる

yarnのインストール

1.yarnもバージョンを指定してglobalにインストール
(今回はnpmでinstallするが、brew経由でもinstall可能)

npm install -g yarn@1.3.2

2.version確認

以下のコマンドで1.3.2になっていることを確認

yarn -v

試しにnpmでangular-cliをglobalにインストール

install全て成功したので試しに、npmを用いて、フレームワークAngularのangular-cli(version1.7.2)をglobalにインストールしてみます。

npm install -g @angular/cli@1.7.2

ちなみにnpmではなくyarnでglobalにインストールする場合は以下

yarn global add @angular/cli

installが完了したらversion確認
実行結果に Angular CLI: 1.7.2 のような記述が含まれてればOK

ng -v

最後に

それぞれをざっくり学びながら、バージョン管理ツールnodebrewを用いてNode.jsやnpmをセッティングし、npmでyarnをインストールしました。試しにnpmでangular/cliもインストールしました。

前述しましたが、今後より詳しく知りたい時は都度ツール等の公式リファレンスを見ることをオススメします(関連記事を沢山見るより結果的に一番効率が良い)。

追記

nodebrewでls-remoteでバージョンがあるはずなのに、インストールするとnot foundのエラーが出てインストールできない問題の対処方法

$ nodebrew install-binary v6.11.4


--------------------コマンド実行結果--------------------

v6.11.4 is not found

Can not fetch: https://nodejs.org/dist/v6.11.4/node-v6.11.4-darwin-x64.tar.gz

上記のようなErrorが出る場合、

nodebrew selfupdate

のコマンドによりnodebrew自体をupdateすることで解決する場合があります。
selfupdateをした後に再度install-binaryしてみて下さい。

76
72
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
76
72

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?