JavaScriptの識別子に中黒が使えるようになった: Days on the Moon
JavaScriptの識別子（変数名、関数名、プロパティ名など）の2文字目以降に中黒「・」（U+30FB KATAKANA MIDDLE DOT）が使えるようになりました。以下のコードはChrome 124では構文エラーになりますが、Chrome 125では問題なく実行できます。 const シン・ゴジラ = 2016; JavaScriptの識別子 中黒が使えるようになったのは、JavaScript（ECMAScript）の仕様が変わったからではありません。変わったのはUnicodeの仕様のほうです。Unicode 15.1.0（2023年9月）においてOther_ID_Continueプロパティ（を持つ文字の集まり）に中黒が追加されました。 そもそもJavaScriptの識別子に使える文字は、Unicodeを参照して定義されています。ECMAScript 2023（2023年6月）では
CSSでチェックボックスやラジオボタンをカスタマイズする 2024年版: Days on the Moon
HTMLのチェックボックス（<input type="checkbox">）やラジオボタン（<input type="radio">）をCSSで装飾したいというのはよく聞く話です。2024年現在は、HTMLの記述は簡単なまま、CSSで自由度の高い装飾も実現できるようになっています。 結論 従来の手法 appearanceプロパティを使う手法 外枠の配置 未チェックとチェック済みの切り替え 強制カラーモードへの対応 透明なボーダーやアウトライン 内向きの影や背景グラデーション 画像やテキスト ブラウザ組み込みの外観 状態に応じたスタイルの指定 参考文献 結論 単に色調を整えられればよいという場合は、accent-colorプロパティを使います。 input[type="checkbox"], input[type="radio"] { accent-color: #d31; } くだもの や
CSSでスクロールバーの有無によるがたつきをなくす: Days on the Moon
この記事はCSS Advent Calendar 2022の9日目の分です。 CSSのボックスモデルにおいては、ボーダーの内辺とパディングの外辺の間にスクロールバーが配置されます。最近はどのOSでもオーバーレイスクロールバー（スクロールバーが内容の前面に覆いかぶさるようなもの）が主流となり、スクロールバーが存在してもしなくても内容の幅が変わらないようになっています。一方、クラシックスクロールバー（スクロールバーが常に表示されるようなもの）が使われる環境では、overflow: autoな要素において内容がはみ出すときとはみ出さないときで内容の幅が変わってきます。 クラシックスクロールバーが使われる環境でも内容の幅を一定に保ちたいという場合は、scrollbar-gutterプロパティを使います。scrollbar-gutter: stableを指定すれば、スクロールバーが表示されないときで
TypeScript で string 型の値に自動補完を効かせる: Days on the Moon
結論 type X = 'foo' | 'bar' | (string & {}); のように、文字列リテラル型の共用体型に | (string & {}) を付け足した型 X を定義します。X 型は任意の文字列を受け付けますが、IDE (Visual Studio Code など) で X 型の値を入力するときには 'foo' と 'bar' が自動補完の候補として提示されます。 解説 単純に type X = 'foo' | 'bar' | string; と書いてしまうと、共用体型の各要素がまとめられて、X は単なる string 型になってしまいます。{} 型は null と undefined を除く任意の値を受け付けるので、string & {} 型は実質的に string 型と同一なのですが、TypeScript 4.4 の時点では同一扱いされず、共用体型の各要素がまとめられ
JavaScriptの正規表現の戻り読みはPerlのそれよりも表現力が高い: Days on the Moon
ECMAScript 2018で正規表現の戻り読み(lookbehind)が追加されました。 /(?<=foo)bar/.test('foobar'); // => true 'foobar'.replace(/(?<=foo)bar/, 'baz'); // => 'foobaz 正規表現の戻り読みと言えばPerlでは1998年7月リリースのバージョン5.005からサポートしており、そこから20年もたってと思いたくなるかもしれません。しかし、ECMAScript (JavaScript)のそれはPerlのものとは一味違います。なんと戻り読みの中で量指定子(*、+、?、{n}など)を使えるのです。 // JavaScriptなら(?<=...)の中で+が使える。 /(?<=fo+)bar/.test('foobar'); // => true # Perlでは(?<=...)の中で+を使お
CSS の -webkit-line-clamp プロパティについて: Days on the Moon
この記事の内容は古びている。この記事が最初に執筆されたのちに、CSS Overflow Module では line-clamp プロパティが定義された。この line-clamp プロパティは max-lines、continue、block-ellipsis プロパティに対する一括指定プロパティである。 結論からいうと、CSS の -webkit-line-clamp プロパティは使わないほうがいい。現状および今後の Web ブラウザでのサポートが望めないからである。 -webkit-line-clamp CSS プロパティとは何か 複数行でも3点リーダーをきかせることができるというもの。 このプロパティはどうやって使うか -webkit-line-clamp プロパティ単体では効果を持たず、他のプロパティと組み合わせて使う。 selector { display: -webkit-b
知られてそうで知られてない少し知られてるECMAScript 2015 (ES6)の新機能: Days on the Moon
Kyoto.js #10で「知られてそうで知られてない少し知られてるECMAScript 2015 (ES6)の新機能」というライトニングトークをしたので、そのスライドに当日しゃべった内容や補足を追記して以下に掲載します。 自己紹介 nanto_vi 情報規格調査会SC 22/ECMAScript Ad hoc委員会 editional issueの報告 ECMAScript 2015 (ECMA-262 6th Edtition) クラス構文 アロー関数 ブロックスコープ Promise etc... 2015年にECMAScriptが大幅に改定されました。クラス構文やアロー関数の追加はあちこちで取り上げられているので皆さんご存知でしょうが、ここではあまり取り上げられていない地味な新機能を紹介します。 Unicodeの符号位置 // 🍣 '\uD83C\uDF63'; // ES5 '
長い英単語を途中で折り返したいときの CSS の指定方法: Days on the Moon
ヨーロッパ系の言語では基本的に単語の途中に折り返しを入れません。しかし、幅の狭い領域に長い英単語を記述するときや、笑いを表す「www…www」のように欧文文字を表現に組み込むときなど、欧文文字同士の合間で折り返したいと思うかもしれません。そのような折り返しの制御を CSS で行うにはどうすればよいのでしょうか。 2013 年 6 月時点の結論 word-wrap: break-word を使うとどうなるのか word-break: break-all を使うとどうなるのか word-wrap: break-word と word-break: break-all を両方使うとどうなるのか なぜ word-break: break-all ではなく word-wrap: break-word を勧めるのか どこに word-wrap: break-word を指定するのか position:
flexbox レイアウトで内容がはみ出す理由: Days on the Moon
「flex box layoutで中に長いテキストなどを含む幅可変要素のレイアウト - くらげだらけ」という記事が興味深いです。過去に「長い英単語を途中で折り返したいときの CSS の指定方法」にて、word-wrap: break-word と display: inline-block などの組み合わせには注意が必要 (word-wrap の指定が効かないように見えることがある) と述べたのですが、似たようなことが display: flex にも言えるようです。 この挙動は認識していなかったので CSS Flexible Box Layout Module Level 1 (flexbox 仕様草案、2016 年 4 月 2 日時点のもの) を見てみたところ、「4.5. Implied Minimum Size of Flex Items」(flex アイテムの暗黙的な最小サイズ)
漢字にマッチする JavaScript の正規表現パターン: Days on the Moon
たまに漢字にマッチする正規表現パターンを書きたいときがあります。Perl の正規表現だと Unicode のスクリプト名を使って \p{Han} で漢字にマッチさせられるのですが、JavaScript ではそうはいきません。JavaScript の正規表現には以下のふたつの問題があります。 Unicode スクリプト名の指定 (\p{...}) に対応していない。 そもそも Unicode の符号位置に対してマッチさせられない (UTF-16 における符号単位に対するマッチになる)。 BMP 外の文字にマッチさせたいときは、サロゲートペアの符号単位を記述する必要がある。 これに関しては ECMAScript 2015 で導入された /u フラグで解決する見込み。 とはいえ、解決不能な問題というわけでもないので、Perl の \p{Han} を JavaScript に移植してみましょう。\
jQuery で HTTP 接続するときの書き方: Days on the Moon
12 月 13 日に Kyoto.js の第 3 回 meetup で、「jQuery で HTTP 接続するときの書き方」と題した 5 分間のライトニングトークを行いました。以下にその内容を一部再構成して収録します。 こんにちは、nanto_vi です。今日は jQuery で HTTP 接続をするときの書き方について話します。 皆さん jQuery を使うことも多いかと思います。jQuery で HTTP 接続をするとき、古いサンプルだと次のような書き方が載っています。 $.ajax({ url: '/foo/bar', data: { baz: 'qux' }, success: function (data) { console.log(data); }, }); 接続完了時の処理をコールバック関数として $.ajax() に渡してやる形ですね。しかし、現在この書き方は非推奨となっ
DOM Events とブラウザの実装: Days on the Moon
ブラウザ上でのイベント処理の仕組みは DOM 2 Events および DOM 3 Events 草案にて規定されています。しかし、DOM 2 Events で言及されていない部分など、細かい動作はブラウザごとに異なっていることもあります。そうした仕様と実装の差異を、「作って納得! DOM 2 Events」で触れなかったものも含めて、いくつかまとめてみました。 ターゲットフェーズで呼び出されるリスナ DOM 2 Events のイベントモデルにおいて、あるノードでイベントが発生すると、そのノードの祖先ノードのイベントリスナが呼び出されるキャプチャリングフェーズ、そのノード自身のイベントリスナが呼び出されるターゲットフェーズ、再び祖先ノードのイベントリスナが呼び出されるバブリングフェーズと、3 段階にわたってイベントが伝播していきます。このうちターゲットフェーズでは、addEventLis
chrome URL からファイル一覧を取得する: Days on the Moon
Firefox にて、ディレクトリを指す chrome URL から、そのディレクトリ以下の全ファイルの URL を返すサンプルコードを書きました。 ChromeFiles.get("chrome://browser/content/"); /* => [ "chrome://browser/content/NetworkPanel.xhtml", * "chrome://browser/content/aboutDialog.css", * ..., * "chrome://browser/content/browser.css", * "chrome://browser/content/browser.js", * "chrome://browser/content/browser.xul", * ... ] */ 特徴として、実際のファイルが (.jar または .xpi に) パッ
Firefox Developers Conference 2010: Days on the Moon
Firefox Developers Conference 2010 に行ってきた。全体のまとめとしては以下が詳しい。 Firefox Developers Conference 2010 アウトラインメモ | Web scratch nakamura001 @ ウィキ - Firefox Developers Conference 2010 はてなブックマークで fxdevcon タグがつけられたエントリーを見てまわるのもいい。Firefox 4 ベータ版機能概要では新しいタブインターフェース "Panorama" の紹介動画を見られる。 内容に関しては上述のページを参考にしてもらうとして、個人的に感じたことををいくつか挙げる。 Beyond Firefox 4 (Jay Sullivan) Mozilla はユーザーの選択肢を広めることを重視する、逆に言えば単一のプラットフォームを目指
作って納得! DOM 2 Events: Days on the Moon
ブラウザ上でのプログラミングで避けては通れないのがイベント処理。その仕組みは DOM Level 2 Events にて規定されています。しかし、とりあえず addEventListener メソッドを使ってはいるものの、それがどのような意味を持つか詳しくは知らないといったことはありませんか。そこでここでは、DOM 2 Events のイベントモデルを理解し、ブラウザが裏で何をしているのかを把握するために、実際にそのイベントモデルを実装してみることにします。具体的には、仕様書に定められたインターフェースを JavaScript で実装し、それらを組み合わせてイベントの発生をシミュレートしてみます。 Event インターフェース EventListener インターフェース EventTarget インターフェース DocumentEvent インターフェース DOMException イン
リンクのようなボタンを作る: Days on the Moon
こんばんは、JavaScript Advent Calendar 2010、15 日目担当の nanto_vi (なんと) です。12 月 15 日が何の日か調べてみると東北本線が宮城県に到達した日とのこと。当時は上野から仙台まで 12 時間 20 分かかったそうです。それから 123 年を経た現在では同じ時間で鹿児島中央から新青森まで行けるようになり、鉄道の速度にも JavaScript の実行速度にも日進月歩を感じる今日この頃です。 さて、アプリケーションを作っていると、見た目はリンクのようだがリンクでない UI 部品を使いたくなるときがあります。ここで「リンクでない」とは、クリックしてもページ遷移が発生しないということです。このような UI 部品は、ページ遷移の代わりにメニューの表示といった何らかのアクションを引き起こす、すなわちボタンとして振舞います。 ユーザーインターフェース記述
JavaScript で構文解析: Days on the Moon
C++ の特徴のひとつである演算子オーバーロード、その粋を極めたのが Boost Lambda (無名関数) と Boost Spirit (構文解析) ではないかと思っています。JavaScript では無名関数が使えるので Lambda に関しては間に合っているとも言えますが、Spirit はそうも行きません。JavaScript 2 で演算子オーバーロードがサポートされるのならチャレンジしてみようかななどと思ってそれきりになっていました。 しかし、一部でパーサブームが起こっているというのを受け、Perl 6 Rules をつらつらと眺めているうち、正規表現のメタ文字を使えば文法定義をきれいに書けるのではと思い至りました。そこで実際に JavaScript でパーサジェネレータを作り、Spirit にあやかって Gin (ジン) と名づけてみました。 文法定義 正規表現リテラルを使うこ
JavaScript の new 演算子の意味: Days on the Moon
JavaScript における new 演算子の動作は大まかにいって以下のとおりである。(new F() とした場合。) 新しいオブジェクトを作る。 1 で作ったオブジェクトの [[Prototype]] 内部プロパティ (__proto__ プロパティ) に F.prototype の値を設定する。 F.prototype の値がオブジェクトでないのなら代わりに Object.prototype の値を設定する。 F を呼び出す。このとき this の値は 1 で作ったオブジェクトとし、引数には new 演算子とともに使われた引数をそのまま用いる。 3 の返り値がオブジェクトならそれを返す。そうでなければ 1 で作ったオブジェクトを返す。 ここで「オブジェクトである」というのはプリミティブ値 (文字列、数値、真偽値、undefined 、null) ではないということだ。new Stri
Narcissus の正規表現: Days on the Moon
「前のエントリで書き忘れてた - 最速チュパカブラ研究会」にて、Narcissus で使われている正規表現が参考になるという話が出ています。 文字列リテラル /^"(?:\\.|[^"])*"|^'(?:[^']|\\.)*'/ 正規表現リテラル /^\/((?:\\.|[^\/])+)\/([gimy]*)/ コメント /^\/(?:\*(?:.|\n)*?\*\/|\/.*)/ 一流の人が書いたものを使いましょうというのに異を唱えるつもりはありませんが、そのままコピー & ペーストしていては意味がありません。ここはやはり一文字一文字心をこめて写経しましょう……ではなく、どうしてその書き方でうまくいくのかをきちんと考えた上で使いましょう。 文字列リテラルにマッチする正規表現 上記の文字列リテラルを表す正規表現から、一重引用符でくくられた文字列にマッチする部分だけを抜き出すと '(?:[^
JavaScript でカリー化、再び: Days on the Moon
以前、「JavaScript で引数束縛」において関数のカリー化を試みました。しかし、そこでカリー化された関数は、そのままでは一度しか部分適用ができず、また、最初の関数呼び出しは必ず部分適用として扱われていました。 function mean3(a, b, c) { return (a + b + c) / 3; } // 「JavaScript で引数束縛」における curry 関数。 var curriedMean3 = curry(mean3); curriedMean3(1)(2, 3); // => 2 curriedMean3(1)(2)(3); // => TypeError: curriedMean3(1)(2) is not a function // そのままでは部分適用を 2 回以上行えない。 // curry(curriedMean3(1))(2)(3) なら大丈夫
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
