Macbook Pro Retina × LG UltraFine 5K Display

未だに Macbook Pro Retina (Mid 2014) を使っているが、
たまにオフィスにある LG UltraFine 5K Display を使いたい。
と思ったら実はできた。

3840 x 2160 (60 Hz)
以下のデバイスでは、LG UltraFine 5K Display を 3840 x 2160 (60 Hz) の解像度で使えます。

MacBook (2015 年以降に発売されたモデル)
Thunderbolt 2 ポートを搭載した Mac コンピュータ (Thunderbolt 3 – Thunderbolt 2 アダプタを使用)
USB-C を搭載した iPad Pro

Mac や iPad Pro で LG UltraFine 5K Display を使う – Apple サポート

初代モデルと2代目モデル、両方手元にあるけれど、

初代モデル (27MD5KA-B / JAN 4989027010635) だと、Appleの Thunderbold3 to Thunderbold2 変換コネクタThunderbolt2 to Thunderbolt2 ケーブル の接続で無事に映像出力できた。

けれど、2019年夏のアップデート後に出た2代目モデル (27MD5KL-B / JAN 4989027013995) だと、認識するものの映像が出ない。USB-C対応されたしちょっと違うのかもしれない。

参考: Pro Display XDRの「50万円」に引いちゃった人向け。LGの「UltraFine 5K Display」27インチモデルがアップデート | ギズモード・ジャパン

IE11 で querySelectorAll の forEach

IE11で querySelectorAll した NodeList を forEach するとエラーが出る。

webpackのentryのJSで

import "@babel/polyfill";

してもだめだったんだけど (ver 7.6.0)

import "core-js/stable";

したら大丈夫だった。 (ver 3.3.6)

webpack.config

参考: babel/babel-loader

module.exports = {
  mode: "development",
  entry: "./src/es2015/main.js",
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: [
                "@babel/preset-env"
              ]
            }
          }
        ]
      }
    ]
  },
  output: {
    filename: "./public/assets/js/app.js"
  }
}

babel.rc

browsersの書き方は babel/babel-preset-env 参照

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": [
            "since 2015",
            "IE 11"
          ]
        }
      }
    ]
  ]
}

package.json の一部

.
.
.
"devDependencies": {
    "@babel/core": "^7.6.4",
    "@babel/preset-env": "^7.6.3",
    "babel-loader": "^8.0.6",
    .
    .
    "core-js": "^3.3.6",
.
.
.

こちらも参考: IEで NodeList を forEach するとエラーになる問題の対処方 – Qiita

packages.json の ^ について

^ はキャレット (caret) と読む。

プロジェクトのルートに、 .npmrc というファイルをつくって、

save-exact=true

と書くと、^が自動的につかなくなる。

npmの設定を一覧するには

$ npm config list

マシン全体で設定してしまいたいときは

$ npm config set save-exact=true

他に、

save-prefix='~'

というconfigの書き方もあるっぽい

参考: Change npm default caret(^) in package.json

DropboxのFinder統合

DropboxのFinder上での便利機能 (アイコン上の同期ステータス表示とか、ツールバー上のメニューとか、右クリックメニューとか) が消えてしまい、しばらく悩んで解決。
システム環境設定の「機能拡張」→「Finder機能拡張」のチェックが外れていた。 (macOS Mojave)

Missing finder icon integration on Mac.
に書かれてた。