はじめに

２回目の投稿になります。
Webデザイナーとして未経験で入社して3ヶ月が経過しました。
どうすれば主要クライアントのプロジェクトにアサインしてもらえるかと先輩エンジニアの方に質問したところ、サーバーサイド周りのNode.jsやnpmの知識がないとアサインできないとのことでした。
そこで今回は学習した内容を簡単にまとめようと思います。

※この記事は環境構築の最初の段階のみになるので、gulpインストールしたり、gulpfile.jsでタスクを記述していく部分に関しては改めて投稿しようと思います。

Node.jsとは

本来ブラウザ側で使用する言語であるJavaScriptがNode.jsの登場によってJavaScriptでサーバーサイドの処理・制御をプログラムすることができるようになった。
Node.jsはWebサイトやWebアプリケーション、スマホアプリ開発で使用されている。
またJavaScriptだけでサーバー環境を構築したり、膨大なデータを処理・制御することができるようになった。

Node.jsのメリット

• 非同期通信による高速な動作
• 大量をデータ処理が可能に
• メモリの消費量が少なく、また処理速度も速い

npmとは

npmとはNode Package Managerの略で、言葉の通りでNode.jsのパッケージを管理（マネージ）するためのツールである。

Node.jsにはブラウザ上で動くJavaScriptライブラリや便利なプラグインが用意されていて、それらを管理することができる。（例えば、プラグインをフォルダに直接追加するなど）

npmをインストールすることで、例えばタスクランナーのGulp/Grunt、モジュールバンドラーのwebpackなどをnpmでインストールして、npmで様々な操作を行うことができる。

npmをインストール

タイトルにはNode.jsとnpmのインストール方法と記載していたが、npmはNode.jsをインストールすることで自動的にインストールされる。

▼ Node.js公式サイト　
https://nodejs.org/ja/

↑こちらのサイトからNode.jsの最新バージョンをインストールすることができる。

※Node.jsをインストールする方法はnodebrewというnodeのバージョンを管理、切り替えするためのツールを先にインストールしておくことでも可能であるが、今回その説明は行わない。

Nodeがインストールされているか確認

Node.jsがインストールされているかもコマンドラインから確認することができる。

$ node -v

追加されていれば、v8.4.0のようにバージョン名とともに確認することができる。

npmがインストールされているか確認

npmがインストールされているかもコマンドラインから確認することができる。

$ npm -v

このコマンドラインを実行することで、npmがインストールされているか、またnpmのインストールされているバージョンを確認することができる。
コマンドを実行すると、6.13.4のようにバージョンが表示されるので、npmがインストールされていることを確認できる。

既存プロジェクトのパッケージを一括インストールする方法

$ npm install 

GitHubからNode.jsが採用されているプロジェクトフォルダをクローンしてきたとしても、自分のマシンには同じ開発環境が構築されていない。

プロジェクトで使用されているパッケージを一から追加していくことも可能ではあるが、大変手間であるしバージョンを統一させる必要があるなど面倒でミスも発生する可能性がある。

そこでnpm installコマンドを実行するだけでそのプロジェクトで追加されているプラグインをそのままローカル環境に追加することができる。

package.jsonとは

ここでいきなりpackage.jsonというワードが出てきたが、package.jsonとはnpmプロジェクトの情報を管理しているファイルである。
ここにnpmプロジェクトの情報やnpmでインストールしたパッケージ情報を管理する。

package.jsonファイルを作成

package.jsonファイルはnpmで作成することができる。

$ npm init

npm initとコマンドを実行することでpackage.jsonファイルを作成する前にプロジェクトの情報を入力を促される。
トレーニングとしてpackage.jsonファイルを作成するなら全てエンターキーを押してしまっても良い。

ちなみにnpm initによってpackage.jsonが作成される場所は現在のコマンドライン上にいるディレクトリに作成されるので、プロジェクトのディレクトリに移動してからnpm initのコマンドを実行するのが良い。

現在のどのディレクトリにいるのか確認するコマンド

package.jsonを作成する前に現在どのディレクトリにいるのか確認するためには下記のコマンドを実行する。

$ pwd

これで現在のディレクトリを確認することができる。

プロジェクトフォルダへ移動するコマンド

プロジェクトフォルダへ移動するためには下記のコマンドを実行する。

$ cd プロジェクトフォルダ

すでにプロジェクトフォルダを作成している場合は、直接コマンドライン上にそのフォルダをドラッグ&ドロップすることでディレクトリがコマンドラインに表示される。

cdとはchange directoryの略である。コマンドはこのように省略されていることが多く、ただの文字だと覚えるのが難しいので略称前の意味を覚えることで自然とインプットすることができると思います。

最後に

かなり中途半端な終わり方になったと個人的にも思っているが、タスクランナーのgulpを導入する方法なども含めて改めて記事をまとめようと思う。

また今回はNode.jsを公式サイトから直接インストールする説明のみであったが、個人的にはnodebrewを使用してNode.jsをインストールしてきたので、そこらへんの説明もまた時間を見つけて追加していこうと思う。

フロントエンドエンジニアの道はまだまだ険しい...