知名度が低いウェブ標準ひとり Advent Calendar 2021 – 01 日目 初日は DOM の TreeWalker です。 jQuery の Traversing 系メソッドみたいなやつです。現在の「位置」をオブジェクトの内部状態に持ち、DOM ツリーを移動します。 treeWalker – Web API | MDN デモ：https://codepen.io/ginpei/pen/rNzqQmL 基本的な使い方 document.createTreeWalker() でインスタンス生成します。walker.currentNode が移り変わる「位置」です。 <div id="wrapper"> <div id="root"> <div id="child1"></div> <div id="child2"> <div id="child2-1"></div> <div i

イベントオブジェクト PointerEvent コンストラクターは MouseEvent コンストラクターを継承しているので、飛んでくる event では button とかマウス系イベントのイベントオブジェクトと同じプロパティは全て使えます。しれっと pageX 等の座標系が倍精度になっていたりはする。 タッチは touches の代わりに pointerId で識別する感じです。ポインターごとにイベントが発火します。デモでは ID を表示したりしてるので見てみてください。 拡張 マウス系にもタッチ系にもない独自のものとして、pointerType というプロパティが追加されています。これを見てどの種類の装置による操作なのかを判断できます。値は文字列 (DOMString) で "mouse" 、 "touch" 及び "pen" になります。 そう、"pen" 。というわけでマウス、タ

知名度が低いウェブ標準ひとり Advent Calendar 2021 – 09 日目 ES 6 こと ES2015 で Proxy というのが追加されました。あらゆるプロパティへのアクセスを制御できます。存在しないプロパティへのアクセスも捉えて存在するように振る舞うことも可能。 Proxy – JavaScript | MDN デモ：https://codepen.io/ginpei/pen/NWarwdx 基本的な使い方 コンストラクターの第 2 引数で get() や set() なんかを設定します。 const original = { hi: 'hi' }; const proxy = new Proxy(original, { get(obj, prop) { if (prop in obj) { return obj[prop]; } if (prop === 'ho') {

知名度が低いウェブ標準ひとり 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 – 17 日目 今日は capture です。カメラを起動します。 HTML attribute: capture – HTML: HyperText Markup Language | MDN デモ：https://codepen.io/ginpei/pen/xxXxvbX HTML Media Capture | Can I use… Support tables for HTML5, CSS3, etc あ、なんか CodePen のランダム URL 部分がちょっと格好良い……。 基本的な使い方 デモはスマホで見てね。 あとは CSS で良い感じにカメラボタンっぽくしてやると良さそう。 PC 用のウェブブラウザーは未対応だけど普通にファイルを開くだけなので大きな問題ではないかと。 値 capture, captu

毎年恒例のひとりアドベントカレンダーです。 ちなみに去年は 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 を見張るって感じでしょうか。直感的ではありませんし、開放処理の漏れと

18 日目の記事です。 DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 たくさんコードを書いて書き足して消して書き直して消して書き換えてって繰り返してると「あれこれまだどこかで使ってるっけ？」みたいになることがあります。近年は VS Code が灰色で表示してくれたり ESLint で検出 できたりもできるけど、でも別ファイルからも使えるようなやつだとそういうのも厳しい感じです。 あと CSS の使われていないスタイルも。 DevTools にはそういうものを検出する機能があります。 先にまとめ Coverage パネルを使って未使用箇所や割合を計測 まともにやるならツールを 未使用コードを検出 DevTools の右上 “…” → More tools → Coverage 指示に従い reload ボタンを押す 画面は再読み込みされる 必要に応じて

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

何もしないでそのままでも十分かもしれない。 先にまとめ 最近の 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 でテンプレートから作成します。

意識しないとすぐTwitterに書いて終わりにしてしまうので、気負わず軽い気持ちで書きます。 諸事情により音声認識APIを試しているんだけど、ウェブ標準でもそういうAPIが準備中であるのに気づきました。現状のGoogle Chromeでもそこそこ動くようです。せっかくなので（Chromeで）動くやつを用意してみました。 ginpei/speech-recognition-example ginpei/speech-recognition-example まだ実験的な機能だし、実際動きも微妙なところなので、やっぱりGoogleなりMicrosoft AzureなりのAPI使う方が良さそう。無料枠あるし。 基本的なコード // 作成 const sr = new window.SpeechRecognition(); // 完了時に結果を表示 sr.addEventListener('resu

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

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” ペインを追

現代的JavaScriptおれおれアドベントカレンダー2017 – 11日目 概要 Promise を使った非同期の処理をさくさく書けるやつです。 簡単な例としては、まず Promise オブジェクトを返す関数↓があったとして、 // 指定ms待つ function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } function sayAfterSleeping(message) { console.log('ぐー……'); sleep(1000) .then(() => { console.log('むにゃ……'); return sleep(1000); }) .then(() => { console.log('あ、ごめん寝てた。えっと……'); return sleep(1000); })

DOMおれおれAdvent Calendar 2015 – 01日目 HTML文字列からががーっと生成する場合は el.innerHTML=htmlText と書くのが普通だと思うんですが、 insertAdjacentHTML() というAPIもあります。 var el = document.querySelector('div#out'); var html = '<b>BOLD</b>'; var position = 'afterbegin'; el.insertAdjacentHTML(position, html); // -> <div><b>BOLD</b></div> "position" はHTML文字列を挿入する位置を指定します。以下のいずれかです。 "beforebegin" "afterbegin" "beforeend" "afterend" それぞれ開始タグの

小ネタですが数か月ぶりに記事を書いてみます。 var day = '日月火水木金土'[new Date().getDay()]; console.log('今日は' + day + '曜日'); — 高梨ギンペイ (@ginpei_jp) July 31, 2015 解説 曜日情報の取得 現在日時の情報を new Date() で取得します。 var now = new Date(); と書いた方がわかりやすいかもしれない。 で、その現在日時情報が格納されたDateオブジェクト now のメソッド .getDay() で曜日の取得です。ただし戻り値は数値で、 0 なら日曜日、以下月火水……と続きます。 .getDay() 曜日

JavaScriptおれおれAdvent Calendar 2014 – 21日目 よくある処理についてまとめました。 スクロールの監視 windowを対象にscrollイベントを監視するだけです。documentでも動くけど、古いIEは駄目。いちいち変える理由もないので、windowだけ使えばよろし。 $(window ).on('scroll', function(event){ console.log('window'); }); $(document).on('scroll', function(event){ console.log('document'); }); // IE 8では呼ばれない スクロール位置の取得 document.documentElement.scrollTopに現在のスクロール位置が格納されています。ちなみにdocument.documentElemen

これですね。これ何か呼び方あるの？ なにこれ グローバル変数にならないようにする仕組み。 スコープ問題 JavaScriptではスコープ（変数の有効範囲）は関数単位（function(){～}）になるのが基本。 そして一番外側、どの関数の中でもないものは「グローバルスコープ」に所属する「グローバル変数」となり、どこからでも利用できる変数になる。そうなるとどこかで変数の名前がかぶった際、勝手に値が変わったりして大変恐ろしい事になってしまう。 そこで、ファイル全体を関数で括る事でスコープを生成して、グローバルではない変数にしておこう、というもの。ただしvar宣言なしに変数を使い始めると、結局グローバル変数になってしまうので注意。 次世代JavaScriptだとletとかあるけど触れません、関係ないし。 関数の前後にくっついてる括弧は 関数は作成するだけでは何もならないので、即時実行してやります

（追記: 2018年10月）何年か経ってから見ても内容大丈夫そうでした。 この記事はFrontrend Advent Calendar 2013の6日目の記事です。昨日は谷さんでWeb Components/Polymerを軽く触ってみるでした。（これ今後数年で大流行りしそうに思うので、未読なら是非！） さて、最近はHTML5だCSS 3だFlashやめてJS制御でアニメーションだーってんで盛り上がってるわけですが（周回遅れ）、いざアニメーションを実装してみても、なかなかスムーズに動いてくれなかったりしますね。 どうやったらスムーズに動くかってのを解説したいと思います。 なおこの辺りの情報は、概ね斎藤さんを中心としたFrontrend絡みの方々に教えて頂きました。感謝感謝。 先に結論 概念的なの GPU合成レイヤーを適切に使うと早い いわゆるハードウェアアクセラレーション 何がCPUで、何

この記事はJavaScriptおれおれAdvent Calendar 2013の4日目の記事です。 ブックマークレットてご存じですか？　ブックマークにJavaScriptを登録して、あれこれの機能を使おうというものです。 説明ははてなのページがわかりやすそう。 ブックマークレット – はてな Mobile Safariでも利用する事が出来ます。 例えば ウェブページのタイトルとURLをコピーしやすく提示 何かのページを見ていてTwitterに流したいなーってときに使ってます。 javascript:prompt(”,document.title+’ ‘+location.href);void 0 みてる / Web Components/Polymerを軽く触ってみる | inkdesign http://t.co/iW2c1XzEdV — 高梨ギンペイ (@ginpei_jp) 2013