私が勤めるWEB系の会社で、Node.jsをベースにしたgulpが導入されました。
コードに触る人数が増えたことを受けて、コードの質を保つために先週から試験導入していましたが、ついに来週月曜日からの正式導入となりました。
そこで、まずは環境構築をしてみたのでその手順をまとめます。
Node.jsとは?gulpとは?ざっくり説明
Node.jsとは
JavaScriptといえばWebページに動きをつける(スムーススクロール、ポップアップ表示など)クライアントサイドとして活用される場面が多いですが、実はサーバーサイドでも活躍の場を作ることができます。
サーバーサイドJavaScriptの中でも一番有名なのがNode.jsで、MicrosoftやYahoo!など大手企業でも推奨されています。
もともと、クライアントサイドもサーバーサイドもJavaScriptで統一できたら、開発が楽じゃん?ということで脚光を浴びました。
gulpとは
Node.jsをベースにしたビルドシステムヘルパーで、様々なタスクを自動化できるツールです。
具体的には、CSSやJavaScriptの圧縮や、Sassの自動コンパイルなどを自動で行ってくれるもの。
私の会社では、Sassのコンパイル、各種コードのインデント調整、FTP接続・アップロードなどを行ってもらうことになりました。
Node.jsの環境構築
個人的にJavaScriptに少し苦手意識があったので、Node.jsも難しそう……と勝手に思ってしまいました。
そして新しい言語を触ってみるにはそれに合わせた開発環境の構築が必要なんですが、私は開発環境の構築が大の苦手。
(まあ、あまり環境構築が好きな人もいないと思いますが)
苦手意識 × 苦手意識。
さぞや苦労するだろうな、と思ったのですが、実はNode.jsの環境構築はめちゃくちゃ簡単でした。
必要な手順はこちら。
- 公式サイトからNode.jsをダウンロードしてインストール
- Node.jsと一緒にインストールされるnpmにお任せしてpackage.jsonを自動作成
- npmに必要なものをインストールしてもらう
以上。
各種インストールは半自動なので、あまり考えることはありません。
公式サイトからNode.jsをダウンロードしてインストール
Node.jsの公式サイトはこちら。
こちらで、自分の環境にあったものをダウンロードします。
特別な理由がなければ、最新版ではなくLTS(推奨版)を選びます。
以下、画面はmac OS 環境のものになりますが、Windows環境も必要な手順は変わりません。
案内にそって次へ進んでいくだけで、基本的に特別な設定などは必要ありません。
インストールが完了したら、ターミナルで以下のコマンドを叩きます。
$ node -v
その結果、バージョンが表示されたら成功です。
私は、v10.13.0をインストールしました。
Node.jsと一緒にインストールされるnpmにお任せしてpackage.jsonを自動作成
Node.jsをインストールすると、一緒にnpm(Node Package Manager)もインストールされています。
これは、Node.jsのライブラリやパッケージを管理してくれるスグレモノ。
作業用フォルダを用意したら、ターミナル(Windowsならコマンドプロンプト)でそのフォルダを開き、初期化コマンドをたたきます。
$ npm init
すると、下記項目を順に聞いてくるので答えていきます。
- package name – パッケージ名
- version – バージョン名
- description – 概要説明
- entry point – 初期表示させるファイル名
- test command – テストコマンド
- git repository – Githubに保存するリポジトリ情報
- keywords – npmの公開時に使用されるキーワード
- author – 作者情報
- license – npmの公開時に適用する権利情報
やや面食らうかもしれませんが、一般にリリースするものでなければ適当でいいようです。
私はすべてEnterを押して初期設定のままにしました。
するとpackage.json
というjsonファイルが自動で作られます。
npmに必要なものをインストールしてもらう
ここまでで最低限必要な準備が整いました。
かかった時間は3分ほど。
あとは、開発するのに必要なパッケージなどをnpmを使ってインストールするだけ。
試しに、mysqlをインストールしてみます。
package.json
のあるフォルダで、以下のコマンドをたたきます。
$ npm install mysql
npm install [インストールしたいパッケージ名] です。
すると、package-lock.json
ファイルと、インストールされたものが入ったnode_module
フォルダが生成されます。
インストールの際、以下のような警告がでることがあります。
npm WARN nodejs@1.0.0 No description
npm WARN nodejs@1.0.0 No repository field.
初期設定項目の入力時にいくつかの項目を空白にしていたためですが、開発に関係ないので無視して構いません。
これで環境構築は終了。
もう開発にはいれます。
トータルの所要時間は5分かかりませんでした。
ちなみに、インストールしたパッケージをアンインストールするときも、以下のコマンド一発でいけます。
$ npm uninstall パッケージ名
まとめ
実際に設定してみて、なにこれ、めちゃくちゃ簡単じゃん!と心底思いました。
以前windows環境にRubyとRuby on Railsをインストールしたときには、よくわからないエラーがでて丸一日潰したことがありますが、それとは雲泥の差。
あの時は、根気よくエラーを告げてくるコマンドプロンプトに悪態をつきながら、何度投げ出そうと思ったことか……。
調べてみると、ネット上でも気軽にNode.jsの勉強ができるサイトやツールが多数あるようで、学習の敷居はかなり低いですね。
これからいろいろ試してみます。