Windowsのコマンド引数でのダブルクオート

コマンドプロンプトでコマンド(アプリ)を引数付きで起動したとき、引数のダブルクオートがどう解釈されるかの実験

通常(ダブルクオートなし)

スペースなしの文字列をダブルクオート

ダブルクオートで囲ってもプログラム内では現れない。(mainのargvの話)

スペースありの文字列をダブルクオート

ダブルクオートで囲むと1つの引数として扱われる

スペースなしの文字列をシングルクオート

シングルクォートはダブルクオートとは違い引数に現れる。Windowsではシングルクォートは特別な文字列ではないようだ。

スペースありの文字列をシングルクオート

シングルクォートは特別な文字でないことがわかる。

ではプログラム内でダブルクオート文字列、例えば“abc”を受け取りたい場合はどうしたらいいだろうか。結論から言うと3つのダブルクオートでabcを囲めばいい。

3つのダブルクオートは以下のように解釈される。

  1. 開始ダブルクオート
  2. 終了ダブルクオート
  3. 終了ダブルクオート直後のダブルクオートは通常文字として扱われるダブルクオート

あるいは2つのダブルクオートで1つのダブルクオートと解釈される。
この形式はCランタイムとWin32APIのCommandLineToArgvWで扱い方が違うようなので、以下の場合には使えない。

プログラム内でabc=”xyz = 123″を受け取りたい場合。

\でエスケープできる。

引数を表示するアプリ

引数を解釈して表示してくれるアプリ、開発のときの確認用。あるいは長い引数をとるアプリのときプログラム内部でどう受け取られるかの確認用。CRTとCommandLineToArgvWと独自実装で表示する。

https://github.com/ambiesoft/argCheck/releases

Vueのpropsとdata

dataとprops

dataはコンポーネントのプライベートなデータ。propsは他のコンポーネント(親)から設定されるデータ。子コンポーネントではpropsを変更できない。

Vueのコンポーネントはツリー状に構築される。親コンポーネントのdataは子コンポーネントに渡され、子ではそれをpropsとして参照する。

以下のコードは親コンポーネントのコード:

このコードでは子コンポーネントmychildのpropsであるmsgに”Hello World!”を渡している。mychildではmsgを変更できない。
(注)実際変更はできるがやらないほうがいい。

よってmychildコンポーネントでは自分のデータはdata()で管理する。data()はそのコンポーネントのみのデータなので他のコンポーネントによって変更されることはない。
(注)実際にはできるがやらないほうがいい。

親から子にデータを渡すときはpropsを使うが、逆に子から親へデータを渡すときはイベントを使う。イベントに関しては今回はスルー。

watcherとcomputed

watcher

Vueのコンポーネントではpropsの変更に対応する必要がある。watcherはプロパティを監視し、それが変更されたとき関数を実行する。

以下の例ではmsgやnameが変更されたとき、ログを表示する。

watcherはすべてのリアクティブプロパティで利用できる。これにはcomputed、props、data()内のデータも含まれる。date()は自分で設定するので通常は必要ない。

computed

Computedはあるデータから新しいデータを構築する。

以下の例では、nameが変更されると、nameLenが再構築される。nameLenはテンプレート内で{{ nameLen }}のように利用できる。

まとめ

data()はそのコンポーネントでのみ使うプライベートなデータ。
propsは親コンポーネントによって設定されるデータ。
watcherはデータが変更されるとき呼ばれる関数。
computedはデータが変更されたとき、それに依存するデータを設定するための関数。

.vueソース

ボタンがクリックされるとnameが変更され、nameLenが変更される。

npm installの “–save”は何をするのか?

結論

何もしない

経緯

npm 5まではnpm installがpackage.jsonに依存を記述する機能がなかったので手動で記述していた。
npm 5で–saveが追加され、package.jsonファイルが存在すれば自動で追加するようになった。
現状のバージョンでは–saveがなくてもpackage.jsonに依存関係が記述されるがどのバージョンからこの仕様になったのかは不明だが、ある時点でデフォルトになったものと推定される。
そのかわり–no-saveオプションが追加されたものと思われる。

https://stackoverflow.com/questions/19578796/what-is-the-save-option-for-npm-install/50697509

WSLとVcXsrvでLinuxのGUIをインストール

前提条件

Windows 10 64bit

WSLをインストール

アプリケーションの機能の追加でWindows System For Linuxをインストール。
WSLをインストール

インストールできたらstoreを起動してubuntuで検索してubuntuをインストールする。

ubuntuを最新にしておく

ミラーの設定

aptのソースを変更してjpミラーにする。以下のコマンドを実行

アップデート

ターミナル変更

デフォルトのターミナルはバッファがなくて使いづらいので変更。ターミナルとは文字だけが表示されているあのウインドウのこと。昔は1つのメインフレームに多くの端末が接続されていて、それをターミナルと読んだ。メインフレームにはモニターはないか使わない。ここではWSLで動くubuntuがメインフレームみたいなものでそれに接続し表示するものをターミナルと読んでいる。

minttyを使う。ここからwsltty-3.0.1.2-install.exeをダウンロード。警告が出るが構わず実行。デスクトップに’WSL Terminal’が出るのでこれを起動するとubuntuに接続したminttyが起動する。

FirefoxやVSCodeを動かしてみる

LinuxでのGUIの扱いはやや複雑でモニターを持っているマシンをXサーバーといい、プログラム実行はクライアントで行い表示はXサーバーで行う仕組みになっている。WSLの場合はGUI機能はないと思うので、Windows側でXサーバーを動かしてプログラムはWSLで動かすことになる。

Windows側のXサーバーのインストール

ここではVcXsrcを使う。vcxsrv-64.1.20.1.4.installer.exeをダウンロードしてインストールした。

VcXsrvの起動

インストールするとデスクトップに’XLaunch’というショートカットができるので起動。ダイアログが表示されるが全部デフォルトで進むとタスクバーにXのアイコンがでて起動が完了した。

ubuntuにFirefoxをインストール

Firefox起動

WSLで起動したFirefox

DISPLAY環境変数にXサーバーを指定することで起動が行える。実際に表示しているのは上で起動したVcXsrv

ubuntuにVSCodeをインストール

直リンインストール

このdebはインストールするとaptソースも書き換えてくれるようなので、次からはaptでアップデートできる。上のコマンドは最新のaptではsudo apt install aaa.debでもいいらしい。

ない場合はhttps://code.visualstudio.com/docs/setup/linuxからdebファイルをダウンロードしてubuntuにもってくる。あるいは上で起動したFirefoxからダウンロードする。ubuntu側からは/mntからNTFSにアクセスできる。

VSCode起動

VSCodeはWindowsでインストールして、それを使ってくれとのこと、ubuntuからでも起動できるから、とのことだがスルー

WSLでVSCodeを起動

日本語フォントのインストール

日本語が表示できないので以下でインストールしてみる。なお日本語入力はスルーする。

これでもタイトルバーだけは文字化けするがこれはVcXsrv側の問題だと思うのでここではスルー。

(注)ここからはやらないほうがいいかもしれない。VcXsrvがおかしくなってfirefoxが起動できなくなった。

gnome-terminalをインストール

ubuntuデスクトップではdbusという設定サーバが見たいのが動いている。これはWindowsのレジストリのように機能していると思うがこれがないとgnome-terminal等のgnome関連のアプリが動かないので、まずはdbusをインストールして設定する。

WSLの終了

ubuntuのshutdownコマンドは効かないので、Windows側でサービスLxssManagerを終了する。管理者コマンドプロンプトで以下を入力

このサービスは自動で起動するように設定されてるようなので、WSLの起動には問題ない。

未整理情報

jsでconst {} = objの記法

実行結果

aaa=1はデフォルトの値として設定していて、オブジェクトでaaa:3が渡されるとaaa=3になる。constがついているのでこれ以降aaaを変更できない。

puppeteer UnhandledPromiseRejectionWarning: TimeoutError: Timed out after 30000 ms while trying to connect to Chrome! The only Chrome revision guaranteed to work is r662092

PCが重たすぎるとpuppeteerのchromeの起動で30秒のタイムアウトになる。以下のようにタイムアウト値を増やす。

VScodeのシェルをmsys2に変える

変更の範囲

プロジェクト(フォルダ)ごとに設定するか、ユーザ設定にするか選べる。プロジェクトごとに設定する場合は、プロジェクトフォルダの.vscode/settings.jsonを編集する。ユーザ設定の場合は、[Ctrl]+[Shift]+Pで「Open Settings (JSON)」を選ぶと編集できる。(ただしプロジェクトごとの設定でうまく動かなかったのでここでは非推奨)

以下の内容を記述。(追加する場合は外側のカッコを無視した中身だけを追加)

bash.exeのパスは自分の環境に合わせる。バックスラッシュはエスケープするので2つ書く。環境変数CHERE_INVOKINGはディレクトリをホームに移動しない指示。MSYSTEMはMINGのツールチェインらしい。mingを使わなければ関係ないはず。

これを記述したら、プロジェクトを2回開き直す(最初に確認が行われるため)。

msys2のgitはうまく動かなかった(パス関係?)ので、オフィシャルのgitなら動くのでそれを設定

しかもmsys2はもともとのWindowsのパスを無視してしまうのでnodeやnpmが使えないのでVSCodeで好きなシェルを起動できる拡張の「Shell launcher」をインストール。設定で以下を追加。

ここにあるパスは有効なものしか機能しない。cmdやPowerShell実際の値はVSCodeが設定する値(”terminal.integrated.shell.windows”)から確認できる。以下の動画を参照。

VSCodeでcmdやpowershellのパスを確認

ショートカットキーを登録

Files –> Preferences –> Keyboard Shortcutsから登録。

VSCodeでショートカットキーを登録

またはユーザ設定のフォルダにあるkeybindings.json(C:\Users\ユーザー\AppData\Roaming\Code\User\settings.json)を以下のようにする。