はてなブックマーク

毎年恒例のひとりアドベントカレンダーです。 ちなみに去年は DevTools の話でした。 本年もよろしくお願いいたします / 知名度が低いウェブ標準Advent Calendar 2021やります。ひとりで。 https://t.co/7VMyWIu5Ss — 高梨ギンペイ (@ginpei_jp) December 1, 2021 TreeWalker API widows fieldset filter: drop-shadow() Pointer Events indeterminate auxclick download Proxy wbrで単語の途中で改行 composedPath()で一気に遡る touch-actionでスクロールやズームを止める elInput.valueAsNumberで最初から数値 enterkeyhintでエンターキーの外観 setPointerCa

ちなみにそれぞれ gotpointercapture と lostpointercapture イベントが発火します。 何が嬉しいか mousemove イベントを使って自前でドラッグを作ってみると直面すると思うんですが、このイベントって対象要素上でマウスカーソルを動かしたときにだけ反応しますね。 経験ない人からすると何当たり前のこと言ってんだって感じだと思うんですけど、こんなときに困るんです。 マウスカーソルを素早く操作して対象要素の外へ出てしまう デザインの都合上、重なり手前に表示される要素がある デモで右端を掴んで右側へドラッグしてみてください。たぶん止まります。カーソルを戻して、ゆっくり、はみ出ないよう少しずつ動かすとドラッグできます。 対処としては対象要素じゃなくて document の方で mousemove を見張るって感じでしょうか。直感的ではありませんし、開放処理の漏れと

知名度が低いウェブ標準ひとり Advent Calendar 2021 – 12 日目 今日は CSS の touch-action プロパティです。指操作の制御をします。 touch-action – CSS: カスケーディングスタイルシート | MDN デモ：https://codepen.io/ginpei/pen/gOGLrgG デモはタッチ対応端末でご覧ください。主にスマホ。 基本的な使い方 だいたいこんな値です。 auto – 通常 none – 反応しない pan-y – 縦方向スクロールのみ pinch-zoom – ズームのみ manipulation – スクロールとズームのみ（ダブルタップでの拡大を無効化） 他に下方向のみの pan-down とかいくつかあるので MDN をご覧ください。 Pointer Events 関係の仕様です。IE でも動きます。 使いどころ

知名度が低いウェブ標準ひとり Advent Calendar 2021 – 08 日目 今日は <a> で使える download 属性です。 <a>: アンカー要素 – HTML: HyperText Markup Language | MDN デモ：https://codepen.io/ginpei/pen/rNGeqry 基本的な使い方 通常 <a> のリンクをクリックすると画面遷移しますが download 属性を与えるとファイルをダウンロードするようになります。 属性の値は空か、ダウンロードするファイル名の初期値を指定することもできます。 利用可能なもの、不可能なもの 何でもダウンロードさせられるわけじゃなくて、ちょっと制限があります。 同一オリジンの URL blob: な URL data: な URL 他人のところのリソースをダウンロードさせることはできません。 使いどころ

apt install で 404 になってたので先に apt update すっかーと思ったらそっちが謎のエラー。”not valid yet” って。”yet” って。 Release file for http://security.ubuntu.com/ubuntu/dists/focal-security/InRelease is not valid yet (invalid for another 1h 12min 24s). $ sudo apt update [sudo] password for ginpei: Hit:1 https://download.docker.com/linux/ubuntu focal InRelease Get:2 http://security.ubuntu.com/ubuntu focal-security InRelease [114

こんなタイミングだけどアドベントカレンダーじゃないです。 先にまとめ apt install imagemagick /etc/ImageMagick-6/policy.xml を編集して PDF を許可（安全性に自信がある場合） $ convert a.pdf a-%03d.png 今回の環境 Ubuntu 18.04.3 on WSL インストール そのまんまのパッケージがあった。 $ apt search imagemagick | grep "^imagemagick/" WARNING: apt does not have a stable CLI interface. Use with caution in scripts. imagemagick/bionic-updates,bionic-security,now 8:6.9.7.4+dfsg-16ubuntu6.8 amd

20 日目の記事です。 DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 ログ類は画面や DevTools を再読み込みすると全部消えちゃいます。普通はそれでいいけど、画面移動直前の様子を知りたい場合には不便です。 そんなときは Preserve log をオンしておくと記録が残るようになります。Console パネルと Network パネルで利用できます。 コンソールのログを残す Console パネルを開く Console パネル右上のコンソールの設定ボタンを押し、設定欄を開く “Preserve log” のチェックを入れる これで、例えば beforeunload イベントとか pagehide イベントとか、そういうイベントでの処理のログも残るようになります。 const eventLogger = (event) => console.lo

4 日目の記事です。 DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 デバッグ時に console.log() は大変便利でよく使ってるんですが、DevTools を使うとコードを書き換えることなく同じことをやれます。 毎回スクリプトを書き直し→（ビルド待ち）→画面再読み込みする手間が省けて良いですね。 手順は簡単。 DevTools の Scripts パネルを開く 目的の JS ファイルを開く (CTRL+P) 出力したい位置の行番号を右クリックし “Add logpoint…” を選択 出力する内容を記述 スクリプトを実行（ボタンを押すとか） 編集したい場合も行番号を右クリックからやります。 DevTools のログポイントを編集する様子。行番号を右クリックして追加、編集。 設置すると、Chrome の場合は赤紫の矢印的なものが行番号の上に表示さ

NPMおれおれAdvent Calendar 2019 – 05日目 （追記：なんか間違ってる気がするので調査中。） 言うほど秘密ってもんでもないですが。 なにそれ package-lock.json は npm install なんかをすると生成されるファイルで、インストールされているパッケージのツリーを表します。このファイルと npm ci を利用して全く同じツリーを再構築することが可能になります。 困ったちゃん このファイル自体は便利なものだと思うんですが、困った点がひとつ。「ロック」とう名前に反して何もロックしない点です。 ロックファイルがある状態で npm install すると、そのロックされたバージョンのパッケージ群がインストールされる、というのを期待するんですが、実際はそんなことなく、新しいものがあればそちらをインストールし、逆にロックファイルを更新します。ロックとは。 昔

NPMおれおれAdvent Calendar 2019 – 04日目 先にまとめ npm ci は npm install と同じように、全依存パッケージをインストールする npm install は package-lock.json を更新することがある npm ci は package-lock.json を更新しない npm ci は node_modules を削除してからインストールする npm ci ってなんだ npm install に似ているが、CI のような自動化された環境での利用が想定されているもの。あるいは開発環境でクリーンインストールするのにも使える。処理はいくつかの機能を省略するので、npm install より圧倒的に高速な場合がある。 ドキュメントを読むとそんな感じらしい。 基本的には CI で回す場合はこちらを使いましょう、という理解で良さそう。CI って

何もしないでそのままでも十分かもしれない。 先にまとめ 最近の react-scripts は ESLint を含んでいるので別途インストール不要 設定は .eslintrc.js を作成して extends: ['react-app'] する Airbnb のルール設定を使う場合はもうちょい頑張る 元々 create-react-app してない場合も同じ Airbnb ルール利用時の手順概要 ESLint 初期化 ESLint の設定を更新 コードを recommended な状態へ対応 想定環境 Node.js v10.16 react-scripts v3.1 TypeScript v3.5 ESLint v6.1 @typescript-eslint/eslint-plugin v1.13 React アプリの準備 create-react-app でテンプレートから作成します。

Vue.js始めるおれおれアドベントカレンダー2016 – 16日目分（24日公開） しゅんしゅん動くよ。 アニメーション付きのナビバーを作ってみました、簡単でした。やったね。 デモ: https://ginpei.github.io/vue-ginpei-advent-calendar-2016/16-mounted/ コード: https://github.com/ginpei/vue-ginpei-advent-calendar-2016/tree/master/16-mounted 基本的な作り方 location.hash を監視して情報更新 hashに該当する内容を表示 バー位置をhashの候補の順序から算出 簡単に作れたは良いんだけど、最後のやつどうしようかなと。 バー位置をhashの候補の順序から算出 最初に書いたコードはこう。 <nav> <a href="#">Home

配列とかおれおれAdvent Calendar2018 – 23日目 配列界最強のメソッドです。（？）　万能選手ですがどうか使わないでください。 使い方はちょっとわかりづらいんだけど、こんな↓感じです。 const arr = [11, 22, 33]; const obj = arr.reduce((acc, value, index) => { acc[`number${index}`] = value; return acc; }, {}); console.log(obj); // { number0: 11, number1: 22, number2: 33 } 与えたコールバック関数の次に第2引数がある点に注目。 インターフェイスと使い方 Array.prototype.reduce() | MDN result = arr.reduce(callback[, initialV

配列とかおれおれAdvent Calendar2018 – 22日目 コンストラクターに要素数を与えると、その「要素数」を持った配列が作られます。しかし、「その数の要素」は持っておらず、配列の中身が undefined すら入っていない「空き枠」の状態になります。 const arr = new Array(3); console.log(arr.length); // => 3 console.log(arr); // => [ <3 empty items> ]

const arr1 = [11, 22, 33]; const arr2 = [44, 55]; const arr3 = [...arr1, ...arr2]; console.log(arr3); // => [ 11, 22, 33, 44, 55 ] const arr4 = [0, ...arr1, 0, ...arr2, 0]; console.log(arr4); // => [ 0, 11, 22, 33, 0, 44, 55, 0 ] 次の個所で利用可能です。 配列初期化子 [] オブジェクト初期化子 {} 関数呼び出し時の引数 () 分割代入 = 、関数の仮引数 () 配列初期化子 [] ... に続けて反復可能 (iterable) なオブジェクトを置きます。まあ普通は配列ですね。 ECMAScript® 2018 Language Specification 12

配列とかおれおれAdvent Calendar2018 – 19日目 ここまで何度か出てきた反復可能 (iterable) と反復子 (iterator) のお話です。やっと。 先にまとめ Iterableオブジェクトは Iteratorを返すメソッド [Symbol.iterator] を持つ for-of で使える Iteratorオブジェクトは IteratorResultを返すメソッド next() を持つ IteratorResultオブジェクトは プロパティ done, value を持つ 配列は Iterableである Iteratorではない arr.values() は Iterableである Iteratorである Generatorオブジェクトは Iterableであり、かつIteratorである Generator関数は function*(){} のやつ Gene

配列とかおれおれAdvent Calendar2018 – 18日目 ありそうでないメソッド、それが重複排除です。 Underscore.jsやLodashには uniq() てのがあって、こんな感じ↓で使えます。

配列とかおれおれAdvent Calendar2018 – 16日目 繰り返しにもいろいろあるよ。 for, while → for文を仕様からじっくり見てみる。あとwhileとか。（配列とかおれおれAdvent Calendar2018 – 13日目） for-in → for-inの仕様も見てみたよ。使う機会なさそうだけど。（配列とかおれおれAdvent Calendar2018 – 14日目） for-of → for-ofで配列も普通のオブジェクトも反復しよう。（配列とかおれおれAdvent Calendar2018 – 15日目） for-await-of → 非同期に繰り返すならfor-await-of構文が使える、けど使わない方が良いかも。（配列とかおれおれAdvent Calendar2018 – 16日目） forEach() ← イマココ お待たせ！　現代的JavaSc

配列とかおれおれAdvent Calendar2018 – 16日目 繰り返しにもいろいろあるよ。 for, while → for文を仕様からじっくり見てみる。あとwhileとか。（配列とかおれおれAdvent Calendar2018 – 13日目） for-in → for-inの仕様も見てみたよ。使う機会なさそうだけど。（配列とかおれおれAdvent Calendar2018 – 14日目） for-of → for-ofで配列も普通のオブジェクトも反復しよう。（配列とかおれおれAdvent Calendar2018 – 15日目） for-await-of → 別稿 forEach() → 別稿 for-of の亜種で、非同期に繰り返すやつに対応します。 const sleep = (ms) => new Promise((f) => setTimeout(f, ms)); as

const users = [ { id: 101, name: 'Alice', active: true }, { id: 102, name: 'Bob', active: false }, { id: 103, name: 'Charlie', active: true }, ]; const activeUsers = users.filter((v) => v.active); console.log(activeUsers); 仕様 配列のこれ系のメソッドと同じです。 Array.prototype.filter() – JavaScript | MDN newArray = arr.filter(callback(element[, index[, array]])[, thisArg]) 引数 filter() は引数に、関数オブジェクト callback(element

配列とかおれおれAdvent Calendar2018 – 11日目 querySelectorAll() で取ってきた結果は NodeList という配列風オブジェクトだけど、配列ではありません。 つまり、配列が持つ各種のメソッドは使えません。 使いたい場合は配列へ変換してやる必要があります。 しか forEach() については近年使えるようになりました。 const els = document.querySelectorAll('.target'); els.forEach((el) => { console.log(el.textContent); });