Noob Front End Engineer Blog

CONTACT

触って直感で覚えるNode.js入門

2020/01/06

記事概要

今回は、フロントエンド界隈では必須のスキルとなりつつあるNode.jsの解説を行っていきます!
環境構築から、実際に簡単なモジュールの使用方法まで紹介します。

Node.js とは

そもそもNode.jsとは何ぞやというところですが、
よく説明で使われるのは「サーバーサイドで動くJavaScript」です。
言葉で聞いてもピンと来ないので、実際に手を動かして見てみましょう!

下記の様な手順で作業を行ってみると、
素のJavaScriptとNode.jsの違いが感覚的につかめるかと思います。

  1. デスクトップ等にtestを出力するjsファイルを作成
  2. jsファイルをダブルクリックで実行しようとするとエラーが出る
  3. Node.jsを使用してコマンドラインから作成したスクリプトを実行するとtestが出力される

node-test.gif

素のjsはブラウザ上では動作しますが、ローカルOSやサーバー上では動作しません。
しかし、Node.jsを介してjsを実行する事で本来クライアントサイドでしか実行されないjs
バックエンド言語としても使用できるようになります。

慣れ親しんだJSでバックエンドの処理も書ける事から、フロントエンドエンジニアを中心に人気が高まったようです

正確には違うかもしれませんが、
これがサーバーサイドで動くってことかぁ
となんとなく感じでいただけたかと思います!

では次に、Node.jsでよく使用される
npmについて見ていきましょう。

npm とは

npmはパッケージ管理システムの一種です。

npm上には凄い人たちが作った、凄いモジュールが沢山あります。
Node.jsではそれらのモジュールをインストールする事で
使用することができるのですが、そのインストールの際にnpmを使用します。

モジュールは依存関係を持っている事が多く、
「モジュールAを使用するためにはモジュールBが必要で
そのモジュールBを使用するためにはモジュールCが~…」
みたいなことが頻繁に起きます😭

npmはこのような事件を解決して
モジュールAをインストールする。と実行するだけで
そのモジュールを実行するために必要なモジュールを併せてインストールしてきてくれます。

PHPでいうところのcomposerと同じ役割ですね

モジュールの使用方法

では、実際にモジュールを使用してみましょう!
まずは、今回作業するディレクトリを作成してください。
私はデスクトップにtestというディレクトリを作成して説明を行っていきます。

※ Node.jsはインストール済みを想定しています。
※ ターミナルはgit bashを使用しています。

下準備

まずは該当のディレクトリに移動して、下記コマンドを打ってみましょう。

npm init

色々と入力を求められますが、すべてEnterで大丈夫です。
するとpackage.jsonというファイルができるのでこのファイルを開いてみましょう。

package.jsonの中の"scripts"
"test"というscriptがあるかと思います。
この部分を下記の様に書き換えてみましょう。

package.json
  "scripts": {
    "test": "echo hello world !"
  }

そして、下記コマンドを実行すると「hello world !」が
表示されるはずです!

npm run test

これが基本的なnpm-scriptsの実行方法です。

npm-scriptsを実行する際はpackage.jsonがある
ディレクトリでnpm run [スクリプト名]で実行が可能です!

次はnpmでモジュールをインストールして、
そのモジュールを使用したスクリプトを作成・実行していきましょう。

モジュールの使用

今回は例としてonchangeモジュールを使用してみましょう。
このモジュールはファイルの変更を検知してくれるという機能になります。
下記コマンドでインストールを行いましょう。

npm install onchange

インストールが完了したのを確認したらpackage.jsonを見てみましょう。
すると、"dependencies"という項目に"onchange"が追加されていると思います。
これがあることで、npm installコマンドを打つだけで、
onchangeモジュールをインストールしてきてくれます。

つまり、複数人で開発を行う際package.jsonが共有されていれば、
その階層でnpm installを行うだけで"dependencies"にあるモジュール群を
全てインストールしてきてくれるという仕組みです!

必要なモジュールをひとりひとりが一個ずつ
インストールする必要が無いのは、このおかげです。

それではインストールしてきたonchangeモジュールを実際に使ってみましょう。
詳細な使用方法は公式にあるので、そちらを参考にしてください。

まずは今回使用しているディレクトリの中に、srcというディレクトリを作成してください。

次に、package.jsonを開いて先ほど編集した
"scripts""test"の箇所を下記の様に変更してください。

package.json
  "scripts": {
    "test": "onchange src/* -- echo {{changed}}"
  }

行っている事としては下記のような感じです。

onchange [監視するファイル] -- [変更があったときに実行されるスクリプト]

今回は、『srcディレクトリ内で、変更があったら変更があったファイル名を出力する。』という単純なものです。

途中で使われている{{changed}}というのもonchangeモジュールの機能の一つで、
変更が検知されたファイルのファイル名を教えてくれます。

では、実際にスクリプトを実行してみましょう。

npm run test

すると、監視モードになると思うので、
作成したsrcディレクトリに適当なファイルを作成したり
編集したりしてみてください。変更したファイル名が出力されたら成功です🥳

以上がNode.jsの簡単な説明になります!今回使用したonchangeモジュールは使い方次第で
色々な用途に使用できるので、とてもおすすめです。

今まではNode.jsを使ってはるけど、どんなものなのかをあまり理解してなかったので、
同じような人の助けになれば幸いです!


Written by daichi iwamoto