
Windows版のNode.jsと同梱のnpmをインストールしていきます。

## 環境

- Windows 10 Home x64
  - バージョン 1909
- Node.js 12.18.3
- npm 6.14.6

## Node.jsをインストールする

1.まずは[こちら](https://nodejs.org/ja/download/)でLTS版をダウンロードします。

![download](/images/posts/240/249/node-download.png)

Chromeだと32bitか64bitかを勝手に判断してあったものをダウンロードしてくれます。

2.インストーラーを開いて進めます  
3."Next"をクリック

![download](/images/posts/240/249/2020-08-16-4.png)

4.ライセンスに同意する。

![download](/images/posts/240/249/2020-08-16-5.png)

5.インストールするパスを選択する。

![download](/images/posts/240/249/2020-08-16-6.png)

6.設定を選びます。

![download](/images/posts/240/249/2020-08-16-8.png)

デフォルトで問題なく、環境変数にNode.jsとnpmを追加などしてくれます。

7.Node.jsのインストールにはPythonとVisual Studio Build Toolsといったモジュールが必要です。
パッケージマネージャのChocolateryをインストールする場合はチェックします。  

![download](/images/posts/240/249/2020-08-16-9.png)

8."Install"でインストールが始まります。

![download](/images/posts/240/249/2020-08-16-10.png)

9."Install"でインストールが始まります。

![download](/images/posts/240/249/2020-08-16-11.png)

10.コマンドプロンプトでインストールスクリプトが立ち上がります。

![download](/images/posts/240/249/2020-08-16-12.png)

11.PowerShellが立ち上がり必要なモジュールがインストール/アップデートがされました。

![download](/images/posts/240/249/2020-08-16-13.png)

コマンドプロンプトかPowerShellを開いてインストールできたことを確認します。

```
C:\Users\ysuzu>node -v
v12.18.3

C:\Users\ysuzu>npm -v
6.14.6
```

Windows10 HomeにNode.jsとnpmをインストールする

NuxtjsとMathJaxで数式エディタをつくってみる


このブログでは**npm**の**Markdown-it**でマークダウン記法からHTMLに変換している。
本記事は**Markdown-it**の記法の確認のためのものです。

## 環境

- npm 6.4.1
- markdown-it
- markdown-it-latex
- markdown-it-highlight

cssをいじっているためいくつかの記法は見慣れないスタイルになっているかも。
（例：h1, h2タグ）

## <i class="fa fa-cubes" style="font-size:1em;"></i> 見出し

1個から6個シャープで見出しを記述する。
※シャープと見出し文字の間には半角スペースを1つ入れること

###  記述例
~~~md
# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6
~~~

### 表示例
# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6

##  箇条書きリスト

ハイフン、プラス、アスタリスクのいずれかで箇条書きリストを記述可能。

※ハイフン、プラス、アスタリスクと箇条書きの項目の間には半角スペースを1つ入れること

### 記述例

~~~md
- リスト1
    - ネスト リスト1_1
        - ネスト リスト1_1_1
        - ネスト リスト1_1_2
    - ネスト リスト1_2
- リスト2
- リスト3
~~~

### 表示例

- リスト1
    - ネスト リスト1_1
        - ネスト リスト1_1_1
        - ネスト リスト1_1_2
    - ネスト リスト1_2
- リスト2
- リスト3

##  番号付きリスト

数値+半角ドットで番号付きリストを記述可能。
番号の内容は何でもいい。実際に表示される際に適切な番号で表示される。
そのため、一般的にはすべて `1. 内容` で記載すると変更に強く楽です。
※数値+半角ドットと箇条書きの項目の間には半角スペースを1つ入れること

### 記述例
~~~md
1. 番号付きリスト1
    1. 番号付きリスト1_1
    1. 番号付きリスト1_2
1. 番号付きリスト2
1. 番号付きリスト3
~~~

### 表示例

1. 番号付きリスト1
    1. 番号付きリスト1_1
    1. 番号付きリスト1_2
1. 番号付きリスト2
1. 番号付きリスト3

##  引用

~~~md
> 1. 第一条  
> ロボットは人間に危害を加えてはならない。また、その危険を看過することによって、人間に危害を及ぼしてはならない。  
> 2. 第二条  
> ロボットは人間にあたえられた命令に服従しなければならない。ただし、あたえられた命令が、第一条に反する場合は、この限りでない。  
> 3. 第三条  
> ロボットは、前掲第一条および第二条に反するおそれのないかぎり、自己をまもらなければならない。  
> 
> — 2058年の「ロボット工学ハンドブック」第56版、『[われはロボット](https://amzn.to/301dvm6)』より
~~~

### 表示例

> 1. 第一条  
> ロボットは人間に危害を加えてはならない。また、その危険を看過することによって、人間に危害を及ぼしてはならない。  
> 2. 第二条  
> ロボットは人間にあたえられた命令に服従しなければならない。ただし、あたえられた命令が、第一条に反する場合は、この限りでない。  
> 3. 第三条  
> ロボットは、前掲第一条および第二条に反するおそれのないかぎり、自己をまもらなければならない。  
> 
> — 2058年の「ロボット工学ハンドブック」第56版、『[われはロボット](https://amzn.to/301dvm6)』より


##  pre記法(スペース4 or タブ)

半角スペース4個もしくはタブで、コードブロックをpre表示できます

### 記述例
~~~md
	# Tab
	class Hoge
		def hoge
			print 'hoge'
		end
	end

---

    # Space
    class Hoge
      def hoge
        print 'hoge'
      end
    end
~~~

### 表示例
	class Hoge
		def hoge
			print 'hoge'
		end
	end

---

    class Hoge
      def hoge
        print 'hoge'
      end
    end

##  code記法
バッククォートで文字列を囲むことでコードの一部を表示可能です。

### 記述例
~~~md
インストールコマンドは `pip install hoge` です
~~~

### 表示例
インストールコマンドは `pip install hoge` です

##  強調：&lt;em&gt;
アスタリスクもしくはアンダースコア1個で文字列を囲むことで強調します。
見た目は斜体になります。

### 記述例
~~~md
normal *italic* normal  
normal _italic_ normal
~~~

### 表示例
normal *italic* normal  
normal _italic_ normal

##  強調：&lt;strong&gt;
アスタリスクもしくはアンダースコア2個で文字列を囲むことで強調にします。
見た目は太字になります。

### 記述例
~~~md
normal **bold** normal  
normal __bold__ normal
~~~

### 表示例
normal **bold** normal  
normal __bold__ normal

##  強調：&lt;em&gt; + &lt;strong&gt;
アスタリスクもしくはアンダースコア3個で文字列を囲むことで &lt;em&gt; と &lt;strong&gt; による強調を両方適用します。
見た目は斜体かつ太字になります。

### 記述例
~~~md
normal ***bold*** normal  
normal ___bold___ normal
~~~

### 表示例
normal ***bold*** normal  
normal ___bold___ normal

##  水平線
アンダースコア、アスタリスク、ハイフンなどを3つ以上連続して記述することで水平線を表示します。
※連続するハイフンなどの間にはスペースがあっても良い

### 記述例
~~~markdown

***

___

---

*    *    *

~~~

### 表示例

***

___

---

* * *

##  リンク
`[表示文字](リンクURL)`形式でリンクを記述できます

~~~md
[Google先生](https://www.google.co.jp/)
~~~

[Google先生](https://www.google.co.jp/)

##  定義参照リンク
Markdownの文書の途中に長いリンクを記述したくない場合は、
同じリンクの参照を何度も利用する場合は、リンク先への参照を定義することができます。

~~~markdown
[こっちからgoogle][google]  
その他の文章  
[こっちからもgoogle][google]  
  
[google]: https://www.google.co.jp/
~~~

[こっちからgoogle][google]  
その他の文章  
[こっちからもgoogle][google]  
  
[google]: https://www.google.co.jp/

##  取り消し線
チルダ2個で文字列を囲むことで取り消し線を利用できます。

### 記述例
~~~md
~~取り消し線~~
~~~

### 表示例
~~取り消し線~~


##  表組み

### 記述例
~~~md
| header1    |     header2 |   header3    |
|:-----------|------------:|:------------:|
| align left | align right | align center |
| a          |           b |      c       |
~~~
### 表示例
| header1    |     header2 |   header3    |
|:-----------|------------:|:------------:|
| align left | align right | align center |
| a          |           b |      c       |


Markdown-itのサンプル


新しくNuxt.jsのプロジェクトを作成してから、`vue-loader`を使ってSCSSを導入するまでの手順です。公式にあるテンプレート利用しています。

SCSSとしていますがSassでも同様にできます。

## 環境

- Windows 10 Home
- Node.js v10.15.1
- npm 6.4.1
- yarn 1.15.2

Node.js / npm（ + yarn）の導入手順はこちらで紹介しています。
- [Windows](https://www.suzu6.net/posts/124-yarn-windows/)
- [Mac](https://www.suzu6.net/posts/45)
- [Ubuntu系](https://www.suzu6.net/posts/81-npm-install-ubuntu)

### 導入したもの

- node-sass: ^4.12.0
- nuxt: ^2.0.0
- sass-loader: ^7.1.0

## Nuxt.jsのプロジェクト作成

[Nuxt.jsのガイド](https://ja.nuxtjs.org/guide/installation)に従ってスターターテンプレートを使ってプロジェクトの作成を進めます。
個別にインストールしてスクラッチで作成することもできますが、`nuxt.config.js`の書き方など些細な点で悩むことが多いためテンプレートを使うことをお勧めします。

`<project-name>`は**sample**としておきます。

### create-nuxt-app を使用する

この項は[Nuxt.jsのガイド](https://ja.nuxtjs.org/guide/installation#nuxt-js-%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%82%B9%E3%82%BF%E3%83%BC%E3%82%BF%E3%83%BC%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88)通りに進めて問題ないです。

```sh
# by npx
> npx create-nuxt-app sample

# by yarn
> yarn create nuxt-app sample
```

インストールが進み、sampleのフォルダが作成されました。
続いていくつか質問されます。
カーソルの位置のものを選択しています。
スタイルはスクラッチで開発する予定だったため、今回はUIフレームワークを使っていません。

```sh
? Project name (sample) # プロジェクト名は？
? Project description (My posh Nuxt.js project) # プロジェクト説明は？
? Author name (suzu6) # 制作者は？
# パッケージマネージャを選択
? Choose the package manager 
> Yarn
  Npm
# UI フレームワークを選択
? Choose UI framework (Use arrow keys) 
> None
  Ant Design Vue
  Bootstrap Vue
  Buefy
  Bulma
  Element
  iView
  Tachyons
  Tailwind CSS
  Vuetify.js
# サーバのフレームワークを選択
? Choose custom server framework (Use arrow keys) 
> None (Recommended)
  AdonisJs
  Express
  Fastify
  Feathers
  hapi
  Koa
  Micro
# モジュールを選択
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Axios
 ( ) Progressive Web App (PWA) Support
# リントツールを選択
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) ESLint
 ( ) Prettier
# テストのフレームワークを選択
? Choose test framework (Use arrow keys)
  None
> Jest
  AVA
# モードを選択（nuxt.configで変更可能）
? Choose rendering mode (Use arrow keys)
  Universal (SSR)
> Single Page App
```

インストールに成功したらのフォルダに移動して、立ち上げてみます。

```
> cd sample
> yarn dev
```

[http://localhost:3000/](http://localhost:3000/)でサイトを確認できます。


![template](/images/posts/170/173/1.png)


## SCSSを使えるようにする

本題です。

[vue-loader](http://vue-loader.vuejs.org/en/configurations/pre-processors.html)をインストールして`.vue`の中で`<style lang="scss">`を使えるようにします。

参考：[プリプロセッサを使うには？](https://ja.nuxtjs.org/faq/pre-processors)

### vue-loaderをインストール

`SCSS`に必要なモジュールをインストールします。

```sh
# by npm
> npm install sass-loader node-sass --save-dev

# by yarn
> yarn add npm install sass-loader node-sass
```
`pakage.json`
```json
  "dependencies": {
    "nuxt": "^2.0.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^7.1.0"
  },
```

これで、`.vue`ファイル内で`SCSS`が使えるようになりました。
Nuxt.jsのホットリロードによってSCSSの修正が即座に反映され、開発が進みます。
以下のように`<style lang="scss">`を使えます。

```html
<style lang="scss">
.red {
  color: red
}
</style>
```

## 共通のSCSSファイルの設定

続いて、プロジェクトで共通のスタイルもSCSSで書けるようにします。

### .scssファイルを作成

`/assets/sass/app.scss`を作成して、読み込みませます。
同じフォルダのSCSSファイルをimportできるか試すため`variables.scss`と`common.scss`も同時に作成します。

`/assets/sass/app.scss`
```scss
// Variables
@import 'variables';

// common
@import 'common';
```

`/assets/sass/variables.scss`
```scss
$color-bg: rgb(248, 255, 187);
```

`/assets/sass/common.scss`
```scss
body {
    background-color: $color-bg;
}
```

背景色を変更するだけです。

### nuxt.config.jsの設定

`nuxt.config.js`にファイルのパスとSCSSであることを示せば勝手にやってくれます。
すごく簡潔だった。

`nuxt.config.js`
```js

  /*
  ** Global CSS
  */
  css: [
    { src: '~/assets/sass/app.scss', lang: 'scss' },
  ],
```

背景色が変わりました！
こちらもファイルを保存するだけで変更がすぐに反映されるため、スタイルをいじるのが楽しくなります。

![2](/images/posts/170/173/2.png)

共通のSCSSには`nuxt-sass-resources-loader`も必要かと思っていたが、`nuxt.config.js`への記述だけで済んだ。

参考：[Nuxt.jsでSassの変数を使えるようにして全ページで読み込むようにする](https://qiita.com/mimoe/items/890c4e681dac7c38322b)


Nuxt.jsのプロジェクトを作成してSCSSを導入するまで


テキストから数式に変換するプラグイン・アプリをまとめます。
ブラウザで実行できるもの、JavaScriptのライブラリ、VSCodeのプラグインなど関連するものをリスト化しました。

それぞれのサンプルまでは載せていません。

## 数式のエンジン・記法について

調べてみると思った以上に数式エンジンが多様だった。
記法もそれぞれあり一長一短がありそうです。

TeX記法など体系が曖昧なため、誤解を招く表現があるやもしれません。
あらかじめご了承ください。

どれが良いかは判断付かないため、見つけたものをここに書きだしておきます。

- [KaTeX](https://katex.org/)
- [MathML(Mathematical Markup Language)](https://developer.mozilla.org/ja/docs/Web/MathML)
- [MathJax](https://www.mathjax.org/)
- [UnicodeMath](https://blogs.msdn.microsoft.com/murrays/2016/11/30/unicodemath-version-3-1/)

### KaTeX

- [KaTeX](https://katex.org/)
- [GitHub](https://github.com/KaTeX/KaTeX)

> KaTeX is a fast, easy-to-use JavaScript library for TeX math rendering on the web.

ライセンス：MIT License

[ドナルド・クヌースのTeX](https://ja.wikipedia.org/wiki/TeX)をベースにしている。
MathJaxよりもブラウザでの描画が早いことを謳っています。

記法については[こちら](https://katex.org/docs/supported.html)にまとまっています。

### MathML

- [MDN - Mozilla](https://developer.mozilla.org/ja/docs/Web/MathML)

> Mathematical Markup Language (MathML) は、数学的表記を記述し、その構造と内容を表現するための XML マークアップ言語です。

数式を描画するマークアップ言語。
HTMLやXMLのように`<>`で書くような言語です。

[MathMLを対象とした数式検索エンジンの設計](https://www.jstage.jst.go.jp/article/infopro/2007/0/2007_0_45/_article/-char/ja/)といった論文も見つけた。

### MathJax

- [MathJax](https://www.mathjax.org/)
- [GitHub](https://github.com/asciimath/asciimathml)

> **Beautiful math in all browsers**  
> A JavaScript display engine for mathematics that works in all browsers.   
> No more setup for readers. It just works.

ライセンス：Apache License 2.0

JavaScriptを使ってブラウザ上に数式を描画するエンジン。
依存がないためこれだけで使える。

### UnicodeMath

- [MSDN](https://blogs.msdn.microsoft.com/murrays/2016/09/07/unicodemath/)

Unicodeの「数式用の書体指定付き文字」となる。
対応したフォントがあれば、数式の字体を変えられそう。

下のサイトの解説がとても詳しい。(3)まである。

- [unicode-math を完全に理解したい話(1)](https://zrbabbler.hatenablog.com/entry/20180915/1537031499)

### MathJaxとKaTeXについて

どちらもTeX文書の変換のためのライブラリであり、記法はほぼ同じ。
パースの速度面ではKaTeXが優勢です。

比較について詳しくは下記を参照してください。

- [TeXライブラリの選出](https://github.com/NetCommons3/Wysiwyg/issues/12)

## JavaScript, npm

以下はJavaScriptまたはnpmで使えるもの。

### markdown-it-latex

- [GitHub](https://github.com/tylingsoft/markdown-it-latex)
- [npm](https://www.npmjs.com/package/markdown-it-latex)

マークダウンをHTMLに変換する[markdown-it](https://github.com/markdown-it/markdown-it)の数式プラグイン。
**KaTeX**と**AsciiMath**に対応している。

このブログでもmarkdown-it、processmdと合わせて利用しています。

例えば、オイラーの公式も下記のように書けます。

KaTeX記法
````
```math
e^{i\pi}+1= 0
```
````

変換後の数式
```math
e^{i\pi}+1= 0
```


- [コマンドでマークダウンを変換するprocessmd | npm](https://www.suzu6.net/posts/120-npm-procesmd)
- [美しい数式をKaTexで美しく書こう](https://www.suzu6.net/posts/102-katex-math-functions)


### AsciiMath

- [AsciiMath](http://asciimath.org/)
- [GitHub](https://github.com/asciimath/asciimathml/blob/master/ASCIIMathML.js)

ブラウザ上でテキストから数式を変換できるJavaScriptライブラリ。
サイトにサンプルがあるので実行確認できます。
変換には[MathJax](https://www.mathjax.org/)を用いている。

CDN配信されているため、以下のスクリプトで導入できます。
```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/latest.js?config=AM_CHTML"></script>
```

## VSCodeプラグイン

Visual Studio Codeで数式を書けるプラグイン。
TeXとマークダウンそれぞれに対応したものがある。

### LaTeX Workshop

- [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=James-Yu.latex-workshop)

Visual Studio Codeのプラグインの中で一番人気のLaTeXプラグイン。
プレビューやスニペット、シンタックスなども同梱しているので、LaTeXで書くならまずはこれを入れるのが良さげです。

### Markdown All in One

- [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)

Markdownで文章を書くならこれだけが一押し。
数式と入力補完も同梱されており下記のように書ける。エンジンはKaTeXかな。

```
$$
f(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
$$
```

```math
f(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
```

あとは、[Markdown PDF](https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf)を入れたら十全。

### mdmath

- [GitHub](https://github.com/goessner/mdmath)
- [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=goessner.mdmath)

ライセンス：MIT License

Visual Studio Codeでマークダウン＋数式を書くことができるプラグイン。
数式の変換にはKaTeXを使っている。

### Markdown Math

- [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=koehlma.markdown-math)

$\href{https://katex.org/}{\KaTeX}$記法。

### Fast Unicode Math Characters

- [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=GuidoTapia2.unicode-math-vscode)

UnicodeMathに対応したプラグイン。

## その他サービス

### SearchOnMath

- [SearchOnMath](http://searchonmath.com/)

数式のための検索エンジン！
数式を使っているサイトを検索してくれる。

Googleに慣れてしまっているため精度や使い勝手はそこまでだが、試みはとても面白い。

- [数学の数式・記号のあるページを簡単に検索できる「SearchOnMath」- GigaZine](https://gigazine.net/news/20150225-searchonmath/)

### Mathematics Stack Exchange

- [Mathematics Stack Exchange](https://math.stackexchange.com/)

数式についての質問サイト。
質問タイトルが数式だらけで面白い。

恐らくMathJaxを使っています。

### maths online HTML formula tool

- [maths online HTML formula tool](https://www.univie.ac.at/future.media/moe/formeln/index.html)

HTMLでの特殊文字の書き方を確認できるツールサイト。
Symbolフォントが確認できる。

オーストリアのウィーン大学（Universität Wien）のドメイン上にあって驚いた。
Future Mediaというマルチメディア品質の製品の推進協会が作られたそうです。

## 終わりに

今後も、良さそうなアプリ・プラグインを見つけたら追記する予定です。

数式を書くためのエンジン・プラグイン・アプリのまとめ


Node.jsでも簡単にWEBアプリを作れますが、
WEBフレームワークのExpressを使うとより柔軟で簡潔なコードを書くことができます。

APIのテストのために使ってみてその使い勝手の良さに感動しました。
JavaScriptで書けるため、JSONが扱いやすいのも良いですね。

Node.jsの利用者も同時に広めたいのでインストール方法から概要と簡単な例を紹介します。
以下の内容は基本的に[公式](http://expressjs.com/ja/)を初心者向けに補足をする形です。

## 実行環境

- Express 4.16
- Node.js 10.15
- npm 6.4
- Windows 10 Home

開発はWindowsで行いますが、Nodeとnpmが入っていればMacやLinuxでも問題ありません。

## Node.js/npmのインストール

（2019年05月現在）Node.jsのバージョンは10.xが推奨されています。
OS毎のNodeとnpmのインストール方法はそれぞれ以下に挙げます。

- Windows : [こちら](https://nodejs.org/ja/)のインストーラ（推奨版）を使う。
- Linux
  - Ubuntu : [Ubuntuはaptを使う方法](https://www.suzu6.net/posts/81-npm-install-ubuntu)。
  - CentOS : [リンク](https://qiita.com/daskepon/items/16a77868d38f8e585840)先のコマンドを`8.x`から`10.x`に変更してインストールできます。
- Mac : [Homebrewを使う方法](https://www.suzu6.net/posts/45/)

バージョン6と8でも確認できたので、既にインストールされている方はそのままで大丈夫（なはず）です。

```sh
> node -v
v10.15.1

> npm -v
6.4.1
```

インストールして上記のコマンドが打てることを確認してください。

## Express

- [https://expressjs.com/](https://expressjs.com/)
- [日本語](http://expressjs.com/ja/)

![home](/images/posts/150/153/express-home.png)

> Fast, unopinionated, minimalist web framework for Node.js  
> Node.jsのための高速で、革新的な、最小限のWebフレームワーク

フロント側のJavaScriptに触れている方は、サーバ側もJavaScriptで書けるため覚えることが少なく直ぐに開発ができます。
そしてなりより、npmの豊富なライブラリも扱えるのでNode.jsとExpressを覚えておいて損はないと思います。

### インストール

下記のコマンドでExpressをインストールできます。

```sh
> npm install express
```

公式のインストールでは`--save`が付いていますが試す分には必要ありません。

`--save`はpackage.jsonでプロジェクトのモジュール（Expressなど）を管理する際に利用します。
ただ、npm v5からデフォルトで`--save`と同等のことをしてくれるため不要です。

- [npm install時に「--save」オプションはいらない](https://qiita.com/glhfdev/items/c5beda8572aa8c1e6be6)

### Hello World

アプリのディレクトリ（your_app）の配下にサーバのコードを書きます。

**your_app/app.js**

```js
const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => res.send('Hello World!'))

app.listen(port, () => console.log(`Example app listening on port ${port}!`))
```

僅か数行ですが、これだけで`Hello World!`を返すWEBアプリが出来ました！
コードについては後で解説します。

### サーバ実行

まずは、サーバを実行してみましょう。

```sh
# app.jsのパスへ移動
> cd path/to/your_app

# サーバ実行
> node app.js
Example app listening on port 3000!
```

これで[http://localhost:3000](http://localhost:3000)をブラウザで開くと`Hello World!`の文字が表示できます。

![hw](/images/posts/150/153/hello-world.png)

コードを編集した場合は、Kill（Ctrl + C）してから再度実行します。

## セミコロンの省略について

Node.jsはJavaScriptで書きますが、`;`セミコロンを自動で挿入してくれるため省略できます。
この仕様について議論が色々とありますが、個人的には付けたいです。
よって以下のコードでもセミコロンを付けておきます。

詳しくは [JavaScriptの行末セミコロンは省略すべきか](https://blog.tai2.net/automatic_semilocon_insertion.html)を読んで下さい。

## コードについての解説

コードは5行ですが、分解して説明します。

### インスタンス

```js
const express = require('express')
```

npmでインストールしたモジュール（Expressなど）は`require()`を使ってロードします。

```js
const app = express()
```

続いて`express`のインスタンスを生成します。
以降、`app`にリクエストの処理などを追加します。

### ルーティング

```js
app.METHOD(PATH, HANDLER)
```

URLに処理を紐づけるルーティングをします。

```js
app.get('/', (req, res) => res.send('Hello World!'))
```

上記では`http://localhost:3000/`にGETでアクセスされたら、`Hello World!`を返す処理になります。


`get()`を`post()`や`put()`、`delete()`に変えてメソッド毎に返すこともできます。
`use()`はすべてのメソッドに対して処理を行います。

パラメータの`req`がリクエスト、 `res`がレスポンスです。
`res.send()`で文字列やHTMLのページなど返すことができます。


```js
// /helloに来たPOSTメソッドに対してhelloを返す 
app.post('/hello', (req, res) => res.send('hello'))

// PUT
app.put('/user', function (req, res) {
  res.send('Got a PUT request at /user');
});


// コールバック関数を渡す
var collback = function (req, res) {
  res.send('Got Any request method at /book');
}

// useはすべてのメソッドに対して処理を行います。
app.use('/book', collback);

// /add?a=10&b=5 に対して15を返す
app.get('/add', (req, res) => {
    // req.queryでクエリパラメータ取得
    let a = parseInt(req.query.a)
    let b = parseInt(req.query.b)
    // 文字列にして返す
    res.send((a + b).toString())
})
```

第二引数は関数を渡します。
アロー関数ではなく、`function (req, res) {}`の形式でも大丈夫です。


以下にたくさんのサンプルがあります。

- パラメータの渡し方
- URLの正規表現
なども書いてあります。

- [基本的なルーティング](http://expressjs.com/ja/starter/basic-routing.html)
- [ルーティングガイド](http://expressjs.com/ja/guide/routing.html)


### サーバを立ち上げ

```js
app.listen(PORT, HANDLER)
```

```js
const port = 3000
app.listen(port, () => console.log(`Example app listening on port ${port}!`))
```

ポート3000でサーバを立ち上げています。
数値は空いているポートなら80でも8080でも立ち上げることができるため、複数台立ち上げる時はずらして下さい。

ExpressとNode入門｜Node.jsのWEBフレームワークExpressでHello World


yarnはパッケージの依存関係の処理がnpmよりも良いと知ったので、導入してみる。

2021-04-25: インストーラーのダウンロードリンクを変更

`Chocolatey`というパッケージマネジメントツールを使うと
`choco install yarn`だけでインストール出来ます。
Chocolateyの導入方法はこちら。

[WindowsのパッケージマネジメントツールのChocolateyをインストールする](https://www.suzu6.net/posts/297-chocolatey-windows)


## 環境

- Windows10 Home
- Nodejs v10.15.1
- npm v6.4.1

既にNode.jsとnpmはインストール済みです。



- [Node.js / npmをインストールする（for Windows）](https://qiita.com/taiponrock/items/9001ae194571feb63a5e)

Node.jsとnpmはこちらを参考にインストールしました。

## yarnのインストール

yarnをWindowsにインストールする手順。

[インストール | Yarn](https://classic.yarnpkg.com/en/docs/install#windows-stable)

`Alternatives`の`Click to expand / collapse`を開いて、`Download installer`からとWindowsのインストーラー(.msi)をダウンロードできます。

公式からインストーラーをダウンロードします。
**安定版**を選択して「インストーラをダウンロードする」をクリックしてダウンロードします。

インストーラは変更箇所もなく、Nextやacceptedを選択してインストールできました。

コマンドプロンプトを開いてバージョンを確認します。

```cmd
yarn -v
1.15.2
```

無事確認できました！

インストーラ以外にも、ChocolateyやScoopからでもインストールできます。

## yarnが認識されないとき

```cmd
'yarn' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
```

コマンドを打って上のエラーが出た場合、コマンドプロンプトを再起動してください。
PCの再起動でもできなくないです。

それでもダメな場合は、Pathが通っていないことが原因です。
再インストールするか、環境変数のPathを通します。

![yarn-path](/images/posts/ONE/125-yarn.png)

`C:\Program Files (x86)\Yarn\bin`

yarnのbinのフォルダのパスを追加してください。

※画像のモザイク処理が汚くて申し訳ない。

Windowsにyarnをインストールする


**Nuxt 2.5.1**にアップデートしてから、`nuxt run dev`の実行時に表題のエラーが出たのでメモ。

## 環境

- Nuxt v2.5.1
- Node.js v11.12.0

## エラー内容

コンパイル中にfriendly-errorsが山ほど出た。

```sh
$ nuxt run dev 

(省略)

friendly-errors 01:38:28  ERROR  Failed to compile with 35 errors

friendly-errors 01:38:28 These dependencies were not found:
friendly-errors 01:38:28 
friendly-errors 01:38:28 * core-js/modules/es6.array.find in ./.nuxt/client.js
friendly-errors 01:38:28 * core-js/modules/es6.array.iterator in ./.nuxt/client.js
friendly-errors 01:38:28 * core-js/modules/es6.date.to-string in ./.nuxt/utils.js
friendly-errors 01:38:28 * core-js/modules/es6.function.name in ./.nuxt/client.js
friendly-errors 01:38:28 * core-js/modules/es6.object.assign in ./.nuxt/client.js
friendly-errors 01:38:28 * core-js/modules/es6.object.keys in ./.nuxt/client.js
friendly-errors 01:38:28 * core-js/modules/es6.object.to-string in ./.nuxt/client.js
friendly-errors 01:38:28 * core-js/modules/es6.promise in ./.nuxt/client.js
friendly-errors 01:38:28 * core-js/modules/es6.regexp.constructor in ./.nuxt/utils.js
friendly-errors 01:38:28 * core-js/modules/es6.regexp.match in ./.nuxt/client.js
friendly-errors 01:38:28 * core-js/modules/es6.regexp.replace in ./.nuxt/utils.js, ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./components/common/ShareButtons.vue?vue&type=script&lang=js& and 1 other
friendly-errors 01:38:28 * core-js/modules/es6.regexp.search in ./.nuxt/utils.js
friendly-errors 01:38:28 * core-js/modules/es6.regexp.split in ./.nuxt/utils.js, ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./components/SideBar.vue?vue&type=script&lang=js& and 2 others
friendly-errors 01:38:28 * core-js/modules/es6.regexp.to-string in ./.nuxt/utils.js
friendly-errors 01:38:28 * core-js/modules/es6.string.includes in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 1 other
friendly-errors 01:38:28 * core-js/modules/es6.string.iterator in ./.nuxt/client.js
friendly-errors 01:38:28 * core-js/modules/es6.string.repeat in ./.nuxt/utils.js
friendly-errors 01:38:28 * core-js/modules/es6.string.starts-with in ./.nuxt/utils.js
friendly-errors 01:38:28 * core-js/modules/es6.symbol in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js
friendly-errors 01:38:28 * core-js/modules/es7.array.includes in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 1 other
friendly-errors 01:38:28 * core-js/modules/es7.promise.finally in ./.nuxt/client.js
friendly-errors 01:38:28 * core-js/modules/es7.symbol.async-iterator in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js
friendly-errors 01:38:28 * core-js/modules/web.dom.iterable in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js
friendly-errors 01:38:28 
friendly-errors 01:38:28 To install them, you can run: npm install --save core-js/modules/es6.array.find core-js/modules/es6.array.iterator core-js/modules/es6.date.to-string core-js/modules/es6.function.name core-js/modules/es6.object.assign core-js/modules/es6.object.keys core-js/modules/es6.object.to-string core-js/modules/es6.promise core-js/modules/es6.regexp.constructor core-js/modules/es6.regexp.match core-js/modules/es6.regexp.replace core-js/modules/es6.regexp.search core-js/modules/es6.regexp.split core-js/modules/es6.regexp.to-string core-js/modules/es6.string.includes core-js/modules/es6.string.iterator core-js/modules/es6.string.repeat core-js/modules/es6.string.starts-with core-js/modules/es6.symbol core-js/modules/es7.array.includes core-js/modules/es7.promise.finally core-js/modules/es7.symbol.async-iterator core-js/modules/web.dom.iterable
01:38:29 ℹ Waiting for file changes
```

最後の行に足りないパッケージをインストールするようにとあった。

```
$ npm install --save core-js/modules/es6.array.find core-js/modules/es6.ar...
```

実行したが解消しなかった。
また、$ yarn add core-js`も同様にダメだった。


## GitHubを確認

エラーを調べると[issues #3842](https://github.com/nuxt/nuxt.js/issues/3842)に報告済みであり、クローズしていた。
依存関係にバグがありcore-jsの依存関係が解消されなかったらしい。

## もう少しググる

解決策は（多分）無かったのでもう少しググり、中華サイトに行き当たった。
**segmentfault**という中華版Stack OverFlowみたいなサイト。

[解决liunx系统，项目nuxt2.0运行npm run dev / start报错问题](https://segmentfault.com/a/1190000018647030)

```sh
$ npm install --save core-js@latest2.6.2
```
最新版のcore-jsが必要そうなので、yarnで実行してみた。

```sh
$ yarn add core-js@latest2.6.2
yarn add v1.15.2
[1/4] Resolving packages...
Couldn't find any versions for "core-js" that matches "latest2.6.2"
? Please choose a version of "core-js" from this list: 2.6.5
```

**core-jsの最新版の2.6.5を選択してインストールして解消した！！！**

## おわりに

まとまっていないのは申し訳ない。
悩まれている方の助けに少しでもなりますように。

Nuxt2.5でのエラー：core-js/modules/es6.array.find in ./.nuxt/client.js


yarnを導入したく試行錯誤した過程です。
Ubuntuにインストールしたyarnコマンドが認識されない不具合を解消した。

## 環境

- Linux Mint (Ubuntu 16.04)

正確にはLinux Mintですが、Ubuntuベースのものを使っています。

また、おそらく以下のバージョンでも解決できる。

- Ubuntu 16.04
- Ubuntu 17.04


## 思い当たる原因

npmでインストール出来るんじゃないかと思い、下記のコマンドを実行した。

```sh
npm install yarn
```

これでインストールが進んだため良いかと思ったが、yarnコマンドが認識されず困った。

```sh
$ yarn install
ERROR: [Errno 2] No such file or directory: 'install'
```

## 解決策

[stackoverflow](https://stackoverflow.com/questions/46013544/yarn-install-command-error-no-such-file-or-directory-install)
に全く同じものがあった。

```sh
$ sudo apt remove cmdtest
$ sudo apt remove yarn
$ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
$ echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
$ sudo apt-get update && sudo apt-get install yarn
```

どうやら、**apt-get**に安定板のURLを登録しているようです。

回答者はUbuntu 17.04　でも同様の問題を解決したようです。（質問者はUbuntu 14.04だが解決したかは不明）

```
$ yarn -v
1.15.2
```

yarn 1.15.2をインストール出来ました。

## おわりに

まとまっていないのは申し訳ない。
悩まれている方の助けに少しでもなりますように。

Ubuntuでyarnが実行できないエラー：ERROR:[Errno 2] No such file or directory:install


npmに**マークダウンファイルをコマンドで変換できるモジュール**があるので紹介します。
このブログでも利用しています。

## processmd

- [processmd - npm](https://www.npmjs.com/package/processmd)
- [processmd - github](https://github.com/tscanlin/processmd)

マークダウンファイルを扱いやすいようにJSONに変換することができます。
そして、同時に"summary"として複数のファイルをまとめることもできます。

JSONのパラメータの中に、**マークダウン形式の生データ**と**HTMLに変換したデータ**が入っています。
また、日付やタイトルなどパラメータを自由に設定することも可能です。

マークダウンを変換する際には[markdown-it](https://github.com/markdown-it/markdown-it)を利用しています。
オプションに[markdown-it-highlight](https://github.com/tylingsoft/markdown-it-highlight)
- [markdown-it-latex](https://www.npmjs.com/package/markdown-it-latex)
を利用しています。
これらによって、コードのシンタックスハイライト

また、`yml`にも対応しています。

npm、githubに使い方の説明が書いてあります。
英語なので、翻訳しつつ自分の使い方も混ぜて説明していきます。

## インストール

npmコマンドが使える環境が前提です。

```sh
$ npm install --save-dev processmd
```

**markdown-it**や関連するモジュールも同時にインストールされます。

## processmdコマンドの使い方

CLIで`processmd`のコマンドが使えるようになります。

```sh
$ processmd "content/**/*.{yml,md}" --outputDir output
```

`content`ディレクトリ内のマークダウン（yml）を一括で変換するときの書き方。
出力先のディレクトリにJSONファイルを出力します。

## 入力と出力ファイルの説明

このサイトの記事をマークダウンで以下のように書いています。

```md
---
id: 1
title: Mac ChromeのデベロッパーツールをF12で開くよう設定する
created_at: 2018-07-04
updated_at: 2019-01-04
isDraft: false
tags: Mac,chrome
top_image: /icons/mac-apple.svg
icon: /icons/mac-apple.svg
---


WindowsからMacに移って、よく使っているショートカットキーの違いに戸惑いました。
MacではChromeのデベロッパーツールを開くショートカットキーは`⌘`+`option`+`i`です。
忘れてしまうので、Macでも`F12`で開けるように設定します。

## デフォルトのショートカットキー

MacではChromeのデベロッパーツールを開くデフォルトのショートカットキーは`⌘`+`option`+`i`です。
その他、Chromeの操作の中でよく使うものを抜粋しました。
```

最初に`---`で囲った部分は連想配列としてJSONに持つことができます。
その下は普通のマークダウンです。

上記を変換すると下のJSONになります。



```json
{
  "id": 1,
  "title": "Mac ChromeのデベロッパーツールをF12で開くよう設定する",
  "created_at": "2018-07-04T00:00:00.000Z",
  "updated_at": "2019-01-04T00:00:00.000Z",
  "draft": false,
  "tags": "Mac,chrome",
  "top_image": "/icons/mac-apple.svg",
  "bodyContent": "WindowsからMacに移って、よく使っているショートカットキーの違いに戸惑いました。\r\nMacではChromeのデベロッパーツールを開くショートカットキーは`⌘`+`option`+`i`です。\r\n忘れてしまうので、Macでも`F12`で開けるように設定します。\r\n\r\n## デフォルトのショートカットキー\r\n\r\nMacではChromeのデベロッパーツールを開くデフォルトのショートカットキーは`⌘`+`option`+`i`です。\r\nその他、Chromeの操作の中でよく使うものを抜粋しました。",
  "bodyHtml": "<p>WindowsからMacに移って、よく使っているショートカットキーの違いに戸惑いました。\nMacではChromeのデベロッパーツールを開くショートカットキーは<code>⌘</code>+<code>option</code>+<code>i</code>です。\n忘れてしまうので、Macでも<code>F12</code>で開けるように設定します。</p>\n<h2>デフォルトのショートカットキー</h2>\n<p>MacではChromeのデベロッパーツールを開くデフォルトのショートカットキーは<code>⌘</code>+<code>option</code>+<code>i</code>です。\nその他、Chromeの操作の中でよく使うものを抜粋しました。",
  "preview": "",
  "dir": "content/posts/json",
  "base": "1.json",
  "ext": ".json",
  "sourceBase": "1.md",
  "sourceExt": ".md"
}
```

**content/json/1.json**

### 出力の説明

| key         | 説明                 |
| ----------- | -------------------- |
| bodyContent | ソースのマークダウン |
| bodyHtml    | パースしたHTML       |
| dir         | 出力先のパス         |
| base        | 出力のファイル名     |
| ext         | 出力の拡張子         |
| sourceBase  | ソースのファイル名   |
| sourceExt   | ソースの拡張子       |

マークダウンに書いたパラメータも連想配列になっています。
また、数値やbool、日付も認識して上手いことやってくれます。

これで、記事がJavaScriptから扱いやすいデータになりました。

## 進んだ使い方

個別のJSONを作成するだけでなく、**summary**としてまとめることができます。

```sh
$ processmd \"content/**/*.{yml,md}\" --stdout --outputDir output > summary.json
```

`content/summary.json`

```json
{
  "fileMap": {
    "content/posts/json/1.json": {
      "id": 1,
      "title": "Mac ChromeのデベロッパーツールをF12で開くよう設定する",
      "created_at": "2018-07-04T00:00:00.000Z",
      "updated_at": "2019-01-04T00:00:00.000Z",
      "draft": false,
      "tags": "Mac,chrome",
      "top_image": "/icons/mac-apple.svg",
      "preview": "",
      "dir": "content/posts/json",
      "base": "1.json",
      "ext": ".json",
      "sourceBase": "1.md",
      "sourceExt": ".md"
    },
    （省略）
  },
  "sourceFileArray": [
    "markdown/1.md",
    "markdown/10.md",
    "markdown/100-similar-term.md",
    "markdown/101-mysql-monthly-report.md",
    （省略）
    ]
}
```

`fileMap`に各マークダウンの`bodyContent`と`bodyHtml`を除いたパラメータ。
`sourceFileArray`にソースのパスの配列が格納されます。

当ブログでは`summary.json`を使って、記事の一覧や個別の記事のページを作っています。

## オプション

[processmd - npm](https://www.npmjs.com/package/processmd)

もとのページを見てもらうのが一番良いですが、いくつか使ってちゃんと理解しているものを紹介します。


|オプション|デフォルト|説明|
|outputDir| './dist' |JSONの出力先|
|filenamePrefix| '' |ファイル名に接頭辞を付ける|
|renderLatex|true|$$ か、```mathで数式をLaTeX形式で変換できる|
|highlightCode|true|コードブロックのシンタックスハイライトを使うか|
|preview|0|パラメータに先頭の指定文字数のpreviewを追加する。|
|markdownOptions|{}|markdown-itに渡すオプション|
|headingIds|false|目次を自動追加する|

使い方は`--outputDir content/posts/json`のようにします。

補足としていくつか注意点を。

### headingIdsは日本語に向いていない

はidに`##`以降の文字を入れます。
漢字や日本語は読み方に変換してアルファベット表記する。

この時、**漢字は中国語読みで変換する**ため目次から辿らせることが難しいです。

```txt
# markdown
## processmdコマンドの使い方

# html
<h2 id=\"processmdkomandono-shi-i-fang\">processmdコマンドの使い方</h2>
```

参考：[Atomのmarkdown-tocでタイトルが日本語の場合に動かない場合の対処](http://yamap55.hatenablog.com/entry/2018/04/21/004258)

## 個人的な使い方

個人的には下のコマンドを**package.json**に登録して`npm run md`で変換しています。

```
{

  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "md": "processmd markdown/*.md --stdout --preview 100 --outputDir content/posts/json > content/summary.json",
  },
  (省略)
}
```

## おわりに

以上でprocessmdの紹介でした。
[Netlify](https://www.suzu6.net/posts/55-hosting-service/)やCIツールでデプロイ時に変換する等の用途で使いやすいと思います。

<div class="cstmreba"><div class="booklink-box"><div class="booklink-image"><a href="//af.moshimo.com/af/c/click?a_id=1286797&p_id=56&pc_id=56&pl_id=637&s_v=b5Rz2P0601xu&url=http%3A%2F%2Fbooks.rakuten.co.jp%2Frb%2F15736848%2F" target="_blank" ><img src="https://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/8363/9784844398363.jpg?_ex=200x200" style="border: none;" /></a><img src="//i.moshimo.com/af/i/impression?a_id=1286797&p_id=56&pc_id=56&pl_id=637" width="1" height="1" style="border:none;"></div><div class="booklink-info"><div class="booklink-name"><a href="//af.moshimo.com/af/c/click?a_id=1286797&p_id=56&pc_id=56&pl_id=637&s_v=b5Rz2P0601xu&url=http%3A%2F%2Fbooks.rakuten.co.jp%2Frb%2F15736848%2F" target="_blank" >OD＞Markdownライティング入門</a><img src="//i.moshimo.com/af/i/impression?a_id=1286797&p_id=56&pc_id=56&pl_id=637" width="1" height="1" style="border:none;"><div class="booklink-powered-date">posted with <a href="https://yomereba.com" rel="nofollow" target="_blank">ヨメレバ</a></div></div><div class="booklink-detail">藤原惟 インプレスR＆D 2018年12月14日    </div><div class="booklink-link2"><div class="shoplinkrakuten"><a href="//af.moshimo.com/af/c/click?a_id=1286797&p_id=56&pc_id=56&pl_id=637&s_v=b5Rz2P0601xu&url=http%3A%2F%2Fbooks.rakuten.co.jp%2Frb%2F15736848%2F" target="_blank" >楽天ブックス</a><img src="//i.moshimo.com/af/i/impression?a_id=1286797&p_id=56&pc_id=56&pl_id=637" width="1" height="1" style="border:none;"></div><div class="shoplinkamazon"><a href="https://www.amazon.co.jp/exec/obidos/asin/4844398369/suzu60c-22/" target="_blank" >Amazon</a></div><div class="shoplinkkindle"><a href="https://www.amazon.co.jp/gp/search?keywords=OD%81%84Markdown%83%89%83C%83e%83B%83%93%83O%93%FC%96%E5&__mk_ja_JP=%83J%83%5E%83J%83i&url=node%3D2275256051&tag=suzu60c-22" target="_blank" >Kindle</a></div>                              	  	  	  	  	</div></div><div class="booklink-footer"></div></div></div>

コマンドでマークダウンを変換するprocessmd | npm



Emojis in this text will be replaced: :dog: :+1:

Lift($L$) can be determined by Lift Coefficient ($C_L$) like the following
equation.

$$
L = \frac{1}{2} \rho v^2 S C_L
$$

**npm**のライブラリ**markdown-it-latex**を使って数式をKaTeXで表現しています。
どんな感じか数式を並べてみたいのでまとめました。
これを機に、$ \KaTeX $表記についても知ってもらえると嬉しいです。
Qiitaでも使っているようです。

数式は$\KaTeX$記法が学べるように個人的な好みで選びました。

---

「KATEX」という字がガタガタして見えているはずです。
これは[公式](https://katex.org/)のロゴマークで、こちらも$\KaTeX$表記で書けるようになっています。

```txt
\KaTeX
```


## Markdownから変換

記事自体はMarkdownからHTMLに変換しています。

- [markdown-it](https://github.com/markdown-it/markdown-it)
- [markdown-it-highlight](https://github.com/tylingsoft/markdown-it-highlight)
- [markdown-it-latex](https://www.npmjs.com/package/markdown-it-latex)

この３つがあればMarkdownで書いた文書を数式やコードシンタックスを付けて変換できます。

markdown-it-latexを解析したら、**KaTeX**で変換していることがわかりました。

- [KATEX](https://katex.org/docs/supported.html)

こちらにKaTeXでの表記方法が載っています。

また、まとめて利用したい場合は[processmd](https://www.npmjs.com/package/processmd)をインストールすると良いです。
コマンドでjson形式のデータに変換することもできます。

## 1. 三平方の定理

> 直角三角形の斜辺の長さを c, 他の2辺の長さを a, b とする。
> $$
> c^2 = a^2 + b^2
> $$

誰もが知ってる三平方の定理。ピタゴラスの定理とも言います。
[wiki](https://ja.wikipedia.org/wiki/%E3%83%94%E3%82%BF%E3%82%B4%E3%83%A9%E3%82%B9%E3%81%AE%E5%AE%9A%E7%90%86)を見るとこんなにたくさんの証明方法があるんですね。

````
a^2 + b^2 = c^2
````

KaTeXではシンプルに書けます。
`^`が累乗を表す。

## 2. オイラーの等式

> $$
> e^{i\pi}+1= 0
> $$


ネイピア数$e$、虚数$i$、円周率$\pi$と有名な定数を含みます。
さらに$1, 0$と重要な数も含むので、$e^{i\pi} = 1$よりも個人的に好みです。

````
e^{i\pi}+1= 0
````

KaTeXではこんな感じ。
円周率は`\pi`です。
指数に文字が多い場合は波かっこを使って括るとまとまります。`e^{i+1}`が$e^{i+1}$になる。

## 3. オイラーの公式

> $$
> e^{i\theta} = \cos\theta + i \sin\theta
> $$

微分方程式を解く人は必ずお世話になる公式。  
私は電子工学も専攻していたので、物理、電気、半導体、通信とどんな科目でも出てくる公式でした。
画像解析の時も出てきたな。

````
e^{i\theta} = \cos\theta + i \sin\theta
````

KaTeXで三角関数はもちろんサポートしています。
`\tan`や`\sinh`などもあります。

$\aleph\beta\gamma$などのギリシャ文字は頭文字を大文字にすると`\Theta` $\Theta$のように大文字になります。

## 4. 正規分布（ガウス分布）

> 平均を$\mu$, 分散を$\sigma^2 \gt 0$とする正規分布とは、確率密度関数が次の形で与えられる確率密度関数。
> $$
> f(x) = \frac{1}{\sqrt{2\pi\sigma^2}}\exp{-\frac{(x-\mu)^2}{2\sigma^2}}
> $$

統計学の分野から重要な数式を選びました。
数式自体は美しくはないですが、グラフにすると釣り鐘型の綺麗な曲線を描きます。
また、$\mu \pm \sigma$が変曲点となる特徴も持っています。

```
f(x) = \frac{1}{\sqrt{2\pi\sigma^2}}\exp{-\frac{(x-\mu)^2}{2\sigma^2}}
```

平方根は`\sqrt{x}` $\sqrt{x}$、分数は`\frac{1}{x}` $\frac{1}{x}$で表わします。
また、$\mu \pm \sigma$の$\pm$は`\pm`です。


## 5. ガウス積分

> $$
> \int_{-\infty}^{\infty} f(x) dx = \sqrt{\pi}
> $$

ガウス積分あるいはオイラー＝ポアソン積分です。


```
\int_{-\infty}^{\infty} f(x) dx = \sqrt{\pi}
```

- $\int$ `\int`
- $\int_{b}^{a}$ `\int_{b}^{a}`

不定積分と定積分の書き分けです。

- $\iint$ `\iint`
- $\iiint$ `\iiint`

フォルテッシシモみたいな重積分も書けます。

## 6. 調和数（発散列）

> $$
> \frac{1}{1} + \frac{1}{2} + \frac{1}{3} + \dots = \displaystyle\sum_{i=1}^\infty \frac{1}{n}= \infty
> $$

なぜ分数を足していったら発散するのでしょうか？
不思議です。

```
\frac{1}{1} + \frac{1}{2} + \frac{1}{3} + \dots = \displaystyle\sum_{i=1}^\infty \frac{1}{n}= \infty
```

無限大$\infty$は`infty`と書きます。

`\dots`は種類が多いのでまとめて覚えちゃいます。

- $\dot{A}$ `\dot{A}`
- $\dots$ `\dots`
- $\ddots$ `\ddots`
- $\ldots$ `\ldots`
- $\vdots$ `\vdots`

`\sdot`で中点・が出るはずだけどエラーになる。。。

## 7. バーゼル問題

> $$
> \frac{1}{1^2} + \frac{1}{2^2} + \frac{1}{3^2} + \dots = \displaystyle\sum_{i=1}^\infty \frac{1}{n^2}= \frac{\pi^2}{6}
> $$

なぜ分母を２乗にしたら収束するのでしょうか？
不思議です。


```
\frac{1}{1^2} + \frac{1}{2^2} + \frac{1}{3^2} + \dots = \displaystyle\sum_{i=1}^\infty \frac{1}{n^2}= \frac{\pi^2}{6}
```

級数は`\sum_{i=1}^n ` $\sum_{i=1}^n$と書きます。
`\sum`の前に`\displaystyle` $\displaystyle\sum_{i=1}^n$と`\textstyle` $\textstyle\sum_{i=1}^n$で表示を変えることもできます。

## おわりに

KaTeXで数式をきれいに表示出来ました。
基本的な表記方法は書けたような気がします。

また、以下の記事でもKaTeXで数式を書いています。

- [dictで多変数の多項式の同類項をまとめる|Python](https://www.suzu6.net/posts/100-similar-term/)
- [P5jsでガウス分布のデータセットを作成する](https://www.suzu6.net/posts/98-p5js-gaussian/)

## 参考

- [katex.org](https://katex.org/docs/supported.html)
- [数学の面白い公式8選 – 私が選んだ美しくて面白い公式を紹介します](https://analytics-notty.tech/interesting-formula-in-mathematics/)
- [Qiitaの数式チートシート](https://qiita.com/PlanetMeron/items/63ac58898541cbe81ada)


<div class="cstmreba"><div class="booklink-box"><div class="booklink-image"><a href="//af.moshimo.com/af/c/click?a_id=1286797&p_id=56&pc_id=56&pl_id=637&s_v=b5Rz2P0601xu&url=http%3A%2F%2Fbooks.rakuten.co.jp%2Frb%2F14619491%2F" target="_blank" ><img src="https://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/7051/9784774187051.jpg?_ex=200x200" style="border: none;" /></a><img src="//i.moshimo.com/af/i/impression?a_id=1286797&p_id=56&pc_id=56&pl_id=637" width="1" height="1" style="border:none;"></div><div class="booklink-info"><div class="booklink-name"><a href="//af.moshimo.com/af/c/click?a_id=1286797&p_id=56&pc_id=56&pl_id=637&s_v=b5Rz2P0601xu&url=http%3A%2F%2Fbooks.rakuten.co.jp%2Frb%2F14619491%2F" target="_blank" >LATEX2ε美文書作成入門改訂第7版</a><img src="//i.moshimo.com/af/i/impression?a_id=1286797&p_id=56&pc_id=56&pl_id=637" width="1" height="1" style="border:none;"><div class="booklink-powered-date">posted with <a href="https://yomereba.com" rel="nofollow" target="_blank">ヨメレバ</a></div></div><div class="booklink-detail">奥村晴彦/黒木裕介 技術評論社 2017年01月23日    </div><div class="booklink-link2"><div class="shoplinkrakuten"><a href="//af.moshimo.com/af/c/click?a_id=1286797&p_id=56&pc_id=56&pl_id=637&s_v=b5Rz2P0601xu&url=http%3A%2F%2Fbooks.rakuten.co.jp%2Frb%2F14619491%2F" target="_blank" >楽天ブックス</a><img src="//i.moshimo.com/af/i/impression?a_id=1286797&p_id=56&pc_id=56&pl_id=637" width="1" height="1" style="border:none;"></div><div class="shoplinkamazon"><a href="https://www.amazon.co.jp/exec/obidos/asin/4774187054/suzu60c-22/" target="_blank" >Amazon</a></div><div class="shoplinkkindle"><a href="https://www.amazon.co.jp/gp/search?keywords=LATEX2%83%C3%94%FC%95%B6%8F%91%8D%EC%90%AC%93%FC%96%E5%89%FC%92%F9%91%E67%94%C5&__mk_ja_JP=%83J%83%5E%83J%83i&url=node%3D2275256051&tag=suzu60c-22" target="_blank" >Kindle</a></div>                              	  	  	  	  	</div></div><div class="booklink-footer"></div></div></div>

美しい数式をKaTexで美しく書こう


このブログではマークダウンで記事を書いて、HTMLに変換している。
また、VSCodeでもマークダウンで文章を書いています。
**diff**も表示できることを知ったのでここに書きます。

## diffの表示の仕方

コードのところに**diff**をつけるだけ。

````txt
```diff
# 変更なし
- # 削除したところ
+ # 追加したところ
``` 
````

実際に表示させてやるとこんな感じ。

dockerの`.env`

```diff
### MYSQL #################################################

MYSQL_VERSION=latest
- MYSQL_DATABASE=default
- MYSQL_USER=default
- MYSQL_PASSWORD=secret
+ MYSQL_DATABASE=hogehoge #データベース名を変更
+ MYSQL_USER=hogehoge　#ユーザー名を変更
+ MYSQL_PASSWORD=hogehoge #パスワードを変更
```

## VSCode

VSCodeに拡張機能の**Markdown All in One**を導入しています。

- [Markdown All in One](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)

こんな感じになる。

![vscode](/images/posts/87/vscode.png)

左がエディタで右がプレビューです。
なかなか見やすい。

## ブログ

ブログでは、シンタックスハイライトのCSSは[highlight.js](https://highlightjs.org/)の[github.css](https://github.com/highlightjs/highlight.js/blob/master/src/styles/github.css)を使っています。


```diff
firebase.put('', '/measure', target)


- GPIO.setmode(GPIO.BOARD)  # to specify which pin numbering system
+ GPIO.setmode(GPIO.BCM)  # to specify which pin numbering system
GPIO.setwarnings(False)  
GPIO.setup(motion_pin, GPIO.IN, pull_up_down=GPIO.PUD_UP)
GPIO.setup(led_pin, GPIO.OUT)
```

こんな感じになる。

上記は、以前Pythonでラズパイのソースを変更したとき。[github](https://github.com/suzu6/acerola/commit/ff27e3bfdff34bf880dc31b73b298e5c01cf01fe)


### 環境

ブログのMarkdown -> HTMLのために使っているパッケージ。

- [processmd](https://github.com/tscanlin/processmd)
  - [markdown-it](https://github.com/markdown-it/markdown-it)
  - [markdown-it-highlight](https://github.com/tylingsoft/markdown-it-highlight)
  - [markdown-it-latex](https://www.npmjs.com/package/markdown-it-latex)
- github.css


ツールは**processmd**というnpmパッケージを使っています。
これは**markdown-it**、**markdown-it-highlit**などMarkdownからHTMLに変換するパッケージをまとめて利用できるので、なかなか使いやすいです。

```sh
$ npm install processmd
```

でまとめてダウンロードできます。

## 終わりに

「diff + プログラム言語」みたいな形で使えるとよいのだが、
対応していない。

以前作ったウェブ上でMarkdownからHTMLに変換出来るツールでは、確認したところdiffが使えなかった。
そちらは**Markedjs**を使っている。

- [Markedjsを使ってHTMLに変換するエディタのサンプルを作りました](https://www.suzu6.net/posts/37/)

markdownでdiffを表示できた|VSCode, markdown-it


普段このブログを書くのにNuxtjsというnpmのパッケージを使って書いています。
自宅のPCをLinux MintにしたのでnpmとNode.jsの環境構築をしていきます。

また、`n`というパッケージでNode.jsを管理します。

Macの時はこちらのように環境を構築しました。

- [MacにNode/npmをインストールする手順](https://www.suzu6.net/posts/45/)

## 環境

OSは**Ubuntu**の派生の**Linux Mint**を利用しています。

### Linux Mint
```sh
$ cat /etc/lsb-release
DISTRIB_ID=LinuxMint
DISTRIB_RELEASE=18.3
DISTRIB_CODENAME=sylvia
DISTRIB_DESCRIPTION="Linux Mint 18.3 Sylvia"
```

### Ubuntu
2020/01/29 Ubuntuに乗り換えたので追記

```sh
$ cat /etc/lsb-release
DISTRIB_ID=Ubuntu
DISTRIB_RELEASE=18.04
DISTRIB_CODENAME=bionic
DISTRIB_DESCRIPTION="Ubuntu 18.04.3 LTS"
```

以下の手順もUbuntuでも~~大丈夫だと思われます~~ OKでした。
`Ubuntu 18.04.3 LTS`では1年経っているためバージョンの差異は多少ありますが、手順は同じです。

## npm, Node.jsのインストール

`apt`でインストールしてみます。

```sh
# apt の更新
$ sudo apt upgrade

# npm, Nodejsのインストール
$ sudo apt install npm nodejs
$ npm -v
3.5.2
$ nodejs -v
v4.2.6
```

ふ、ふるい。。。  
Ubuntu 18.04.3 LTSではnpmが同じバージョンでnodejsはv8.10.0でした。

## Nodejsのアップグレード

[こちら](https://qiita.com/kerupani129/items/60ee8c8becc2fe9f0d28)の方法でアップグレードしていく。
Nodejsのバージョン管理は**n**というパッケージを使っていきます。

> n – Interactively Manage Your Node.js Versions  
> [n](https://www.npmjs.com/package/n)

```sh
$ sudo npm cache clean
$ sudo npm install -g n
/usr/local/bin/n -> /usr/local/lib/node_modules/n/bin/n
/usr/local/lib
└── n@2.1.12

$ sudo n stable
   installed : v11.8.0
$ node -v
v11.8.0
```

安定版の最新になりました。

```sh
# Ubuntu 18.04.3 LTS 2020/01/29
$ node -v
v12.14.1

# v8.10.0 -> v12.14.1
```

## nでできること

Node.jsのとあるバージョンのインストールはとてもシンプルです。

```sh
# v0.8.14をインストール
$ sudo n 0.8.14

# インストールしたバージョンの表示
$ n
 ο node/0.8.14
    node/11.8.0

# nodeも変わっている
$ node -v
v0.8.14
```

コマンド`n`の時に上下キーで適用したいバージョンを選ぶことも出来ます。
`nodebrew`もいいけど`n`も便利！！

### コマンド

`n -h`で確認出来ます。
その中からいくつかピックアップして表にしたもの。

|    コマンド     | 説明                                             |
| :-------------: | :----------------------------------------------- |
|    n latest     | 最新版をインストール                             |
| n -a x86 latest | 32bit版の最新版をインストール                    |
|    n stable     | 安定版をインストール                             |
|   n [version]   | バージョンを指定してインストール                 |
| n rm [version]  | 指定バージョンを削除                             |
|      n ls       | 全てのバージョンを表示、インストール済は白色文字 |

## npmをアップデートする

```sh
$ sudo npm update -g npm
$ npm -v
3.5.2
```

変わらない。。。

と思ったら、ターミナルの再起動で新しいバージョンに切り替わりました。

```shnpm
$ npm -v
6.7.0
$ node -v
v11.8.0
```

参考にした手順をなぞっただけでインストール出来ました。
ありがたや。

## 参考

- [とりあえず Ubuntu で新しい Node.js, npm をインストール - Qiita](https://qiita.com/kerupani129/items/60ee8c8becc2fe9f0d28)

LinuxMint・UbuntuにnpmとNode.jsをインストールする方法

このブログをNetlify + Nuxtへ移行する時、`Google AdSense`も移しました。  
Adsenseの広告ユニットのコードを貼り付けていくと、似たコードが至る所にあり嫌なのでいい方法はないかと調べました。

Nuxtのためのモジュールが見つかったのでその使い方を解説していきます。

## @nuxtjs/google-adsense

[nuxt-community](https://github.com/nuxt-community)からGoogle AdSenseのためのモジュール[google-adsense-module](https://github.com/nuxt-community/google-adsense-module)が提供されているので、それを使います。

ライセンス形態は[MIT License](https://github.com/nuxt-community/google-adsense-module/blob/master/LICENSE)なので大丈夫ですね。

使い方は簡単です。
インストール後に`nuxt.config.js`へ記述して、挿入したいところに`<adsbygoogle/>`を追加するだけです。

以下、[GitHub](https://github.com/nuxt-community/google-adsense-module)を参考に解説していく。
尚、ドメインの取得やGoogle AdSenseへの登録と審査はすでに終えているものとします。

###  install

```sh
npm install --save @nuxtjs/google-adsense
```

`--save`でpackage.jsonに記録している。
このブログはNetlifyを使ってホスティングしているため必須。

## モジュールをnuxt.config.jsに記述する

nuxt.config.js

```js
{
  modules: [
    // Simple usage
    ['@nuxtjs/google-adsense', {
      id: 'ca-pub-###########'
    }]
 ]
}
```

`id`にAdSenseのidを記述する。

idはAdSenseのアカウント情報にある`サイト運営者 ID`です。
`####`はpub-から続く数字が入ります。先頭の`ca-`は必ずつけてください。

自動広告はデフォルトでオフになったいるため、使う場合は`pageLevelAds: true`を追加します。

## 広告を挿入する

広告の場所を指定するには、テンプレートの中に`<adsbygoogle/>`を追加します。

また、v-bindを使っていくつかのパラメータを渡せます。

```html
<template>
  
  <adsbygoogle />
  
  <adsbygoogle v-bind:ad-slot="'1234567890'" />
</template>
```

広告ユニットを指定する場合は、`ad-slot`に広告ユニットのIDを渡します。
この時、IDは数値ではなく文字列として渡してあげる必要があります。そのため、'シングルクォーテーション'などで囲ってください。

```html
<template>
  
  <adsbygoogle :ad-slot="'1234567890'" />
  
  <adsbygoogle :ad-slot="1234567890" />
  


  
  <adsbygoogle data-ad-slot="1234567890" />
</template>
```

はじめ`:ad-slot`でエラーが出るため`data-ad-slot="1234567890"`としていましたが、広告が表示されていました。
確証はありませんので、OKの方法を利用してください。

いくつかのpropの抜粋と雑解説。正確には[公式](https://github.com/nuxt-community/google-adsense-module)をみてください。

prop | type | description
:--: | :--: | :--:
ad-slot | String | 広告ユニットのID。文字列として渡す必要がある。
ad-format | String | レスポンシブ広告。デフォルトは'auto'。
ad-style | Object | `<ins>`のスタイルを指定する。デフォルトは{ display: 'block' }
ad-layout | String | レイアウトの設定。'in-article'など。

## おわりに

NuxtでAdSenseを利用する（おそらく）最適解が見つかってスッキリしました。

また、このブログのNetlify + Nuxtの構成もまとめていきたいです。

### 参考

- [google-adsense-module](https://github.com/nuxt-community/google-adsense-module)



#### 書籍

<div class="cstmreba"><div class="booklink-box"><div class="booklink-image"><a href="//af.moshimo.com/af/c/click?a_id=1286797&p_id=56&pc_id=56&pl_id=637&s_v=b5Rz2P0601xu&url=http%3A%2F%2Fbooks.rakuten.co.jp%2Frb%2F12855371%2F" target="_blank" ><img src="https://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/0567/9784800710567.jpg?_ex=200x200" style="border: none;" /></a><img src="//i.moshimo.com/af/i/impression?a_id=1286797&p_id=56&pc_id=56&pl_id=637" width="1" height="1" style="border:none;"></div><div class="booklink-info"><div class="booklink-name"><a href="//af.moshimo.com/af/c/click?a_id=1286797&p_id=56&pc_id=56&pl_id=637&s_v=b5Rz2P0601xu&url=http%3A%2F%2Fbooks.rakuten.co.jp%2Frb%2F12855371%2F" target="_blank" >Google AdSense 成功の法則 57</a><img src="//i.moshimo.com/af/i/impression?a_id=1286797&p_id=56&pc_id=56&pl_id=637" width="1" height="1" style="border:none;"><div class="booklink-powered-date">posted with <a href="https://yomereba.com" rel="nofollow" target="_blank">ヨメレバ</a></div></div><div class="booklink-detail">染谷昌利 ソーテック社 2014年07月    </div><div class="booklink-link2"><div class="shoplinkrakuten"><a href="//af.moshimo.com/af/c/click?a_id=1286797&p_id=56&pc_id=56&pl_id=637&s_v=b5Rz2P0601xu&url=http%3A%2F%2Fbooks.rakuten.co.jp%2Frb%2F12855371%2F" target="_blank" >楽天ブックス</a><img src="//i.moshimo.com/af/i/impression?a_id=1286797&p_id=56&pc_id=56&pl_id=637" width="1" height="1" style="border:none;"></div><div class="shoplinkamazon"><a href="https://www.amazon.co.jp/exec/obidos/asin/4800710561/suzu60c-22/" target="_blank" >Amazon</a></div><div class="shoplinkkindle"><a href="https://www.amazon.co.jp/gp/search?keywords=Google%20AdSense%20%90%AC%8C%F7%82%CC%96%40%91%A5%2057&__mk_ja_JP=%83J%83%5E%83J%83i&url=node%3D2275256051&tag=suzu60c-22" target="_blank" >Kindle</a></div>                              	  	  	  	  	</div></div><div class="booklink-footer"></div></div></div>

Nuxtで作ったサイトにnpmでGoogle AdSenseを追加する


Macに**Node**をインストールする手順です。
**homebrew**を使ってインストールと**nodebrew**でnpmのバージョン管理をします。

Linuxでも同様にbrewコマンドを使う手順も載せています。

## できた環境

環境とインストールしたバージョン。

- Mac OS : High Sierra 10.13
- homebrew : 1.9.2
- nodebrew : 1.0.1
- node : v11.6.0
- npm : 6.6.0

2019年1月現在の最新に更新しました。

## homebrew

[homebrew　公式](https://brew.sh/index_ja)

`homebrew`はMacのパッケージマネージャです。  
インストールされていない方は、公式か下記のコマンドからインストールできます。

```sh
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```

パスワードを尋ねられた場合は、ご自身のMacのパスワードを入力してください。

確認のコマンド。

```sh
$ brew --version
Homebrew 1.9.2
Homebrew/homebrew-core (git revision beff7; last commit 2019-01-18)
Homebrew/homebrew-cask (git revision 2d5950; last commit 2019-01-18)
```

アップデートする場合のコマンド。

```sh
$ brew update
```

### Linuxbrew

Linuxの方は[Linuxbrew](http://linuxbrew.sh/)を利用します。

以下インストール手順。可能であれば`sudo`での実行が推奨されています。

```sh
sh -c "$(curl -fsSL https://raw.githubusercontent.com/Linuxbrew/install/master/install.sh)"
```

続いて、**PATH**と**プロファイル**にbrewコマンドを追加します。
Debian/Ubuntuは`~/.profile`、CentOS/Fedora/RedHatは`~/.bash_profile`に追加します。

```sh
test -d ~/.linuxbrew && eval $(~/.linuxbrew/bin/brew shellenv)
test -d /home/linuxbrew/.linuxbrew && eval $(/home/linuxbrew/.linuxbrew/bin/brew shellenv)
test -r ~/.bash_profile && echo "eval \$($(brew --prefix)/bin/brew shellenv)" >>~/.bash_profile
echo "eval \$($(brew --prefix)/bin/brew shellenv)" >>~/.profile
```

確認のためhelloをインストールしてみる。

```sh
$ brew install hello
Updating Homebrew...
==> Downloading https://homebrew.bintray.com/bottles/hello-2.10.high_sierra.bottle.tar.gz
######################################################################## 100.0%
==> Pouring hello-2.10.high_sierra.bottle.tar.gz
🍺  /usr/local/Cellar/hello/2.10: 11 files, 125.2KB
```

## nodebrewをインストール 

Nodeのバージョン管理をするため[nodebrew](https://github.com/hokaccha/nodebrew)をインストールします。

```sh
$ brew install nodebrew
```

バージョンを確認します。
```sh
$ nodebrew -v
nodebrew 1.0.1
```

## Node.jsをインストール

そのままではインストール時にエラーになるため、まずディレクトリ`~/.nodebrew/src`を作ります（※エラーの詳細は記事の最後に載せました)。    
その後、最新のバージョンをインストールします。
```sh
$ mkdir -p ~/.nodebrew/src
$ nodebrew install-binary latest
$ nodebrew list
v10.9.0
v11.6.0

current: v10.9.0
```

2019年1月でのnodeの最新バージョン：v11.6.0

インストール済みである場合、`current: v10.9.0`と旧バージョンが適応されていることがわかる。（2018年8月に導入したもの）
新規インストールでは、`current: none`となる。

先ほどインストールしたバージョンを使えるようにします。

```sh
$ nodebrew use v11.6.0
use v11.6.0
```

## node, npmコマンドを設定する。

bashにパスを通して、node, npmコマンドを使えるようにします。
Debian/Ubuntuの場合は`~/.profile`に置き換えてください。

```sh
$ ls $HOME/.nodebrew/current/bin
node            nodebrew        npm             npx
$ echo 'export PATH=$PATH:$HOME/.nodebrew/current/bin' >> ~/.bash_profile
$ vi ~/.bash_profile
```

**~/.bash_profile**に以下を追記。

```sh
if [ -f ~/.bashrc ] ; then
. ~/.bashrc
fi
```

shell を再起動します。

```sh
$ exec $SHELL -l
```

npmとnodoを確認する。

```sh
$ npm -v
6.6.0
$ node -v
v11.6.0
```

無事インストールされました。

## nodebrewでnodeのバージョンを管理する。

`node`のバージョンを切り替えてみます。

```sh
# 現在インストール済みと利用しているバージョンの確認
$ nodebrew list
v10.9.0
v11.6.0

current: v11.6.0
```

**v8.9.4**をインストールして切り替えてみる。

```sh
# v8.9.4をインストールする
$ nodebrew install v8.9.4

# バージョンの切り替え
$ nodebrew use v8.9.4
use v8.9.4

$ node -v
v8.9.4
$ npm -v
5.6.0
```

簡単に切り替えることができました。
また、インストール済みの中で最新に戻す場合は、latestで指定できます。

```sh
$ nodebrew use latest
use v11.6.0
```

使わないバージョンは削除できます。

```sh
$ nodebrew uninstall v8.9.4
v8.9.4 uninstalled

# ソースファイルも削除する。
$ nodebrew clean v8.9.4
Cleaned v8.9.4

# OK
$ nodebrew list
v10.9.0
v11.6.0

current: v11.6.0
```

### nodebrewのその他のコマンド

`nodebrew help`もしくは、`man nodebrew`で確認して見てください。

```sh
$ nodebrew help
Usage:
    nodebrew help                         Show this message
    nodebrew install <version>            Download and install <version> (from binary)
    nodebrew compile <version>            Download and install <version> (from source)
    nodebrew install-binary <version>     Alias of `install` (For backword compatibility)
    nodebrew uninstall <version>          Uninstall <version>
    nodebrew use <version>                Use <version>
    nodebrew list                         List installed versions
    nodebrew ls                           Alias for `list`
    nodebrew ls-remote                    List remote versions
    nodebrew ls-all                       List remote and installed versions
    nodebrew alias <key> <value>          Set alias
    nodebrew unalias <key>                Remove alias
    nodebrew clean <version> | all        Remove source file
    nodebrew selfupdate                   Update nodebrew
    nodebrew migrate-package <version>    Install global NPM packages contained in <version> to current version
    nodebrew exec <version> -- <command>  Execute <command> using specified <version>
```

## nodebrew installでのエラー

※ `2018-08`に確認。

**原因**：`~/.nodebrew/src`のディレクトリがないため。  
**対処**：インストール前にディレクトリを作成。`mkdir -p ~/.nodebrew/src`

[参考](https://qiita.com/non0311/items/664cf74d9ff4bad9cf46)からメジャーバージョンが２つ上がっていますが、同じくインストール時にエラーになりました。

```sh
$ nodebrew install-binary latest
Fetching: https://nodejs.org/dist/v10.9.0/node-v10.9.0-darwin-x64.tar.gz
Warning: Failed to create the file
Warning: {your home path}/.nodebrew/src/v10.9.0/node-v10.9.0-darwin-x64.tar
Warning: .gz: No such file or directory
                                                                           0.0%
curl: (23) Failed writing body (0 != 1057)
download failed: https://nodejs.org/dist/v10.9.0/node-v10.9.0-darwin-x64.tar.gz
```

## おわりに

初めてNode.jsに触る方にはこちらの本をお勧めします。

<div class="cstmreba"><div class="booklink-box"><div class="booklink-image"><a href="//af.moshimo.com/af/c/click?a_id=1286797&p_id=56&pc_id=56&pl_id=637&s_v=b5Rz2P0601xu&url=http%3A%2F%2Fbooks.rakuten.co.jp%2Frb%2F15552726%2F" target="_blank" rel="nofollow" ><img src="https://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/5220/9784798055220.jpg?_ex=200x200" style="border: none;" /></a><img src="//i.moshimo.com/af/i/impression?a_id=1286797&p_id=56&pc_id=56&pl_id=637" width="1" height="1" style="border:none;"></div><div class="booklink-info"><div class="booklink-name"><a href="//af.moshimo.com/af/c/click?a_id=1286797&p_id=56&pc_id=56&pl_id=637&s_v=b5Rz2P0601xu&url=http%3A%2F%2Fbooks.rakuten.co.jp%2Frb%2F15552726%2F" target="_blank" rel="nofollow" >Node.js 超入門 第2版</a><img src="//i.moshimo.com/af/i/impression?a_id=1286797&p_id=56&pc_id=56&pl_id=637" width="1" height="1" style="border:none;"><div class="booklink-powered-date">posted with <a href="https://yomereba.com" rel="nofollow" target="_blank">ヨメレバ</a></div></div><div class="booklink-detail">掌田津耶乃 秀和システム 2018年08月25日    </div><div class="booklink-link2"><div class="shoplinkrakuten"><a href="//af.moshimo.com/af/c/click?a_id=1286797&p_id=56&pc_id=56&pl_id=637&s_v=b5Rz2P0601xu&url=http%3A%2F%2Fbooks.rakuten.co.jp%2Frb%2F15552726%2F" target="_blank" rel="nofollow" >楽天ブックス</a><img src="//i.moshimo.com/af/i/impression?a_id=1286797&p_id=56&pc_id=56&pl_id=637" width="1" height="1" style="border:none;"></div><div class="shoplinkamazon"><a href="https://www.amazon.co.jp/exec/obidos/asin/4798055220/suzu60c-22/" target="_blank" rel="nofollow" >Amazon</a></div><div class="shoplinkkindle"><a href="https://www.amazon.co.jp/gp/search?keywords=Node.js%20%92%B4%93%FC%96%E5%20%91%E62%94%C5&__mk_ja_JP=%83J%83%5E%83J%83i&url=node%3D2275256051&tag=suzu60c-22" target="_blank" rel="nofollow" >Kindle</a></div>                              	  	  	  	  	</div></div><div class="booklink-footer"></div></div></div>

以上、快適なNodeライフを！

## 参考

- [Macでnode.jsをインストール、npmコマンドも使用可にする【2017.8月最新版】 - Qiita](https://qiita.com/non0311/items/664cf74d9ff4bad9cf46)
- [Linuxbrew のススメ - Qiita](https://qiita.com/thermes/items/926b478ff6e3758ecfea)