🚷 🍪 💃 Node.jsの初心者向けガイドパート3 🚥 👨🏾‍💻 👩🏿

こんにちは！

このNode.jsチュートリアルの翻訳を投稿し続けます。

その他のパーツ：

パート1

パート2

パート3

パート4

Node.jsにユーザーが入力したデータを取得する

Node.jsプログラムをインタラクティブにするにはどうすればよいですか？

これを行うために、Node.jsのバージョン7にはreadlineモジュールが導入されています。これは、読み取りのためにストリームからデータを取得するために使用されます。たとえばprocess.stdin、Node.jsプログラムの実行中のコマンドラインです。

const readline = require('readline').createInterface({
    input: process.stdin,
    output: process.stdout
})

readline.question(`What is your name?`, name => {
    console.log(`Hi ${name}!`)
    readline.close()
})

このコードはユーザー名を要求しenterます。ユーザーがを入力してクリックすると、挨拶が表示されます。

このメソッドquestion()は、最初のパラメーター（質問）をコンソールに出力し、ユーザーの応答を待ちます。を押すenterと、コールバック関数が実行されます。

このコールバックでは、インターフェースを閉じますreadline。

readlineドキュメントで読むことができる他のメソッドが含まれています。

パスワードを要求する必要がある場合は、明示的に返すのではなく、シンボルを使用することをお勧めします*。

これを行う1つの方法は、readline-syncパッケージを使用することです。これは、理解が簡単で、設定が簡単です。

より完全で抽象的なソリューションは、Inquirer.jsパッケージによって提供されます。

ヘルプnpm install inquirerを使用してインストールし、次のように使用します。

const inquirer = require('inquirer')

const questions = [
    {
        type: 'input',
        name: 'name',
        message: `What's your name?`
    }
]

inquirer.prompt(questions).then(answers => {
    console.log(`Hi ${answers['name']}!`)
})

Inquirer.jsを使用すると、複数の選択肢を提案したり、ラジオボタンを提供したり、確認を求めたりするなど、多くのすばらしいことができます。

ビルトインソリューションの代替としてよく知られていますが、ユーザーエクスペリエンスを次のレベルに引き上げる場合は、Inquirer.jsが最適なソリューションです。

エクスポートを使用したNode.jsファイル機能の拡張

Node.jsには組み込みのモジュラーシステムがあります。

Node.jsファイルは、他のNode.jsファイルから機能をインポートできます。現在のディレクトリにあるファイルにエクスポートされた機能をインポート

するために使用const library = require('./library')

するものをインポートする場合library.js。

このファイルでは、別のファイルにインポートする前に、機能をエクスポートする必要があります。

ファイルで定義されている他のオブジェクトまたは変数は、デフォルトではプライベート（プライベート）であり、他のファイルでは使用できません。

これはmodule.exports、モジュラーシステムによって提供されるインターフェイスで実現できます。

オブジェクトまたは関数をオブジェクトの新しいプロパティとして割り当てるときexports、それらをエクスポートすると、アプリケーションまたは別のアプリケーションの他の場所にインポートできます。

これには2つの方法があります。

最初の方法はmodule.exports、モジュラーシステムによって提供されるデフォルトのオブジェクトであるvalueを割り当てることです。このメソッドを使用すると、このオブジェクトのみをエクスポートできます。

const car = {
    brand: 'Ford',
    model: 'Fiesta'
}

module.exports = car 

//   
const car = require('./car')

2番目の方法は、エクスポートされたオブジェクトをオブジェクトのプロパティとして追加することexportsです。このメソッドを使用すると、多くのオブジェクト、関数、またはデータをエクスポートできます。

const car = {
    brand: 'Ford',
    model: 'Fiesta'
}

exports.car = car

とか、ぐらい

exports.car = {
    brand: 'Ford',
    model: 'Fiesta'
}

このオブジェクトを別のファイルで使用するには、インポートへのリンクを作成する必要があります。

const items = require('./items')
items.car

または

const car = require('./items').car

違いは何であるmodule.exportsとはexports？

1つ目は参照オブジェクトをエクスポートし、2つ目はオブジェクトのプロパティをエクスポートします。

npmパッケージマネージャーの概要

npmの概要

npmデフォルトのNode.jsパッケージマネージャーです。

2017年1月の時点で、npmには350,000を超えるパッケージがあり、Earthで単一のプログラミング言語のコードの最大のリポジトリになりました。ほぼすべてのことを行うパッケージがあるので安心できます。

すべてはNode.jsで依存関係をダウンロードして管理することから始まりましたが、すぐにこのツールはアプリケーションのクライアント側の開発で積極的に使用されるようになりました。

npmいくつかのことを行います。

npmに代わるものは、yarnです。

読み込み中

npmプロジェクトの依存関係の読み込みを管理します。

プロジェクトにファイルが存在する場合、package.json起動npm installすると、プロジェクトが必要とするすべてのものが、node_modules存在しない場合に作成されるディレクトリにインストールされます。

特定のパッケージは、を使用してインストールできますnpm install <package-name>。

多くの場合、パッケージのインストールにはフラグが伴います。

--save-パッケージをインストールし、それに関するエントリをファイルの依存関係セクションに追加します package.json
--save-dev-パッケージをインストールし、それに関するエントリをファイルのdevDependenciesセクションに追加します package.json

主な違いは、devDependenciesはテストなどの開発目的で使用され、依存関係は本番環境（プロジェクトのビルド時）で使用されることです。

パッケージの更新

での更新は簡単npm updateです。

npm確立された制限を満たす新しいバージョンがないかすべてのパッケージをチェックします。

特定のパッケージを更新することもできます：npm update <package-name>。

バージョン管理

標準のダウンロードに加えて、npmはバージョン管理をサポートしているため、パッケージの特定のバージョンを指定したり、新しいバージョンまたは古いバージョンを要求したりできます。

多くの場合、1つのライブラリは別のライブラリの特定の（メジャー）バージョンとのみ互換性があります。

また、長期間修正されていない最新リリースのバグも含まれています。

各チームメンバーは、ファイルを更新する前に使用するバージョンを知っているため、バージョニングはチームの開発にも役立ちますpackage.json。

これらすべてのケースで、バージョン管理が役立ちます。この点では、npm承認された標準に従います。

タスクの実行

package.jsonでターミナルで実行するコマンドを指定するためのフォーマットをサポートしていますnpm run <task-name>。

例えば：

{
    "scripts": {
        "start-dev": "node lib/server-development",
        "start": "node lib/server-production"
    },
}

この機能を使用してWebpackを実行するのが一般的な方法です。

{
    "scripts": {
        "watch": "webpack --watch --progress --colors --config webpack.conf.js",
        "dev": "webpack --progress --colors --config webpack.conf.js",
        "prod": "NODE_ENV=production webpack -p --config webpack.conf.js"
    },
}

これにより、忘れがちな、またはミスを犯しやすい長いコマンドのセットの代わりに、これを行うことができます。

npm run watch 
npm run dev 
npm run prod

npmはどこにパッケージをインストールしますか？

を使用してパッケージをインストールする場合、npm次の2つのタイプのインストールから選択できます。

地元
グローバル

デフォルトでは、npm installたとえば次のように入力すると、

npm install lodash

パッケージはnode_modules現在のディレクトリのフォルダーにインストールされます。

インストール後、現在のディレクトリのファイルセクションにnpmoレコードlodashを追加しdependenciesますpackage.json。

グローバルインストールの場合は、フラグを使用します-g。

npm install -g lodash

グローバルインストールでは、パッケージは現在のディレクトリではなく、グローバルディレクトリにインストールされます。

しかし、正確にはどこですか？

これを確認するには、コマンドを実行する必要がありますnpm root -g。

macOSまたはLinuxでは、このディレクトリをにすることができます /usr/local/lib/node_modules。Windowsの場合- C:\Users\YOU\AppData\Roaming\npm\node_modules。このディレクトリは、Node.jsのバージョン管理

に使用nvmする場合は異なる場合があります。

インストールされたパッケージをどのように使用しますか？

フォルダーにインストールされたnode_modulesパッケージをグローバルに使用する方法。

でlodash人気のJavaScriptヘルパーライブラリをインストールしたとしますnpm install lodash。

このコマンドはlodash、ローカルディレクトリにインストールされnode_modulesます。

プログラムを使用するには、次を使用してパッケージをインポートする必要がありますrequire。

const _ = require('lodash')

パッケージが実行可能（ファイル）の場合はどうなりますか？

この場合、実行可能ファイルはディレクトリに配置されますnode_modules/.bin/。

これは、カウセイライブラリを使用して簡単に説明できます。

このパッケージは、コマンドラインプログラムを提供します。実行すると、牛（および他の動物）が何かを「話します」。

を介してパッケージをインストールするnpm install cowsayと、パッケージ自体とそのいくつかの依存関係がインストールされます

。フォルダー.binは非表示になり、バイナリデータへのシンボリックリンクが含まれ

ます。

もちろんタイプ./node_modules/.bin/cowsayしても問題ありませんが、npmに含まれているnpx（5.2以降）が最適なオプションです。あなたがするだけnpx cowsayそしてnpxはファイルを自動的に見つけます：

牛は「私をここから連れ出してください」と言います。

Package.jsonマニュアル

JavaScriptで作業しているとき、JavaScriptプロジェクト、Node.js、またはアプリケーションのフロントエンドとやり取りしているとき、おそらくに出くわしますpackage.json。

それは何ですか？彼について何を知っておくべきですか？そして、あなたはそれで何ができますか？

package.json一種のプロジェクトマニフェストです。彼は互いに完全に無関係な多くのことをすることができます。たとえば、使用するツールの設定のメインファイルにすることができます。また、（この情報が使用されているすべてのインストール済みパッケージの名前とバージョン格納npmしてyarn）を。

ファイル構造

次に例を示しpackage.jsonます。

{}

ご覧のとおり、空です。コンテンツpackage.jsonの要件はありません。唯一の要件はその形式（JSON）です。それ以外の場合、プログラムはそれにアクセスできません。

を通じて配布する予定のNode.jsパッケージを作成している場合npm、状況は劇的に変化するため、他の人がパッケージを使用できるようにプロパティを追加する必要があります。これについては後で説明します。

次に別の例を示しpackage.jsonます。

"name": "test-project"

ここでは、と同じディレクトリにあるパッケージまたはアプリケーションの名前を定義していpackage.jsonます。

次にpackage.json、Vue.jsアプリケーションから借用した、より複雑な例を示します。

{
  "name": "test-project",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "main": "src/main.js",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "test": "npm run unit",
    "lint": "eslint --ext .js,.vue src test/unit",
    "build": "node build/build.js"
  },
  "dependencies": {
    "vue": "^2.5.2"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-eslint": "^8.2.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-jest": "^21.0.2",
    "babel-loader": "^7.1.1",
    "babel-plugin-dynamic-import-node": "^1.2.0",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "eslint": "^4.15.0",
    "eslint-config-airbnb-base": "^11.3.0",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-import-resolver-webpack": "^0.8.3",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-vue": "^4.0.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "jest": "^22.0.4",
    "jest-serializer-vue": "^0.3.0",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.6.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-jest": "^1.0.2",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": ["> 1%", "last 2 versions", "not ie <= 8"]
}

ここにはたくさんあります：

name -アプリケーション/パッケージ名
version -アプリケーション/パッケージのバージョン
description -アプリケーション/パッケージの簡単な説明
main -アプリケーションのメインファイル（エントリポイント）
private-この値trueは、アプリケーションの偶発的な公開を防止しますnpm
scripts -実行（実行）できるスクリプト（コマンド）のセット
dependencies -プロジェクトの依存関係
devDependencies -開発中にのみ使用されるプロジェクトの依存関係
engines -アプリケーション/パッケージが実行されているバージョン
browserlist -サポートされているブラウザ（およびそのバージョン）

これらのプロパティはすべて使用されnpmます。

プロパティ

このセクションでは、使用できるいくつかのプロパティについて説明します。「パッケージ」という用語を使用しますが、これまで述べてきたことのほとんどはアプリケーションにも当てはまります。

ほとんどのプロパティは、パッケージをに公開するために必要でありnpm、一部はパッケージと対話するために必要です。

名前（名前）

パッケージの名前を指定します。

例えば：

"name": "test-project"

名前は214文字を超えてはならず、スペースを含めることはできません。小文字（小文字）、ハイフン（-）、およびアンダースコア（_）のみで構成できます。

これは、npmパッケージがその名前に基づいて公開されるときに、パッケージにURLが割り当てられるためです。

パッケージがGitHubで公開されている場合は、リポジトリにリンクすることをお勧めします。

著者

パッケージの作成者を識別します。

例えば：

{
    "author": "Joe <joe@whatever.com> (https://whatever.com)"
}

またはこのように：

{
  "author": {
    "name": "Joe",
    "email": "joe@whatever.com",
    "url": "https://whatever.com"
  }
}

寄稿者

パッケージへの1人以上の寄稿者を指定します。このプロパティは文字列の配列です。

例えば：

{
  "contributors": ["Joe <joe@whatever.com> (https://whatever.com)"]
}

またはこのように：

{
  "contributors": [
    {
      "name": "Joe",
      "email": "joe@whatever.com",
      "url": "https://whatever.com"
    }
  ]
}

エラー

課題トラッカー、通常はGitHubの課題トラッカーへのリンクを定義します。

例えば：

{
  "bugs": "https://github.com/whatever/package/issues"
}

ホームページ

ホームページのアドレスを定義します。

例えば：

{
  "homepage": "https://whatever.com/package"
}

バージョン

パッケージの現在のバージョンを決定します。

例えば：

"version": "1.0.0"

このプロパティは、セマンティックバージョン管理標準に従います。つまり、常にドットで区切られた3つの数値で構成する必要がありますx.x.x。

最初の番号はメジャーバージョン、2番目はマイナーバージョン、3番目はパッチです。

各番号には特定の意味があります。バグを修正するためのアップデートはパッチ、下位互換性のある変更のリリースはマイナーリリース、メジャーリリースは以前のバージョンと互換性のない変更を意味する場合があります。

ライセンス

パッケージのライセンスを指定します。

例えば：

"license": "MIT"

キーワード

このプロパティは、パッケージに関連付けられているキーワードの配列です。

例えば：

"keywords": [
  "email",
  "machine learning",
  "ai"
]

彼らは人々がパッケージを見つけるのを助けます。

説明

パッケージの短い説明を定義します。

例えば：

"description": "A package to work with strings"

npm特定のプロパティにパッケージを公開すると、パッケージの目的が理解しやすくなります。

リポジトリ

パッケージのソースコードの場所を決定します。

例えば：

"repository": "github:whatever/testing",

接頭辞に注意してくださいgithub。他の同様のサービスがあります：

"repository": "gitlab:whatever/testing",

"repository": "bitbucket:whatever/testing",

バージョン管理システムを定義することもできます：

"repository": {
  "type": "git",
  "url": "https://github.com/whatever/testing.git"
}

複数のバージョン管理システムを指定できます。

"repository": {
  "type": "svn",
  "url": "..."
}

メイン

パッケージのメインファイル（エントリポイント）を定義します。

パッケージをアプリケーションにインポートするとき、アプリケーションがエクスポートされたモジュールを探すのはこのファイルです。

例えば：

"main": "src/main.js"

民間

このプロパティを値に設定trueすることで、パッケージが誤ってに公開されるのを防ぎますnpm。

例えば：

"private": true

スクリプト

実行（実行）できるコマンド（スクリプト）のリストを定義します。

例えば：

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "unit": "jest --config test/unit/jest.conf.js --coverage",
  "test": "npm run unit",
  "lint": "eslint --ext .js,.vue src test/unit",
  "build": "node build/build.js"
}

これらのスクリプトはコマンドラインアプリケーションです。npm run XXXXまたはyarn run XXXXで実行できますXXXX。はコマンド名です。例：npm run dev。

コマンド名として任意の名前を使用できます。スクリプトは、その中で指定したすべてを実行します。

依存関係

パッケージの依存関係のリストを定義します。

npmまたはyarnを使用してパッケージをインストールする場合：

npm install <PACKAGENAME>
yarn add <PACKAGENAME>

このパッケージのレコードは、問題のプロパティに自動的に追加されます。

例えば：

"dependencies": {
  "vue": "^2.5.2"
}

devDependencies

開発目的の依存関係のリストを定義します。

これらはとは異なります。dependencies開発者のコンピュータにのみインストールされ、本番環境に移行しないためです。

npmまたはyarnを使用してパッケージをインストールする場合：

npm install --save-dev <PACKAGENAME>
yarn add --save-dev <PACKAGENAME>

それに関するレコードは、考慮されるプロパティに自動的に追加されます。

例えば：

"devDependencies": {
  "autoprefixer": "^7.1.2",
  "babel-core": "^6.22.1"
}

エンジン

パッケージ/アプリケーションが実行されているNode.jsまたは他のツールのバージョンを決定します。

例えば：

"engines": {
  "node": ">= 6.0.0",
  "npm": ">= 3.0.0",
  "yarn": "^0.13.0"
}

browserlist

サポートされるブラウザー（およびそのバージョン）のリストを定義します。この情報は、Babel、Autoprefixer、およびその他のツールによって使用され、ポリフィルを作成して、指定されたブラウザーとの互換性を確保します。

例えば：

"browserslist": [
  "> 1%",
  "last 2 versions",
  "not ie <= 8"
]

この設定は、IE8以前のバージョンを除いて、CanIUse統計に従って1％以上の人が使用するすべてのブラウザーの2つの最新バージョンをサポートすることを意味します。

特別な特性

package.jsonBabel、ESLintなどのツールの特別なプロパティを含めることができます。

これらの各ツールは、独自のプロパティを持ち、例えばeslintConfig、babelそして上のようにします。特別なプロパティの詳細については、対応するドキュメントを参照してください。

パッケージのバージョン

上記の例では、おそらくこのようなエントリを気づきました：~3.0.0、^0.13.0。彼らはどういう意味ですか？また、他にどのバージョン指定子を使用できますか？

これらの指定子は、更新条件を定義するために使用されます。

ルールは次のとおりです。

~-書き込み~0.13.0は、パッチの更新のみが許可されることを意味します。リリースがあり0.13.1、有効な、しかしリリースはあり0.14.0ません
^-書き込み^0.13.0は、パッチとマイナーアップデートが許可されていることを意味します
*-レコード*は、更新が許可されることを意味します
> -新しいバージョンは許可されます
>= -類似またはより新しいバージョンが許可されます
<= -類似または古いバージョンが許容されます
< -すべての古いバージョンが許可されます

ここにいくつかのルールがあります：

先頭文字なし-指定されたバージョンのみが許可されます
latest -最新バージョンのみが許可されています

これらの文字は、次のようにさまざまな方法で組み合わせることができます1.0.0 || >=1.1.0 <1.2.0。

清聴ありがとうございました。

つづく…

Node.jsの初心者向けガイド パート3