JavaScript | Tech and Everyday Blog by masahosono

JavaScript | masahosono blog

Qiitaの記事投稿では、コードブロックにファイル名を表示することができる。これと同じ体験をmarkedライブラリを使って実現してみた。


Qiitaの記事投稿では、コードブロックに`~~~language:filename`と書くことで、言語にあったハイライトとファイル名を表示することができる。

[Markdown記法 チートシート - Qiita](https://qiita.com/Qiita/items/c686397e4a0f4f11683d)

![img.png](img.png)

ファイル名の埋め込みが簡単な記述でできるので非常に便利と感じている。

これと同じ体験をmarkedライブラリを使って実現してみた。

## 環境
* [marked](https://github.com/markedjs/marked) v1.2.5
* [highlightjs](https://github.com/highlightjs/highlight.js) v9.16.2

## 実装

markedのオプションには、コードブロックに対して独自処理を挟むことができる`highlight`オプションがある。

highlightメソッドは、第2引数にハイライト表示用の言語名を受け取ることができるので、こちらを利用して言語名とファイル名を受け取れるようにする。

```javascript
const markedOptions = {
    highlight: (code: string, language: string) => {
        const fileInfo = language.split(':');
        if (fileInfo[1]) {
            return (
                `<span class="file-name">${fileInfo[1]}</span>` +
                `<code class="hljs">${highlight.highlightAuto(code, [fileInfo[0]]).value}</code>`
            )
        }
        return (
            `<code class="hljs">${highlight.highlightAuto(code, [fileInfo[0]]).value}</code>`
        );
    },
    renderer: renderer
};

marked(code, markedOptions);
```

あとは、markedによって次のようなHTMLが出力されるのでスタイルを整えてやれば良い。

```html
<pre>
    <code class="language-javascript:index.tsx">
        <span class="file-name">index.tsx</span>
        <code class="hljs"></code>
    </code>
</pre>
```

```css
pre {
    background-color: #011627;
    margin-bottom: 32px;
    padding: 8px 12px 0 12px;
    font-size: 1.1em;
}
.file-name {
    color: white;
    background-color:#708090;
    position: relative;
    top: -8px;
    left: -12px;
    padding: 2px 8px;
}
```

Qiitaライクなコードブロック表示を、marked + highlight.jsで実現する

Next.jsで外部のAPIに対して非同期でリクエストをしたところCORSエラーが発生した。異なるオリジン間での通信を許可するにはサーバ側にリソース共有を許可する設定を導入する手法が一般的だが、今回はクライアント側だけで対応してみた。そこで、http-proxy-middlewareというモジュールを使ってHTTPリクエストをプロキシすることでエラー回避をしてみた。


Next.jsで外部のAPIに対して非同期でリクエストをしたところCORSエラーが発生した。

異なるオリジン間での通信を許可するにはサーバ側にリソース共有を許可する設定を導入する手法が一般的だが、今回はクライアント側だけで対応してみた。

そこで、[http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware)というモジュールを使ってHTTPリクエストをプロキシすることでエラー回避をしてみた。

## 環境
* [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware) 1.0.6
* [Next.js](https://www.npmjs.com/package/next) 10.0.3
* [Express](https://github.com/expressjs/express) 4.17.1

## 導入
```shell
$ yarn add http-proxy-middleware
```

http-proxy-middlewareはミドルウェアとして提供されているので、他のフレームワークと組み合わせる必要がある。
今回はExpressのミドルウェア関数として導入してみた。

```javascript:server.js
const express = require('express');
const next = require('next');
const {createProxyMiddleware} = require('http-proxy-middleware');

const dev = process.env.NODE_ENV !== 'production';
const port = process.env.PORT || 3000;

const app = next({ dev });
const handler = app.getRequestHandler();
const server = express();

app.prepare()
    .then(() => {
        server.use(['/api'], createProxyMiddleware({
                target: "http://localhost:3001", // プロキシ対象のホスト
                changeOrigin: true,
            })
        )

        server.all('*', (req, res) => {
            return handler(req, res)
        });

        server.listen(port, () => {
            console.debug(`> Runnning on http://localhost:${port}`)
        })
    })
    .catch(() => {
        console.error()
        process.exit(1)
    })
```


上記のプロキシの設定は、APIを提供しているサーバをlocalhostの3001番ポートで起動した場合を想定している。

APIのサーバでは、`http:localhost:3001/api/hoge`のエンドポイントでAPIを提供する。

http-proxy-middlewareを導入したことで`http:localhost:3000/api/hoge`にリクエストすると、APIサーバへとプロキシされる。
```shell
$ curl localhost:3000/api/hoge
{
    success: true,
    body: {},
}
```


Next.jsでAPIリクエストをproxyする

Next.jsのアプリケーションよりも上位のレイヤに独自処理を挟みたかっため、Next.jsのカスタムサーバとしてExpressを導入して機能の拡張を行った。


Next.jsでアプリケーションを構築したときに次のような機能が欲しいことがあった。

- pagesディレクトリ以外でのルーティングの構築
- アプリケーションよりも上位のレイヤに独自処理を挟む

これらの機能は、Next.jsのアプリケーションよりも上位で実行させる必要があるため、Next.js単体だと実現させるのが難しかった。

そこで、Next.jsのカスタムサーバとしてExpressを導入して機能の拡張を行った。

## 環境
* [Next.js](https://www.npmjs.com/package/next) 10.0.3
* [Express](https://github.com/expressjs/express) 4.17.1

## 導入

```shell
$ yarn add express
```

カスタムサーバの実行スクリプトを作成。

```javascript:server.js
const express = require('express');
const next = require('next');

const dev = process.env.NODE_ENV !== 'production';
const port = process.env.PORT || 3000;

const app = next({ dev });
const handler = app.getRequestHandler();
const server = express();

app.prepare()
    .then(() => {
        server.all('*', (req, res) => {
            return handler(req, res)
        });

        server.listen(port);
    })
    .catch(() => {
        console.error()
        process.exit(1)
    })
```

作成したファイルをNode.jsで実行するとExpressでHTTPサーバが起動する。
```shell
$ node server.js
```

Next.jsを開発モードで起動する場合は、NextServerのインスタンス（app）を生成する際にtrueを指定する。

実行環境は環境変数で切り替えられるようにして、次のようなスクリプトで指定できるようにした。

```javascript:package.json
"scripts": {
  "start:dev": "node server.js",
  "start:prod": "NODE_ENV=production node server.js"
}
```

### 静的ファイルのディレクトリを変更

Next.jsにおける静的ファイルの公開は、publicディレクトリが公開対象となるが、Expressを組み合わせることで公開ディレクトリを追加することができる。
https://expressjs.com/ja/starter/static-files.html

```javascript:server.js
import express from 'express'
import next from 'next'

const dev = process.env.NODE_ENV !== 'production';
const port = process.env.PORT || 3000;

const app = next({ dev });
const handler = app.getRequestHandler();
const server = express();

app.prepare()
    .then(() => {
        server.use('/static', express.static('static')); // staticディレクトリを公開ディクレトリに追加

        server.all('*', (req, res) => {
            return handler(req, res)
        });

        server.listen(port, () => {
            console.debug(`> Running on http://localhost:${port}`);
        })
    })
    .catch(() => {
        console.error()
        process.exit(1)
    })
```

### 独自処理の挿入
Expressでは必要に応じてミドルウェアを追加することで機能を拡張することができる。
https://expressjs.com/ja/guide/using-middleware.html

ここでは、例として管理者ページ（/admin）へアクセスされたときにユーザ認証を行う場合を想定とした処理を記載。

```javascript:server.js
import express, {NextFunction, Request} from 'express'
import next from 'next'

// server
const dev = process.env.NODE_ENV !== 'production'
const port = process.env.PORT || 3000;

const app = next({ dev })
const handler = app.getRequestHandler()
const server = express()

// ミドルウェア（auth）を定義
const auth = (req, res, next) => {
    const hasError = false; // 略（独自の認証処理 ex.JWT）
    if (hasError) {
        return next(res.status(401));
    }
    next();
}

app.prepare()
    .then(() => {
        // ミドルウェアの定義
        server.use((req, res, next) => {
            console.debug(`[${req.url}]`, `[${req.method}]`, 'Request Received')
            next()
        })

        // ミドルウェア（auth）を挿入
        server.get('/admin', auth, (req, res, next) => {
            return handler(req, res);
        })

        server.all('*', (req, res) => {
            return handler(req, res);
        })

        server.listen(port, () => {
            console.debug(`> Running on http://localhost:${port}`);
        })
    })
    .catch(() => {
        console.error()
        process.exit(1)
    })
```

このように記載することでNext.js側でルーティングされる前に任意の処理を挟むことができる。


Next.jsのカスタムサーバとしてExpressを利用する

markedというライブラリを使ってマークダウン記法の文字列をHTMLに変換して表示させてみた。また、コードブロック内のコードはハイライト表示にさせたかったのでhighlightjsというライブラリも併用して使ってみた。


[marked](https://github.com/markedjs/marked)ライブラリでマークダウン記法の文字列をHTMLに変換して表示させてみた。
また、コードブロック内のコードはハイライト表示させたかったので、[highlightjs](https://github.com/highlightjs/highlight.js)ライブラリもmarkedと組み合わせて利用した

## 環境
* [React](https://github.com/facebook/react) v16.13.1
* [marked](https://github.com/markedjs/marked) v1.2.5
* [highlightjs](https://github.com/highlightjs/highlight.js) v9.16.2

## 導入
```shell
$ yarn add marked
$ yarn add highlightjs
```

marked関数にマークダウン記法の文字列を渡すとHTMLが返却される。
```javascript:index.ts
import React from 'react';
import marked from "marked";``

const Marked = () => {
    const markdownString =
        "# Header \n" +
        "**Bold** \n\n" +
        "[Google](https://www.google.com/)";

    return marked(markdownString);
}
export default Marked;
```

変換後のHTMLは以下のとおり
```html
<h1 id="header">Header</h1> 
<p><strong>Bold</strong></p> 
<p><a href="https://www.google.com/">Google</a></p>
```

### 画面表示
dangerouslySetInnerHTMLなどを使いHTMLを画面表示させる。
```javascript:index.ts
import React from 'react';
import marked from "marked";

const Marked = () => {
    const markdownString =
        "# Header \n" +
        "**Bold** \n\n" +
        "[Google](https://www.google.com/)";

    return <div dangerouslySetInnerHTML={{__html: marked(markdownString)}}/>;
}
export default Marked;
```

起動してブラウザを開くとHTMLに展開されて表示される。

![img.png](img.png)

### コードをハイライト表示

ハイライト表示するにはhighlightjsにコードブロック内のソースコードを構文解析させてHTMLに変換させる必要がある。

marked関数の第2引数には[オプション](http://adilapapaya.com/docs/marked/#options)が指定でき、highlightオプションを使うとコードブロックの内容に対して独自処理を挟むことが可能。

また、適用するcssはimportしておく。cssのテーマの一覧は[highlight.jsのデモページ](https://highlightjs.org/static/demo/)で確認することができる。

```javascript:index.ts
import React from 'react';
import marked from "marked";
import highlight from 'highlightjs'
import 'highlightjs/styles/a11y-dark.css' // 適用するテーマを指定

const Marked = () => {
    const markdownString =
        "```javascript\n" + // コードブロック内のコードの言語を指定
        "import React from \"react\";\n" +
        "import SimpleMDE from \"react-simplemde-editor\";\n" +
        "import \"easymde/dist/easymde.min.css\";\n" +
        "\n" +
        "const MarkdownEditor = () => {\n" +
        "    return <SimpleMDE id=\"simple-mde\" />;\n" +
        "}\n" +
        "export default MarkdownEditor\n" +
        "```";

    const markedOptions = {
        highlight: (code: string, lang: string) => {
            return (
                '<code class="hljs">' + highlight.highlightAuto(code, [lang]).value + '</code>'
            );
        }
    };

    return <div dangerouslySetInnerHTML={{
        __html: marked(markdownString, markedOptions) // 第2引数にオプションを指定
    }}/>;
export default Marked;
```

ハイライト結果は以下のとおり。

![img_2.png](img_1.png)

markedでマークダウンをHTMLに変換して表示させる

JavaScriptの破壊的メソッドをスプレッド構文を用いて安全に利用するための方法について。破壊的メソッドは、オブジェクトの内容を書き換えてしまうため注意深く使う必要がある。そのため、オブジェクトのコピーの生成を行う必要があり、スプレッド構文を使うと簡潔に書くことができる。


javascriptには、破壊的メソッドと呼ばれるオブジェクトの内容を書き換えてしまうメソッドが存在する。

オブジェクトの内容が変わってしまうことで、意図しないバグを発生させる恐れがあることを、開発者は意識して実装する必要がある。

```javascript
const array = ["a", "b", "c"];
const reverse = array.reverse();

console.log(array); // ["c", "b", "a"] オブジェクトの内容が書き換わる
console.log(reverse); // ["c", "b", "a"]
```

## 対策

### 事前の配列のコピー

巷でよく見かける実装だが、事前に用意した一時的な変数（tmp）にコピーする手法。

コード自体が冗長かつ、コピーした変数がスレッド内に永続的に残り続けることによってメモリ消費も増えパフォーマンス的にも良くない。

```javascript
const array = ["a", "b", "c"];

const arrayTmp = array.concat(); // copy
const reverse = arrayTmp.reverse();

console.log(array); // ["a", "b", "c"]
console.log(arrayTmp); // ["c", "b", "a"]
console.log(reverse); // ["c", "b", "a"]
```

### スプレッド構文を用いた配列のコピー

ES2015からは、スプレッド構文が使えるようになったため、次のようなコードに置き換えることができる。

`[...array]`と書くことで配列のコピーを生成することができる。

```javascript
const array = ["a", "b", "c"];
const reverse = [...array].reverse();

console.log(array); // ["a", "b", "c"]
console.log(reverse); // ["c", "b", "a"]
```

ほとんどの場合、破壊的メソッドを使用するときに元のオブジェクトを変更したいケースは少ないと思うので、明示的にコピーすべきである。

スプレッド構文は簡潔に書けるので、破壊的メソッドを使うときには組み合わせて書く癖をつけると良いだろう。

JavaScriptの破壊的メソッドをスプレッド構文を用いて安全に利用する

TypeScriptのstrictルール（厳格化オプション）について、忘れがちなのでまとめる。strictルールとは、TypeScriptの厳格化オプションのことである。結論としては、特別な事情が無い限りは基本的に有効にするのがベターであると感じた。


TypeScriptのstrictルールについて、忘れがちなのでまとめる。

## strictルールとは
TypeScriptの厳格化オプションのこと。

tsconfig.jsonに指定することで利用可能。

tscコマンドで作成したtsconfig.jsonには初期値としてstrictがtrue（有効）で指定されている。

```json:tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true
  }
}
```

strictをtrue指定することで以下の設定が有効となる。

| オプション                        | 概要                       | 
|:-----------------------------|:-------------------------|
| noImplicitAny                | 暗黙のanyをエラーとする            | 
| noImplicitThis               | thisの型注釈を必須にする           | 
| alwaysStrict                 | 厳密モードで解析する               | 
| strictBindCallApply          | bind、call、applyの型チェックをする | 
| strictNullChecks             | 厳密なnullチェックをする           | 
| strictFunctionTypes          | 厳密な関数の型チェックをする           | 
| strictPropertyInitialization | クラスプロパティの初期化を必須にする       | 

## 各種Strictルールについて

### noImplicitAny

有効にして以下のコードをビルドすると失敗する。
```javascript
export const test = (arg) => {
    return arg;
}
// =>  Parameter 'arg' implicitly has an 'any' type.
```

以下のように明示的にany型を付与することでビルドが成功する。
```javascript
export const test = (arg: any) => {
    return arg;
}
```

### alwaysStrict

JavaScriptのStrictモードを有効にするための`'use strict';`構文を付与する。
```javascript
const test = (arg) => {
    return arg;
}
```

出力後のJavaScriptファイルを確認すると先頭に`'use strict';`が付与されている。
```javascript
"use strict";
var test = function (arg) {
    return arg;
};
```

Strictモードは推奨されているので`alwaysStrict`は有効にすべき。

### strictBindCallApply

BindとCallとApplyの型チェックを厳しくしてくれる。

```javascript
const test = (arg: string) => {
    return arg;
}
test.call(undefined, 11); // 第2引数は存在しない
// => Argument of type 'number' is not assignable to parameter of type 'string'.
```

### strictNullChecks

非null型へのnullと非undefined型へのundefinedの代入をエラーとする。

```javascript
export const test = (arg) => {
    const hoge: string = null; // => Type 'null' is not assignable to type 'string'.
    const huga: number = undefined; // => Type 'undefined' is not assignable to type 'number'. 
    return arg;
}
```

### strictFunctionTypes

関数の引数の共変をエラーとする。

```javascript
let test = (arg: string, num: number) => {
    console.log(arg);
}

test = (arg: string) => { // 共変
    console.log(arg);
}
// => Type '(arg: string) => void' is not assignable to type '(arg: string, num: number) => void'.
```

### strictPropertyInitialization

クラスのフィールドのプロパティを初期化していない場合エラーとする。

`strictPropertyInitialization`を有効にする場合`strictNullChecks`も有効にする必要がある。

```javascript
class Test {
    private hoge: string;
}
// => Property 'hoge' has no initializer and is not definitely assigned in the constructor.
```

## まとめ
- TypeScriptのstrictオプションはそれほど厳しいものでもないので基本的には有効にするべきと感じた。
- 今後のバージョンアップでオプションが追加または削除される可能性があるので、strictオプションではなく個別にオプションを有効にすべき。

TypeScriptのstrictルールについて

JavaScriptのStrictモードについて調べたことをまとめる。TypeScriptでコードを書く場合コード内に構文エラーなどが混入していても実行前のビルドでエラー検知が可能である。 ただし、JavaScriptを直接書いて実行した場合には検知できないエラーも存在する。そういったバグを検知してエラーとしてくれるのがStrictモードである。


JavaScriptのStrictモードについて忘備録としてまとめる。

TypeScriptでコードを書く場合、コード内に構文エラーなどが混入していても実行前のビルドでエラー検知が可能である。
ただし、ビルドが不要なJavaScriptを書いて実行した場合には、実行時エラーが発生することがある。

そういったコード内のバグを検知してエラーとしてくれるのがStrictモードである。

## Strictモードとは
ECMAScript5（2009年12月リリース）で導入された機能。

JavaScriptの自由度を制限する代わりに堅牢なコードとなることを目的としたモード。

JavaScriptの規格とブラウザの種別によって適用されるルールに多少の違いがある。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Strict_mode

## 使い方
JavaScriptコードの先頭に'use strict';という構文を記載することでStrictモードになる。
```javascript
'use strict';
const test = () => {
    hoge = 1;
    console.log(hoge);
}
test();
```

関数スコープ内に記載すれば関数内でのみStrictモードが有効となる。
```javascript
const test = () => {
    'use strict';
    hoge = 1;
    console.log(hoge);
}
test();
```

ECMAScript2015から追加されたJavaScriptモジュールでは自動的にStrictモードになる。
```javascript
const test = () => {
    hoge = 1;
    console.log(hoge);
}
export default test;
```

## Strictモードのルール

実際に遭遇しそうなものを何個か抜粋。

### グローバル変数を作成できなくする

変数hogeを0で初期化して次行で1を代入するコード。構文エラー等は無いので問題なく動作する。
```javascript
const test = () => {
    let hoge = 0;
    hoge = 1;
    console.log(hoge);
}
test();
// => 1
```

上と同じく変数hogeの初期化後に別の値を代入するコード。 ただし、代入する対象の変数名を間違えてグローバル変数hugaを定義してしまった場合。
Strictモードが有効でない場合はエラーとならずに動作する。
```javascript
const test = () => {
    let hoge = 0;
    huga = 1; // スペルミス 誤：huga、正：hoge
    console.log(hoge);
}
test();
// => 0
```

Stirctモードが有効の場合、ReferenceErrorエラーが発生する。
```javascript
'use strict';
const test = () => {
    let hoge = 0;
    huga = 1;
    console.log(hoge);
}
test();
// => ReferenceError: huga is not defined
```

### 予約語を変数名として利用できなくする

```javascript
'use strict';
function test() {
    const private = 1;
    console.log(private);
}
test();
// => SyntaxError: Unexpected strict mode reserved word
```

対象の予約語は以下の通り。
```
implements, interface, let, package, private, protected, public, static, yield, class、enum、export、extends、import、super
```

## まとめ
- 特別な事情が無い限りStrictモードは適用させるべき。
- ブラウザによって扱いがことなるため複数ブラウザでの動作確認はするべき。

JavaScriptのStrictモードについて

JavaScriptでクリップボードを読み書きする方法について説明する。書き込みには、ClipboardインタフェースのwriteText関数にコピーしたい文字列を指定する。読み込み時には、ClipboardインタフェースのreadText関数を実行することでクリップボードの値が参照できる。


## クリップボードへ書き込み

### クライアントブラウザ向け

ClipboardインタフェースのwriteText関数に指定した文字列がクリップボードに書き込まれる。
https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText

利用には`clipboard-write`権限が必要だが、ページがアクティブであれば自動で付与がされる。
```javascript
navigator.clipboard.writeText('hoge');
```

writeTextはPromiseを返却する。
```javascript
navigator.clipboard.writeText('hoge')
    .then(() => {
        console.log('Success');
    })
    .catch((e) => {
        console.error(e.message)
    });
```

以下のようにawaitで結果を受け取ることも可能。
```javascript
try {
    await navigator.clipboard.writeText('hoge');
    console.log('Success');
} catch (e) {
    console.error('Failed: ', e.message);
}
```

### Chromeの開発者ツール向け
copy関数というChromeの開発者ツールのコンソール上でのみ動作するクリップボードへ書き込める関数がある。
```javascript
copy('hoge');
```

writeText関数はページがアクティブの場合に利用可能であるためChromeの開発者ツール上のコンソールでは利用することができない。
```javascript
Uncaught (in promise) DOMException: Document is not focused.
```
そのため、開発者ツール上であればcopy関数を使用するべきである。


## クリップボードから読み込み
ClipboardインタフェースのreadText関数を実行するとクリップボードの内容を読み込まれる。
https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/readText

ただし、利用には`clipboard-read`権限が必要であり、`clipboard-write`権限と違ってクライアントユーザが権限の許可を手動で行わなければならない。

```javascript
navigator.clipboard.readText();
```

readTextはPromiseを返却する。
```javascript
navigator.clipboard.readText()
    .then((text) => {
        console.log(text);   
    })
    .catch((e) => {
        console.error(e.message)
    });
```

以下のようにawaitで結果を受け取ることも可能。
```javascript
try {
    await navigator.clipboard.writeText(location.href);
    console.log('Page URL copied to clipboard');
} catch (err) {
    console.error('Failed to copy: ', err);
}
```

