node.js のバックアップソース(No.9)


[[Programing]] > [[JavaScriptメモ]] > node.js

#contents()

* node.js とは [#db393d96]

サーバーサイドJavaScript環境。同時に、Node.js のパッケージ管理マネージャであるnpmを利用して、JSのための開発環境構築ツールとしても利用される。

* Windowsにnode.jsをインストール [#ybfed942]

1. [[node.jsオフィシャルサイト:https://nodejs.org/ja/]]にアクセスする

2. 自分の環境に合わせてダウンロード+インストール

これだけで、node.jsコンソールが使えるようになる。
 
** Windows [#b65f21a1]

-[[簡単にNode.jsをインストールする【windows編】 - Qiita:http://qiita.com/roana0229/items/29232508e71559d0fd5f]]
-[[ビギナーのための Node.jsプログラミング入門:http://libro.tuyano.com/index2?id=1115003]]
-[[Windows環境でNode.jsのインストールとnpmコマンドの実行方法について勉強しました - tyoshikawa1106のブログ:http://tyoshikawa1106.hatenablog.com/entry/2015/04/03/224736]]

** 全般 [#kafe4467]

-[[Node.js 日本ユーザグループ:http://nodejs.jp/]]
-[[node.jsに関する基礎や開発・チュートリアルのまとめ:phpspot開発日誌:http://phpspot.org/blog/archives/2011/02/nodejs.html]]
-[[Node.jsとは何か、開発者ライアン・ダール氏が語る(前編)〜ノンブロッキングとはどういうことか? − Publickey:http://www.publickey1.jp/blog/11/nodejs.html]]
-[[サーバサイドJavaScriptの本命「Node.js」の基礎知識(1/3)- @IT:http://www.atmarkit.co.jp/fwcr/rensai2/nodejs01/01.html]]
-[[初心者にも分かる Node.js と WebSocket についての解釈まとめ | ウェブル:http://weble.org/2011/03/30/node-js]]

-[[node.jsを使用した、リアルタイムで付箋メモを共有できるオープンソースのWebアプリ・Scrumblr - かちびと.net:http://kachibito.net/software/scrumblr.html]]
-[[MongoDB + node.js で作るソーシャルゲーム:http://www.slideshare.net/snamura/mongodb-nodejs]]
-[[【レビュー】JavaScriptでつくる高効率サーバアプリ「Node.js」を試す方法 | エンタープライズ | マイコミジャーナル:http://journal.mycom.co.jp/articles/2010/12/28/how-to-use-node.js/index.html]]

-[[Node.jsを手軽に試せるJavaScript統合開発環境「Cloud9 IDE」、クラウドでの提供開始 − Publickey:http://www.publickey1.jp/blog/11/nodejsjavascriptcloud9_ide.html]]
-[[node.jsは普及しそうに無い: ニュースの社会科学的な裏側:http://www.anlyznews.com/2011/02/nodejs.html]]

* 動作確認 [#h437b00e]

node プロンプトで実行

 > node --version
 v12.13.1

 > npm --version
 6.12.1

以下のserver.jsを、(ユーザー名)\(node)フォルダに作成

 var http = require('http');
 http.createServer(function (req, res) {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('Hello World!\n');
 }).listen(1337, '127.0.0.1');


 > cd node
 > node server.js

ブラウザで、下記にアクセス

 http://localhost:1337/


* 基本コマンド [#r684e404]

** ヘルプ [#m3c4b53e]

 $ npm help command
 $ npm --help command

** バージョン確認 [#wd901009]

 $ npm -v
 $ npm -version
 $ npm --version

** package.jsonを生成する [#xd0b3c49]

package.jsonはprojectのpackageを管理するためのファイル。
ローカルプロジェクトのパッケージを管理するためpackage.jsonを生成する。

 $ npm init
 $ npm init -y

** インストール [#c077098e]
グローバル

 $ npm install -g package

ローカルプロジェクトの場合。--save-devを付けると、installしたlibraryの情報を自動でpackage.jsonに書いてくれる。

 $ npm install --save-dev package

オプション無しで、npm installを実行すると、package.jsonの内容に従って、packageをインストールしてくれる。

 $ npm install

** インストールされているパッケージの確認 [#dff5c9d8]

 $ npm list -g
 $ npm list -g package
 $ npm list package

** パッケージ情報の確認 [#be3a4453]

 $ npm info package
 $ npm view package
 $ npm show package

** npm scriptの実行 [#g3f0ce1d]

 $ npm run script

** アンインストール [#b306f99f]

 $ npm uninstall -g package

** 参考 [#i31a7ea3]

-[[npmコマンドの使い方 - Qiita:https://qiita.com/yoh-nak/items/8446bf12094c729d00fe]]
-[[npmでnode.jsのpackageを管理する - Qiita:https://qiita.com/sinmetal/items/395edf1d195382cfd8bc]]
-[[[Node.js] npm installするときはどのパッケージもローカルインストールで十分 | あるいてっく:https://arui.tech/why-locally-install-is-much-better-than-globally-in-npm/]]

-[[npm-scriptsについて - Qiita:https://qiita.com/axross/items/a2a0d148e40b66074858]]
-[[npm scriptsを使おう - Qiita:https://qiita.com/liply/items/cccc6a7b703c1d3ab04f]]
-[[Node.jsユーザーなら押さえておきたいnpm-scriptsのタスク実行方法まとめ - ICS MEDIA:https://ics.media/entry/12226]]

* Webpack 4 [#gbffae61]

Javascriptのモジュールバンドルツール。CSSや画像ファイルなども、JSファイルとしてまとめられる。

https://scrapbox.io/yyycatch-42774423/webpack

** インストール [#zdcdd784]

 $ npm init -y
 $ npm install -save-dev webpack
 $ npm install -save-dev webpack-cli

** デフォルトのファイル構成 [#a6eb7e72]

 .
 ├── package.json
 ├── index.html
 ├── dist
 │       └── main.js
 ├── src
         ├── index.js
         ├── foo.js
         └── bar.js

** サンプルコード [#ba79e977]

*** src/index.js [#d675be3c]

 // index.js
 var foo = require('./foo');
 var bar = require('./bar');
 var el = document.getElementById('box');
 el.textContent = foo() + ' ' + bar();
 
 console.log(`Welcome WebPack4`);

*** src/foo.js [#k9daec29]

 // foo.js
 function foo() {
   return 'foo!foo!';
 }
 
 module.exports = foo;

*** src/bar.js [#wdda723e]

 // bar.js
 function bar() {
   return 'bar!bar!';
 }
 
 module.exports = bar;

*** index.html [#bd9ae41c]

 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
     <title>JavaScript Module example</title>
   </head>
 
   <body>
     <p id='box'></p>
     <script src="./dist/main.js"></script>
   </body>
 </html>

** npm-scriptsを定義 [#d9204105]

package.json に npm-scripts を定義する。

これで、Nodeのコマンドラインから、webpackを起動できるようになる。

 "scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
 }

** Webpackを実行する [#nbfc4c75]

デバッグ用の開発モード。distフォルダに、main.jsが出来ている。

 $ npm run dev

本番モード。minifyされる!

 $ npm run build

** webpack.config.jsで設定 [#g5165c57]

webpack.config.jsを用意すると、エントリーポイント(ルートになるファイル)や出力先などを指定できるようになる。

** 参考 [#vc0897a8]

-[[Webpack 4 Tutorial やってみた - albatrosary's blog:http://albatrosary.hateblo.jp/entry/2018/03/06/153042]]
-[[webpack 4 入門 - Qiita:https://qiita.com/soarflat/items/28bf799f7e0335b68186#%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%88%E3%83%AA%E6%A7%8B%E6%88%90]]
-[[Code Splitting - webpack.js.org:https://webpack.js.org/guides/code-splitting/]]

* Browserify [#te6f4979]

フロントエンドで利用できるパッケージ管理ツール

自前のビルドプロセスで、モジュールを結合する

** 手順 [#b7ef0bbe]
1.node.jsのコマンドラインで、gulp.jsをインストール
 $ npm install -g browserify

2. JSファイルに、requireでモジュールを記述する
3. モジュールを結合する
 $ browserify js/main.js -o bundle.js

** 参考 [#e89b0da0]

-[[賢く使うBrowserify | CodeGrid:https://app.codegrid.net/series/2015-browserify]]
-[[ざっくりbrowserify入門 - Qiita:https://qiita.com/fgkm/items/a362b9917fa5f893c09a]]

* gulp.js [#q81aaa3d]

node.jsのgulp.jsで、JavascriptとCSSを結合・圧縮する。

Windowsでも、できた。設定ファイルは、Javascriptっぽく書ける。

** プラグイン [#j58c470f]

JavascriptとCSSを結合・圧縮するプラグイン。

- gulp-concat
- gulp-uglify
- gulp-cssmin

** 手順 [#j3372bc0]

1.node.jsをインストール

2.node.jsのコマンドラインで、gulp.jsをインストール

 > npm install -g gulp

3.ローカルフォルダ(D:\gulp_test\ )に移動して、gulpとプラグインをインストール。これは、フォルダごとにやる。

 > cd /d D:\gulp_test\ 
 > npm install gulp
 > npm install --save-dev gulp-concat gulp-uglify gulp-cssmin

4.gulpfile.jsを作成

- https://github.com/ycatch/mameblock.js

5.gulpを実行

 > gulp


** 参考資料 [#i46dd05a]

- 独学Webデザイナーの覚書:設計・実装を高速化!フロントエンド開発を自動化する「gulp.js」
-- http://www.ezgate-mt.sakura.ne.jp/css/162.html
- gulpの基本的な使い方(gulp.jsの基礎をしっかり理解する) | mae's blog
-- http://mae.chab.in/archives/2545
- gulpでcssとjsを圧縮するタスクを作成する | team naporitan
--http://teamnaporitan.com/gulp_2/
- gulpでcssとjsを圧縮するタスクを作成する | team naporitan
-- http://teamnaporitan.com/gulp_3/


トップ   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS