SourceMap(ソースマップ)ってなんぞ

gulpを使ってみて、gulp-sourcemapsというモジュールが便利そうだったので調べたことをメモ。そもそもSouceMapとは何か。

ソースマップとは

ブラウザで利用されているJavaScriptはコンパイルされているが、何かエラーが起こった際に、コンパイルされたままだとエラー箇所がよくわからず、不便。そのため、最適化やコンパイルされる前のJavaScriptを保持したソースファイルを作っておくと、後々便利、といったもの。

A source map is a file that maps from the transformed source to the original source, enabling the browser to reconstruct the original source and present the reconstructed original in the debugger.
To enable the debugger to work with a source map, you must:
generate the source map
– generate the source map
– include a comment in the transformed file, that points to the source map. The comment’s syntax is like this:
//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map
Use a source map

意訳：
ソースマップはオリジナルファイルから変換されたソースをマップしたファイルで、ブラウザがオリジナルのソースを再構築し、その再構築されたオリジナルをデバッガーに表示できるようにするものだ。
ソースマップでそのデバッガーを有効にするには、ソースマップを生成する必要がある。

まず、ソースマップを生成
再構築されたファイル内に、ソースマップを指定するコメントを記述

コメントは以下の形式

//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map

こうなることも想定

//# sourceMappingURL=main.js.map

動画でも解説あり。
https://youtu.be/Fqd15gHC4Pg

In the video above we load https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html. This page loads a source called “main.js” that was originally written in CoffeeScript and compiled to JavaScript. The compiled source contains a comment like this, that points to a source map:
//# sourceMappingURL=main.js.map
In the Debugger’s source list pane, the original CoffeeScript source now appears as “main.coffee”, and we can debug it just like any other source.
Use a source map

以下も意訳。元記事・動画はFirefoxを使っているが、意訳ではChromeを使用した場合の記載に書き換えている。

例えば、こちらのサンプルページ。
https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html

検証ツール-> Sources　を開き、jsフォルダの中身を見てみよう。
このページでは、もともとCoffeeScriptで書かれ、コンパイルされたmain.jsというJavaScriptを読み込んでいる。このコンパイルされたソースコードには以下のコメントが挿入されており、これがソースマップを指しているのだ。

//# sourceMappingURL=main.js.map

デバッガーのSourcesパネルには、オリジナルのソースであるmain.coffeeが表示されており、まるで別のソースをいじるかのようにして、我々はこのソースをデバッグできるのである。

以上メモおしまい

[node.js]バージョン切り替え方法

node.jsバージョン切り替え方法

npm run dev

(thread_id_key != 0x7777), function find_thread_id_key, file ../src/coroutine.cc, line 134

複数のプロジェクトを扱うようになると、プロジェクトごとにnode.jsのバージョンを切り替えなければならないシーンが出てきます。上記のエラーは、現在使用しているnode.jsのバージョンが合わなかった際に出てきたエラー。

別のプロジェクトのブランチを切ってきて、npm run devした時のものです。

いろいろ調べてみて、nodeのバージョンを落としたりfiber取り除いたりしてみたのですが解決せず…。

結局、上司に泣きついて解決した作業工程をまとめておきます。

※当方Max OS　11.2.3使用

問題はnode.jsのバージョンにあった！

結論から言うと、今回の問題はプロジェクトにマッチしないnode.jsを使用していることがエラーの原因でした。というわけで、パッケージマネジャを使用し、プロジェクトにマッチしたnode.jsに切り替えます。

node.jsのバージョン管理には、nodebrewを使用する方法や、nodenvを使用する方法など、いろいろあります。

プロジェクトによって使用しているパッケージのバージョンは異なるため、それに合わせたnode.jsを使用する際、こうしたパッケージマネジャを使えば簡単にnode.jsのバージョンが切り替えられるというわけです。

今回は、nodenvを使用してnode.jsのバージョンを切り替える方法を記載します。

nodenv,anydenvが入っていることを前提として書き進めます。双方のインストール方法はこちらから

MacにNode.jsをインストール（anyenv + nodenv編） – Qiita

nodenvを使用してnode.jsのバージョンを切り替える

node.jsのバージョン確認は、 node -vでできます。

@MeowBook nks-frontend % node -v
v15.14.0

つづいて nodenvででコマンドを確認。

@MeowBook nks-frontend % nodenv
nodenv 1.4.0+3.631d0b6
Usage: nodenv <command> [<args>]

Some useful nodenv commands are:
   commands    List all available nodenv commands
   local       Set or show the local application-specific Node version
   global      Set or show the global Node version
   shell       Set or show the shell-specific Node version
   install     Install a Node version using node-build
   uninstall   Uninstall a specific Node version
   rehash      Rehash nodenv shims (run this after installing executables)
   version     Show the current Node version and its origin
   versions    List installed Node versions
   which       Display the full path to an executable
   whence      List all Node versions that contain the given executable

See `nodenv help <command>' for information on a specific command.
For full documentation, see: <https://github.com/nodenv/nodenv#readme>

nodenv versions で既にインストール済みのバージョンを確認。

@MeowBook nks-frontend % nodenv versions
  system
* 15.14.0 (set by /Users/ｘｘｘ/Documents/ｘｘｘ-frontend/.node-version)
  16.0.0
  16.2.0

つづいてnodenv install --list で、node.jsインストール時に登録されたバージョンを確認します。

@MeowBook nks-frontend % nodenv install --list
0.1.14
0.1.15
0.1.16
0.1.17
0.1.18

中略

15.13.0
15.14.0
16.0.0
16.1.0
16.2.0
chakracore-dev
chakracore-nightly
chakracore-8.1.2

中略

この時点で任意のバージョンが表示されていなければ`anyenv update `でリストをアプデし、再度`nodenv install --list `で任意バージョンがインストールされていることを確認。

anyenvについてはこちら。

nodenv,anydenvを使ったNode.jsのアップデート

任意のバージョンが表示されていることを確認したら、

nodenv install 16.1.0 のようにバージョンを指定し、node.jsをインストールします。

@MeowBook xxx-frontend % nodenv install 16.1.0 
Downloading node-v16.1.0-darwin-arm64.tar.gz...
-> <https://nodejs.org/dist/v16.1.0/node-v16.1.0-darwin-arm64.tar.gz>
Installing node-v16.1.0-darwin-arm64...
Installed node-v16.1.0-darwin-arm64 to /Users/xxx/.anyenv/envs/nodenv/versions/16.1.0

nodenv local 16.1.0 カレントディレクトリで適用したいバージョンを指定し、設定したら、最後にnode -v できちんと設定できているか確認。

@MeowBook ｘｘｘ-frontend % nodenv local 16.1.0  
@MeowBook ｘｘｘ-frontend % node -v              
v16.1.0

npm install で消したnode_modulesを再ダウンロードし、npm dev runでページが見られるか確認しましょう。

補足：vueとvue-template-compilerのバージョンが合わないよ！と言うエラーが出ることがあります。

その際は、package.jsonのdependenciesオブジェクト内のバージョン部分を変更し、古い方のバージョンを新しいバージョンの数値に合わせましょう。

"dependencies": {
  "@nuxtjs/axios": "^5.3.6",
  "@nuxtjs/device": "^1.2.7",
  "@nuxtjs/markdownit": "^1.2.9",
  "@nuxtjs/pwa": "^3.0.0-0",
  "axios": "^0.19.0",
  "chart.js": "^2.8.0",
  "chartjs-plugin-annotation": "^0.5.7",
  "chartjs-plugin-datalabels": "^1.0.0"
  , "cookie-universal-nuxt": "^2.0.18",
  "cookieparser": "^0.1.0",
  "crypto-js": "^4.0.0",
  "flatpickr": "^4.6.3",
  "js-cookie": "^2.2.1",
  "markdown-it-toc": "^1.1.0",
  "nuxt": "^2.0.0",
  "tabulator-tables": "^4.4.3",
  "vanilla-autokana": "^1.1.6",
  "vue": "^2.6.14", // ここか
  "vue-chartjs": "^3.4.2",
  "vue-flatpickr-component": "^8.1.4",
  "vue-server-renderer": "^2.6.14",
  "vue-template-compiler": "^2.6.14", // ここ
  "vuetify": "^2.2.11",
  "vuex-persistedstate": "^2.5.4",
  "vuex-shared-mutations": "^1.0.2"
},

おしまい

[Nuxt.js]フィルターを作成する

Nuxtのファイル構成を意識したNuxt.jsでのフィルターの作成方法です。Vueのやり方だと上手く行かなかったため、備忘録。

グローバルフィルター

pluginsディレクトリ内にjsフォルダを作成し、どのページでもフィルタが読み込めるようにする方法です。今回は、数字を3桁ごとにカンマで区切るフィルタと、英語の文字列を全て大文字にするフィルタを作成します。

詳しく

まずはpagesディレクトリ内にfilter.vueの雛形を作成します。

<template>
  <div>
    <Header />
    <v-container>
      <!-- local filter -->
      <h2>Mustash</h2>
      <p>{{ price | numberFormat }}</p>
      <p>{{ text | toUpperCase }}</p>
      <h2>b-vind</h2>
      <input type="text" :value="price | numberFormat" />
      <input type="text" :value="text | toUpperCase" />
    </v-container>
  </div>
</template>


<script>
export default {
    data() {
      return {
        price: 25400,
        text: 'Hello, Nuxt.js!',
    }
  },
}
</script>

グローバルフィルターはpluginsディレクトリ内にjsフォルダを作成し、その中にフィルターの機能を記述します。

import Vue from 'vue'

Vue.filter('toUpperCase', (value) => {
  return value.toUpperCase()
})

Vue.filter('numberFormat', (value) => {
  return value.toLocaleString()
}

最後に、nuxt.config.jsにグローバルフィルタの場所を追記します。

export default {
  plugins: [ { src: '~plugins/filter.js' } ],
}

ローカルフィルター

ローカルフィルターは、pagesディレクトリ内の各ページに定義するそのページ限定のフィルターです。せっかくなので、次は長い文字列を短く表現し、省略した以降の文字は「…」と表現させる「引数あり」のフィルターを作成します。

これを

こう

詳しく

まずは雛形を作成します。

<template>
  <div>
    <v-container>
      <p>{{ longText }}</p>
    </v-container>
  <Footer />
  </div>
</template>

<script>
export default {
  data() {
    return {
      longText:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
    }
  },
}
</script>

この時点ではこれです。

フィルターを加えます。

<script>
export default {
  filters: {
    readMore: (text, length, suffix) => {
      return text.substring(0, length) + suffix
    },
  }

  data() {
 　　// 省略
}
</script>

readMoreの第一引数が適用する文字列、lengthが長さ、suffixが接尾辞です。

文字列textに対し.substringメソッドで0番目の文字から第二引数で渡した文字数（length）の、文字列の部分集合を返し、最後に指定したsuffixを加える、という処理が書かれています。

上記フィルターをlongTextに適用すると、コード全文は下記のようになります。

<template>
  <div>
    <v-container>
      <p>{{ longText | readMore(20, '...') }}</p> // フィルタを適用
    </v-container>
  <Footer />
  </div>
</template>

<script>
export default {
  filters: {
    readMore: (text, length, suffix) => {
      return text.substring(0, length) + suffix
    },
  }

  data() {
    return {
      longText:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
    }
  },
}
</script>

フィルターでは第三引数まで指定していたのに、textの引数は書かれていないことに注意してください。

フィルターはv-bind式でもできる

mustache構文を使わないでフィルターを適用させたい時もあるかと思います。2.1.0以降でサポート。

https://jp.vuejs.org/v2/guide/filters.html

<!-- mustaches -->
{{ message | capitalize }}

<!-- v-bind -->
<div v-bind:id="rawId | formatId"></div>

v-bind式の構文は、

です。

おしまい

[VSCode] Live Serverを使ってHTMLコーディングを快適に！

以前、VSCodeの初期設定をする際、おすすめの拡張をご紹介しました。

https://nolyc.net/vscode-install/

あれから、JavaScriptでクイズゲームやカレンダーをいそいそと作り勉強しています。

カレンダーの作り方はこの動画がおすすめ！英語ですが、動画を見ながらメソッドを調べていけば比較的簡単に理解できると思います。

そして、こちらの動画を見ていて知ったのがLive Server。Visual Studio Codeの拡張機能で、HTMLやCSSを修正すると自動的にブラウザがリロードされ、表示のされ方を即座に確認できるというわけです。言ってしまえば簡易ローカルサーバ。ライブコーディングとも言うんですね。

インストール方法は簡単。左側のメニューから拡張メニューを選択し（画像①）、live serverを検索（画像②）。

あとはインストールするだけです！

もし調子が悪いようなら、VS Codeを一度再起動してみましょう。

HTMLファイルを任意のブラウザで開き、中のソースをいじってみたら、きちんと動いているかどうかを確認できるはずです。

ではでは。備忘録でした。