Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
60
Help us understand the problem. What is going on with this article?
@nt-7

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

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してみて下さい。

60
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
nt-7
発言は個人の見解です

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
60
Help us understand the problem. What is going on with this article?