やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

JavaScript

JSでプライベートかつジェネレータのメソッドを定義する方法

一瞬ハマったので実際に書いてみた。

Chromeのバグ? デベロッパツールにあるスマホ・シミュレータが不正な画面サイズを返す

JavaScriptのdocument.body.clientWidthなどで画面サイズを取得すると、間違った値が返される。

JSで数値をソートすると文字列順になる罠

[9,10,1].sort()の結果が[1,10,9]になってしまう。バカなの?

HTML文書をつくる20 キャンバス(canvas)

[<canvas>][canvas]は、JavaScriptで描画する領域である。</canvas>

WEB開発の超基礎まとめ

最低でもこれくらい知っておくべき。

テスト用フレームワークを試す【vitest】

[vite]と連携できる高速なテスト用フレームワーク[vitest]を使ってみた。

JSで単体テストする(console.assert)

フレームワークもあるが、まずは標準APIを使ってみる。

フロントエンド開発環境を構築する(Node.js、テンプレートエンジン、プリプロセッサ、トランスパイラ、モジュールバンドラ、フォーマッタ、リント、タスクランナー)

ラズパイ4(4GB, 32bit)にて、WEBアプリやサイトを開発するために。

最小コード例(HTML, CSS, JS)

[規格][]に応じたコードを書いて動かしてみる。

ラズパイ4にDenoをインストールする(失敗)

DenoはNode.jsの後継版。

JSでCSSの変数を保存する(LocalStorage)

閉じたとき、更新したときなどアンロードされたら保存する。

JSでCSSの変数をセットする(CustomProperty)

CSSのカスタムプロパティをJSで操作する。

RustでWebAssembly:HelloWorld

最小コードを書いてビルドし実行して結果が正しいことを確認した。

HTMLのカスタム要素を使ってみた

文字数と読了時間を表示する要素を作ってみた。

右クリック禁止やめませんか? 引用ツールの提案

右クリック禁止は効果がありません。代わりにワンタッチで引用できるツールを導入したほうがよいでしょう。

rtをコピーしないようにする

HTMLでルビを振ったあとブラウザでテキストコピーしたら漢字かんじみたくなるのを防ぐ方法。

ElasticLunr.jsで全文検索する(日本語+英語でAND検索)

日本語と英語でAND検索できた。

Lunr.jsで全文検索してみる(日本語OR検索)

日本語をOR検索できた。ただし英語との混在や、複数単語によるAND検索はできない。

jsGridを使ってみた

複数キーでソートできない。

Grid.jsを使ってみた

PureJSで使える。ライブラリ依存なし。vueなどのライブラリでも使える。

JSでクラスを文字列から動的生成する3つの方法

JSでクラスを文字列から動的生成する3つの方法 eval(),Function(),import()。

ウインドウの上辺にマウスオーバーすると表示される領域をつくる

できるだけ隠したいので。

ラジオボタン要素+DomMapper+Storage

3つのプロジェクトを統合した。非ESModule版と、ESModule版がある。

ラジオボタン要素+DomMapper

value属性をキーにしてtextContentやtitleの値を後付けする。ついでに選択状態を保存してくれる。

localStorageに自動保存する(input,select,textarea)

閉じるときに1回のみ保存するか、入力時に毎回保存するか選べる。

背景色から白・黒みやすいほうを返す

背景色は好きな色にする。それに応じて文字色として見やすい色を返す。

JavaScript開発しているときにハマったこと

最近やっててハマった代表的なものをメモる。

Elasticlunr.jsで全文検索してみた(日本語)

できたっぽい。

HTMLのcodeタグを改良した(外部参照+ハイライト+コピー)

技術系サイトでは標準的なヤツら。これを<code src="/path/">でできるようにした。</code>

webpack5でprivateキーワード#がエラーになった2

前回もなったが再び。対策がたった1日で使えなくなった。萎える。webpackが5.17.0から5.18.0にあがったせいだった。さすがECMAScript界隈クソで有名なだけはある。