技術ブログ | 株式会社アイプランニング IPlanning corporation

アイプランニング社員が調査したこと、学んでいることが具体的にどんなものなのかを披露します。 Here is what the IPlanning corp employees surveyed and what they learned.

Node.jsとnpmを使ってみよう

アイプランニングはWeb系企業ではありませんが、Web技術に関しての社内講座やハンズオンも積極的に実施しています。 Node.js入門として一般の方にも参考にしていただけるよう、一部を公開いたします。

Node.jsとは

Node.jsはサーバサイドJavaScriptランタイムです。たとえば、下記のようにJavaScriptファイルを実行することができます。

node main.js

ブラウザもJavaScriptランタイムの一つですが、Node.jsではセキュリティ上の理由でブラウザにはない「ファイルシステムへのアクセス」などの機能を使うことができます。

const fs = require("fs");
fs.writeFileSync("out.txt", "Hello, World");

fsはNode.jsにしか存在しないAPIで、ファイルシステム周りのアクセスを行えます。 上記スクリプトをNode.js上で実行すると、out.txtというファイルにHello, Worldが書き込まれます。

Node.jsのインストールは下記より行ってください。

nodejs.org

npm

npmは「パッケージマネージャ」という種類のツールで、Node.jsに同梱されています。

npm上に多数の便利なライブラリやツールが登録されており、気軽に使うことができます。また、登録も個人が自由に行うことができます。

www.npmjs.com

Node.jsの人気の理由の一つは、npm上に公開されているツール群を使いたいというニーズがあるためです。

npm上に登録されているツールを使ってみよう

実際に使ってみましょう。

Less

LessはCSSメタ言語という種類の言語・ツールです。Lessは変数・mixinなどの付加機能を使うことができます。最終的にはCSSファイルに変換されます。

下記のコマンドでインストールできます。

npm install -g less

下記のファイルをstyle.lessという名前で保存してください。

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

下記でlessファイルをcssファイルにコンパイルできます。

lessc style.less style.css

出力されたCSSで、変数が解決されていることを確認してください。

#header {
  width: 10px;
  height: 20px;
}

変数は最近のCSSの仕様に盛り込まれているのと、業界的にはSassというLessに似たメタ言語が人気なため、Lessの名前を聞くことが最近は減っていますが、業務と要件に合ったものを使えばOKです。

TypeScript

TypeScriptは、JavaScriptの強化を目的とした言語です。特に型周りの機能強化が特徴です。 こちらも最終的にはJavaScriptに変換されます。

コンパイラをインストールしましょう。

npm install -g typescript

main.tsファイルを作成します。

function add(x, y) {
  return x + y
}
console.log(add(1, 2))

下記を実行してコンパイルします。

tsc main.ts

ほぼ同じ内容のmain.jsが生成されたことを確認してください。

次に、型に関する機能を確認してみましょう。下記のようにmain.tsを書き換えてください。

function add(x: number, y: number) {
    return x + y
}
console.log(add(1, 2))

コンパイルして、JSファイル自体は内容が変わらないことを確認してください。 TSファイルでは引数に number 型しか受け取らないようになっていますが、JSファイルに出力する時点でこの型に関する注釈は削除されます。

次に、下記のように引数を一つ文字列に変更してみてください。

console.log(add("1", 2))

すると、コンパイル自体が通らなくなります。

f:id:iplcojp:20191209135159p:plain

実装に矛盾のあるコードのコンパイルを通さないことは非常に重要です。 APIの利用方法のミス、リファクタリング時のデグレードなどのヒューマンエラーを防止することができ、 「実装が間違っているがなんとなく動いているコード」を早期発見することにも繋がります。

この先の学習について

  • ここでは簡単のため install -gを行いましたが、これはグローバルインストールというもので、もう少し行儀の良い方法としてはローカルインストールがあります。
  • ローカルインストールについてはpackage.jsonあるいはnode_modulesについての理解が必要です。下記記事を参考にしてみてください。
  • Node.js自体を深く学習するためには、サーバサイドアプリケーションを一つ作ってみると良いでしょう。Expressというサーバサイドフレームワークがおすすめです。