Life

HP OMEN45Lの電源交換

  • このエントリーをはてなブックマークに追加

去年ゲーミングPCを購入していたのですが、最近ゲームをやっていると電源が落ちる。
そして電源が落ちた後は放電をしないと暫く電源が付かない事象が頻繁に発生していました。

最初は温度かなと思っていたのですが、最近のグラボは瞬間的に電力が必要になることがあるらしく、電源が怪しいと思い電源を買い換えました。

HP OMEN 45Lの性能

  • CPU: Core i7 12700K
  • メモリ: DDR4-3733 16GB x2
  • グラボ: RTX 3080 Ti 12GB
  • SSD: WD_Black SN850 (2TB)
  • 電源800W GOLD(クーラーマスター製)

この機種と同じです。

ここにSSDを1つ追加とメモリを32GB*2を追加しています。
また、周辺機器としてSound Blaster GC7とDEPSTECHのWebカメラを接続しています。

購入した電源

同じくクーラーマスター製のATX3.0に対応した1250Wの電源です。同じメーカーでATX3.0に対応した電源がこれしかありませんでした。ATX3.0にした理由は瞬間的な消費電力にも耐えられる規格に沿っているからです。
MWE Gold V2 FM 1250W ATX3.0 MPE-C501-AFCAG-3JP

電源が接続できない

HP OMENのマザーボードが特殊で付属品だけでは取り付け不可能です。
この電源にはCPU用の補助電源ケーブルとして8ピンが1つ、4ピン+４ピンが1つ付いています。
OMENのマザーボード側は4ピンが2つです。

4PIN+4PINの形状は通常以下の形式です。（●は台形の形です）
黒い■●はオスピンで、自分側を向いている状態です。（刺す時は反転します）

爪  爪
●■　●●
■●　●●

8PINの形状は以下の形式です。

●■■●
■●●■

この向きを無視して接続するとショートしてしまいます。

OMENのマザーボードは

　　　爪
　　　◻︎⚪︎
　　　⚪︎◻︎

⚪︎◻︎
◻︎⚪︎爪

向きを揃えると

爪　　爪
◻︎⚪︎　◻︎⚪︎
⚪︎◻︎　⚪︎◻︎

さらに電源付属の4+4ケーブルは通常の4+4の形状ではなく、4+4のくせに8ピンの以下の形式でした。通常4+4の場合であれば片側が全部●なので入るのですが、この形式では片方は入るけど片方は入らないということに。

●■■●
■●●■

解決策

4ピンの延長ケーブルを買っても形状の変換ができないのでダメです。
8ピンを12ピンに増やすケーブルを使います。
これを購入しました。

これを使う事で、以下の4+4+4の形式になります。

●■■● ●■
■●●■ ■●

つまり、以下の形状が２つできます。

●■
■●

このオスピンであればマザーボード側のメスピンに刺すことができます。（刺すときは向きがくるりと反転するので以下のようになり刺すことができます）

■● ⇒ ◻︎⚪︎
●■ ⇒ ⚪︎◻︎

罠が多すぎる…
電源を交換してからは落ちなくなりました。

Life

有機ELのゲーミングモニター(ASUS PG27AQDM)を購入

  • このエントリーをはてなブックマークに追加

買ったやつはこれです。
現時点で有機ELのゲーミングモニタはこれの他にLGのがもう1つ、2種類しか販売していません。
どちらも240Hz1対応の有機ELパネルです。

パソコン工房で買いました。
店舗に行ったときは売り切れだったのですが別店舗に在庫があるとのことで、10秒ほど悩みましたがその場で買いました。ゴールデンウィーク中に使いたかったむねを伝えると、どうにかこうにか早く到達するように手配をしてくれて、その日はもうお店が閉まるくらいの時間だったのに、結果として翌々日には届きました。感謝しかない！

ドライバのインストールもしましょう。

ついでにメモリとSSDも買いました。

Tech

reviewdog/stylelintが動かない

  • このエントリーをはてなブックマークに追加

reviewdog便利です。
stylelint用のactionがあるので、設定してみたのですがStylelintでひっかかるコードをPushしても報告してくれません。

該当コードは以下のようになっています。

entrypoint.sh
if [ "${INPUT_REPORTER}" == 'github-pr-review' ]; then
  # Use jq and github-pr-review reporter to format result to include link to rule page.
  $(npm bin)/stylelint "${INPUT_STYLELINT_INPUT:-'**/*.css'}" --config="${INPUT_STYLELINT_CONFIG}" --ignore-pattern="${INPUT_STYLELINT_IGNORE}" -f json \
    | jq -r '.[] | {source: .source, warnings:.warnings[]} | "\(.source):\(.warnings.line):\(.warnings.column):\(.warnings.severity): \(.warnings.text) [\(.warnings.rule)](https://stylelint.io/user-guide/rules/\(.warnings.rule))"' \
    | reviewdog -efm="%f:%l:%c:%t%*[^:]: %m" -name="${INPUT_NAME:-stylelint}" -reporter=github-pr-review -level="${INPUT_LEVEL}" -filter-mode="${INPUT_FILTER_MODE}" -fail-on-error="${INPUT_FAIL_ON_ERROR}"
else
  $(npm bin)/stylelint "${INPUT_STYLELINT_INPUT:-'**/*.css'}" --config="${INPUT_STYLELINT_CONFIG}" --ignore-pattern="${INPUT_STYLELINT_IGNORE}" \
    | reviewdog -f="stylelint" -name="${INPUT_NAME:-stylelint}" -reporter="${INPUT_REPORTER:-github-pr-check}" -level="${INPUT_LEVEL}" -filter-mode="${INPUT_FILTER_MODE}" -fail-on-error="${INPUT_FAIL_ON_ERROR}"
fi

reporterにgithub-pr-reviewを設定した場合は動きますが、このモードはBotがレビュワーに入ってくるやつなのでgithub-or-checkを使いたい。そうすると、elseの方が実行されるわけですが、stylelintの結果をreviewdog -f=stylelint につなげても何も出力されません。
debugのためにteeオプションを付けると元の出力は表示されるので、Stylelint自体は動作しています。もしreviewdogも正しく処理されれば二重で表示されます。

npx stylelint "**/*.css" | reviewdog -f=stylelint -reporter=local -level=error -filter-mode=nofilter --tee

結論から言えば、--no-colorを指定する必要がありました。が、今のバージョンでは--no-colorを指定することができません。

npx stylelint "**/*.css" --no-color | reviewdog -f=stylelint -reporter=local -level=error -filter-mode=nofilter --tee

なので、このActionを使わずに、自分でLintを実行し、reviewdogにつなげる必要があります。

steps:
  - uses: actions/checkout@v2
    with:
      fetch-depth: 0
  - uses: actions/setup-node@v2
    with:
      node-version: '16'
      cache: npm
      cache-dependency-path: |
        package-lock.json
  - run: npm ci
  - uses: reviewdog/action-setup@v1
  - run: reviewdog -version
  - name: stylelint
    env:
      # reviewdogはこの環境変数でTokenを参照する
      REVIEWDOG_GITHUB_API_TOKEN: ${{ secrets.GITHUB_TOKEN }}
    run: |
      npx stylelint "**/*.css" --no-color \
        | reviewdog -f="stylelint" -name="stylelint" -reporter="github-pr-check" -level="error" -filter-mode="nofilter" -fail-on-error="false"

これでreviewdogがannotationを付けたりと正しく報告してくれるようになりました。
※reviewdogのオプションは必要に応じて変更してください。

参考情報

Tech►VueJS

Vue3でaxiosをMock化する

  • このエントリーをはてなブックマークに追加

APIのアクセスはaxiosでコールするけど、開発中はMockに差し替えるということをします。

mockにはaxios-mock-adapterを利用します。

mock.js
import MockAdapter from 'axios-mock-adapter'
const data = { world: "world" }
export default {
  run(client) {
    const mock = new MockAdapter(client, {delayResponse: 300})
    mock.onGet("/api/hello").reply(200, data)
  }
}

delayResponseを設定することで意図的に遅くすることができます。

mockの色々な書き方

直接JSONを返す

mock.onGet("/api/hello").reply(200, { hello: "world" })

関数の実行

mock.onGet("/api/hello").reply((config) => {
  return [200, { hello: "world" }];
});

Queryの処理

ややこしいのは、config.paramsではないと言うことです。
/api/hello?name=taroとリクエストする場合は、正規表現で/\/api\/hello\?.*/と指定する必要があります。ここは良い感じに処理して欲しいですね…。なので、

function parseQueryString(url) {
    const queryString = url.replace(/.*\?/, '')

    const result = {}
    if (queryString === url || !queryString) {
        return result
    }

    const urlParams = new URLSearchParams(queryString)
    urlParams.forEach((val, key) => {
        if (Object.prototype.hasOwnProperty.call(result, key)) {
            result[key] = [result[key], val]
        } else {
            result[key] = val
        }
    });

    return result
}

mock.onGet(/\/api\/hello2?.*/).reply((config) => {
  const params = parseQueryString(config.url)
  return [200, { config, params }]
})

postされた内容を見る。FormDataの場合。

const formData = new FormData();
formData.append("name", "taro");
formData.append("flag1", "true");
const resp = await $client.post("/api/formPost", formData, {});
mock.onPost("/api/post").reply(config => {
  const formData = config.data
  const name = formData.get("name")
  ...
})

PostされたJSONを見る

const resp = await $client.post("/api/postJson", {
  name: "hello",
  message: "world",
});

config.dataは文字列なのでJSON.parseする。

mock.onPost("/api/postJson").reply((config) => {
  const data = JSON.parse(config.data);
  return [200, { data }];
});

わざとDelayさせる

delayResponseの全体設定とは別に、個別にDelayさせる。
Promiseを返して、setTimeoutが終わった時にresolveする。

mock.onGet("/api/delayHello").reply((config) => {
  const delay = 5000;
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve([200, { hello: "world" }]);
    }, delay);
  });
});

関連記事

参考情報

Tech►VueJS

Vue3でGlobalなFiltersの実現

  • このエントリーをはてなブックマークに追加

Vue3+CompositionAPIを使っていますが、MixinやFilterが無くなったのでその代替をどうするか。

Filterの代わり

globalPropertiesを使います。
globalPropertiesに登録したものは、Templateからそのまま参照できます。

main.js
const app = createApp(App)
app.config.globalProperties.$filters = {
  formatNumber(number) {
    return Number(number).toLocaleString("en-US", {
      maximumFractionDigits: 20
    })
  }
};
app.mount("#app")
template
{{ $filters.formatNumber(num) }}

setup()からの参照

setup()内では$filtersでは参照できません。参照したい場合は、次のようにgetCurrentInstance()を利用します。

import { defineComponent, getCurrentInstance } from "vue"
export default defineComponent({
  setup() {
    const app = getCurrentInstance()
    const $filters = app.appContext.config.globalProperties.$filters
  }
})

sample-code: https://codesandbox.io/s/upbeat-mcnulty-mxi7i?file=/src/App.vue

provide/ inject

もしくは、設計思想的にはprovide, injectを利用するのがよさそうです。

main.js
app.provide("$filters", app.config.globalProperties.$filters)
setup() {
  const $filters = inject("$filters")
}

キーは文字列じゃなくて、exportしたSymbolにするのが良さそう。

参考情報

Hexo

HexoでNodeのバージョンを上げたらWarningが出るようになった

  • このエントリーをはてなブックマークに追加

Hexoが利用しているNodeのバージョンを12.16.1から16.5.0にあげたら次の警告が出るようになった。
Hexoのバージョンは5.4.0です。

(node:6910) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency
(Use `node --trace-warnings ...` to show where the warning was created)
(node:6910) Warning: Accessing non-existent property 'column' of module exports inside circular dependency
(node:6910) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency
(node:6910) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency
(node:6910) Warning: Accessing non-existent property 'column' of module exports inside circular dependency
(node:6910) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency

--trace-warningsを付けて実行したところ、次の結果が得られた。どうやら、Stylusがよろしくないらしい。

(node:2398) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency
    at emitCircularRequireWarning (node:internal/modules/cjs/loader:701:11)
    at Object.get (node:internal/modules/cjs/loader:715:5)
    at Boolean.Node [as constructor] (/mnt/wsl/git-repos/github.com/tamtam180/tamtam180.github.io/blog/node_modules/nib/node_modules/stylus/lib/nodes/node.js:42:23)
    at new Boolean (/mnt/wsl/git-repos/github.com/tamtam180/tamtam180.github.io/blog/node_modules/nib/node_modules/stylus/lib/nodes/boolean.js:23:8)
    at Object.<anonymous> (/mnt/wsl/git-repos/github.com/tamtam180/tamtam180.github.io/blog/node_modules/nib/node_modules/stylus/lib/nodes/index.js:57:16)
    at Module._compile (node:internal/modules/cjs/loader:1095:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1124:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:816:12)
    at Module.require (node:internal/modules/cjs/loader:999:19)
    at require (node:internal/modules/cjs/helpers:93:18)
    at Object.<anonymous> (/mnt/wsl/git-repos/github.com/tamtam180/tamtam180.github.io/blog/node_modules/nib/node_modules/stylus/lib/lexer.js:13:13)
    at Module._compile (node:internal/modules/cjs/loader:1095:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1124:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:816:12)
(node:2398) Warning: Accessing non-existent property 'column' of module exports inside circular dependency
    at emitCircularRequireWarning (node:internal/modules/cjs/loader:701:11)
    at Object.get (node:internal/modules/cjs/loader:715:5)
    at Boolean.Node [as constructor] (/mnt/wsl/git-repos/github.com/tamtam180/tamtam180.github.io/blog/node_modules/nib/node_modules/stylus/lib/nodes/node.js:43:23)
    at new Boolean (/mnt/wsl/git-repos/github.com/tamtam180/tamtam180.github.io/blog/node_modules/nib/node_modules/stylus/lib/nodes/boolean.js:23:8)
    at Object.<anonymous> (/mnt/wsl/git-repos/github.com/tamtam180/tamtam180.github.io/blog/node_modules/nib/node_modules/stylus/lib/nodes/index.js:57:16)
    at Module._compile (node:internal/modules/cjs/loader:1095:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1124:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:816:12)
    at Module.require (node:internal/modules/cjs/loader:999:19)
    at require (node:internal/modules/cjs/helpers:93:18)
    at Object.<anonymous> (/mnt/wsl/git-repos/github.com/tamtam180/tamtam180.github.io/blog/node_modules/nib/node_modules/stylus/lib/lexer.js:13:13)
    at Module._compile (node:internal/modules/cjs/loader:1095:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1124:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:816:12)
(node:2398) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency
    at emitCircularRequireWarning (node:internal/modules/cjs/loader:701:11)
    at Object.get (node:internal/modules/cjs/loader:715:5)
    at Boolean.Node [as constructor] (/mnt/wsl/git-repos/github.com/tamtam180/tamtam180.github.io/blog/node_modules/nib/node_modules/stylus/lib/nodes/node.js:44:25)
    at new Boolean (/mnt/wsl/git-repos/github.com/tamtam180/tamtam180.github.io/blog/node_modules/nib/node_modules/stylus/lib/nodes/boolean.js:23:8)
    at Object.<anonymous> (/mnt/wsl/git-repos/github.com/tamtam180/tamtam180.github.io/blog/node_modules/nib/node_modules/stylus/lib/nodes/index.js:57:16)
    at Module._compile (node:internal/modules/cjs/loader:1095:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1124:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:816:12)
    at Module.require (node:internal/modules/cjs/loader:999:19)
    at require (node:internal/modules/cjs/helpers:93:18)
    at Object.<anonymous> (/mnt/wsl/git-repos/github.com/tamtam180/tamtam180.github.io/blog/node_modules/nib/node_modules/stylus/lib/lexer.js:13:13)
    at Module._compile (node:internal/modules/cjs/loader:1095:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1124:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:816:12)
(node:2398) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency
    at emitCircularRequireWarning (node:internal/modules/cjs/loader:701:11)
    at Object.get (node:internal/modules/cjs/loader:715:5)
    at Boolean.Node [as constructor] (/mnt/wsl/git-repos/github.com/tamtam180/tamtam180.github.io/blog/node_modules/nib/node_modules/stylus/lib/nodes/node.js:42:23)
    at new Boolean (/mnt/wsl/git-repos/github.com/tamtam180/tamtam180.github.io/blog/node_modules/nib/node_modules/stylus/lib/nodes/boolean.js:23:8)
    at Object.<anonymous> (/mnt/wsl/git-repos/github.com/tamtam180/tamtam180.github.io/blog/node_modules/nib/node_modules/stylus/lib/nodes/index.js:58:17)
    at Module._compile (node:internal/modules/cjs/loader:1095:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1124:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:816:12)
    at Module.require (node:internal/modules/cjs/loader:999:19)
    at require (node:internal/modules/cjs/helpers:93:18)
    at Object.<anonymous> (/mnt/wsl/git-repos/github.com/tamtam180/tamtam180.github.io/blog/node_modules/nib/node_modules/stylus/lib/lexer.js:13:13)
    at Module._compile (node:internal/modules/cjs/loader:1095:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1124:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:816:12)
(node:2398) Warning: Accessing non-existent property 'column' of module exports inside circular dependency
    at emitCircularRequireWarning (node:internal/modules/cjs/loader:701:11)
    at Object.get (node:internal/modules/cjs/loader:715:5)
    at Boolean.Node [as constructor] (/mnt/wsl/git-repos/github.com/tamtam180/tamtam180.github.io/blog/node_modules/nib/node_modules/stylus/lib/nodes/node.js:43:23)
    at new Boolean (/mnt/wsl/git-repos/github.com/tamtam180/tamtam180.github.io/blog/node_modules/nib/node_modules/stylus/lib/nodes/boolean.js:23:8)
    at Object.<anonymous> (/mnt/wsl/git-repos/github.com/tamtam180/tamtam180.github.io/blog/node_modules/nib/node_modules/stylus/lib/nodes/index.js:58:17)
    at Module._compile (node:internal/modules/cjs/loader:1095:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1124:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:816:12)
    at Module.require (node:internal/modules/cjs/loader:999:19)
    at require (node:internal/modules/cjs/helpers:93:18)
    at Object.<anonymous> (/mnt/wsl/git-repos/github.com/tamtam180/tamtam180.github.io/blog/node_modules/nib/node_modules/stylus/lib/lexer.js:13:13)
    at Module._compile (node:internal/modules/cjs/loader:1095:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1124:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:816:12)
(node:2398) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency
    at emitCircularRequireWarning (node:internal/modules/cjs/loader:701:11)
    at Object.get (node:internal/modules/cjs/loader:715:5)
    at Boolean.Node [as constructor] (/mnt/wsl/git-repos/github.com/tamtam180/tamtam180.github.io/blog/node_modules/nib/node_modules/stylus/lib/nodes/node.js:44:25)
    at new Boolean (/mnt/wsl/git-repos/github.com/tamtam180/tamtam180.github.io/blog/node_modules/nib/node_modules/stylus/lib/nodes/boolean.js:23:8)
    at Object.<anonymous> (/mnt/wsl/git-repos/github.com/tamtam180/tamtam180.github.io/blog/node_modules/nib/node_modules/stylus/lib/nodes/index.js:58:17)
    at Module._compile (node:internal/modules/cjs/loader:1095:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1124:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:816:12)
    at Module.require (node:internal/modules/cjs/loader:999:19)
    at require (node:internal/modules/cjs/helpers:93:18)
    at Object.<anonymous> (/mnt/wsl/git-repos/github.com/tamtam180/tamtam180.github.io/blog/node_modules/nib/node_modules/stylus/lib/lexer.js:13:13)
    at Module._compile (node:internal/modules/cjs/loader:1095:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1124:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:816:12)

依存関係

依存関係を調べます。Hexoのpackage.jsonは次のようになっています。

package.json
{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "build": "hexo generate",
    "clean": "hexo clean",
    "deploy": "hexo deploy",
    "server": "hexo server"
  },
  "hexo": {
    "version": "5.4.0"
  },
  "dependencies": {
    "hexo": "^5.4.0",
    "hexo-deployer-git": "^3.0.0",
    "hexo-generator-archive": "^1.0.0",
    "hexo-generator-category": "^1.0.0",
    "hexo-generator-feed": "^3.0.0",
    "hexo-generator-index": "^2.0.0",
    "hexo-generator-search": "^2.4.0",
    "hexo-generator-sitemap": "^2.0.0",
    "hexo-generator-tag": "^1.0.0",
    "hexo-related-popular-posts": "^5.0.1",
    "hexo-renderer-ejs": "^1.0.0",
    "hexo-renderer-marked": "git+https://github.com/tamtam180/hexo-renderer-marked.git#feature/use-class-table-align",
    "hexo-renderer-stylus": "^2.0.1",
    "hexo-server": "^2.0.0"
  }
}

hexo-renderer-stylusはstylus@0.54.8を利用していますが、nibの現時点での最新バージョンである1.1.2では古いStylus0.54.5を見ています。これが良くない。nibのmasterブランチを見ると、このコミットで0.54.8を使うようになっていますが、このリビジョンが取り込まれているバージョンはまだリリースされていません。

"hexo-renderer-stylus": "^2.0.1"
  "nib": "^1.1.2"
    "stylus": "^0.54.5"  # これが問題
  "stylus": "^0.54.8"

ワークアラウンド

package-lock.jsonで解決されたバージョンを直接弄ってしまい、nibが新しいバージョンのStylusを参照するようにすることで回避できます。

参考情報

Tech

nodejsのsemverまとめ

  • このエントリーをはてなブックマークに追加

semverの解釈がエコシステムによって異なったりする場合があるので、nodejs(npm)の場合を備忘録メモ。

3桁の数字で表現：x.y.z。

  • 最初の桁はメジャーバージョン
  • 2桁目はマイナーバージョン
  • 3桁目はパッチバージョン

バージョンの上げ方

  • 互換性のないAPIを変更する場合、メジャーバージョンをアップ
  • 下位互換性のある方法で機能を追加する場合、マイナーバージョンをアップ
  • 下位互換性のあるバグ修正を行う場合、パッチバージョンがアップ

バージョン表記の記号

  • ^: 一番左にあるゼロ以外の数値を変更しない

    • ^1.2.3 => 1.2.3 <= version < 2.0.0
    • ^0.13.0 => 0.13.0 <= version < 0.14.0
    • 0.xの場合とそれ以外とでルールが異なるので注意。

  • ~: 一番右のバージョンがあがる

    • ~1.2.3 => 1.2.3 <= version < 1.3.0
    • ~1.2 => 1.2.0 <= version < 1.3.0, 1.2.xと同じ。
    • ~1 => 1 <= version < 2, 1.xと同じ。

  • = ピンポイントでそのバージョン

    • =1.2.3 => 1.2.3

  • - レンジ

    • 1.2.3 - 1.2.4 => 1.2.3 <= version <=1.2.4
    • 両端とも含みます

  • .xという表記もできるようだ

その他

  • 記号なしの場合は、ピンポイントでそのバージョン。(=と同じかな)
  • latest 最新のバージョン。（正確にはTag指定で、npmレポジトリにlatestというタグが存在するから）

複数指定

ルールが分かりづらい場合、分解して書いた方が分かりやすい

  • 1.2.3 - 1.2.5
  • >=1.2.3 <1.3.0
  • <1.0.0 || >2.3.4 || >=3.0.0 <4.0.0

確認する方法

npm semver calculator というツールでオンラインで検証できます。

参考情報

Tech

package.jsonでgithubを直接参照する

  • このエントリーをはてなブックマークに追加

通常は、semverを指定していますが、npmのtag, 他にもhttp(s)から始まるURL、GitのURLや、GithubのProject/Repo、Localファイルのパスを指定することができます。

package.json
{
  "dependencies": {
    "hexo-renderer-ejs": "^1.0.0",
    "hexo-renderer-marked": "git+https://github.com/tamtam180/hexo-renderer-marked.git#feature/use-class-table-align"
  }
}

npmのtag

"example1": "latest"
"example2": "next"

URL

"example": "http://example.com/"

Git Url

"example1": "git+https://github.com/tamtam180/hexo-renderer-marked.git#feature/use-class-table-align"
"example2": "git+ssh://github.com/tamtam180/hexo-renderer-marked.git#feature/use-class-table-align"

#でブランチやHash指定が可能。

例
git+ssh://git@github.com:npm/cli.git#v1.0.27
git+ssh://git@github.com:npm/cli#semver:^5.0
git+https://isaacs@github.com/npm/cli.git
git://github.com/npm/cli.git#v1.0.27

Github Url

"example1": "tamtam180/hexo-renderer-marked.git#feature\/use-class-table-align"

ブランチのスラッシュはエスケープが必要？

Localファイル

サンプル
../foo/bar
~/foo/bar
./foo/bar
/foo/bar

参考情報

Tech►VueJS

ESLintのno-unused-varsを特定の箇所だけ無効にしたい

  • このエントリーをはてなブックマークに追加

例えば次のようなクラスを定義したい場合、processのcontextが未使用なのでESLintにno-unused-varsの警告を受けます。このルールを部分的に無効にする方法にはいくつかあります。

Base
class Base {
    constructor() {
    }
    execute() {
        const context = {}
        this.process(context)
    }
    // eslint-disable-next-line no-unused-vars
    process(context) {
        // override 
    }
}

特定の次の行を無効にする

eslint-disable-next-line

// eslint-disable-next-line no-unused-vars
const myVars = 1;

同じ行を無効にする

eslint-disable-line

const myVars = 1; // eslint-disable-line no-unused-vars

範囲を無効にする

/* eslint-disable no-unused-vars */
const myVars1 = 1;
const myVars2 = 1;
const myVars3 = 1;
/* eslint-enable no-unused-vars */

ファイル全体を対象に無効にする

ファイルの先頭に次のブロックコメントを記載します。

/* eslint no-unused-vars: 0 */

注意点として、/**/のコメント記法を利用することです。
また、指定している数字は、0=”off”, 1=”warn”, 2=”error”の意味です。

参考

Tech►VueJS

ファイルをドロップする要素が子要素を持っているとDragLeaveが発生してしまう

  • このエントリーをはてなブックマークに追加

Drag and Dropを実装する時に、ドロップする要素が子要素を持っていると、DragLeaveが発生してしまう。
子要素(別要素)にEnterしたということは、対象の要素がLeaveしたということになるらしいです。

対策の方法は色々とありますが、カウンタを用意するのが一番簡単です。
ひとまず、Vue3+CompositionAPIでサンプルを。

template
<div :class="{enter: ddCounter>0}"
    @dragenter="fileDragEnter"
    @dragleave="fileDragLeave"
    @dragover.prevent
    @drop.prevent="fileDrop"
    >
</div>
script
import { defineComponent, ref } from 'vue'
export default defineComponent({
    setup() {
        const ddCounter = ref(0)
        const fileDragEnter = () => { ddCounter.value++ }
        const fileDragLeave = () => { ddCounter.value-- }
        const fileDrop = (event) => {
            ddCounter.value = 0
        }
        return {
            ddCounter,
            fileDragEnter,
            fileDragLeave,
            fileDrop,
        }
    }
})
style
.enter {
    border: 5px dotted powderblue;
}

サンプルコード ▶ Vue SFC Playground

参考