前回の続きです。
いろいろわからないことが残っていたので、先に進む前に「自分が何をやったのか？」というのをちゃんと知ってみようと思います。
npmってなによ
コマンドプロンプトを起動したときにnpmっていうのがありましたね。
これはいったいなんだろう。ぐぐるよ。
( ﾟдﾟ)ｳﾑ
nvm と紛らわしいですが,
nvm は Node Version Manager の略で Node.js 自体をバージョン管理するツール
npm は Node Package Manager の略で Node.js 用に作られたパッケージモジュールを管理するツール
で、でたnvm！
いらんやろって飛ばしたやつ！
つまりnvmはインストールしたいろいろなパッケージ？モジュール？のバージョンを管理して、バージョンアップしたら動かなくなったよ～みたいなときにバージョンの上げ下げを簡単にできるようにするやつってことですね！
そしてnpmは、パッケージ？モジュール？をインストールしたりアンインストールしたり、リストを見たりといろいろできるやつってことですね！
・・・申し訳ないけど、これを使いこなすより普通にブラウザでアクセスしてダウンロードボタンぽちっとやってインストールしたりするほうが私には簡単なんだよなぁ・・・
黒い画面で挫折する人は、結局文字の羅列を見ても何をやっているのかわからないから難しい、何が起きてるのかわからないから怖い、って思うわけ。
だからGUIがないときつい。
むしろGUIさえあれば見た目でなんとなくわかる。
ものごとを捉えたり、頭の中でイメージするときもビジュアルで考えるんですよね。
Node.js用のパッケージモジュール
Webサイトを作った時に、たとえばjQueryとか、Milkcocoaとか、外部のライブラリなどを使うときにjsファイルを読み込む必要がありますね。
それと同じように、プロジェクトで使用するような、依存関係にあるパッケージ群を管理できるのがnpmってことですね。
package.jsonというファイルを作って、そこに使ってるパッケージを登録しておくと、あとで別のPCを使うときとか、ほかの人に同じ環境構築させるときとか、このjsonの情報から一括でインストールすることができる！ということらしいです。すごいね。便利だね。
でもね、
自分でテキストエディタを使って作っても良いのですが, npm でサクッと必要事項のみを記述した json ファイルを作ることができます.
これね、サクッととかいってるけどね、テキストエディタで作る方が早いんだよ。私は。
黒い画面で
$npm init
っていうコマンドを打つとプロジェクト名とかバージョンとかを聞かれてそれに答えていくだけでjsonファイルが作られるっていうんだけど、黒い画面でそういうことするのがもうめんどくさいの。
こういうふうに書いたファイルですよっていう書式の見本がほしい。
なんとなくどういうものかというのはわかりました。
あったほうが便利みたいだけど今のところ困らなそうだから必要になったら考えよう。
参考記事のコマンドについてる「$」ってなんなのよ
いろいろな記事を見ていると、
$npm init
やたら頭に「$」ってついてるんですよね。
黒い画面でこんなの出てこないよ。「C:\>」みたいなのだよ。
って思ってたわけです。
しかも、たいがいの記事で「私はMacを使っているのでMacの記述で～」みたいなこと言ってるし、ターミナルでは「$」って書くんかいって思っていました。
違いました。
「$」っていうのは省略記号のようなもので、「C:\>」みたいな黒い画面が自動で表示してくる部分を省略してる的な意味で「$」ってついてるらしいです。
実際、黒い画面が出してくる「C:\>」みたいな部分は、人それぞれ、その人の環境でのカレントディレクトリなので、「C:\>」って書くわけにもいきませんものね。
コマンドラインを表示するときはこの「$」を先頭につけるのが一般的らしいですが、そんなことしらねーよ！紛らわしいな！
サンプルのjsファイルは何をやっていたの？
前回作成したexample.jsについて、言われるがままにコピペして使ったので結局何が起きているのかわからないままでした。
この中身についてもちゃんと読んでおこうと思います。
var http = require('http');
http.createServer(function (request, response) {
response.writeHead(200, {'Content-Type': 'text/plain'});
response.end('Hello World\n');
}).listen(8124);
console.log('Server running at http://127.0.0.1:8124/');
さてと、まずは1行目から。
var http = require('http');
…require()…か…( ﾟдﾟ)ｳﾑ…
ちょっと飛ばそう。
ええっと2行目は…
http.createServer(function (request, response) {
createServer()ってｗ
サーバってそんなDOM増やすみたいなノリでクリエイトできちゃうものなの？
…まじで？
response.writeHead(200, {'Content-Type': 'text/plain'});
response.end('Hello World\n');
えっと…クリエイトしたサーバのresponse…これは引数だね。
ヘッダ情報で200を返すよ、Content-Typeはtext/plainだよ、これはわかりますね。
そして最後にHello World\nを返すよ…
まあ、なんとなくわかったよ。次。
.listen(8124);の8124っていうのは、まあ見たままだけど8124ポートってことなんだよね。
listen()ぐぐるか。
…あれ、なんか、さっき飛ばしたrequire()が出てきたぞ。
使ったこともないし見たこともないメソッドだと思ったら、こいつVanillaじゃねーな？
ここでは「http」というオブジェクトを用意していますね。これは文字通りHTTPの各種機能をまとめたものです。
それはなんとなくわかるな。
Milkcocoa使うときも似たようなのあったよね。new Milkcocoa的なやつ。
そういえば、最近Milkcocoaのダッシュボードが変わったんだよね。
じゃーーん！！ pic.twitter.com/ozaUhu7rAd
— みるこたん (@milkotn) 2015, 10月 28
で、よく見るとさ、
npm install milkcocoa
var MilkCocoa = require('milkcocoa');
( ﾟдﾟ)ﾊｯ!
これまさにそれじゃん！
require(‘http’);って、http通信するよ～みたいな意味じゃなかったんだね。
で、もともと調べていたのはなんだったっけか。
おや？
httpオブジェクトの「createServer」メソッドを呼び出してhttp.Serverオブジェクトを作成します。これが、いわばNode.jsの「サーバー」となる部分です。
さっきワロスしたcreateServer()の説明もある！
なにこのサイトさっさと読んでおけばよかったじゃん。
createServerの引数に、サーバーでリクエストを受け取った時の処理を関数として用意しておく書き方です。また、その後にlistenという待受のためのメソッド（後述）も続けて書いてあります。
うん、めっちゃわかりやすいよありがとうございます。
さすが「ビギナーのための」っていうだけあるよ。
ありがたいから書籍も紹介しておくよ。
さ、あとはlisten()について…
待受のためのメソッドって書いてありましたね。
これにより、サーバーは待ち受け状態となり、クライアントからリクエストがあればそれを受け取り処理するようになります。
とりあえず「第１引数にポート番号」だけ覚えておけば十分です。
(*´∀｀*)ﾎﾟﾜﾜ
私でも言ってることがわかる(*´∀｀*)ﾎﾟﾜﾜ
「クライアントからリクエストがあればそれを受け取り処理」っていうのがつまり、http://127.0.0.1:8124/にアクセスしたら処理できるように待ち構えてるってことね。
2ページ目にいったら、responseの部分についてもいっぱいわかりやすく書いてありました。
「writeHead」「write」「end」の３つがあれば、クライアントへの返送内容は全部書けるのです。
このまま3ページ目に行くとまた少し高度な話になっていくので、これは次回勉強しよう！
サーバ側で何かするっていうとこう、まずタワーみたいなすごいマシンを買ってきて黒い画面でいろいろ書いて構築してそのあとさらにWebサイト用の領域の中でもあれこれして…みたいなのを想像していたので、自分のローカルでcreateServer()なんて思いもよらないものが出てきてびっくりしました。
このあとはHello Worldから進んで、もっとWebページらしいものを作ってその中でいろいろ動かしたり通信したりっていうのをやってみたいですね。
まだまだ先は長い！