こんにちはコーディングファクトリー（以下CF）のコーダー金です。今回は Node の意外な勉強方法について紹介したいと思います。

Webサイトの技術は大きくクライアントサイドとサーバサイド、この2つに分かれます。

クライアントサイドでは、ユーザーが Webを利用する際の見た目（サイト・アプリケーション）を制作します。まず Webデザイナーがデザインしたものをブラウザで使用できるようにするために、コーディングが必要です。ここで必要な言語は HTML（文書）・CSS（スタイリング）・JavaScript（動きなど）で、モノサスの CFメンバーはみんなそれらの言語をを使っているクライアントサイドのエンジニアです。

サーバサイドとは簡単に言うと、サーバで管理しているデータなどを処理することを言います。Java、PHP、Ruby、Python がサーバサイドでよく使われる言語です。

クライアントサイドとサーバサイドでは使用するプログラミング言語が違います。もしクライアントサイドのエンジニアがサーバを利用して開発するのであれば、新しくサーバサイドの言語を勉強する必要があります。でも Node が生まれてから、クライアントサイドのエンジニアも、サーバサイドの言語の知識がなくてもサーバで開発することができるようになりました。

その理由は、Node はサーバで動く JavaScript だからです。クライアントサイドのプログラミング言語は JavaScript が唯一で、JavaScript の知識があれば Node を使ってサーバで開発することができるということは、クライアントサイドのエンジニアとしてとても嬉しいことだと思います。

Node はサーバサイドのプログラミング言語のため、アプリケーション開発でよく使われる印象がありますが、実は最近 Node を使った Web制作が一般になっています。直接 Node を使って開発することも可能ですが、Node には便利なツールがたくさん用意されています。これを パッケージ と呼びます。ここでは僕がよく使っている Node の パッケージ を紹介したいと思います。

Autoprepixer

Autoprepixerは CSSのプロパティに vender prefix をブラウザのバージョンに合わせてつけてくれるパッケージです。
古いブラウザに最新の CSSが完全に適用していない場合、vender prefix が必要な場合があり、いろいろなブラウザのバージョンごとに vender prefix を調べてつけることは結構大変なことですが、Autoprefixerは簡単に、自動的につけてくれます。

spritesmith

spritesmithは、複数の image ファイルをフォルダにまとめるだけで、スプライト用の画像を自動生成してくれます。かつ CSS や Sass 利用できるように position や width などのプロパティを書き出してくれるパッケージです。

Webページのイメージファイルが多くなると、サーバへのリクエストが増えるため、サイトのパフォーマンスが落ちます。なので 、できるだけリクエストを減らしたい時にとても助かるパッケージです。

タスクランナー

簡単な作業だと必要なパッケージだけで問題ないですが、案件によっては複数のパッケージを利用して制作することがあります。そういう時にいろいろなパッケージの処理をタスクとして管理するのがタスクランナーです。タスクランナーも Node パッケージの一つで gulp や webpack がよく使われています。

※本来webpackはタスクランナーではないですが、タスクランナーような使い方もできます。

では、いよいよコマンドラインを使った Node の勉強方法です。Node を勉強するには、 Node の Webサイトからドキュメントを読んだり、dotinstall などのオンライン動画なのでも勉強することが出来ますが、コマンドラインを使って勉強することも出来ます。

mac用のコマンドラインツールiTerm2の画面

まず、Node の Webサイトから Node をダウンロードし、インストールします。インストールが出来たら、お使いのパソコンでコマンドラインツールを開き、今回の勉強のためのフォルダーを作成して移動します。せっかくコマンドラインツールを使っているので、フォルダーの作成と移動のコマンドで試したいと思います。やり方は簡単でコマンドラインツールで次のように入力します。

" mkdir study_node " と入力

「mkdir」 はmake directoryの略で簡単に言うと「フォルダーを作成する」の意味になります。
すると「study_node」とういうフォルダーが生成されますので、フォルダーの中へ移動します。

"cd study_node" と入力

「cd study_node」とコマンドを入力すると study_nodeフォルダーの中に移動します。コマンドラインツールでは現在の位置が分かりにくいですが、それを確認するコマンドもあります。

" pwd "と入力

「pwd」はprint working directoryの略で「現在作業している場所」を教えてくれます。

ではNode のチュートリアルパッケージをインストールします。
コマンドは以下のようになります。

" npm install -g learnyounode " と入力

インストールが終わったら、「learnyounode」 というコマンドを入力します。

" learnyounode "と入力

最初は英語で表示されますが、メニューの下に「言語を選択する」という項目で日本語を選びます。すると learnyounode のメニューが日本語で表示されます。

ご覧のように演習課題が13問あり、この中から課題を選ぶと内容が見れます。

試しに第1問を解答してみます。
問題はコンソールに "こんにちは世界"と出力するアプリのソースを書くことですので、好きなエディターを開いて study_node フォルダーの中に program.js という JavaScript ファイルを作成します。
コンソールから文言を出力するにはコンソールの "log()" なので、console.log（'こんにちは世界'）; と記述して保存します。
その後、検証のために "learnyounode vertify" というコマンドを実行します。すると learnyounode パッケージが作成した program.js を検証して結果を表示します。

このように問題を解きながら Node について勉強することができます。

learnyounode のようなコマンドラインで勉強するアプリケーションは Node のコミュニティーである NodeSchool が運営しています。
日本では東京 Node学園というNodeのコミュニティーがあります。Node 以外でも JavaScript、Git、Sass、markdown など多数の科目がありますので、興味があるものから始めてみてもよいのではないでしょうか。

2016年11月12日渋谷で行われた日本のNodeコミュニティ東京Node学園開催の「東京Node学園際2016」でのNode school の様子

Node.jsを勉強してみての感想

自分もNode.jsの勉強をはじめたばかりなので、一言でまとめることは難しいですが、「一見難しく見えるけど、勉強しやすい」と感じています。Node.js は開発がとても活発に行われていて、バージョンのアップデートも頻繁にされています。その分、Node.js についていろいろな資料や記事もあります。最初コマンドラインから Node.js を勉強することは少し難しく感じるかもしれません。そういう方は Node.js で作られたパッケージを実際に作業や案件に投入しながら、徐々に慣れるのもいいと思います。

以上、今回は簡単にコマンドラインから勉強する Node.js の勉強方法について紹介しました。