結論

入れ替えましょう。

$ yarn remove pug-loader
$ yarn add pug-plain-loader

日記

Nuxt.jsのバージョンを1.4.0から2.1.0へ上げたら、 yarn dev で文句言われるようになった。

 Cannot find module './index.vue?vue&type=template&id=2a183b29&scoped=true&lang=pug&' 

エラー内容が謎すぎる。

諸事情により yarn build を試したところ、こっちは分かりやすいエラーが出てきてくれた。

ERROR in ./components/FooBar.vue
Module not found: Error: Can't resolve 'pug-plain-loader' in '/mnt/c/Users/ginpei/projects/sugoi-yatsu'
 @ ./components/FooBar.vue 1:0-105 10:2-8 11:2-17
 @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./components/AnalogClock.vue?vue&type=script&lang=js&
...

リリースノートの移行ガイドには載ってないけど、プリプロセッサを使うには？の最後の方にこうある。

これらのプリプロセッサを使うために Webpack のローダーをインストールする必要があります。

npm install --save-dev pug@2.0.3 pug-plain-loader coffeescript coffee-loader node-sass sass-loader

追っかけてないのでいつ変わったのか、なんで変わったのか知らないんだけど、 pug-loader ではないらしい。

試してみたら1系最新の1.4.2では pug-loader で動いて、2系最初の2.0.0では pug-plain-loader が必要だった。へー。

というわけで冒頭の結論の通り入れ替えて動きました。めでたし、めでたし。

// @ts-check を書くと、JSファイルでもTSとしてvalidateしてくれるそうです。

• JavaScript Programming with Visual Studio Code
  • Type checking

普通のJavaScriptコードでも、 `//@ts-check` を付けておくとVS CodeがTSっぽく型を見てくれるんだって。これ便利だ。https://t.co/bciWQKhYft pic.twitter.com/twczq1klX1

— 高梨ギンペイ (@ginpei_jp) August 16, 2018

（@tsのひとごめん。）

DOMノードどーすんの問題

引数もらって計算して結果を返すだけの関数ってならこれすげー便利で良いんだけど、 querySelector() 使うと対応が面倒な感じになる。これどうしたら良いかなあ。というかTSでもよく分からないや……。

const input = document.querySelecter('input#the-input');
console.log(input!.value); // -> Property 'value' does not exist on type 'Element'.

querySelecter() が返すのは Element 型なので、 <input> 用のプロパティが定義されていない。

一応、解決策としては instanceof で確認してやることで型が固定します。

const input = document.querySelecter('input#the-input');
if (!(input instanceof HTMLInputElement)) { return; }
console.log(input!.value);

ついでに null チェックもできて一石二鳥ではある。

JSじゃなくてTSの場合はジェネリクス <T> で書ける。

const input = document.querySelector<HTMLInputElement>('input#the-input')!;
input.value = 'Hello World!';

ただしこの場合は null の確認が必要。（これ↑は ! ですっ飛ばした。）

なんかもっと楽々書けないかなあ。そもそもReactやVueが全盛期の現代で querySelector() 自体をあんまり使わないか……。

書いたぞ。

• ginpei/docker-rails-example

日本語版の方をセルフ転載します。最新版はGitHub↑のほうで。

関連:

• Docker公式イメージでWordPress環境を用意する。 | Ginpen.com

→English

DockerでRailsアプリを作ったり動かしたりするサンプルとチュートリアルです。

Windowsの方

コマンドプロンプトやPowerShell入力時、 `pwd` を %CD% に置き換えてください。

じゃないと例えばこんな感じのエラーになります。

docker: Error response from daemon: create `pwd`/app: “pwd/app” includes invalid characters for a local volume name, only “[a-zA-Z0-9][a-zA-Z0-9_.-]” are allowed. If you intended to pass a host directory, use absolute path.

準備

事前に以下が必要です。

• Dockerインストール

このサンプルを試す

あるいは既存プロジェクトに参加する例。

1. リポジトリをクローン
2. Dockerコンテナーを起動
3. DBを初期化
4. いえーい

5. 止める

   (さらに…)

Chrome用とFirefox用です。

GitHubでソースコード公開してます。

• ginpei/devtools-z-index

見た目

Chrome版。

Firefox版はサブペインじゃなくてパネルとして追加するのでちょっとアレです。仕方なかった。

はじまり

コードスニペット版。これはこれで手軽でよろしいね。

ページ中の要素を `z-index` の数字が大きい順に一覧表示するやつです。https://t.co/gNGkdP03ta pic.twitter.com/v0VRNKCKel

— 高梨ギンペイ (@ginpei_jp) June 11, 2018

Chrome版について

• https://chrome.google.com/webstore/detail/bcnpmhefiohkpmjacfoanhbjhikegmoe/

Elementsパネル内に “z-index” ペインを追加し、一覧を表示します。セレクターをクリックすると要素を選択するので、スタイルの詳細を確認できます。

ツールバーに追加されるアイコンはいらないので、右クリックから非表示にするのが良いと思います。

最初から出さないやり方もあるのかな。

Firefox版について

• https://addons.mozilla.org/en-US/firefox/addon/devtools-z-index/

DevToolsに “z-index” パネルを追加し、一覧を表示します。セレクターをクリックするとInspector (Elements) パネルへ移動し要素を選択するので、スタイルの詳細を確認できます。たまに時間がかかることがあるけどよくわからない。

パネル vs ペイン

本当はChrome同様Elementsパネル内に表示したかったけど、できなかったので独立パネルになってます。

できなかった理由は二つあって、まず第一にペインにHTMLを追加するAPI setPage() がなかったこと。自由な項目が設置できない。

第二には、でもまあ見た目はアレだけどあんま気にしないにしよう思って、オブジェクトを表示する setExpression() を試した。ところが、これなんか中身が長いときにはみ出してスクロールもしないので、上位数件しか見えないっていう……。

何か良いやり方があれば教えてください。

今後の予定

更新の予定はないけど、脳内の構想としてはこんな感じ。

• 要素をセレクターだけで検索するので、同じセレクターが複数あるとき選択が不正確なのを修正
• スタックコンテキストとかも表示
• style 属性で指定されている場合セレクターに反映
• その場で z-index を更新してプレビュー（ElementsパネルのStylesペインみたいな）
• アイコンとかそこら辺をアレする

気が向いたらやる感じです。欲しい機能あれば言ってくれると気が向いてくるかもしれません。

z-indexを減らそう！

ちゃんと設計してれば2桁もあれば相当余るはずなので、むやみに z-index: 999999 とか z-index: 2147483647 とかやめましょう。

よしCodeGridを読もう！

• z-index再入門 – z-indexの仕組み | CodeGrid

あとGitHubのほうでスターください！

思うところあって今後ちゃんと形にしようと思っているんだけど、その前に下書きというか叩き台くらいの感じで一度世に出してみます。

概要

• すごいかんたん！
• ビルドシステム類のない牧歌的構成でもいける
• API互換性はそこそこ。ポリフィル入れてFirefoxに寄せて作るのが吉か
• Edgeは闇を感じた
• Safariは未調査

基本的な作り方

1. フォルダを作る
2. manifest.json を用意
3. それに合わせて各種スクリプト等を用意
4. ブラウザーで開発中のものを読み込み開発
5. 公開

動く場所

• ツールバーのボタン
• 任意のサイト内
• バックグラウンド
• 独自ページ

他に開発者ツールにタブを追加したり、Firefoxならサイドバーを作ったりすることもできます。

できること

• いろいろ

拡張用のAPIがいっぱいあるのでそれらを駆使する。

もちろん普通のウェブ開発の知見も再利用できるよ。

最新のJavaScriptを書ける

IE対応の必要がない（し、たぶんEdgeも無視されるだろう）ので、Chromeだけ、あるいはChromeとFirefoxだけが対象になります。すると最新のJavaScriptの書き方をがんがん使えます。

class とか async/await とか、関数引数の初期値とか分割代入とか。

そこら辺の勉強を兼ねて挑戦してみるのはきっと良い選択だと思います。

Hello Worldをインストールしてみる

最初のブラウザー拡張を自作するまえに、一度サンプルをインストールしてみましょう。どうせ自作したらやる作業です。

(さらに…)