サーバーをNode.jsにしたい気持ちが高まる

現在、サーバー側はPHPで動いているのですが、いずれNode.jsにして、すべてをJavascriptで動く環境にしたいと思っています。結構な時間をかけてPHPの処理を書いていると、そのうちJavascriptに書き換えることになるのに、どうしてこんなに力を入れてPHPを書いてるんだろうという気持ちになってしまいます。

その思いが重なり重なり、いよいよNode.jsの本でサーバー側の処理を勉強し始めました。ちょっと読んだ感じでは、それほど難しい印象は持たなかったので、比較的簡単にNode.jsで動くページを作成できるかもしれません。しかし現在動いているログインやプッシュ通知など、手間のかかるシステムをNode.jsに置き換えるのは楽じゃないと思うので、サーバー側を短時間に一新することは現実的にできそうにありません。

そこで一部のページから徐々に置き換えていくことを考えたのですが、そうした場合にApacheとNode.jsを同居させなければなりません。この構成で運営されている方はすでにいるようなので、やり方については調べがついたのですが、問題はドメインやサブドメイン単位ではなく、ページ単位でサーバーを振り分けることができるのかということと、SSLが問題なく動くのかわからないという点です。

Node.jsにnode-http-proxyというパッケージがあって、それを利用すればサーバーを振り分けられることまではわかったのですが、ページ単位での振り分けについてはネットに書かれていませんでした。さらにこの前、設定したLet’s EncryptのSSLですが、これがNode.jsのサーバー上でも普通に動いてくれるのかわからないのです。

本当にもうわからないことだらけなんですが、そもそもの話、Web系って覚えること多すぎないですか?範囲が広いのに、一人であらゆることに対応しなければならないので、そろそろ頭がパンクしそうです。

開発環境の作り方 – まとめページ

これまでに書いた開発環境の作り方についての記事をまとめています。

XAMPP

 

Node.js

 

React + webpack + ESLint

 

コーディング規約

 

エディター

npmの基本的な使い方

Node.jsに含まれているnpm(パッケージ管理ツール)の基本的な使い方について解説しています。

npmとは開発するプロジェクトにライブラリなどを簡単に導入するための機能です。Node.jsをインストールするとnpmも同時にインストールされます。

インストール方法についてはこちらで詳しく解説しています。

Node.jsをイントールしよう!

Node.js command promptを起動しよう


Windows10のケースで解説しています。他のOSを使用している場合は、そのOSのアプリケーション起動方法に従ってください。

 

Node.js command prompt

スタートメニューからNode.jsの欄を探してください。そしてNode.js command promptを起動してみましょう。

 

起動後

黒い文字だけの画面が起動されると思います。npmは基本的にこのコマンドプロンプトを利用して操作していきます。

以下のコマンドを入力してEnterを押してみてください。

node -v

上記のようにバージョンが表示されると思います。これはあなたの環境にインストールされているNode.jsのバージョンです。

テストプロジェクトを作成する


npmの使い方を覚えるために、テストプロジェクトを作成してみましょう。どこでも構いませんので、新しくフォルダ(ディレクトリ)を作成してみてください。

この解説ではこのようにフォルダを作成しています。

Cドライブ > xampp > htdocs > test

フォルダが完成しましたら、Node.js command promptに戻りましょう。そして cdコマンドを利用して、今作成したフォルダの場所へ移動します。

cdコマンドというのは、ディレクトリ(フォルダ)を移動するためのコマンドです。主に利用するのは以下のコマンドです。よく利用しますので覚えておきましょう。

 

cd test

現在のディレクトリ内に存在するtestディレクトリに移動する。

 

cd ../

現在のディレクトリからひとつ上のディレクトリに移動する。

 

cd ../../

現在のディレクトリからふたつ上のディレクトリに移動する。

 

cd /

ルートディレクトリに移動する。例えば今、Cドライブ内のどこかのフォルダにいる場合は、Cドライブのトップに移動します。

 

現在、こちらの環境では上記のように表示されています。これはCドライブの中にある、Usersフォルダの中にある、AZフォルダに現在いるということです。

ここからさきほど作成したtestフォルダにcdコマンドで移動してみましょう。

cd ../../xampp/htdocs/test

これは現在のディレクトリからふたつ上のディレクトリに移動し、さらにxampp/htdocs/testに移動するというコマンドです。個別に cd ../../、cd xampp/htdocs/testと2回打っても同じ結果になります。

移動ができたら以下のような表示になります。

C:\xampp\htdocs\test>

ちなみにバックスラッシュと¥記号は同じものと考えてください。Windowsのコマンドプロンプトではバックスラッシュの代わりに¥記号が表示されます。

あなたが作成したテストプロジェクトのフォルダに移動できたら、次に進んでください。

package.jsonを作成する


npmを使うためにはまずpackage.jsonというファイルを作成しなければなりません。簡単に作成するコマンドが用意されていますので、以下を入力してみてください。

npm init

英語がズラズラと表示されると思います。これは対話式でpackage.jsonを作成するコマンドで、質問に答えていくとpackage.jsonが作成される仕組みになっています。

とりあえずテストプロジェクトなので、なにも入力せずにEnterだけを何度も押し続けましょう。内容について今は理解する必要はありません。

name: (test)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Is this ok? (yes)

最後の質問でEnterを押すと、テストプロジェクトのフォルダ内にpackage.jsonというファイルが作成されます。エディターで開いて中身をチェックしてみましょう。

これでnpmを利用する準備は整いました。

パッケージをインストールする


npmを使ってパッケージをインストールしてみましょう。今回はテストプロジェクト内にjQueryをインストールしてみます。以下のコマンドを入力してみてください。

npm install jquery --save

すると以下のような表示になると思います。

C:\xampp\htdocs\test>npm install jquery --save
test@1.0.0 C:\xampp\htdocs\test
`-- jquery@3.2.1

npm WARN test@1.0.0 No description
npm WARN test@1.0.0 No repository field.

C:\xampp\htdocs\test>

テストプロジェクトのフォルダをチェックしてみてください。node_modulesというフォルダが新たに作成されています。その中をのぞくと、jqueryというフォルダも存在しています。

npmではnode_modulesというフォルダ内に、インストールしたパッケージを保存していきます。今回はこれでjQueryがインストールされたということです。

次にpackage.jsonを再度エディターで開いてみてください。

"dependencies": {
  "jquery": "^3.2.1"
}

このような表示が追加されていると思います。これはテストプロジェクトにjQueryのバージョン3.2.1をインストールしました、という記録です。npmを使って様々なパッケージをインストールしていくと、ここにどんどん追加されていきます。

この記録をチェックすると、自分がなんのパッケージ(ライブラリ)のどのバージョンをインストールしたのかが、ひと目でわかるようになります。

npmの基本的なコマンド


npmを使う上で必要になる基本的なコマンドについて解説します。

 

npm install パッケージ名

パッケージをインストールするコマンドです。–save または –save-dev をつけずに使うことはおすすめしません。

 

npm install パッケージ名 --save

パッケージをインストールするコマンドに –save というオプションを追加しています。これをつけると、package.jsonのdependenciesに記録が残るようになります。

本番環境にアップロードして利用するパッケージをインストールする場合に –save をつけてください。

 

npm install パッケージ名 --save-dev

–save-dev は開発環境だけで使うパッケージをインストールする時につけるオプションです。本番環境にアップロードしなくてもいいパッケージは –save-dev をつけてインストールしましょう。

package.jsonにdevDependenciesとして記録されます。

 

npm install

パッケージ名を指定しない場合は、package.jsonの dependencies devDependencies に記載されているパッケージをまとめてインストールします。

 

npm update

これまでにインストールしたパッケージを、まとめて新しいバージョンにアップデートします。個別にアップデートしたい場合は updateの後にパッケージ名を記述してください。

 

npm uninstall パッケージ名

インストールしたパッケージをアンインストールします。

 

-g オプションについて

ブログなどでnpmについて書かれた記事に -g というオプションがついていることがありますが、これはグローバルというNode.jsの一番上の階層にインストールするオプションです。

様々なプロジェクトで共通して利用するようなパッケージをインストールする場合に使うオプションで、基本的には使わなくていいものだと考えてください。

Node.js command promptの初期フォルダを設定する


スタートメニューのショートカットから普通にNode.js command promptを起動した場合、Windows10では最初にユーザーのフォルダが開かれると思います。

毎回、開発をするときにcdコマンドで開発しているプロジェクトに移動するのはめんどうなので、アプリケーションを開いた時に、指定のフォルダを開くように設定しましょう。

 

スタートメニュー

  1. スタートメニューでNode.jsを開く
  2. Node.js command promptを右クリック
  3. その他を選ぶ
  4. ファイルの場所を開く

 

エクスプローラーが開きます

ファイルの場所を開くとエクスプローラーが開きます。ここでNode.js command prompt上で右クリックを押して出てきたメニューから、ショートカットの作成を選びましょう。

ここにショートカットを作成することはできません。デスクトップ上に作成しますか?と尋ねられますので、はいを押してください。

デスクトップに作成されたNode.js command promptのショートカット上で右クリックを押し、プロパティを選んでください。

 

ショートカットのプロパティ

プロパティ内部の作業フォルダーの欄を変更しましょう。

"C:\Program Files\nodejs\"
↓
"C:\xampp\htdocs\test\"

開きたいフォルダのアドレスに変更してから、OKを押してプロパティを閉じてください。次回からそのショートカットを使ってNode.js command promptを起動すると、指定したフォルダの場所が開いた状態で開始されます。

最後に


基本的なnpmの使い方は理解してもらえたのではないでしょうか。

上記のテストプロジェクトでは、package.jsonのプロジェクト名は test で、ライセンスもISC(フリーソフトウェアライセンス)と記述されていますが、一人で開発を進める場合はそのままでも問題はありません。

しかしプロジェクトを複数人で開発する場合や、ネットに公開する場合は、正式な書き方でpackage.jsonを作成するようにしましょう。以下のサイトを参考にしてもらうとわかりやすいと思います。

 

ちなみにGame Usersのpackage.jsonはこのようになっています。

 

npmについてさらに詳しく知りたい方は、公式サイトのドキュメント(英語)を確認してください。

以上でnpmの解説を終わります。

Node.jsをインストールしよう!

この記事ではNode.jsを初心者向けに解説しています。インストール方法、アップデート方法、使い方を解説していますので、Node.jsを利用してみたい方はぜひ参考にしてみてください。

Node.jsとは?


Node.jsとはJavascriptがサクサク動作する環境のことです。主な用途は以下の2つになります。

  • Node.js をインストールして npm というパッケージ管理ツールを利用する
  • Webサーバーソフトとして利用する

npm というのはパッケージ管理ツールで、これを利用すると様々なライブラリを簡単にインストールすることができるようになります。

例えばjQueryを利用しようと思うと、これまでは公式サイトに行って最新バージョンをダウンロードして、サイト内に配置してという使い方をしていたと思いますが、npmを利用する場合は、コマンドプロンプトで以下のように入力するだけで、開発しているプロジェクト内にインストールされるので手軽に扱うことができるようになります。

npm install jquery --save

次にWebサーバーソフトとしての利用ですが、Apacheという名前は聞いたことがあるでしょうか?ApacheはWebサーバーソフトで、世の中にある多くのウェブサイトはそのApache上で動いています。

Node.jsはそのApacheと同じように利用することができるのです。Apache、Node.js それぞれに特徴があり、Node.jsの特徴を気に入った開発者がWebサーバーとして利用しています。

Node.jsをインストールする


Node.jsを Windows環境にインストールする方法を解説します。Node.jsのインストールは非常に簡単で、公式サイトからインストーラーをダウンロードしてきて、それを利用するだけです。

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

記事を書いている2018年1月4日現在では、8.9.4 LTS(推奨版)と9.3.0(最新版)の2種類が置いてあります。特に理由がなければ推奨版を利用すればいいでしょう。

インストールするバージョンをクリックすると、拡張子が .msi のファイルがダウンロードされます。そのファイルをダブルクリックしてインストールを行いましょう。

 

Node.js インストーラー

Nextを押してインストーラーを進めていきましょう。

 

Node.js インストール完了

この画面が出るとインストールは完了です。

Node.jsのアップデート方法


Windows環境の場合はアップデートも簡単です。インストールしたときと同じように公式サイトからインストーラーをダウンロードしてきて、そのままインストールを行うだけで、アップデートが完了します。

古いNode.jsをアンインストールする必要はありません。

 

次はnpm(パッケージ管理ツール)の使い方を解説します。

npmの基本的な使い方

Node.jsの詳しい解説


Node.jsについてもっと詳しく知りたい方は、以下のリンクを参考にしてください。

開発環境の作り方について

Game Usersの開発に参加するには、Reactが動かせる環境を作らなければならないのですが、これが本当にめんどくさい!!なにがめんどくさいかと言えば日本語の情報が少ない上に、いろんなものをインストール&設定しないとまともに動かせない。具体的に挙げると以下のものが必要になります。

  • Webサーバーソフト:例)Apache
  • パッケージインストール:Node.js (npm)
  • コードチェック:例)ESLint / airbnb
  • Javascript (ES2015)変換:例)webpack / babel

ややこしいのはESLintとwebpackは独自のコンフィグファイルを作成しないといけないところ。React自体の学習コストが高いのに、ES2015、ESLint、webpackについても同時に学ばなければならないのは非常に大変です。

Game Usersの開発に気軽に参加してもらいたいけど、ひとつひとつ検索して情報を仕入れながら導入してもらうというのは、ちょっとハードルが高すぎると思うので、できるだけ簡単に環境を整えてもらえるような、読みながら設定ができる情報を揃えたい。

自分はHello Worldを表示させるレベルから2、3歩進んだ程度のレベルなので、あまり高度な話はできませんが、Reactに興味を持っている人のために、多少はお役に立てるような情報を提供できれば幸いです。