銀の弾丸

プログラミングに関して、いろいろ書き残していければと思っております。

npm scripts で eslint-watch を実行するには npx が必要だった

f:id:takamints:20200228215451p:plain


NPM 大判七輪 460*260*180 真鍮巻網付 丸和工業
丸和工業
売り上げランキング: 509,190

コードの編集中にeslint のチェック機能を継続的に実行してくれる eslint-watch というパッケージを見つけたので、早速 npm scripts から使ってみようとしたのだが、なぜか「そんなコマンドありません」ってエラーになった。

PowerShellの出力は:

PS C:\Users\????\Git\list-it> npm run lint-watch

> list-it@1.0.6 lint-watch C:\Users\????\Git\list-it
> eslint-watch --watch

'eslint-watch' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! list-it@1.0.6 lint-watch: `eslint-watch --watch`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the list-it@1.0.6 lint-watch script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\????\AppData\Roaming\npm-cache\_logs\2020-02-06T21_11_23_927Z-debug.log
PS C:\Users\????\Git\list-it> npm run lint-watch

> list-it@1.0.6 lint-watch C:\Users\????\Git\list-it
> npx eslint-watch --watch

✓ Clean (6:13:00)

Windowsでやっていますが、Linuxでも呼び出せません。VS-CodeのBashからでも同じでした。

ところが、ターミナルから npx を使うと問題なく動きます。 本来 package.json ではあえて npx と書かなくても動くはずだがなにやってんだろ?

と、いくら調べても情報がなく埒が明かない。

はたと気が付き、妙な対策だと思いながら、npm scripts で npx を使うように書き直したら、あっさり動いた。

package.json:

  ・・・
  "scripts": {
    "lint": "eslint .",
    "lint-watch": "npx eslint-watch --watch",
    "mocha-watch": "mocha -- --watch",
    "test": "eslint . && mocha"
  },
  ・・・

何が悪さをしているのか一切不明。 本質的には解決していないのだけど、とりあえずOK。 しかし、こういうことがあるんだなあ。

新EdgeでIEモードを使うため「Microsoft Edge ポリシー設定を構成する」

f:id:takamints:20200127222426p:plain


前の記事でChromiumベースの新Microsoft Edgeをインストールして、IEモードを使うための設定手順を書いていますが、自宅PC(Windows 10 Home 64bit)ではうまくいきませんでした。

Edge自体の設定や起動オプションの指定などすべては順調でしたが、最終的に「IEモード」でウェブページを開こうとすると、エラーページが表示(500番台だったかな)されていました。

以下のマイクロソフトのウェブページを詳しく読むと、Edge自体の設定の他に「Microsoft Edge ポリシー設定を構成する」必要があるとわかりました。 会社貸与のPCで問題が出なかったのはアクティブディレクトリのドメインに参加しており、既にドメインでグループポリシーが構成されていたのでしょう。

docs.microsoft.com

ドメインに参加していない自宅PCではローカルグループポリシーでの設定が必要なのですが、そのためにはローカルグループポリシーエディタ(以下の説明ではgpeditと記述します)を使えるようにする必要もありました。

すったもんだで最終的に、自宅PCでもキチンと新EdgeでIEモードが使えるようになりました。 ただ、上記マイクロソフトのウェブページなんですが、よくわからない言葉がイキナリ出てきて頭を抱えて別のページと行ったり来たり。 そもそも英語で説明されているので目の前の画面とは表示内容が若干違っていて、とってもややこしかったので、以下に手順を書いておきます。

※ あくまでも自分の自宅PCでの話なので、状況が違うと合致しないこともあるかと思いますが、まあその辺はご容赦を。

前回記事の「新EdgeのインストールとIEモードの設定手順」はコチラです↓ takamints.hatenablog.jp



目次

事前準備:ローカルグループポリシーエディターを使える状態にしておきましょう

後の作業でローカルグループポリシーエディターを使いますので、ちゃんと実行できることを確認しておきましょう。 Windows 10 Home では初期状態で使えませんからここで使えるように設定しておきましょう。 ワタシは必要な時点で設定したりで大いに混乱しましたから。

ローカルグループポリシーエディターの起動を確認

ローカルグループポリシーエディターを起動するには、[Windowsキー]+[R]で「ファイル名を指定して実行」ウィンドウを開き gpedit.msc と入力して「OK」ボタンをクリックします。

f:id:takamints:20200208094338p:plain

このときローカルグループポリシーエディターが開けば問題はありません。

f:id:takamints:20200208094154p:plain

もしもエラーが表示される場合、以下のページを参考にして使える状態に設定してください。メモ帳を使いますがコピペできれば大丈夫です。

www.japan-secure.com

IEモードを使うための前提条件

Use Microsoft Edge with IE mode というページを開きます。

f:id:takamints:20200128205039p:plain
2020年2月現在、日本語のページは無いようです。

「Prerequisites」に「IEモード」を使うための前提条件が記載されています。

f:id:takamints:20200128205251p:plain

「1.最低限必要なOSのバージョン」、「2.Microsoft Edge管理ポリシーテンプレート」、そして「3.Windowsの機能としてIE11が有効になっていること」と書かれています。

1と3は簡単に理解できましたが2の「Microsoft Edge管理ポリシーテンプレート」が、よくわかりません。 「さらなる情報はConfigure Microsoft Edge を見よ」とありますのでリンクをたどると、次の Windows 用に Microsoft Edge を構成する | Microsoft Docs が表示されました。

Microsoft Edge ポリシー設定を構成する

f:id:takamints:20200128210636p:plain なんだか少し読みにくい日本語ですが・・・

新EdgeでIEモードを使うには「WindowsMicrosoft Edgeポリシー設定を構成する」必要があり、「アクティブディレクトリのドメインに参加していない Windows 10 Home」では、Microsoft Edgeの規則と設定を追加するための管理用テンプレート をダウンロードして、コンピュータのポリシー定義テンプレートフォルダーに、インストールする必要があります。

管理用テンプレートをダウンロード

Microsoft Edge Enterprise ランディング ページ」へ移動して Microsoft Edge ポリシー テンプレートファイル (MicrosoftEdgePolicyTemplates.cab) をダウンロードします。

Microsoft Edge Enterprise ランディング ページ

f:id:takamints:20200128211335p:plain

「CHANNEL/BUILD」でEdgeのバージョンを選び「PLATFORM」からOSを選んで、ポリシーファイルをダウンロードします。

f:id:takamints:20200128211742p:plain

Edgeのバージョンなどを確認してから「GET POLICY FILES」のリンクをクリックすると、プライバシーステートメントを読まされます。

f:id:takamints:20200128212050p:plain

ちゃんと読んでから「ACCEPT and DOWNLOAD」を押したらポリシーファイルをダウンロードできました。

f:id:takamints:20200128212123p:plain

管理用テンプレートを設定する

ダウンロードしたポリシーファイルは「MicrosoftEdgePolicyTemplate.cab」というキャビネットファイルです。 これをすべて展開し、展開されたファイルの中で以下の特定のファイルをコンピュータのポリシー定義テンプレートフォルダーへコピーします。

MicrosoftEdgePolicyTemplate/
    windows/
        admx/
1)          msedge.admx`      ⇒ C:/Windows/PolicyDefinitions/
2)          en-US/msedge.adml ⇒ C:/Windows/PolicyDefinitions/en-US/
3)          ja-JP/msedge.adml ⇒ C:/Windows/PolicyDefinitions/ja-JP/

※ 3番目のja-JPのファイルはウェブページでは指定されていませんでしたが、ファイルがあったので一応コピーしておきました。

ポリシー設定の確認

上でコピーしたポリシーが正しく読み込まれたかどうかは、gpeditの左側のツリーで コンピューターの構成>管理用テンプレート>Microsoft Edge を選択し、ツリーや右側のペインに複数のMicrosoft Edgeに関する項目があることで確認できるそうです。

何らかのエラーがある場合はgpeditが開けずエラーが表示されるらしい。

f:id:takamints:20200208095406p:plain

ローカルグループポリシーエディタでIEモードのグループポリシーを設定

gpeditで、コンピューターの構成>管理用テンプレート>Microsoft Edge を選択し、右側のペインから「Internet Explorer統合を構成する」という設定項目を探します。 たくさんあるので見つけにくいのですが、ざっくり以下の画面の右端のスクロールバーの位置を参考にしてください。

f:id:takamints:20200208101303p:plain

この項目をダブルクリックするか、設定の説明が表示されている部分の「ポリシー設定」のリンクをクリックして設定ウィンドウを開き、左上にあるラジオボタンの「有効」を選択します(最初は「未構成」になっているはず)。

f:id:takamints:20200208102737p:plain

次に、オプションの下のドロップダウンリストから、「Internet Explorer モード」を選択します。

f:id:takamints:20200208103117p:plain

ポリシー設定ウィンドウをOKボタンで閉じれば、設定完了。お疲れさま。

以下の記事で書いているEdgeの設定ができているなら、この時点で新EdgeでIEモードが使えるようになっているはずです。 まだ設定していないなら是非どうぞ↓

takamints.hatenablog.jp

Chromium版EdgeのIEモードを使ってみた

f:id:takamints:20200127222426p:plain



先日Chromiumベースの新しいMicrosoft Edgeがリリースされたと話題になっていましたが、日本で自動更新されるのは4月以降になるとのこと。 なにやら新Edgeでは動作しないWebサイトが日本国内にたくさん残っている確定申告に使うアプリ?が新しいEdgeでは動かないらしくて、混乱を避けるためだそうですよ。

しかし手動でインストールするなら最新のChromiumベースのEdgeを今すぐにでも使えるらしい。

実は弊社、イントラネットでかなり古い社内情報共有ポータルサイトが稼働しておりまして、各種社内情報の閲覧と投稿はモダンブラウザで問題ありませんが、ファイルのアップロードだけは Internet Explorer でなければできない 状態なんですね。この社内ポータルはMicrosoftのShare Point Serverで構築されているのですが、なにしろバージョンが古いためか、モダンブラウザでファイルを添付しようとすると「このブラウザでアップロードはできません」てなメッセージが表示されます。

まあ、 Windows 10 の Internet Explorer 11 は2029年までサポートされるらしいので現時点では問題なしです。 でも2029年以後はどうすんの?って問題はある。まだ9年も余裕がありますけど、弊社、平気で15年ポータルを放置していたんで更新するのかどうかわかりません。

さてさて、そんな我社の状況を見透かしたかのように、新Edgeには「IEモード」というのがあるそうで、「インターネットエクスプローラで閲覧してください」なWebサイトでも正しく動作するとの噂。さて弊社の古い SharePoint Serverのポータルに、最新EdgeのIEモードで、ファイルのアップロードはできるのか?と試してみました。

結果から先に書きますと、ファイルのアップロードもできました。

ということで、このまま弊社のポータルを放置して2029年が過ぎたとしても Edge の IEモードを使えばOKですね。 メデタシメデタシ・・・なのですがー

この新EdgeのIEモード、設定するにはひと手間必要。簡単には使えませんでした(いったん設定すればその後は問題ありませんが)。ということで、 Chromiumベースの新生Microsoft Edgeで「IEモード」を使えるようにする設定手順を以下に書いておきます。

追記: Edgeのポリシー設定でIEモードが有効に設定されているなら、本記事記載の設定でIEモードを使えるようになりますが、そうでなければ別途設定が必要です。 自分の場合は会社貸与のPCではドメインで設定されておりOKだったのですが、自宅PCではローカルグループポリシーの設定が必要でした。

ローカルグループポリシーでの設定方法は以下のページで説明しています。

takamints.hatenablog.jp

目次

新Edgeをインストール

ダウンロード

https://support.microsoft.com/ja-jp/help/4501095/download-the-new-microsoft-edge-based-on-chromium

f:id:takamints:20200127211242p:plain

「今すぐ新しいMicrosoft Edgeを入手してください」ってボタンを押すと、以下の画面が表示されます。

f:id:takamints:20200127211439p:plain

さらに「DOWNLOAD for Windows 10」というボタンを押すと以下のLICENSE TERMSの受け入れ画面が表示されます。

f:id:takamints:20200127211706p:plain

全文英語ですけど、しっかり読んで「Accept and download」を押せば「Thank you!」ってメッセージが表示されて、MicrosoftEdgeSetup.exe がダウンロードされました。

f:id:takamints:20200127211902p:plain

インストーラー実行

ダウンロードされたインストーラーを実行すると、「Getting the new Microsoft Edge」と表示されてプログレスバーが動きます。インストーラーがさらにダウンロードしているのでしょう。下には「We can't wait for you to try it」なんて表示されてますが、なんだかMicrosoftらしくないですね。

f:id:takamints:20200127212003p:plain

その後、自動的にインストールが始まって、意外に早く完了します。 そして勝手にEdgeが起動して、「ようこそ」的な画面が表示されます。

f:id:takamints:20200127212836p:plain

「Get started」 ボタンを押すと、設定を Google Chromeからインポートするかどうかを選択する画面が表示されました。最初から選択されています。

f:id:takamints:20200127213040p:plain

普段はGoogle Chromeを使っているのでインポートしない理由がありません。Chromiumベースなので安心ですし、どうせ同期されるのではないかと思うし。 「Next」ボタンを押して次の画面が表示されると既にインポートが完了していました。

この後は、新しいタブの設定、データの同期をするかどうか、あと使用状況をMicrosoftに送信するかどうかなどを選択してセットアップは完了です。

余談:新Edgeの使用感

見た目は、LinuxChromiumを使っているような感じですね。 新EdgeはChromeと違ってブックマークフォルダに色がついていません。

旧Edgeに比べて描画が明らかに高速です。木のせいではないと思います。 描画内容や使い勝手に関して「Chrome と違う」ってな所は気づきませんでした。

いやしかし、上の手順でインストールしただけでは、メニューなどが日本語化されていませんね。 そういう点では、ちょっとした違和感がありました。

てなことで、総合的には「Edgeを使っている」って気分にはなりません。 ただ、これは良いことなんでしょうね。ブラウザの主役はコンテンツですからね(ちょっと良いこと言った感じ)。

余談:奥ゆかしいかも?新Edge

あと、些末なことですが、初期Edgeの「使え使え攻撃」みたいなのがなくて、それだけで好感を持ちました。少しだけですけどね。

次に起動したときに「既定のブラウザに設定してちょうだい」なんて言ってきましたが、即刻拒否w。 そもそもChromeと使い勝手などが同じなので、好感は持ちましたが、個人的には変える理由がないわけでスマン>新Edge。 ただ、その後しつこくお勧めしてくることがなくなったのには「悔い改めたかMicrosoft」という気分です。

IEモードを有効にする

さてここからが本題。IEモードを有効にするには、以下の手順が必要です。

アドレスバーに edge://flags と入力してオプション設定の画面を開き、上部の検索ボックスに IE integ ぐらいまで入力すると、「Enable IE Integration」という項目がトップに表示されます。

f:id:takamints:20200127215943p:plain

この項目の右にあるドロップダウンから「IE Mode」を選択する(他に「Need IE」というのもあるがよく知らない)。

f:id:takamints:20200127215749p:plain

すると、「Restart」と書かれたボタンが右下に表示されるので、クリックしてEdgeをリスタートします。

f:id:takamints:20200127220126p:plain

この時点で、晴れてIEモードが使えるのかと思ったのですが、まだ無理でした。

Edgeの実行時に「IEモードを試す」というオプションを追加で指定しなくてはならないとのこと。

これはタスクバーにピン止めされてるアイコンに設定すればよろしいようで。次項の手順で設定します。

IEモードのテストを有効にする

タスクバーに表示されている青緑の勾玉みたいな新しいEdgeのアイコンを右クリックするとメニューが表示されます。

f:id:takamints:20200127220516p:plain

このメニューのトップの「Microsoft Edge」を再び右クリックすると、さらにメニューが開きます(以下)。

f:id:takamints:20200127220655p:plain

開いたメニューから最下段の「プロパティ」をクリックすると「Microsoft Edgeのプロパティ」ウィンドウが表示されます。

f:id:takamints:20200127220822p:plain

「ショートカット」タブのリンク先テキストボックスの末尾に --ie-mode-test の文字を追加し、OKボタンで設定を終えれば、IEモードのテストが有効になっているはずです。

IEモードに設定したタブでWebページを表示する

これまで開いていたウィンドウをすべて閉じ、IEモードを有効にしたアイコンで再度Edgeを起動すると「IEモードが有効になっているが安全上問題があるかもしれん」みたいなメッセージが表示されます(以下)。

f:id:takamints:20200127221042p:plain

この状態で、右上の「・・・」メニューから 「More tools」を開くと「Open sites Internet Explorer mode」という項目を選択します。

f:id:takamints:20200127221214p:plain

すると、これ以降このタブではIEモードでウェブページを開くようになります。なりましたね?

なりました?あれ?

どうも様子がおかしいですよ。会社貸与のPCでは問題ありませんでしたが自宅のPCではダメなのです。 IEモードを有効にしたタブで対象のページを開こうとしてもグルグルしたままで、サイトが表示されません。

ということで、ここまでの設定でうまくいかない場合は、別の設定が必要なようですが、それはちょっとまた後で。

既にIEモードを問題なく使えている人はおめでとうございましたっ。

TypeScriptでスタティックコンストラクタ(のようなもの)を記述する

f:id:takamints:20191215081904p:plain

TypeScriptでスタティックコンストラクタを書く方法の小ネタです。

C#では普通にスタティックコンストラクタを記述できますが、TypeScriptでは書けないようです。

先日「あったらいいな」という状況がありましたので、それっぽい記述を探ってみました。ちょっと無理やりなんですけどね。

実践TypeScript ~  BFFとNext.js&Nuxt.jsの型定義~
吉井 健文
マイナビ出版 (2019-06-26)
売り上げランキング: 14,316
目次

スタティックコンストラクタ?

スタティックコンストラクタとは、主にクラスのスタティックフィールドを初期化するためのもので、最初のインスタンスが生成される前に一度だけ動いてほしいクラスメソッド(みたいなもの)です。

複数のスタティックフィールドを同時に初期化したい場合や、元情報を加工して実行時に使用する情報を作成するといった場合に有用です。

スタティックフィールドを即時実行関数で初期化する

スタティックコンストラクタがなくても、スタティックフィールドは普通に個別に初期化できます。 さらにこの時、以下のように無名関数を即時実行してその戻り値で初期化するのも可能です。

class MyClass {
    static foo:string = (()=> {
        return "foo";
    })();
}

スタティックコンストラクタみたいな記述

無名関数の即時実行を利用すれば、TypeScriptでスタティックコンストラクタ(のようなもの)を以下のように書けます。

class MyClass {

    static foo:string = "foo";

    /**
     * スタティックコンストラクタ(のようなダミーのフィールド)。
     */
    static ctor = (()=>{
        MyClass.foo = "bar";
    })();
}

static ctor というダミーのスタティックフィールドを定義して、即時実行した無名関数の戻り値で初期化しています(ここでは無名関数が何も返していないので結果的には null になります)。

ダミーの名前は ctor である必要はありませんが、本来のインスタンスのコンストラクタとかぶりますから constructor にはできません。

注意すべき点

スタティックフィールドが上から初期化されるということには少し注意が必要です。

以下のように、スタティックコンストラクタよりも下でスタティックフィールドを宣言し、かつ初期化していると意図した動作になりません。コンパイルエラーが出ないので厄介です。

class MyClass {
    /**
     * スタティックコンストラクタ(のようなダミーのフィールド)。
     */
    static ctor = (()=>{
        MyClass.foo = "bar";
    })();

    static foo:string = "foo";
}

初期化していなければ問題はありませんが、ややこしいのでスタティックフィールドはクラス宣言の上のほうで宣言しておいたほうがよさそうですね。

あと、確実にユニットテストを記述するのも有効です。

Gitkの文字化けはAnacondaのせいだった

f:id:takamints:20191203150146p:plain

Gitのコミットログをグラフィカルに見せてくれるGitkですが、いつのころからか、Arch Linux の端末で実行すると、ウィンドウが開くまで数分かかり、さらに日本語が文字化けしてるという状態になっていました。

メインマシンではなかったので、見て見ぬふりを続けてきましたが、先月メモリを16Gバイトに4倍増して、機械学習のお勉強用などとしても使う機会が増えてくると「さすがにこれ以上は放置できない看過できないナントカセネバ!」とイライラしはじめ鼻息荒く調べてみると、割とあっさり「どうやらGitよりも先にインストールしていたAnacondaのせいだったのね」と判明しました。

まあAnacondaがすべて悪いかというと、そうも言いきれないのですが・・・とにかく以下の方法でGitkの文字化けは解消しました。

目次

Gitkの文字が化け化けだ

f:id:takamints:20191203124752p:plain

Gitリポジトリのコミットログじゃなくてウィンドウ自体の日本語が化けてるんですよね。

\u… なんて表示されているのはUnicode文字コードでしょう。 フォントが見つからないのかも。

2つのWishが混在するのが原因でした

GitkはWishを使います

Gitkは wish というコマンドを使っているそうです。

wishはtkパッケージに含まれるコマンドで /usr/bin/wish に配置されるTcl/Tkのインタプリタ。 対話的に画面を作れるツールですね。

ArchLinux公式のGitの説明では、GitkやGitGuiなどのGuiツールを使うにはこの tk パッケージが必要だと書いてあります。

AnacondaもWishを使います

Anacondaもwishを使っているそうです。 しかもAnacondaは、ユーザーのホームディレクトリ以下に独自?の wish をセットアップし、かつ /usr/bin のwish よりも独自のwishが優先的に実行されるように .bashrc を自動的に書き換えてしまいます(↓)。

# added by Anaconda3 Installer
export PATH="/home/<user>/anaconda3/bin:$PATH"

/usr/bin は $PATHに含まれているので、それより先にAnacondaのbinのwishが呼ばれてしまいます(<user>はユーザー名に読み替えてください)。

ワタシはそもそもtkをインストールしていませんでしたが、それでもGitkがなんとか起動していたのは、Anacondaがセットアップしたwishが呼ばれていたからなんですね。

対策は?

tkをインストールする

tkをインストールするには、以下のようにすればOKですが、

$ sudo pacman -S tk

.bashrcで/usr/bin/wishが優先されるように設定書き換え

というとで、.bashrcを以下のように書き換えて、 /usr/bin/wish が優先されるようにします。

# added by Anaconda3 Installer
export PATH="$PATH:/<user>/anaconda3/bin"

動作確認

ターミナルを立ち上げなおして、ちゃんと設定できたか確認しましょう。

まずは、 /usr/bin/ の wish が呼ばれるかどうか。

$ which wish
/usr/bin/wish

そしてGitk。

$ gitk --all&

↓即座に起動&文字化け解消!

f:id:takamints:20191203124220p:plain

まとめると

以下の対策で Gitkが即座に起動するようになり、文字化けも解消しました。

  • tkパッケージをインストール
  • Anacondaのwishではなく /usr/bin/wish が呼ばれるように .bashrc を設定

参考サイト

ja.stackoverflow.com