仕組み

図形生成の仕組みは、こちらのページの技術を応用したもの　+　高校で習った三角関数。
そもそも六芒星をはじめとする星型図形にはどれだけ複雑なものであっても、線の本数と傾きは正多角形の時と変わらないという法則がある。つまり、線の傾きと位置さえ調整してやれば、煩雑な多角形であっても生成可能なのである。
で、その線の位置と長さを求めるときに使うのが、いわゆるsin、cos、tanなのだ。

図にするとこんな感じ。

赤線の部分がいわゆる「斜辺」と呼ばれるもの。斜辺の長さは50%=0.5で、赤線と赤線の間の角（中心角）は今回の場合５等分（赤い点＝円の中心から接線に向けて伸びる直線、つまり半径なのだ）。これにsinやcosをかけてやれば値がwidthとheightの長さが求まるという寸法だ。

高校を卒業したての人に向けて言えば、「width=弦の長さ」。と言えばイメージしやすいのではないだろうか。
ちなみに、sin、cos、tanは角度をもとに線の長さを求める式である。

作例例

オーソドックスな六芒星。

第三引数（intersection）を0にすれば通常の正多角形も作図できる。

同じ７角形だが、第三引数を２にしてある。

こんな複雑なのも可能。ちなみに、400角形で頂点を188個飛ばしにつないでいる。

1024角形。邪神アバター呼ばわりされた。

ちなみに、星型多角形は頂点の数が増えてゆくごとに、作れる"星"の種類も増えてゆく。
最大数は（頂点数÷２)-1 以下の数。たとえば、7角形なら、7÷2=3.5、3.5-1=2.5なので、2つ作れることになる。

コード本体

html

<style>
/* position:relative、position:absolute、position:fixedのいずれか+タテヨコの高さが決まっていないと崩れるので注意。 */
#torirobyte{
    position: relative;
    width: 600px;
    height: 600px;
}   
/* border-bottomで線を表現しているので、線の太さや色はここをいじれば制御できる。 */
#torirobyte div{
    border-bottom: 1px solid black;
}
</style>


<div id="torirobyte">
</div>

<script type="text/javascript">
(function(){

var target = document.getElementById('torirobyte');
CreateGrams(target, 12, 3);

function CreateGrams(parantelm, vertex, intersection){
    // vertexは頂点数。
    // intersectionは点と点をつなぐ直線が何個飛ばしに線を作るか。0の場合、普通の正多角形ができあがります。
    // elementの中に整形されます。

    // 図形のパラメーターの設定
    var radius = 50; // 半径（widthとheightはパーセント指定するので一律50）
    var slope_per_one = 360 / vertex; // 線の傾き
    var center_angle = slope_per_one * (intersection + 1); // 中心角。この値によって、完成する星型図形が変化します。
    var radian_slope = ((180 - center_angle) / 2) * (Math.PI / 180); // sin、cosに使う角(ラジアン単位)
    var width_rate = Math.cos(radian_slope) * radius * 2; // 線に設定するwidth（単位は％）
    var height_rate = Math.sin(radian_slope) * radius * 2; // 線に設定するheight（単位は％）
    var leftposision = (100 - width_rate) / 2; // positionのleftに付ける値。これで横位置を要素内におさめる

    // 図形の生成
    parantelm.innerHTML = '';
    for(var int = 0; int < vertex; int++){
        var childs = document.createElement('div');

        // 図形逆向き化防止
        if(intersection % 2 == 0){
            var slope_current = (slope_per_one * int);
        }else{
            var slope_current = (180 + (slope_per_one * int));
        }

        childs.style.margin = 'auto';
        childs.style.position = 'absolute';
        childs.style.top = 0;
        childs.style.bottom = 0;
        childs.style.left = leftposision + '%';
        childs.style.transform = 'rotate(' + slope_current + 'deg)';
        childs.style.width = width_rate + '%';
        childs.style.height = height_rate + '%';
        parantelm.appendChild(childs);
    }
    return parantelm;
}

})();
</script>

ReactでマークダウンをHTMLに変換する方法について記載

1.react-markdownをインストール

npm install --save react-markdown

2.以下のコードを記載

import React,{Component} from 'react';
import ReactMarkdown from 'react-markdown/with-html';

export default class MarkdownSample extends React.Component {

    constructor(props) {
        super(props)
    }

    getHTMLfromMarkdown(){
        let markdown =
            '# 見出し 1\n' +
            '## 見出し 2\n' +
            '### 見出し 3\n' +
            '#### 見出し 4\n' +
            '---\n' +
            '- リスト 1\n' +
            '- リスト 2\n' +
            '- リスト 2-1\n' +
            '1. 番号付きリスト 1\n' +
            '2. 番号付きリスト 2\n' +
            '3. 番号付きリスト 3\n' +
            '[リンク](http://...)\n' +
            '**強調**\n' +
            '```ruby:filename.rb\n' +
            'コード\n' +
            '```';
        return markdown;
    }

    render() {
        return (
            <div>
                <ReactMarkdown
                    source={this.getHTMLfromMarkdown()}
                    escapeHtml={false}
                />
            </div>
        )
    }
}

以上

参考

https://github.com/rexxars/react-markdown

初めに

TypeScriptによるスクレピングの簡単な手法を紹介したいと思います。
記事のポイントはあくまでもTypeScriptの使用、高度なスクレピング技法の紹介ではありません。

前提条件

• ある程度Typescriptの文法が分かってること
• Node.jsの環境が整って、npmコマンド使えること
• グローバル環境にTypeScriptに入ってること
• 法に触れること、人に迷惑かけることをしないこと

プロジェクト初期化

mkdir [好きなディレクトリ] && cd [好きなディレクトリ]

package.jsonとtsconfig.jsonの初期化

npm init -y && tsc --init

プロジェクトのフォルダ内にsrcフォルダを作ります。

mkdir src

tscofig.jsonのrootDirをsrcフォルダに指定します。

tscofig.json

 ...
     "rootDir": "./src",       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
...

srcフォルダ内にcrowllwe.tsファイルを作って、中身 console.log('test')を追加します。

crowllwe.ts

console.log('test');

現時点使用するライブラリをインストール

• npm install typescript -D
• npm install ts-node -D

package.jsonを修正します。

package.json

...
  "scripts": {
    "dev": "ts-node ./src/crowller.ts"
  },
...

コマンドラインで　npm run devを実行します。testがもし正常に表示出来たらオーケーです。

$ npm run dev

> [好きなディレクトリ名]@1.0.0 dev [好きなディレクトリ名]
> ts-node ./src/crowller.ts

test

ここまで初期化は完了です。
ディレクトリ構成は以下の通りです。

好きなディレクトリ
|-node_modules
|-src
|- |- crowller.ts
|- package-lock.json
|- package.json
|- tsconfig.json

HTMLレスポンス取得

ターゲットサイトからHtmlレスポンスもらう必要がある為、リクエスト送れるライブラリsuperagentを使用します。

npm install superagent --save

インストール終わったら、crowller.tsにimportします。

crowller.ts

import superagent from 'superagent'

この場合、恐らくIDEに怒られます。vscode使用してコーティングする場合、以下のメッセージが表示されます。

'superagent' が宣言されていますが、その値が読み取られることはありません。ts(6133)
モジュール 'superagent' の宣言ファイルが見つかりませんでした。'/qiita-spider-ts/node_modules/superagent/lib/node/index.js' は暗黙的に 'any' 型になります。
  Try `npm install @types/superagent` if it exists or add a new declaration (.d.ts) file containing `declare module 'superagent';`ts(

なぜなら、superagentはjavascriptで書かれているライブラリ、Typescriptが直接認識することができません。
その場合、ライブラリの翻訳ファイルが必要になります。翻訳ファイルは.d.tsの拡張子を持ってます。

翻訳ファイルをインストールします。

npm install @types/superagent -D

これでエラーが解決できるはずです、それでも消えない場合、一回IDEを再起動することお勧めします。
実際リクエスト送信して、HTMLリスポンス受けとってみましょう。
ターゲットサイトは任意で構いません。

crowller.ts

import superagent from 'superagent'

class Crowller {
    private url = "url"
    constructor(){
         this.getRawHtml();
    }
    async getRawHtml(){
        const result = await superagent.get(this.url);
        console.log(result.text)
    }
}

const crowller = new Crowller()

npm run devで実行すると、レスポンスもらえたらオーケーです。

サンプル

...
<span class='c-job_offer-detail__term-text'>給与</span>
</div>
</th>
<td class='c-job_offer-detail__description'>
<strong class='c-job_offer-detail__salary'>550万 〜 800万円</strong>
</td>
</tr>
<tr>
<th>
...

レスポンスから必要なデータを抜き取る

正規表現で抜き取ることもできますが、今回は多少便利になるcheerioというライブラリを使用します。
ドキュメント

npm install cheerio --save
npm install @types/cheerio -D

cheerioを使用すれば、jQueryのような文法でHTMLをから内容を抜き取れます。
実際使ってみます、下記のDOM構造からテキスト内容を抜き取るためにcrowller.tsを修正します。

crowller.ts

import superagent from 'superagent';
import cheerio from 'cheerio';

class Crowller {
    private url = "url"
    constructor(){
         this.getRawHtml();
    }
    async getRawHtml(){
        const result = await superagent.get(this.url);
        this.getJobInfo(result.text);
    }

    getJobInfo(html:string){
       const $ = cheerio.load(html)
       const jobItems = $('.c-job_offer-recruiter__name');
       jobItems.map((index, element)=>{
           const companyName = $(element).find('a').text();
           console.log(companyName)
       })
    }
}

const crowller = new Crowller()

実行してみます。

$ npm run dev

> qiita-spider-ts@1.0.0 dev 好きなディレクトリ名\qiita-spider-ts
> ts-node ./src/crowller.ts

xxx株式会社
株式会社xxx
xxx株式会社
...

データの保存

srcフォルダと同じ階層でデータ保存用のdataフォルダを新規追加します。

|- node_modules
|- src
|- data
|- |- crowller.ts
|- package-lock.json
|- package.json
|- tsconfig.json

取得したデータをjson形式でdataフォルダに保存します。
その前にデータに含む要素を決めるためのインターフェースを定義します。
転職サイトをターゲットにしてるため、会社名とポジションと提示年収の三つをインターフェースの要素として追加します。

crowller.ts

...
interface jobInfo {
    companyName: string, 
    jobName: string,
    salary: string
}
...

そして配列に継承させて、データを入れていきます。

crowller.ts

...
    getJobInfo(html:string){
       const $ = cheerio.load(html)
       const jobItems = $('.c-job_offer-box__body');
       const jobInfos:jobInfo[] = [] //インターフェース継承
       jobItems.map((index, element) => {
           const companyName = $(element).find('.c-job_offer-recruiter__name a').text();
           const jobName = $(element).find('.c-job_offer-detail__occupation').text();
           const salary= $(element).find('.c-job_offer-detail__salary').text();
           jobInfos.push({
            companyName,
            jobName,
            salary
           })
       });
       const result = {
           time: (new Date()).getTime(),
           data: jobInfos
       };
       console.log(result);
    }
...

再度実行してみます。データが綺麗になってることが分かります。

$ npm run dev

> qiita-spider-ts@1.0.0 dev 好きなディレクトリ名\qiita-spider-ts
> ts-node ./src/crowller.ts

{ time: 1583160397866,
  data:
   [ { companyName: 'xx株式会社',
       jobName: 'フロントエンドエンジニア',
       salary: 'xxx万 〜 xxx万円' },
     { companyName: '株式会社xxxx',
   ...

保存用の関数を定義

generateJsonContentというデータ保存用の関数を定義します。

crowller.ts

    ...
    async getRawHtml(){
        const result = await superagent.get(this.url);
        const jobResult = this.getJobInfo(result.text); //整形後のデータを受け取ります。
        this.generateJsonContent(jobResult); //保存用の関数に渡します。
    }
    // 保存用の関数
    generateJsonContent(){

    }
    ...
    getJobInfo(html:string){
    ...
    const result = {
           time: (new Date()).getTime(),
           data: jobInfos
       };
       return result 
   }    

でも、そのままデータを受け取れないので保存用のinterfaceを定義します。

crowller.ts

interface JobResult {
    time: number,
    data: JobInfo[]
}

それを保存用の関数の引数型として渡します。

crowller.ts

...
generateJsonContent(jobResult:JobResult){

    }
...

データをファイルに保存するために、node.jsのファイル操作関連のライブラリをimport

crowller.ts

import fs from 'fs';
import path from 'path'

generateJsonContent関数の中身書いていきます。

scowller.ts

...
generateJsonContent(jobResult:JobResult){
        const filePath = path.resolve(__dirname, '../data/job.json')
        let fileContent = {}
        if(fs.existsSync(filePath)){
            fileContent = JSON.parse(fs.readFileSync(filePath, 'utf-8'));
        }
        fileContent[jobResult.time] = jobResult.data;
        fs.writeFileSync(filePath, JSON.stringify(fileContent));
    }
...

今の内容ですと、恐らく fileContent[jobResult.time] がエラーになると思います。
エラーの内容は以下の通り。

(property) JobResult.time: number
Element implicitly has an 'any' type because expression of type 'number' can't be used to index type '{}'.
  No index signature with a parameter of type 'number' was found on type '{}'.ts(7053)

これを解決するには fileContentに型を振る必要があります。
そのまま let fileContent:any = {}にしてもいいですが、
ちゃんとしたインターフェース定義した方がtypescriptらしいです。

crowller.ts

...
interface Content {
    [propName: number]: JobInfo[];
}
...
generateJsonContent(jobResult:JobResult){
...
let fileContent:Content = {}
...
}

最後に実行してみましょう。

npm run dev

dataフォルダの下にjob.jsonファイルが作られて、データも保存されてるはずです。

終わりに

最初計画として、Typescriptを使ってExpressでスクレピングコントロールできるAPIを作るまでやりたかったのですが、
流石に長すぎて良くないと思いましたので、また今度時間ある時に。

crowller.ts

import fs from 'fs';
import path from 'path'
import superagent from 'superagent';
import cheerio from 'cheerio';

interface JobInfo {
    companyName: string,
    jobName: string,
    salary: string
}

interface JobResult {
    time: number,
    data: JobInfo[]
}

interface Content {
    [propName: number]: JobInfo[];
}

class Crowller {
    private url = "url"
    constructor(){
         this.getRawHtml();
    }
    async getRawHtml(){
        const result = await superagent.get(this.url);
        const jobResult = this.getJobInfo(result.text);
        this.generateJsonContent(jobResult)
    }

    generateJsonContent(jobResult:JobResult){
        const filePath = path.resolve(__dirname, '../data/job.json')
        let fileContent:Content = {}
        if(fs.existsSync(filePath)){
            fileContent = JSON.parse(fs.readFileSync(filePath, 'utf-8'));
        }
        fileContent[jobResult.time] = jobResult.data;
        fs.writeFileSync(filePath, JSON.stringify(fileContent));
    }

    getJobInfo(html:string){
       const $ = cheerio.load(html)
       const jobItems = $('.c-job_offer-box__body');
       const jobInfos:JobInfo[] = []
       jobItems.map((index, element)=>{
           const companyName = $(element).find('.c-job_offer-recruiter__name a').text();
           const jobName = $(element).find('.c-job_offer-detail__occupation').text();
           const salary = $(element).find('.c-job_offer-detail__salary').text();
           jobInfos.push({
            companyName,
            jobName,
            salary
           })
       });
       const result = {
           time: (new Date()).getTime(),
           data: jobInfos
       };
       return result
    }
}

const crowller = new Crowller()

つい先日、LINEのフロントエンドフレームワークの「LIFF」に新機能が追加されました。その名も「Share Target Picker」。どんな機能かというと、WebアプリからLINEの友達に対してメッセージを送ることができる機能です。つまり、「LINEアプリを立ち上げなくてもブラウザからメッセージを送る」という機能を実装することができます。詳しくはこちらのブログが参考になります。
Share Target Pickerがリリースされ、LIFFアプリからのメッセージ送信が大幅に強化されました。

というわけで今回はこの機能を試してみます。

今回作るもの

ブラウザから適当なメッセージを入力して誰かに送信するというものです。実際の動作はこちらで確認できます。

※LIFFは本来はLINEアプリ上で動くように作られていますが、この機能に関しては、LINEアプリのver10.3.0以降でサポートされます。2020年3月5日時点では、ver10.2.1なのでブラウザのみで動作確認をしています。

チャネルの作成

まずは、LIFFを動かすためのチャネルを作成します。LINE Developersにログインし、チャネルの作成を行います。これまではMessaging APIからLIFFを作れましたが、仕様変更が行われ、今後はLINE ログインを選択してチャネルを作成します。

チャネルの情報は、Messaging API同様に、プライバシーポリシーや利用規約のURL以外の項目をすべて入力します。また、アプリタイプは「ウェブアプリ」を選択しておきます。

LIFFを動かすサイトの用意

続いてLIFFのURLを作成する際にエンドポイントURLが必要になるので先に今回使うサイトを作成します。今回はNetlifyを使ってサイトを公開させます。まずは、以下のHTMLを作成して適当なフォルダに保存します。ファイル名は、index.htmlとします。

<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>メッセージ送信アプリ</title>
    </head>
    <body>
        <h1 id="displaynamefield"></h1>
        <button type="button" class="btn btn-danger" id="logout" onclick="LogoutAction();">ログアウト</button>

        <form id="send-message">
            <p>送信したいメッセージを入れてね</p>
            <input type="text" id="message" name="message" size="30" placeholder="メッセージを入力">
            <button id="send" class="btn btn-primary">送信</button>
        </form>

        <!-- load jquery -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <!-- load LIFF SDK -->
        <script src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script>
        <script>
            var userId = "";
            document.getElementById("logout").style.display ="none";
            window.onload = function() {
                initializeLiff("YOUR_LIFF_ID");
            };

            function initializeLiff(myLiffId) {
                liff
                    .init({
                        liffId: myLiffId
                    })
                    .then(() => {
                        //LINEアプリで起動しているかどうかとログインをしているのかを判断している
                        if (!liff.isInClient() && !liff.isLoggedIn()){
                            window.alert("LINEアカウントにログインしてください。");
                            liff.login();
                        }else{
                            // start to use LIFF's api
                            liff.getProfile().then(function(profile) {
                                document.getElementById('displaynamefield').textContent = 'ようこそ' + profile.displayName + 'さん';
                                userId = profile.userId;
                                if (!liff.isInClient()){
                                    document.getElementById("logout").style.display = "block"
                                }
                            }).catch(function(error) {
                                window.alert('Error getting profile: ' + error);
                            })
                        }

                    })
                    .catch((err) => {
                        document.getElementById('displaynamefield').textContent = err;
                    });
            }
            // メッセージの送信
            $(function() {
                $('#send').click(function(e) {
                    e.preventDefault();
                    var val = $('#message').val();
                    liff.shareTargetPicker([
                        {
                            type: "text",
                            text: val
                        }
                        ])
                        .then(
                            alert("メッセージを送信しました")
                        ).catch(function(res) {
                            alert("送信に失敗しました")
                        })
                });
            });
            // ログアウトの処理
            function LogoutAction(){
                liff.logout();
                window.location.reload();
            }
        </script>
    </body>
</html>

Netlifyへのデプロイ

それでは、Netlifyでサイトを公開しましょう。こちらから、ログインをして、sitesタブを選択した状態で、先ほど作成したHTMLファイルを保存したフォルダーをドラッグアンドドロップで下の点線の四角に持っていきます。

しばらくすると、サイトのURLが生成されます。このURLをクリックするとサイトの画面が出力され、「LINEアカウントにログインしてください」と表示されます。

しかしアラートのOKボタンを押すと、「404 Bad Request」と表示されると思います。まだLIFF IDを設定していないために起こるエラーです。それでは、LIFF IDを作成するので先程デプロイしたときに生成されたURLをコピーして次の作業を行います。

LIFF IDを作成

それでは、LIFF IDを作成します。先程作成したLINE Loginのチャネルの中のLIFFタブを選択して、シェアターゲットピッカーを有効にして表示される規約に同意します。

追加ボタンをクリックして、LIFFの設定を行います。設定項目は以下の通りです。

設定項目	内容
LIFF アプリ名	LIFFアプリを管理するための名前なので何でもOK
サイズ	お好みでOK
エンドポイントURL	先程コピーしたNetlifyのURL
Scope	profileとopenidにチェック
ボットリンク機能	今回は使わないのでOFF
ScanQR	今回は使用しないのでそのままでOK

設定が終わると以下のようにLIFF URLが生成されます。

この中のline://app/以降にある文字列がLIFF IDになりますので、コピーをして先程のHTMLの中のYOUR_LIFF_IDの部分をLIFF IDに書き換えます。

もう一度デプロイ

それでは、もう一度デプロイします。Sitesタブをの一覧から先程デプロイしたサイトを選択するとサイトの設定画面に飛びます。

その後、Deploysタブをクリックして、先程と同様に灰色の四角形の箇所にHTMLを保存しているフォルダーをドラックアンドドロップでデプロイ完了です。

動作確認

それでは、動作確認です。もう一度先程のページを開いて、ログインできるとユーザー名表示されます。何かメッセージを入れて送信ボタンを押すとメッセージの送信画面が出ます。ここで送信したい友達を選択して送信します。

まとめ

今回はLIFFを使って、ブラウザから誰かにメッセージを送信する仕組みを紹介しました。工夫次第で面白い仕組みでメッセージ送信できると思うので色々試してみたいですね。

はじめに

以前公開した記事の続編的な記事です。
canvasで、マウスイベント、リサイズイベントをハンドリングして、平行移動や拡大縮小をしてみましょう。
今回はcontext.setTransformを使ってみます。

仕様

動作確認ブラウザはPC版のChromeのみ
ライブラリはjQueryのみ使用
ドラッグで平行移動、ホイールで拡大縮小する(拡大縮小はカーソル位置中心)
ブラウザのリサイズに対応する
ブラウザいっぱいにcanvasを描画する

仕様のイメージ

ドラッグによる平行移動

ホイールによる拡大縮小

ブラウザリサイズ

用語

マウスドラッグによる平行移動とホイール操作による拡大縮小をビュー操作と呼ぶことにしましょう。
また、canvasの座標系をスクリーン座標系、スクリーン座標系へ変換される前の座標系をワールド座標系と呼ぶことにします。
ワールド座標系の可視範囲をビューボリューム、スクリーン座標系の表示範囲をビューポートと呼ぶことにします。
今回は、canvasをブラウザいっぱいに広げるので、ビューポートとはcanvasの矩形の事です。
1つ注意ですが、普通、ビューボリュームのアスペクト比はビューポートのアスペクト比と一致させますので、本記事もそれに従います。
ワールド座標系からスクリーン座標系へ変換する写像は行列で表現できますが、これを射影行列と呼ぶことにします。
以上は、一般的なコンピュータグラフィックスの用語とは異なるかもしれませんが、本記事はこれでいきます。

ビュー操作時の射影行列の求め方

上記をまとめると、ビュー操作が行われた時に、射影行列を更新すればよいことになります。
いきなり、射影行列を計算するのは大変ですので、
まずはビューボリュームの更新を考えます。
ビューボリュームは単なる矩形で、左上隅の座標系と幅と高さを持っています。
先ほど説明した通り、ビューボリュームは可視範囲です。ですので、例えば平行移動を実現するには、ビューボリュームの左上隅の座標を変更すれば良さそうです。
ここでは、ビューボリュームの更新が終わったとしましょう。求めたいのは射影行列ですので、今わかっているビューボリュームとビューポートから射影行列を計算します。
要は、ビューボリュームをビューポートに重ねるような変換(写像)が射影行列なのですから、ビューボリュームの左上隅を原点へ移動する行列と、ビューポートへ重なるように拡大する行列をかけたものが、射影行列です。

// 射影行列をビューポートとビューボリュームから計算する
function updatePrjMatrix() {
    const trans = Matrix.translate(-_vv.x, -_vv.y), // ビューボリュームの左上隅を原点へ移動する
        invTrans = Matrix.translate(_vv.x, _vv.y),  // ビューボリュームの左上隅を原点へ移動する逆行列を求める
        scale = Matrix.scale(_vp.w / _vv.w, _vp.h / _vv.h), // ビューボリュームの拡大縮小し、ビューポートにフィットような行列を求める
        invScale = Matrix.scale(_vv.w / _vp.w, _vv.h / _vp.h);   // ビューボリュームの拡大縮小し、ビューポートにフィットような行列の逆行列を求める
    _m = Matrix.multiply(scale, trans); // 射影行列を更新する
    _inv = Matrix.multiply(invTrans, invScale); // 射影行列の逆行列を更新する        
}

描画のタイミング

今回ビュー操作のタイミングでcanvasを再描画していません。requestAnimationFrameのコールバック内で再描画しています。こうすると、描画でかくつきにくくなります。
もし、mousemoveのタイミングで再描画するとなると、mousemoveイベントは1秒間に数百回起こるかもしれないので、再描画処理でかかる時間をかなり短くしなくてはならなくなります。
また、再描画はUIスレッド行う必要があり、UIスレッドに負荷をかけるのは良くありません。
通常のモニタですと、requestAnimationFrameのコールバックは1秒間に60回呼ばれますから、再描画処理は1/60秒を目指せばよいことになります。
今回の例はごく簡単な描画しかしていませんが、もし、canvasのプログラムを書いているのなら、以上の理由によりイベントハンドラでcanvasの再描画を行うべきではありません。

function anim() {
    if (_redrawFlag) {// 再描画する
        updateView();
        _redrawFlag = false;
    } 
    requestAnimationFrame(anim);
}

// ビュー(canvas)更新
// ※本関数はanim関数で呼ばれる
function updateView() {
    const ctx = $('#canvas')[0].getContext('2d');

    ctx.save();

    // canvasをクリアする
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

    // 射影行列をセットする(これによりワールド座標系からスクリーン座標系への射影が行われる)
    ctx.setTransform(_m[0], _m[3], _m[1], _m[4], _m[2], _m[5]);

    // 矩形、丸、三角形を適当な位置へ描画

    // 青色の矩形を描画
    ctx.fillStyle = 'blue';
    ctx.fillRect(400, 200, 100, 100);        

    // 赤色の丸を描画
    ctx.fillStyle = 'red';
    ctx.beginPath();
    ctx.arc(300, 600, 50, 0, 360 * Math.PI / 180, false);
    ctx.fill();

    // 緑色の三角形を描画
    ctx.fillStyle = 'green';
    ctx.beginPath();
    ctx.moveTo(800, 500);
    ctx.lineTo(750, 600);
    ctx.lineTo(850, 600);
    ctx.fill();

    ctx.restore();
}

平行移動の実現

mousedown時に、カーソルの座標を取得します。
この座標系はスクリーン座標系ですので、ワールド座標系へ変換して、1つ前の座標として保持します。
mousemove時に、カーソルの座標を取得しワールド座標系へ変換します。
1つ前の座標と現在の座標の差をビューボリュームの左上隅座標に加えます。
ビューボリュームが更新できましたので、射影行列を計算します。
次のmousemoveイベントに備えて、現在の座標を1つ前の座標とします。
これで、平行移動が実現できました。

// イベントハンドラ 
$('#canvas').on('mousedown', e => {
    var cursorPos;  // スクリーン座標系のカーソルの座標

    // ブラウザのデフォルト動作を抑止(これをしないと、canvas上でのdragによる操作がうまく動作しない)
    e.preventDefault();

    if(_resizeTimeoutId !== -1) { return; } // リサイズ処理待ち

    if (_translating) {
        return;
    }
    _translating = true;

    // スクリーン座標系のカーソルの座標を取得
    cursorPos = { x: e.pageX, y: e.pageY };

    // スクリーン座標系をワールド座標系に変換
    _prePos = screenToWorld(cursorPos);        
}); 

$('#canvas').on('mousemove', e => {
    let cursorPos,  // スクリーン座標系のカーソルの座標
        curPos;     // ワールド座標系のカーソルの座標

    if(!_translating) {
        return;
    }

    // スクリーン座標系のカーソルの座標を取得
    cursorPos = { x: e.pageX, y: e.pageY };

    // スクリーン座標系をワールド座標系に変換
    curPos = screenToWorld(cursorPos);

    // 平行移動する
    translate({ x: _prePos.x - curPos.x, y: _prePos.y - curPos.y });

    // カーソルの座標をワールド座標系へ変換
    _prePos = screenToWorld(cursorPos);

    // 再描画フラグを立てる
    _redrawFlag = true;
});  

$('#canvas').on('mouseup', e => {
    _translating = false;
});

// 平行移動
function translate(vec) {
    // ビューボリュームを更新する
    _vv.x += vec.x;
    _vv.y += vec.y;
    // 射影行列と射影行列の逆行列を更新する   
    updatePrjMatrix();
}

拡大縮小の実現

mousewheelイベントで、拡大か縮小か判定します。
ここでは、ホイールを奥側へ操作して、拡大であるとします。事前に適当に拡大率を決めておきます。
拡大処理をする前に、現在のカーソルの座標を取得し、ワールド座標系へ変換しておきます。これが拡大中心になります。
さて、ビューボリュームの更新ですが、
拡大中心を原点へ移動する行列、
拡大率に応じた拡大行列、
拡大中心を原点へ移動する行列の逆行列
を掛け合わせたものが射影行列となります。
ビューボリュームの計算ができましたので、射影行列を計算します。

$('#canvas').on('mousewheel', e => {

    let cursorPos,  // スクリーン座標系のカーソルの座標
        curPos,     // ワールド座標系のカーソルの座標
        rate;

    if(_resizeTimeoutId !== -1) { return; } // リサイズ処理待ち

    // スクリーン座標系のカーソルの座標を取得
    cursorPos = { x: e.pageX, y: e.pageY };

    // スクリーン座標系をワールド座標系に変換
    curPos = screenToWorld(cursorPos);

    if (e.originalEvent.wheelDelta > 0) {// 奥へ動かした -> 拡大する -> ビューボリュームを縮小する
        rate = 1 / 1.2;
    } else {// 手前へ動かした -> 縮小する -> ビューボリュームを拡大する
        rate = 1.2;
    }

    // 拡大縮小する
    scale(curPos, rate);

    // 再描画フラグを立てる
    _redrawFlag = true;
});

// 拡大縮小
function scale(center, rate) {
    let topLeft = { x: _vv.x, y: _vv.y },
        mat;

    // 中心座標を原点へ移動する
    mat = Matrix.translate(-center.x, -center.y);
    // 拡大縮小する
    mat = Matrix.multiply(Matrix.scale(rate, rate), mat);
    // 原点を中心座標へ戻す
    mat = Matrix.multiply(Matrix.translate(center.x, center.y), mat);

    topLeft = Matrix.multiply(mat, topLeft);

    // ビューボリューム更新
    _vv.x = topLeft.x;
    _vv.y = topLeft.y;
    _vv.w *= rate;
    _vv.h *= rate;

    // 射影行列と射影行列の逆行列を更新する   
    updatePrjMatrix();
}

リサイズ時の処理

リサイズ時の処理を4種類用意しました。
とりあえず、左上にあるコンボボックス(リサイズ時の処理)を変更して、動かしてみてください。
詳細についてはソースのコメントをお読みください。
ブラウザがリサイズされるので、それに合わせてcanvasのサイズを変更する必要があります。
あとは、ビューボリュームを更新して、射影行列を計算します。

// リサイズ
// ビューボリュームの矩形の中心が変わらないように更新する
function resizeScaleCenter() {
    // 変更前の拡大率を求める
    const rate = { x: _vv.w / _vp.w, y: _vv.h / _vp.h };
    let vvsq = {};

    if(_vv.w > _vv.h) {// 横長
        vvsq.y = _vv.y;
        vvsq.size = _vv.h;
        vvsq.x = _vv.x + (_vv.w - vvsq.size) / 2; 
    } else {// 縦長
        vvsq.x = _vv.x;
        vvsq.size = _vv.w;
        vvsq.y = _vv.y + (_vv.h - vvsq.size) / 2;
    }        

    // ビューポートの更新
    updateViewport();

    // ビューボリュームの更新
    const aspect = _vp.w / _vp.h;
    if(aspect > 1) {// 横長
        _vv.y = vvsq.y;
        _vv.h = vvsq.size;
        _vv.x = vvsq.x - (vvsq.size * aspect) / 2 + vvsq.size / 2;
        _vv.w = vvsq.size * aspect;
    } else {// 縦長
        _vv.x = vvsq.x;
        _vv.w = vvsq.size;
        _vv.y = vvsq.y - (vvsq.size / aspect) / 2 + vvsq.size / 2;
        _vv.h = vvsq.size / aspect;
    }

    // 射影行列と射影行列の逆行列を更新する   
    updatePrjMatrix();
}

// リサイズ
// ビューボリュームの矩形の左上隅が変わらないように更新する
function resizeScaleTopLeft() {
    // 変更前の拡大率を求める
    const rate = { x: _vv.w / _vp.w, y: _vv.h / _vp.h };
    let vvsq = {};

    if(_vv.w > _vv.h) {// 横長
        vvsq.size = _vv.h;
    } else {// 縦長
        vvsq.size = _vv.w;
    }        

    // ビューポートの更新
    updateViewport();

    // ビューボリュームの更新
    const aspect = _vp.w / _vp.h;
    if(aspect > 1) {// 横長
        _vv.h = vvsq.size;
        _vv.w = vvsq.size * aspect;
    } else {// 縦長
        _vv.w = vvsq.size;
        _vv.h = vvsq.size / aspect;
    }

    // 射影行列と射影行列の逆行列を更新する   
    updatePrjMatrix();
}

// リサイズ
// 矩形の中央を中心に何も変化がないように見せる
function resizeNoScaleCenter() {
    // 変更前の拡大率を求める
    const rate = { x: _vv.w / _vp.w, y: _vv.h / _vp.h };    // rate.xはrate.yと等しいんだけど、一応xもyも求めておく
    // 変更前のビューボリュームの中心点を求める
    const oldCenter = {
        x: _vv.x + _vv.w / 2,
        y: _vv.y + _vv.h / 2
    };
    // ビューポートの更新
    updateViewport();

    // ビューボリュームの更新(幅と高さのみ更新する)
    _vv.w = _vp.w * rate.x;
    _vv.h = _vp.h * rate.y;
    _vv.x = oldCenter.x - _vv.w / 2;
    _vv.y = oldCenter.y - _vv.h / 2;

    // 射影行列と射影行列の逆行列を更新する   
    updatePrjMatrix();
}

// リサイズ
// 矩形の左上隅を中心に何も変化がないように見せる
function resizeNoScaleTopLeft() {
    // 変更前の拡大率を求める
    const rate = { x: _vv.w / _vp.w, y: _vv.h / _vp.h };    // rate.xはrate.yと等しいんだけど、一応xもyも求めておく

    // ビューポートの更新
    updateViewport();

    // ビューボリュームの更新(幅と高さのみ更新する)
    _vv.w = _vp.w * rate.x;
    _vv.h = _vp.h * rate.y;

    // 射影行列と射影行列の逆行列を更新する   
    updatePrjMatrix();
}

$(window).on('resize', e => {
    // リサイズイベント毎に処理しないように少し時間をおいて処理する
    if(_resizeTimeoutId !== -1) {
        clearTimeout(_resizeTimeoutId);
        _resizeTimeoutId = -1;
    }
    _resizeTimeoutId = setTimeout(() => {
        if(_resizeType === 'scale center') {
            resizeScaleCenter();
        } else if(_resizeType === 'scale top left') {
            resizeScaleTopLeft();
        } else if(_resizeType === 'no scale center') {
            resizeNoScaleCenter();
        } else if(_resizeType === 'no scale top left') {
            resizeNoScaleTopLeft();
        } 
        updateDom();
        _redrawFlag = true;
        _resizeTimeoutId = -1;
    }, 500);
});

全ソース

.htmlで1ファイルです。
コメントはたくさん書いています。
著作権は放棄しますので、ご自由にお使いください。
jqueryだけ、ご準備ください。
次の記事はこの仕様に加えて、丸、三角、四角を操作できるようにしてみようと思います。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>canvas sample(PC Chrome)</title>
<script src="./js/jquery-3.4.1.min.js" type="text/javascript"></script>
<style>
body {
    overflow: hidden;
}
#canvas {
    position: absolute;
    left: 0;
    top: 0;    
}
#resize-select {
    position: absolute;
    left: 20px;
    top: 20px;
    font-size: 24px;    
}
</style>
<script>
// ES6 for Chrome
class Matrix {
    // m0は行列、m1は行列又はベクトル
    // 行列は大きさ9の1次元配列であること。 ex. [ 1, 0, 0, 0, 1, 0, 0, 0, 1 ]
    // ベクトルはxとyをプロパティに持つ連想配列であること。 ex. { x: 2, y: 4 }
    // 左からベクトルをかけることは想定していない
    static multiply(m0, m1) {
        if(m1.length && m1.length === 9) {// m1は行列
            return [
                m0[0] * m1[0] + m0[1] * m1[3] + m0[2] * m1[6],
                m0[0] * m1[1] + m0[1] * m1[4] + m0[2] * m1[7],
                m0[0] * m1[2] + m0[1] * m1[5] + m0[2] * m1[8],
                m0[3] * m1[0] + m0[4] * m1[3] + m0[5] * m1[6],
                m0[3] * m1[1] + m0[4] * m1[4] + m0[5] * m1[7],
                m0[3] * m1[2] + m0[4] * m1[5] + m0[5] * m1[8],
                m0[6] * m1[0] + m0[7] * m1[3] + m0[8] * m1[6],
                m0[6] * m1[1] + m0[7] * m1[4] + m0[8] * m1[7],
                m0[6] * m1[2] + m0[7] * m1[5] + m0[8] * m1[8],
            ];
        } else {// m1はベクトル
            return {
                x: m0[0] * m1.x + m0[1] * m1.y + m0[2],
                y: m0[3] * m1.x + m0[4] * m1.y + m0[5],                
            };
        }
    }
    static translate(x, y) {
        return [1, 0, x, 0, 1, y, 0, 0, 1];
    }
    static scale(x, y) {
        return [x, 0, 0, 0, y, 0, 0, 0, 1];
    }
}
$(() => {

    let _translating,   // 平行移動中かどうかのフラグ
        _prePos,        // 平行移動時の1つ前の座標
        _redrawFlag,    // 再描画フラグ
        _m,             // 射影行列
        _inv,           // 射影行列の逆行列
        _vv,            // ビューボリューム(表示範囲)
        _vp,            // ビューポート(canvasの矩形)
        _resizeTimeoutId,   // windowリサイズ時に使用するタイマーのID
        _resizeType;        // windowリサイズ時のビューボリューム更新メソッドの種類

    initModel();        // モデルの初期化
    updateDom();        // ビュー(DOM)の初期化
    initController();   // コントローラの初期化
    anim();             // ビュー(canvas)の更新は、ここで行う

    // モデルの初期化
    function initModel() {
        _translating = false;   // 平行移動中かどうかのフラグ
        _redrawFlag = true;     // 再描画フラグ(初回描画の為trueにしておく)
        _resizeTimeoutId = -1;  // windowリサイズ時に使用するタイマーのID
        _resizeType = 'no scale top left'; // windowリサイズ時のビューボリューム更新メソッドの種類

        // ビューポートとビューボリュームを初期化する
        updateViewport();
        _vv = { x: 0, y: 0, w: _vp.w, h: _vp.h };
        // 射影行列と射影行列の逆行列を更新する 
        updatePrjMatrix();
    }

    // コントローラの初期化
    function initController() {

        // イベントハンドラ 
        $('#canvas').on('mousedown', e => {
            var cursorPos;  // スクリーン座標系のカーソルの座標

            // ブラウザのデフォルト動作を抑止(これをしないと、canvas上でのdragによる操作がうまく動作しない)
            e.preventDefault();

            if(_resizeTimeoutId !== -1) { return; } // リサイズ処理待ち

            if (_translating) {
                return;
            }
            _translating = true;

            // スクリーン座標系のカーソルの座標を取得
            cursorPos = { x: e.pageX, y: e.pageY };

            // スクリーン座標系をワールド座標系に変換
            _prePos = screenToWorld(cursorPos);        
        }); 

        $('#canvas').on('mousemove', e => {
            let cursorPos,  // スクリーン座標系のカーソルの座標
                curPos;     // ワールド座標系のカーソルの座標

            if(!_translating) {
                return;
            }

            // スクリーン座標系のカーソルの座標を取得
            cursorPos = { x: e.pageX, y: e.pageY };

            // スクリーン座標系をワールド座標系に変換
            curPos = screenToWorld(cursorPos);

            // 平行移動する
            translate({ x: _prePos.x - curPos.x, y: _prePos.y - curPos.y });

            // カーソルの座標をワールド座標系へ変換
            _prePos = screenToWorld(cursorPos);

            // 再描画フラグを立てる
            _redrawFlag = true;
        });  

        $('#canvas').on('mouseup', e => {
            _translating = false;
        });

        $('#canvas').on('mousewheel', e => {

            let cursorPos,  // スクリーン座標系のカーソルの座標
                curPos,     // ワールド座標系のカーソルの座標
                rate;

            if(_resizeTimeoutId !== -1) { return; } // リサイズ処理待ち

            // スクリーン座標系のカーソルの座標を取得
            cursorPos = { x: e.pageX, y: e.pageY };

            // スクリーン座標系をワールド座標系に変換
            curPos = screenToWorld(cursorPos);

            if (e.originalEvent.wheelDelta > 0) {// 奥へ動かした -> 拡大する -> ビューボリュームを縮小する
                rate = 1 / 1.2;
            } else {// 手前へ動かした -> 縮小する -> ビューボリュームを拡大する
                rate = 1.2;
            }

            // 拡大縮小する
            scale(curPos, rate);

            // 再描画フラグを立てる
            _redrawFlag = true;
        });

        $(window).on('resize', e => {
            // リサイズイベント毎に処理しないように少し時間をおいて処理する
            if(_resizeTimeoutId !== -1) {
                clearTimeout(_resizeTimeoutId);
                _resizeTimeoutId = -1;
            }
            _resizeTimeoutId = setTimeout(() => {
                if(_resizeType === 'scale center') {
                    resizeScaleCenter();
                } else if(_resizeType === 'scale top left') {
                    resizeScaleTopLeft();
                } else if(_resizeType === 'no scale center') {
                    resizeNoScaleCenter();
                } else if(_resizeType === 'no scale top left') {
                    resizeNoScaleTopLeft();
                } 
                updateDom();
                _redrawFlag = true;
                _resizeTimeoutId = -1;
            }, 500);
        });

        $('#resize-select').change(e => {
            _resizeType = $(e.target).val();
        });
    }    

    // 滑らかに描画できるようにrequestAnimationFrameのタイミングで必要に応じて再描画する
    function anim() {
        if (_redrawFlag) {// 再描画する
            updateView();
            _redrawFlag = false;
        } 
        requestAnimationFrame(anim);
    }

    // ビューポートの更新
    function updateViewport() {
        _vp = { x: 0, y: 0, w: window.innerWidth, h: window.innerHeight };
    }

    // 射影行列をビューポートとビューボリュームから計算する
    function updatePrjMatrix() {
        const trans = Matrix.translate(-_vv.x, -_vv.y), // ビューボリュームの左上隅を原点へ移動する
            invTrans = Matrix.translate(_vv.x, _vv.y),  // ビューボリュームの左上隅を原点へ移動する逆行列を求める
            scale = Matrix.scale(_vp.w / _vv.w, _vp.h / _vv.h), // ビューボリュームの拡大縮小し、ビューポートにフィットような行列を求める
            invScale = Matrix.scale(_vv.w / _vp.w, _vv.h / _vp.h);   // ビューボリュームの拡大縮小し、ビューポートにフィットような行列の逆行列を求める
        _m = Matrix.multiply(scale, trans); // 射影行列を更新する
        _inv = Matrix.multiply(invTrans, invScale); // 射影行列の逆行列を更新する        
    }

    // リサイズ
    // ビューボリュームの矩形の中心が変わらないように更新する
    function resizeScaleCenter() {
        // 変更前の拡大率を求める
        const rate = { x: _vv.w / _vp.w, y: _vv.h / _vp.h };
        let vvsq = {};

        if(_vv.w > _vv.h) {// 横長
            vvsq.y = _vv.y;
            vvsq.size = _vv.h;
            vvsq.x = _vv.x + (_vv.w - vvsq.size) / 2; 
        } else {// 縦長
            vvsq.x = _vv.x;
            vvsq.size = _vv.w;
            vvsq.y = _vv.y + (_vv.h - vvsq.size) / 2;
        }        

        // ビューポートの更新
        updateViewport();

        // ビューボリュームの更新
        const aspect = _vp.w / _vp.h;
        if(aspect > 1) {// 横長
            _vv.y = vvsq.y;
            _vv.h = vvsq.size;
            _vv.x = vvsq.x - (vvsq.size * aspect) / 2 + vvsq.size / 2;
            _vv.w = vvsq.size * aspect;
        } else {// 縦長
            _vv.x = vvsq.x;
            _vv.w = vvsq.size;
            _vv.y = vvsq.y - (vvsq.size / aspect) / 2 + vvsq.size / 2;
            _vv.h = vvsq.size / aspect;
        }

        // 射影行列と射影行列の逆行列を更新する   
        updatePrjMatrix();
    }

    // リサイズ
    // ビューボリュームの矩形の左上隅が変わらないように更新する
    function resizeScaleTopLeft() {
        // 変更前の拡大率を求める
        const rate = { x: _vv.w / _vp.w, y: _vv.h / _vp.h };
        let vvsq = {};

        if(_vv.w > _vv.h) {// 横長
            vvsq.size = _vv.h;
        } else {// 縦長
            vvsq.size = _vv.w;
        }        

        // ビューポートの更新
        updateViewport();

        // ビューボリュームの更新
        const aspect = _vp.w / _vp.h;
        if(aspect > 1) {// 横長
            _vv.h = vvsq.size;
            _vv.w = vvsq.size * aspect;
        } else {// 縦長
            _vv.w = vvsq.size;
            _vv.h = vvsq.size / aspect;
        }

        // 射影行列と射影行列の逆行列を更新する   
        updatePrjMatrix();
    }

    // リサイズ
    // 矩形の中央を中心に何も変化がないように見せる
    function resizeNoScaleCenter() {
        // 変更前の拡大率を求める
        const rate = { x: _vv.w / _vp.w, y: _vv.h / _vp.h };    // rate.xはrate.yと等しいんだけど、一応xもyも求めておく
        // 変更前のビューボリュームの中心点を求める
        const oldCenter = {
            x: _vv.x + _vv.w / 2,
            y: _vv.y + _vv.h / 2
        };
        // ビューポートの更新
        updateViewport();

        // ビューボリュームの更新(幅と高さのみ更新する)
        _vv.w = _vp.w * rate.x;
        _vv.h = _vp.h * rate.y;
        _vv.x = oldCenter.x - _vv.w / 2;
        _vv.y = oldCenter.y - _vv.h / 2;

        // 射影行列と射影行列の逆行列を更新する   
        updatePrjMatrix();
    }

    // リサイズ
    // 矩形の左上隅を中心に何も変化がないように見せる
    function resizeNoScaleTopLeft() {
        // 変更前の拡大率を求める
        const rate = { x: _vv.w / _vp.w, y: _vv.h / _vp.h };    // rate.xはrate.yと等しいんだけど、一応xもyも求めておく

        // ビューポートの更新
        updateViewport();

        // ビューボリュームの更新(幅と高さのみ更新する)
        _vv.w = _vp.w * rate.x;
        _vv.h = _vp.h * rate.y;

        // 射影行列と射影行列の逆行列を更新する   
        updatePrjMatrix();
    }

    // 平行移動
    function translate(vec) {
        // ビューボリュームを更新する
        _vv.x += vec.x;
        _vv.y += vec.y;
        // 射影行列と射影行列の逆行列を更新する   
        updatePrjMatrix();
    }

    // 拡大縮小
    function scale(center, rate) {
        let topLeft = { x: _vv.x, y: _vv.y },
            mat;

        // 中心座標を原点へ移動する
        mat = Matrix.translate(-center.x, -center.y);
        // 拡大縮小する
        mat = Matrix.multiply(Matrix.scale(rate, rate), mat);
        // 原点を中心座標へ戻す
        mat = Matrix.multiply(Matrix.translate(center.x, center.y), mat);

        topLeft = Matrix.multiply(mat, topLeft);

        // ビューボリューム更新
        _vv.x = topLeft.x;
        _vv.y = topLeft.y;
        _vv.w *= rate;
        _vv.h *= rate;

        // 射影行列と射影行列の逆行列を更新する   
        updatePrjMatrix();
    }

    // スクリーン座標をワールド座標へ変換する
    function screenToWorld(screenPos) {
        return Matrix.multiply(_inv, screenPos);
    }

    // ビュー(DOM)の更新
    function updateDom() {

        // canvasをリサイズ
        $('#canvas').prop({
            width: _vp.w,
            height: _vp.h
        });  

        // リサイズタイプの設定(初期化時のみ)
        $('#resize-select').val(_resizeType);
    }

    // ビュー(canvas)更新
    // ※本関数はanim関数で呼ばれる
    function updateView() {
        const ctx = $('#canvas')[0].getContext('2d');

        ctx.save();

        // canvasをクリアする
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

        // 射影行列をセットする(これによりワールド座標系からスクリーン座標系への射影が行われる)
        ctx.setTransform(_m[0], _m[3], _m[1], _m[4], _m[2], _m[5]);

        // 矩形、丸、三角形を適当な位置へ描画

        // 青色の矩形を描画
        ctx.fillStyle = 'blue';
        ctx.fillRect(400, 200, 100, 100);        

        // 赤色の丸を描画
        ctx.fillStyle = 'red';
        ctx.beginPath();
        ctx.arc(300, 600, 50, 0, 360 * Math.PI / 180, false);
        ctx.fill();

        // 緑色の三角形を描画
        ctx.fillStyle = 'green';
        ctx.beginPath();
        ctx.moveTo(800, 500);
        ctx.lineTo(750, 600);
        ctx.lineTo(850, 600);
        ctx.fill();

        ctx.restore();
    }
});
</script>
</head>
<body>
<canvas id="canvas"></canvas>
<select id="resize-select">
    <option value="scale center">1:&nbsp;scale 中央中心</option>
    <option value="scale top left">2:&nbsp;scale 左上隅中心</option>
    <option value="no scale center">3:&nbsp;no&nbsp;scale 中央中心</option>
    <option value="no scale top left">4:&nbsp;no&nbsp;scale 左上隅中心</option>
</select>
</body>
</html>

インストール

npm install vue-moment

Vueプロジェクトにインポート

main.js

Vue.use(require('vue-moment'));

.vueファイルで使う

or演算子｜の右辺でフォーマット形式を指定します。

App.vue

{{ new Date() }}
// 05 2020 19:38:33 GMT+0900 (日本標準時)

{{ new Date() | moment("dddd, MMMM, Do, YYYY, h:mm:ss a") }}
// Thursday, March, 5th, 2020, 7:38:33 pm

{{ new Date() | moment("YYYY/MM/DD") }}
// 2020/03/05

参考にしたサイト

vue-moment - npm
https://www.npmjs.com/package/vue-moment

Vue.jsとVuetifyを勉強中の8amjpです。

はじめに

さて、私の職場ではRedmineが稼働してまして、さらにそのデータを見やすく加工したダッシュボードを作成して、大型ディスプレイに表示してるんですけど。
そのダッシュボード、今まではAngularで作ってたんですが、Vue.jsも勉強したいしVuetifyでマテリアルデザインを満喫したいし……ということで、現在リプレースの真っ最中です。Vue.jsもたのしー！
その過程で覚えた小ネタをひとつ。

テーマにカスタムカラーを追加する

Vuetifyとは、Vue.jsベースのフレームワークで、ダッシュボードみたいなWebアプリを作るのに最適なんですけど。
このVuetify、「テーマ」という機能を持っていて、これがRedmineのデータの表示にとても便利なんです。
具体的に言うと……
チケットの一覧なんかを表示する際、チケットのステータスやトラッカーの値によって色を変えたい……ってこと、良くあるじゃないですか。
そんな時、「tracker1」とか「status1」なんていう名前のカスタムカラーを簡単に追加できます。
こんな感じで、plugins/vuetify.jsを編集しましょう。

plugins/vuetify.js

import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import colors from 'vuetify/lib/util/colors'; // 追加

Vue.use(Vuetify);

export default new Vuetify({
  theme: { // 追加
    themes: {
      light: {
        // トラッカー
        tracker1: colors.red.base, // バグ
        tracker2: colors.amber.base, // 機能
        tracker3: colors.blue.base, // サポート
        // ステータス
        status1: colors.red.accent1, // 新規
        status2: colors.blue.lighten5, // 進行中
        status3: colors.green.lighten5, // 解決
        status4: colors.amber.lighten5, // フィードバック
        status5: colors.grey.lighten1, // 終了
        status6: colors.grey.lighten1, // 対応中
      }
    }
  },
});

で、コンポーネント側ではこんな感じでカラーを指定します。

Hoge.vue

<v-list-item :class="'status'+issue.status.id">
  <v-list-item-title>
    <v-chip dark v-text="'#'+issue.id" :color="'tracker'+issue.tracker.id"/>
    {{issue.subject}}
  </v-list-item-title>
</v-list-item>

こんな感じで、ステータスやトラッカーの値に応じた色を簡単に適用できますよ。
今までは似たような事をSassで定義してたんですけど、断然こっちの方が手軽ですねー。とっても便利。

1時間ほどハマったのでメモを。

toBe と toEqual の使い所

• number, string の比較ならどちらでも良さそう。
• object を比較する場合は、 toEqual 。

number, string

どちらも期待通りの結果に。

    it('number', () => {
      expect(1 + 1).toBe(2) // ok
      expect(1 + 1).toEqual(2) // ok
    })

    it('string', () => {
      expect('d' + 'b').toBe('db') // ok
      expect('d' + 'b').toEqual('db') // ok
    })

object

同じデータが入っていても toBe だと Fail します。

    it('object', () => {
      const user = { name: 'Hoge', age: 30 }
      // expect(user).toBe({ name: 'Hoge', age: 30 }) // Fail
      expect(user).toEqual({ name: 'Hoge', age: 30 })
    })

もともと日付の比較でハマってました。 Date は toEqual を利用しましょう。

    it('date', () => {
      const date = new Date('2020/01/01 00:00:00')
      // expect(date).toBe(new Date('2020/01/01 00:00:00')) // Fail
      expect(date).toEqual(new Date('2020/01/01 00:00:00'))
    })

new したインスタンスの比較も同様です。

    it('class', () => {
      class User {
        age: number
        constructor(age:number) {
          this.age = age
        }
      }
      const user = new User(30)
      // expect(user).toBe(new User(30)) // Fail
      expect(user).toEqual(new User(30))
    })

object の id が異なるからでしょうか。

参考

• https://gist.github.com/shts/ecaeaa09e7ae948eb47e9f22a85b423a
• https://jestjs.io/docs/ja/using-matchers

HANSONTABLEの２バイト入力への対応

ハンズオンはブラウザ上に表形式のインターフェイスを提供するありがたい部位です。
これを使用するにあたり、日本特有である日本語入力時の不具合があり
かなりハマったので、備忘録として残しておきます。

---

まずはハンズオンテーブルとは・・
https://handsontable.com/

JavaScript data grid that looks
and feels like a spreadsheet.
Minimalistic, Excel-like grid component for web apps.
Available for pure JavaScript, React, Vue, and Angular.

---

問題点

そもそも英語圏の部品なので、日本のように全角半角がある場合の対処ができていない。

現象

ハンズオンで表示したテーブルのセル（テキスト）に対して、フォーカスを当てただけの状態で、ＩＭＥをＯＮ（日本語入力）した際、最初の１文字が入力されない。

col1	col2	col3
inputText	readonly	dropdown
inputText	readonly	dropdown

上記でcol1のinputTextにフォーカスだけを当て、「あいう」と入力すると
実際にセットされる値は「いう」となる。
ＩＭＥＯＦＦの場合は問題なく動作します。
「abc」と入力するとそのまま「abc」とセットされます。
ちなみに、セルをダブルクリックし、入力モードにすると日本語でも問題ありません。

解決策

色々考えた結果、フォーカスだけが当たった状態をなくしました。

afterSelectionEnd

afterSelectionEnd: function (r, c, r2, c2) {
    //単一セルが選択されたとき
    if (r != r2 || c != c2) {return;}

    //セルエディタが'textEditor'のみ強制的に入力モードにする
    //あらかじめ入力テキストのEditorをそろえて
    var celleditor = this.getCellEditor(r, c)
    if (celleditor == null) {return;}
    if (this.getCellMeta(r, c).readOnly) {return;}
    if (celleditor != 'textEditor') {return;}

    //強制入力モード
    var acteditor = this.getActiveEditor();
    var cellval = this.getValue();
    acteditor.beginEditing();
    this.setDataAtCell(r, c, cellval, 'system');
}

本来は、acteditor.beginEditing();するだけでよさそうなものでしたが、なぜか入力していた文字が消える現象が発生します。それも、消えるときと消えない時がある・・。
なので
var cellval = this.getValue();
で現在値を取得しておき、強制入力モードにしてから、再度現在値をセットしました。
これで、動き的には違和感がなくなりました。矢印キーでの移動も可能です。

ちなみに、acteditor.enableFullEditMode();を使えばよいという掲示板も見かけましたがそれだとうまく動作しません。
また、afterSelectionのイベントもありますが、afterSelectionEndのイベントでしかうまく動作しませんでした。

たぶん、hansontableを使うと同じ壁にぶつかる人がいてるとおもうので、何かのお役にたてればと思います・・。

前書き

そもそも、ここの回答を転記、加工して、動作を確認しただけです。
なぜ書き直したかといいますと、2013年の回答と、現在のバージョンが異なるから、
サンプルページが動作していなかったため、
そして、日本語での参考にできる記事がなかったため、検索性を考えて、転記しておこうということです。

ということなので、話はタイトルで分かったから、早くという人は本家からコピーしたほうが早いです。元のままでもちゃんと動きました。

もしくは、本番へどうぞ。

何がしたいか

jQuery UIのSliderという機能、ハンドル（値を持てる箇所）を複数指定する場合

$('#slider').slider({
    min : 0,
    max : 50,
    values : [0,10,20,30,40,50]
});

こんな感じで、指定してあげると、6つのハンドルができます。

このハンドルを、操作するには、

$('#slider').slider('option',{
    'values' : [5,15,25,35,45,50]
});

こんな感じで、指定すれば、ハンドルを操作することができます。

では、ハンドルの数を変化させたい場合は、

// 増やす？
$('#slider').slider('option',{
    'values' : [0,15,10,20,30,40,50]
});

// 減らす？
$('#slider').slider('option',{
    'values' : [0,10,20,30,40]
});

これだと、動かないです。
エラーは起きないのですが、
valuesは初期化したとき作られた、ハンドルは操作できますが、
後からハンドルの数の変動はできない仕様になっています。

今回は、これを、jQuery UI の拡張という手を使って、sliderにmethodを追加して解決しました。

本番

前書きが長くなりましたが、
では本番です。

環境

• Chrome 80.0.3987.132
• jQuery 3.3.1
• jQuery UI 1.12.1
  

いずれも、2020/03/05時点で最新版

コード

<!DOCTYPE html>
<html lang="ja-jp">
<head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="./css/jquery-ui.min.css">
    <link rel="stylesheet" type="text/css" href="./css/jquery-ui.structure.min.css">
    <style type="text/css">
        #slider {
            width: 500px;
            margin: 50px
        }
    </style>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<script src="./js/jquery-ui.min.js"></script>
<div id="slider"></div>
<div><button id="add_btn">追加</button><button id="remove_btn">削除</button></div>

    <script type="text/javascript">
// ハンドルの配列
var slider_handles = [0,10,20,30,40,50];
$(function(){
    // jQuery UI slider の拡張
    $.widget('my-namespace.slider', $.ui.slider, {
        addValue: function(val) {
            this.options.values.push(val);
            this._refresh();
        },
        removeValue: function() {
            this.options.values.pop();
            this._refresh();
        }
    });

    // sliderの初期化
    $('#slider').slider({
        min : 0,
        max : 100,
        values : slider_handles
    });

    // ボタンのイベントリスナ
    $('#add_btn').on('click', function(event) {
        // 一番最後にあるハンドルに+10した場所に新しく作る
        $('#slider').slider('addValue',slider_handles[slider_handles.length-1]+10);
    });
    $('#remove_btn').on('click', function(event) {
        // ハンドルを1つ削除
        $('#slider').slider('removeValue');
    });
});
    </script>
</body>
</html>

こんな感じです。上のソースはjQuery UIだけダウンロードしてきて、そのままコピペすれば動くはずです。

簡単に説明

    // jQuery UI slider の拡張
    $.widget('my-namespace.slider', $.ui.slider, {
        addValue: function(val) {
            this.options.values.push(val);
            this._refresh();
        },
        removeValue: function() {
            this.options.values.pop();
            this._refresh();
        }
    });

の部分で、sliderを拡張しています。addValueと、removeValueを追加しています。
大切なのは、this._refresh()だけです。
this._refresh()は、sliderの初期化時に、処理される部分で、一度sliderを破棄してから、作り直しています。

あとは、ボタンのイベントリスナーからそれぞれのメソッドを呼び出します。

// ボタンのイベントリスナー
    $('#add_btn').on('click', function(event) {
        $('#slider').slider('addValue',slider_handles[slider_handles.length-1]+10);
    });
    $('#remove_btn').on('click', function(event) {
       $('#slider').slider('removeValue');
    });

追加する方のイベントリスナーでは、新しいハンドルの場所をしてしなくてはいけないので、
サンプルとしては、とりあえず、今ある一番最後のハンドルの+10の位置に追加しています。

注意書き

元のsliderをオーバーライトして使ってる話

$.widget('my-namespace.slider', $.ui.slider, {});の部分は、
$.ui.sliderを継承して、my-namespace.sliderを新しく作っています。
今回は、そのまま同じ名前の、sliderを使っているので、何も気にせず、拡張されていますが、
この方法を使うと、拡張部分をコピーし忘れてソースコード中からほかのプログラムにコピペすると、動かないので、
$.widget('my-namespace.custom_slider', $.ui.slider, {});のように、
新しい名前を付けて使うのが普通見たいです。ただ、その場合、$(selector).slider();で書いているところをすべて、
$(slector).custom_slider();に書き換えて使ってください。
散々コードを書いてしまった後で、追加するようなときは、今回のようにすると、そのまま使えます。

配列をグローバルに置いている話

ハンドルの値をしまっている配列をグローバルに置いてるのは、今回わかりやすくするために置いただけで、
$('#slider').slider('values');に取得してあげれば、素直に配列で返ってくるので、グローバルを汚したくない人はこちらがいいかも。

ないのに削除したり、もう入らないのに追加できる話

removeでは、配列の中に１つもなくても、実行できています。
addでは、値がはみ出ても追加できています。
実際に使うときはアラート出すなりして、それぞれ工夫してください。

余談

要はthis._refresh()

this._refresh();だけで動くんだったら、refreshメソッドだけ拡張すればいい気もする。
今回私は、１行ずつの追加削除でよかったけれど、複数行扱うときは、そのほうがいい気がする。

array.pop()だけでは不満なら

頭から消したかったり、指定して削除したかったり、することもあるかも、と思った。今のところない。
実装が必要になったら、更新するかもしれない。

本家が実装してくれればいいのに

お願いします。

最後に

サンプルとして投稿しているコードは実際に使ったものを抽象化しているものです。
動作は保証しませんが、問題があれば、教えていただければ修正するかもしれません。

この投稿のコード権利を主張しませんので、適当にコピペして使って大丈夫です。

質問とか、適当こいてんじゃないよみたいなことがあれば、コメントいただければ。

JavaScriptのプロパティ¹には内部的に次の4つの属性が付与されているのはご存知でしょうか？

1. [[Value]]
2. [[Writable]]
3. [[Enumerable]]]
4. [[Configurable]]

普段、オブジェクトを扱っているときはあまり意識することがないものかも知れません。しかし、これらを理解しておくと、より細やかにプロパティの仕様を定義することができます。例えば、実行時に変更されてはまずいプロパティを保護したり、JSON.stringifyに特定のプロパティを含めないようにできたりと、一歩踏み込んだコーディングができるようになります。

これらのプロパティ属性は、Object.getOwnPropertyDescriptors()で簡単に調べることができます。

const obj = { foo: 1, bar: true }
console.log(Object.getOwnPropertyDescriptors(obj))

出力結果

{
  foo: { value: 1, writable: true, enumerable: true, configurable: true },
  bar: { value: true, writable: true, enumerable: true, configurable: true }
}

本稿では、この4つの属性のうち、writable、enumerable、configurableの3つについて説明します。

まとめ

先に結論を示しておきます。

• writable
  • プロパティの値を上書きできるか？
  • true: ミュータブルな値となり、代入演算が変更できる。
  • false: イミュータブルな値となり、代入演算ができなくなる。
• enumerable
  • プロパティを列挙できるか？
  • true: for .. inやObject.keys()、JSON.stringify()などの対象になる。
  • false: 上記の対象に含まれなくなる。
• configurable
  • プロパティの属性設定を変更できるか？
  • true: プロパティの属性の変更ができるようになり、deleteでプロパティの削除も可能。
  • false: 上記の操作ができなくなる。

writableとconfigurableの違いが気になるところですが、writableは値(value)の変更について作用し、configurableはプロパティ属性(writableやenumerable, configurableなど)を再設定できるかどうかに作用する点で異なります。

この2つを組み合わせることで、代入はできるけど、プロパティ属性の変更はできない、といった仕様にすることもできます。

オブジェクト属性を操作するには？

ここでは、オブジェクト属性を操作する方法を見ていきます。

プロパティ属性を変更するには？

すでに存在しているプロパティの属性を変更するには、Object.definePropertyメソッドを使います。第三引数に属性設定値を渡すと、それに沿った設定に変更されます。

const obj = { foo: 1 }
console.log(Object.getOwnPropertyDescriptor(obj, 'foo'))
//=> { value: 1, writable: true, enumerable: true, configurable: true }
//                         ^^^^              ^^^^                ^^^^

Object.defineProperty(obj, 'foo', {
    writable: false,
    enumerable: false,
    configurable: false,
})
console.log(Object.getOwnPropertyDescriptor(obj, 'foo'))
//=> { value: 1, writable: false, enumerable: false, configurable: false }
//                         ^^^^^              ^^^^^                ^^^^^

なお、属性値を一部省略した場合は、元の属性値が残ります。つまり、差分適用になります。

// writableだけ指定した場合
Object.defineProperty(obj, 'foo', { writable: false })
console.log(Object.getOwnPropertyDescriptor(obj, 'foo'))
//=> { value: 1, writable: false, enumerable: true, configurable: true }
//                         ^^^^^ ここだけ変更になる

プロパティを追加しながら属性を設定する

上では既存のプロパティの属性変更の操作でしたが、Object.definePropertyメソッドは、プロパティを追加しながら、その属性を定義することもできます。

const obj = { }
Object.defineProperty(obj, 'foo', {
    value: 1,
    writable: true,
    enumerable: true,
    configurable: true,
})
console.log(Object.getOwnPropertyDescriptor(obj, 'foo'))
//=> { value: 1, writable: true, enumerable: true, configurable: true }

ちなみに、これらの属性値を省くと、デフォルトでfalseになります。

const obj = { }
Object.defineProperty(obj, 'foo', { value: 1 })
console.log(Object.getOwnPropertyDescriptor(obj, 'foo'))
//=> { value: 1, writable: false, enumerable: false, configurable: false }

3つの属性

ここからは、writable、enumerable、configurableの3つの属性について見ていきます。

writable

writable属性は、オブジェクトプロパティの値を変更できるかの設定です。代入演算子をプロパティに対して使えるかということです。代入演算子とは、=をはじめ、+=や-=のことです。

writableをfalseにすることで、オブジェクトプロパティをイミュータブルにすることができます。

const obj = { foo: 1 }
Object.defineProperty(obj, 'foo', { writable: false }) // 書き込み不可に変更
obj.foo = 2 // 書き込みしてみる
console.log(obj)
//=> { foo: 1 }

writableがfalseの場合、代入演算は無視されます。

writableをfalseにしている身近な例は、Functionのnameプロパティです。

function foo() {}
console.log(foo.name) //=> foo
foo.name = 'hoge' // 変更は効かない
console.log(foo.name) //=> foo
console.log(Object.getOwnPropertyDescriptor(foo, 'name'))
//=> { value: 'foo', writable: false, enumerable: false, configurable: true }

Strictモードが有効になっている場合、無視ではなくTypeErrorが発生します。

"use strict"
const obj = { foo: 1 }
Object.defineProperty(obj, 'foo', { writable: false })
obj.foo = 2
//=> TypeError: Cannot assign to read only property 'foo' of object '#<Object>'

Object.assignによる値の変更は、Strictモードに限らず、TypeErrorが発生します。

const obj = { foo: 1 }
Object.defineProperty(obj, 'foo', { writable: false })
Object.assign(obj, { foo: 2 })
//=> TypeError: Cannot assign to read only property 'foo' of object '#<Object>'

enumerable

enumerable属性は、プロパティが列挙可能かどうかの設定です。列挙可能なプロパティはfor .. inやObject.keysなどに現れるようになります。

逆に、enumerableにfalseがセットされたプロパティは、Object.keysなどの対象にならなくなります。

const obj = { a: 1, b: 2, c: 3 }
Object.defineProperty(obj, 'a', { enumerable: false })
console.log(Object.keys(obj))
//=> [ 'b', 'c' ]

enumerableが活用されている身近な例としては、windowのプロパティです。DateやMapといった便利クラスは、windowオブジェクトのプロパティです。new window.Date()はnew Date()と同じです。windowオブジェクトのプロパティなら、windowをfor .. inで探したら見つかりそうですが、出てきません。これはwindow.Dateプロパティのenumerable属性がfalseになっているためです。

console.logでオブジェクトプロパティをデバッグすることがあると思いますが、enumerableがfalseだとconsole.logの結果にも現れなくなります。これを応用すると、デベロッパーに見せる必要のない内部プロパティを作るといったことができます。

const obj = { a: 1, b: 2, c: 3 }
Object.defineProperty(obj, 'a', { enumerable: false })
console.log(obj)
//=> { b: 2, c: 3 }

もちろん、見えなくなっただけで、プロパティへのアクセスはできます。

console.log(obj.a) //=> 1

他にもJSON.strigifyの結果にも現れなくなるので、JSONにエンコードされるべきでないプロパティにも応用可能です。

const obj = { a: 1, b: 2, c: 3 }
Object.defineProperty(obj, 'a', { enumerable: false })
console.log(JSON.stringify(obj))
//=> {"b":2,"c":3}

プロパティがenumerableかどうかは、Object.prototype.propertyIsEnumerableメソッドで手っ取り早く調べることができます。

const obj = { a: 1, b: 2, c: 3 }
Object.defineProperty(obj, 'a', { enumerable: false })
console.log(obj.propertyIsEnumerable('a')) //=> false
console.log(obj.propertyIsEnumerable('b')) //=> true

configurable

configurable属性は、プロパティの属性変更を許可するかどうかの設定です。Object.definePropertyで属性の操作ができることは先述しましたが、これが行えなくなるということです。

configurableをfalseにしている身近な例としては、Arrayのlengthプロパティがそうです。

const arr = [1, 2, 3]
console.log(Object.getOwnPropertyDescriptor(arr, 'length'))
//=> { value: 3, writable: true, enumerable: false, configurable: false }

configurableにfalseが設定されたプロパティの属性の特徴を見ていきましょう。

まず、属性を変更しようとすると、TypeErrorが発生します。

const obj = { foo: 1 }
Object.defineProperty(obj, 'foo', { configurable: false })
console.log(Object.getOwnPropertyDescriptor(obj, 'foo'))
//=> { value: 1, writable: true, enumerable: true, configurable: false }

Object.defineProperty(obj, 'foo', { enumerable: false }) // 設定変更を試みる
//=> TypeError: Cannot redefine property: foo

ただし、valueとwritable属性だけは変更可能です。

const obj = { foo: 1 }
Object.defineProperty(obj, 'foo', { configurable: false })
console.log(Object.getOwnPropertyDescriptor(obj, 'foo'))
//=> { value: 1, writable: true, enumerable: true, configurable: false }

Object.defineProperty(obj, 'foo', { value: 2, writable: false }) // この設定変更はOK
console.log(Object.getOwnPropertyDescriptor(obj, 'foo'))
//=> { value: 2, writable: false, enumerable: true, configurable: false }

一方で、writableがfalseの場合は、writable属性すらも変更できなくなります。つまり、configurableがfalseの場合、属性設定をゆるくすることはできないということです。

const obj = { foo: 1 }
Object.defineProperty(obj, 'foo', { writable: false, configurable: false })
console.log(Object.getOwnPropertyDescriptor(obj, 'foo'))
//=> { value: 1, writable: false, enumerable: true, configurable: false }

Object.defineProperty(obj, 'foo', { writable: true }) // 変更を試みる
//=> TypeError: Cannot redefine property: foo

さらに、deleteでプロパティを削除することが不可能になります。

const obj = { foo: 1 }
Object.defineProperty(obj, 'foo', { configurable: false })
console.log(Object.getOwnPropertyDescriptor(obj, 'foo'))
//=> { value: 1, writable: true, enumerable: true, configurable: false }

delete obj.foo // 効かない
console.log(obj.foo) //=> 1

Strictモードでプロパティ削除を試みるとTypeErrorが発生します。

"use strict"
const obj = { foo: 1 }
Object.defineProperty(obj, 'foo', { configurable: false })
console.log(Object.getOwnPropertyDescriptor(obj, 'foo'))
//=> { value: 1, writable: true, enumerable: true, configurable: false }

delete obj.foo 
//=> TypeError: Cannot delete property 'foo' of #<Object>

参考文献

• プロパティの列挙可能性と所有権 - JavaScript | MDN
• 6.1.7.1 Property Attributes - ECMAScript® 2020 Language Specification

---

1. 本稿では、データプロパティのことをプロパティということにします。アクセッサプロパティについては割愛します。 ↩