written

README.md

@@ -1 +1,3 @@
 # Node.jsを使う
+
+https://kou029w.github.io/nodejs-hands-on/

src/README.md

@@ -1 +1,3 @@
 # Node.jsを使う
+
+この文書はNode.jsを使うための入門ガイドです。Node.jsを使って開発を進めていくための最初の一歩になればと思います。

src/SUMMARY.md

@@ -1 +1,9 @@
 - [Node.jsを使う](README.md)
+- [Node.jsとは](about-nodejs.md)
+- [Node.jsのインストール](installing-nodejs.md)
+- [package.jsonファイル](package-json.md)
+- [ESLintの導入](eslint.md)
+- [Prettierの導入](prettier.md)
+- [VSCodeのインストール](installing-vscode.md)
+- [VSCodeの拡張機能](vscode-extensions.md)
+- [VSCodeでのNode.jsのデバッグ](debugging-nodejs-in-vscode.md)

src/about-nodejs.md

@@ -0,0 +1,5 @@
+# Node.jsとは
+
+公式サイト: [Node.js](https://nodejs.org/ja/)
+
+Node.jsは、オープンソースでクロスプラットフォームなJavaScript実行環境です。Webアプリケーションを中心に幅広い開発に使われています。

src/debugging-nodejs-in-vscode.md

@@ -0,0 +1,26 @@
+# VSCodeでのNode.jsのデバッグ
+
+VSCodeは標準でNode.jsのプログラムのデバッグを行うことができます。
+
+VSCodeでNode.jsのプログラムのデバッグを行うには、Auto Attach (自動アタッチ)を使用します。
+設定を変更し、Node.jsで起動したプログラムにアタッチして、デバッグを開始します。
+
+デバッグを行えるようにすることで、ブレークポイントを指定して処理の流れを確認したり、そのときの変数の内容を確認したりすることができます。
+
+## 自動アタッチ設定
+
+設定から、Debug › JavaScript: Auto Attach Filter (`debug.javascript.autoAttachFilter`) を変更します。
+
+`smart` を選択すると、VSCodeターミナルからNode.jsのプロセスを実行したとき[`--inspect`](https://nodejs.org/ja/docs/guides/debugging-getting-started/)スイッチが有効化され、自動的にデバッグを開始することができます。
+
+自動アタッチを行うにはVSCode内のターミナルを使用しなければなりません。
+また、Auto Attachを有効にした後、ターミナルを一度再起動する必要があります。これは、ターミナルの右上にある ⚠ アイコンをクリックするか、新しいターミナルを作成することで行えます。
+
+## ブレークポイント
+
+Node.jsで実行するプログラムのコードをVSCodeで開き、行番号の左の部分をクリックしてブレークポイントを作成できます。
+また、もう一度その部分をクリックすることでそのブレークポイントを削除できます。
+
+ブレークポイントを作成すると、VSCode内のターミナルからNode.jsでそのプログラムを実行するとき、そのブレークポイントの行で処理は一時停止します。
+
+このようにして、VSCodeでNode.jsのプログラムのデバッグを行うことができます。

src/eslint.md

@@ -0,0 +1,122 @@
+# ESLintの導入
+
+公式サイト: [ESLint](https://eslint.org/)
+
+ESLintは、JavaScriptの静的コード解析を行うためのツールです。
+
+ESLintは、JavaScriptのコードの品質に関わる次のような項目を検査できます。
+
+- デッドコードの検知 (no-unused-vars, no-unreachable, etc.)
+- コードの複雑さ (max-lines, max-depth, complexity, etc.)
+
+## 導入方法
+
+プロジェクトにESLintを導入するには、ターミナルで以下のコマンドを実行します。
+
+```bash
+npm init @eslint/config
+```
+
+実行結果:
+
+```console
+$ npm init @eslint/config
+Need to install the following packages:
+  @eslint/create-config
+Ok to proceed? (y) <Enterキーを入力>
+...いくつか質問が続きます。それぞれ矢印キーとEnterキーを入力して回答してください。なお回答後に作られる設定ファイルを直接編集することで後から設定を変更することもできます。
+```
+
+| 質問                                                                                                          | 回答例                                                             |
+| ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ |
+| How would you like to use ESLint? (ESLintをどのように使いたいですか?)                                         | To check syntax and find problems (シンタックス検査と問題点の検出) |
+| What type of modules does your project use? (プロジェクトでは、どのような種類のモジュールを使用していますか?) | JavaScript modules (import/export) (ECMAScript modules)            |
+| Which framework does your project use? (プロジェクトでは、どのフレームワークを使用していますか?)              | None of these (いずれもなし)                                       |
+| Does your project use TypeScript? (あなたのプロジェクトではTypeScriptを使用していますか?)                     | No (いいえ)                                                        |
+| Where does your code run? (コードはどこで実行しますか?)                                                       | Node (Node.js)                                                     |
+| What format do you want your config file to be in? (設定ファイルの形式は?)                                    | JavaScript                                                         |
+| Would you like to install them now? (今すぐインストールしますか?)                                             | Yes (はい)                                                         |
+| Which package manager do you want to use? (どのパッケージマネージャを使用しますか?)                           | npm                                                                |
+
+## 実行方法
+
+導入したESLintは、`npx eslint` コマンドを使用することで実行できます。
+
+```bash
+npx eslint <ファイル名またはディレクトリ名>
+```
+
+たとえば、次のJavaScriptのファイルを作成し、ESLintによって検査してみましょう。
+
+```js
+// hello.js
+const message = "Hello, World!";
+console.log(message);
+```
+
+```console
+$ npx eslint hello.js
+```
+
+実行後、何も表示されなければ検査完了です。
+検査に合格したことを意味します。
+
+実際にコードの品質に問題があった場合についても確認してみましょう。
+上のコードを次のように変更してみます。
+
+```js
+// hello.js
+const message = "Hello, World!";
+console.log(invalid);
+```
+
+`console.log()` の引数に定義されていない無効な値 `invalid` を渡してみます。
+
+```console
+$ npx eslint hello.js
+
+hello.js
+  1:7   error  'message' is assigned a value but never used  no-unused-vars
+  2:13  error  'invalid' is not defined                      no-undef
+
+✖ 2 problems (2 errors, 0 warnings)
+
+```
+
+実行するとエラーメッセージが表示されます。
+これは、ESLintがコードを検査した結果、2件の問題 (problems) を検知したことを意味します。
+
+このようにして、ESLintはコードの品質に関する問題を検知することができます。
+
+## エラーの説明
+
+```
+  1:7   error  'message' is assigned a value but never used  no-unused-vars
+```
+
+このメッセージは 対象のファイルの1行目、7列目に問題の可能性のあるコードが検出されたことを意味します。
+`no-unused-vars` ルールが有効になっている場合、このメッセージが表示されます。
+「'message' is assigned a value but never used (`message` に値が割り当てられているが、使われていません)」と書かれており、`message` がデッドコードとなっている可能性を知らせてくれています。
+
+もし仮にここでコードに必要な変数を宣言しているならば、その変数は必要な場所で正しく使用されていない可能性があります。
+あるいはもし仮に本当に不要な変数の宣言であるならば、この宣言は削除しても構いません。
+
+```
+  2:13  error  'invalid' is not defined                      no-undef
+```
+
+続いてのメッセージは、対象のファイルの2行目、13列目に問題の可能性のあるコードが検出されたことを意味します。
+`no-undef` ルールが有効になっている場合、このメッセージが表示されます。
+「'invalid' is not defined (`invalid` が定義されていない)」と書かれており、`invalid` が宣言されていない変数であることを知らせてくれています。
+JavaScriptで変数を使用する場合、あらかじめ宣言する必要があるので必要に応じて宣言するか、あるいはもし誤った変数を参照しているならば、正しい変数に変更しましょう。
+
+この他にもESLintにはさまざまなルールがあります。詳細は[ESLintのルール一覧](https://eslint.org/docs/rules/)をご覧ください。
+
+## 複数のファイルの検査
+
+引数にディレクトリを指定することで、そのディレクトリ内のコードを検査します。
+もしカレントディレクトリ内のコードを検査したい場合は、`.` を引数に指定します。
+
+```bash
+npx eslint .
+```

src/installing-nodejs.md

@@ -0,0 +1,94 @@
+# Node.jsのインストール
+
+Node.jsはさまざまな方法でインストールできます。最も一般的な方法は、公式サイトからダウンロードしてインストールする方法です。
+
+主要なプラットフォームのインストーラーは、[Node.jsの公式サイト - https://nodejs.org/ja/download/](https://nodejs.org/ja/download/) からダウンロードできます。
+こちらから自分の環境に合わせたインストーラーをダウンロードし、それを実行します。
+インストーラーを実行するとNode.jsがインストールされます。
+
+## ヒント: 「LTS」と「最新版」
+
+バージョンの説明を読むと「LTS (推奨版)」とあります。この「LTS」は何かというと、「Long Term Support」を表しており、「長期間安定的にサポートされます」という意味です。
+
+現在、Node.jsは毎年LTSリリースを行っています。このLTSリリースは、バージョン番号が偶数番号 (たとえば、16、18など) のものが採用されます。LTSリリースのバージョンは、重要なバグ修正を基本的に30ヶ月間が行われることを保証されています。
+
+一方、それらのLTSリリースとは別に、Node.jsは6ヶ月ごとに最新版がリリースされます。この最新版はLTSリリースとは異なり、次のバージョンのリリース後にサポートされなくなります。したがって、一般的にはLTSリリースを採用するのがよいでしょう。
+
+参照: [リリース | Node.js](https://nodejs.org/ja/about/releases/)
+
+## ターミナルの使用
+
+コマンドを実行するにはターミナルを使用します。
+
+macOS の場合:
+
+[アプリケーション] > [ユーティリティ] 内にある [ターミナル] を選択して起動します。
+
+Windows の場合:
+
+Microsoft Storeから、Windows Terminalをインストールします。
+インストール後、[スタートメニュー] > [Windows Terminal] を選択して起動します。
+
+## Node.jsの使用
+
+ターミナルで次のコマンドを実行して、Node.jsがインストールされていることを確認します。
+
+```bash
+node -v
+```
+
+インストールしたNode.jsのバージョンが表示されていれば、Node.jsを使用する準備は完了です。
+
+```console
+$ node -v
+v16.15.0
+```
+
+## NPMとプロキシの確認
+
+プロキシが存在する環境では、ターミナルで `npm` コマンドを実行した際、次のようなエラーメッセージとともに失敗することがあります。
+
+```console
+$ npm install --save-dev jest
+npm ERR! code ENOTFOUND
+npm ERR! syscall getaddrinfo
+npm ERR! errno ENOTFOUND
+npm ERR! network request to https://registry.npmjs.org/jest failed, reason: getaddrinfo ENOTFOUND proxy.example.com
+npm ERR! network This is a problem related to network connectivity.
+npm ERR! network In most cases you are behind a proxy or have bad network settings.
+npm ERR! network
+npm ERR! network If you are behind a proxy, please make sure that the
+npm ERR! network 'proxy' config is set properly.  See: 'npm help config'
+
+npm ERR! A complete log of this run can be found in:
+npm ERR!     /home/webdino/.npm/_logs/2022-01-12T07_20_33_146Z-debug-0.log
+```
+
+このようなエラーが出ない場合は設定不要です。もしこのようなエラーが出る場合は、必要に応じて環境変数 `HTTP_PROXY` と `HTTPS_PROXY` に適切なプロキシのURLを設定します。
+
+## NPMのプロキシの設定
+
+実際の自分の環境に合わせて変更してください。下記ではプロキシーのURLの例として `http://user:pass@proxy.example.com:8080` を使用しますが、実際には適切なURLを設定してください。
+
+### Windows - コマンドプロンプトの場合
+
+```
+set HTTP_PROXY=http://user:pass@proxy.example.com:8080
+set HTTPS_PROXY=http://user:pass@proxy.example.com:8080
+```
+
+### Windows - PowerShellの場合
+
+```powershell
+$env:HTTP_PROXY="http://user:pass@proxy.example.com:8080"
+$env:HTTPS_PROXY="http://user:pass@proxy.example.com:8080"
+```
+
+### それ以外 - BashやZshなどの場合
+
+```bash
+export HTTP_PROXY=http://user:pass@proxy.example.com:8080
+export HTTPS_PROXY=http://user:pass@proxy.example.com:8080
+```
+
+設定を行ったら、通常通り `npm` コマンドを実行して、エラーが出ないことを確認してみましょう。

src/installing-vscode.md

@@ -0,0 +1,32 @@
+# VSCodeのインストール
+
+VSCode (Visual Studio Code)は、ソースコードを編集するためのエディタです。
+
+VSCodeは、JavaScriptをはじめとするさまざまなプログラミング言語のシンタックスハイライトや自動補完、またデバッガなどの便利な機能を備えています。
+
+VSCodeは公式サイトからダウンロードしてインストールできます。
+
+公式サイト: [Visual Studio Code](https://code.visualstudio.com/)
+
+自分の環境に合わせたインストーラーをダウンロードし、それを実行します。
+インストーラーを実行するとVSCodeがインストールされます。
+
+## 設定
+
+設定を変更するには、メニューから設定を開きます。
+
+- Windows/Linuxの場合 - File (ファイル) > User Settings (ユーザー設定) > Settings (設定)
+- macOSの場合 - Code > User Settings (ユーザー設定) > Settings (設定)
+
+## 便利な設定
+
+- Editor: Format On Save (保存時に自動整形) … `editor.formatOnSave`
+  - 有効化することで、ファイルを保存する時に自動的にコードの整形を行います。
+
+## プロキシの設定
+
+プロキシが存在する環境では、拡張機能のインストールに失敗することがあります。
+拡張機能のインストールが行える環境の場合、設定不要です。必要に応じて適切なプロキシのURLを設定します。
+
+- Http: Proxy … `http.proxy`
+  - プロキシのURLを指定します。

src/package-json.md

@@ -0,0 +1,25 @@
+# package.jsonファイル
+
+Node.jsを使ったプロジェクトは、基本的に `package.json` というファイルが配置されます。
+`package.json` には、次のようなプロジェクトに必要な付帯情報が含まれます。
+
+- 名前とバージョン
+- 外部モジュールや依存関係
+- テストやビルドするためのコマンドなど
+
+## プロジェクトの作成
+
+Node.jsを使った開発をはじめるにあたって、最初にプロジェクトのためのディレクトリを作成します。
+
+```bash
+mkdir my-project
+cd my-project
+```
+
+そして、その中に `package.json` を配置します。
+
+```bash
+npm init -y
+```
+
+これで一通りの準備が整いました。

src/prettier.md

@@ -0,0 +1,68 @@
+# Prettierの導入
+
+公式サイト: [Prettier](https://prettier.io/)
+
+Prettierは、ソースコードを整形するためのツールです。
+
+Prettierは、JavaScriptをはじめとした、さまざまなコードの整形に対応しています。
+
+- JavaScript
+- JSX
+- Angular
+- Vue
+- Flow
+- TypeScript
+- CSS, Less, and SCSS
+- HTML
+- Ember/Handlebars
+- JSON
+- GraphQL
+- Markdown, including GFM and MDX
+- YAML
+
+次のコマンドでPrettierをインストールします。
+
+```
+npm i -D prettier
+```
+
+インストール後、次のコマンドでファイルの整形を行います。
+
+```bash
+prettier --write <ファイル名またはディレクトリ名>
+```
+
+実行例:
+
+```bash
+prettier --write hello.js
+```
+
+もしカレントディレクトリ以下にある複数のファイルを整形したい場合は、`.` を引数に指定します。
+
+```bash
+prettier --write .
+```
+
+このようにして、Prettierはコードの整形を行うことができます。
+
+## ESLintとの競合を避ける
+
+ESLintでコードの整形を行うことがあり、その設定によってはPrettierで整形を行うことができない場合があります。
+それを避けるには、ESLintの設定として[`eslint-config-prettier`](https://github.com/prettier/eslint-config-prettier#readme)をインストールし、これを使用します。
+
+```bash
+npm i -D eslint-config-prettier
+```
+
+```js
+// .eslintrc.js
+module.exports = {
+  extends: [
+    "eslint:recommended",
+    "prettier", // extends の要素として追加
+  ],
+};
+```
+
+こうすることによって、Prettierで整形を行うことができない問題を回避することができます。必要に応じて行いましょう。

src/vscode-extensions.md

@@ -0,0 +1,14 @@
+# VSCodeの拡張機能
+
+VSCodeは、標準で備えている機能の他にMarketplaceにある拡張機能をインストールすることでさまざまな機能を追加することができます。
+
+## 拡張機能の検索
+
+VSCodeを起動して、ウィンドウの左端のアクティビティバーにある「拡張機能」をクリックして、Marketplaceにある拡張機能を検索することができます。
+
+## 便利な拡張機能の紹介
+
+- ESLint ([`dbaeumer.vscode-eslint`](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)) … ESLintを使用するための拡張機能
+- Prettier - Code formatter ([`esbenp.prettier-vscode`](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)) … Prettierを使用するための拡張機能
+
+検索した拡張機能を選択し、Install (インストール)をクリックしてその拡張機能をインストールします。