やってみる

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

JavaScript

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界隈クソで有名なだけはある。

DOMマッパーを作った

CSSセレクタで要素を指定して、指定した値をあてがう。多言語化に使えるかと思ったのがはじまり。

radioタグをライブラリにした(CDN)

これでサクッとラジオボタンが作れる。

radioタグのwebpack版をつくった

importコードに作り変えて。

Babelをインストールしてwebpackでビルドする

private # なコードをビルドできた!

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

なんでや。ブラウザでなら普通に実行できたのに。

JSコード実行環境フローチャート

3パターンある。

webpack5を使う【最短】

いい感じにできた。

Element Plus【JS用UIライブラリ】

vueを使ったユーザインタフェースのライブラリ。

JSでラジオボタンのタグ<radio>を作った

簡単だった。DOM操作すればいいだけ。

vue3でラジオボタングループのコンポーネントをつくるときの考察1(HTML,JS)

考えるべきことが多いのでまとめた。

VueをCDNで使う

まとめておく。

縦書きにするJSライブラリ

調べてみた。

縦書きしてみる(HTML+CSS+JS)

とりあえず版。ビジュアルはとてもキレイ。

vue.jsのrender()を使う

ドキュメントの最初で見てから気になってたので。

vue.js3のcreateApp()について調べる

謎のメソッドたちを把握する。

Vue.ref()を使う

値の変更ができた!