以下の内容はhttps://let.blog.jp/tag/libraryより取得しました。


DOM 操作ライブラリの使い分け
色々使ってるとどれかに揃わないので最近の使い分け

ちょっとしたもの:
lit-html もしくは Preact+htm

少し規模が大きくなる:
WebComponent を使いたい:
lit-element もしくは WebComponent を生で

WebComponent を使いたくない:
ES Modules を使いたい:
Preact+htm

Webpack する:
React+JSX

気分を変えて:
hyperhtml
関数で WebComponents を作るライブラリ
こんなライブラリ見つけました
https://github.com/michael-klein/funcy.js

WebComponents を使う場合 通常は CustomElements を使って HTMLElement を継承したクラス定義を書きます
このライブラリでは関数定義でかけるようにしてくれています
もちろん内部ではクラスを作って customElements.define を使ってます

関数は React の関数コンポーネントのような hook があり useXXX で使う仕組みです
シンプルなものだと関数が要素を返すだけです

usePreactHtm という hook もあって Preact と htm を使うこともできます

CustomElements の定義はムダに書くことが多くて面倒な上 属性とかも扱えてしまう分 その辺りもちゃんと対応しておきたい気がしてどんどん面倒になるのでそういうことを一切気にしなくていいライブラリを使うのもありかなと思いました
フォーム作るのに便利かも
https://nosir.github.io/cleave.js/

クレカ番号でどの会社か表示してくれたり 電話番号でスペース開けてくれたり
日本指定したら固定電話と携帯でスペースの位置が変わったりとすごく親切

日付や時刻もあるし ユーザがフォーマットの指定もできる
法則性のあるテキストを入力してもらうときに入れとく便利かも
Faker
パッケージやモジュールをテスト用などに偽物に置き換えてくれるツールないかなーと探してて 名前的に faker とかでググったらあったりしないかなと探してみたところ……
ダミーデータを作るためのライブラリが出てきました
fake に置き換えてくれるものじゃなくて fake を作るためのライブラリでした

思ったより数があったので見てみるとどれも関連していて別言語へ移植したものみたいです

Python
https://github.com/joke2k/faker

Faker is heavily inspired by PHP Faker, Perl Faker, and by Ruby Faker.

PHP
https://github.com/fzaninotto/Faker

Faker is heavily inspired by Perl's Data::Faker, and by ruby's Faker.

PHP には別の faker もありましたが 全く違うものではなくこっちも元が同じようです
https://github.com/bobthecow/Faker

Faker is a PHP port of a Ruby port of Data::Faker from Perl.

Ruby
https://github.com/faker-ruby/faker

This gem is a port of Perl's Data::Faker library that generates fake data.

JavaScript
https://github.com/marak/Faker.js/

faker.js was inspired by and has used data definitions from:

Perl
https://metacpan.org/release/JASONK/Data-Faker-0.07
https://metacpan.org/pod/release/WSHELDAHL/Data-Faker-0.10/lib/Data/Faker.pm

他言語のもとになったもの
参照は 0.07 の古い物が多いけど新しい 0.10 もでてるみたい

まとめ

Perl
→ Python
→ Ruby
→ PHP
→ JavaScript

Ruby
→ Python
→ PHP
→ JavaScript

PHP
→ Python
datepicker 系ライブラリ
input の type="datetime-local" の日付入力サポートの変わりのライブラリを探してるけど
jQuery ありのものが多めで依存なしのは少なめ
日付だけでじゃなくて時刻も設定したいけど対応してるのは少なめ

マイナーなのも多いけど時刻も選べる jQuery いらずのライブラリのまとめ

flatpickr
https://flatpickr.js.org/

基本はこれでよさそう
各種フレームワークに対応していて star も 1 万超え
時刻入力は AM/PM じゃなくて 24 時間表記にしたいけど軽く見た感じ無理そう
カレンダーのサイズをもうちょっとコンパクトにしたい気がする

Material Design - Date & Time Picker
https://puranjayjain.github.io/md-date-time-picker/

moment.js とフォントロードの CSS が必要
見た目が結構好き
時刻をアナログ時計風に選択できるのがいいところ

simplepicker
https://priyank-p.github.io/simplepicker/index.html

パット見は良さそうだけど時刻入力がイマイチ
star もほぼないし (< 10) マイナーどころ

tail.DateTime
https://github.pytes.net/tail.DateTime/

見た目が好き
コンパクトでカレンダーの下で時刻選択ができる
時刻は 24 時間表記で選択できる
デモを試した感じ悪いところなさそうだけど star は少なめ (60)

Window Date Picker
https://cevadtokatli.github.io/window-date-picker/

見た目良さそうだけど カレンダーと時刻選択で画面変わるのがいまいち
star は 10 未満

Picker.js
https://fengyuanchen.github.io/pickerjs/

カレンダーを使わないのが特徴
タッチ操作で選択するときに出そうなそれぞれを回転させて選ぶやつ
カレンダーがいらないならこれでいいと思う
star は 200 ちょっとでそこそこある



条件外

Date Range Picker
https://www.daterangepicker.com/

日付の範囲を選ぶのに特化したライブラリ
高機能で star も 9000 以上ある
ただ jQuery 依存

Light Pick
https://wakirin.github.io/Lightpick/

時刻選択できない

pickadate.js
https://amsul.ca/pickadate.js/

star は 7000 超えと多め
だけど jQuery 依存

Pikaday
https://github.com/Pikaday/Pikaday

star は 7000 弱あって依存なし
datepicker であって時刻は対応しないみたい
時刻に対応したフォークはあるけどどれもメンテされてない
イメージプレビュー系ライブラリ
Fancybox3
https://fancyapps.com/fancybox/3/
jQuery
良い感じだけど jQuery 依存なのだけがネック
モバイル対応や GPU アクセラレーションやマルチインスタンス対応など高機能なのでもったいない

Fullscreen Lightbox
https://fslightbox.com/javascript
VanillaJS
jQuery 依存ないし良い感じだけど無料版は基本機能だけ
ズーム・サムネ・キャプション・ツールバー など便利機能は有料版の PRO 必要

Lightbox2
https://lokeshdhakar.com/projects/lightbox2/
jQuery
これがこの系統ライブラリのスタンダード?
lightbox 系と呼ばれたりもするし元になったらライブラリぽい
jQuery 必要だし機能もシンプルで最低限だけみたいなので あえて選択はしなくていいかも

WA MediaBox
https://jiri.hybek.cz/wa-mediabox/
VanillaJS
ドキュメントみても情報少なめ(機能が自体が少なめ?)
DEMO の感じだと ZOOM とかキャプションなど高機能なものはなさそう
画像ロード遅め(DEMO の画像が重いだけかも)

PhotoSwipe
https://photoswipe.com/
VanillaJS
ツールバーやキャプションにズームなど 基本機能以上の機能があるしモバイルも対応
さらに VanillaJS ととても良さそうなのに特に聞かない名前だし ウェブサイトもシンプルでちょっと古めなイメージの見た目

lightgallery.js
https://sachinchoolur.github.io/lightgallery.js/
VanillaJS
VanillaJS ですごく高機能
ツールバーやキャプション・ズームに加えて サムネ表示やサムネにカーソル合わせたときのアニメーションもある
ウェブサイトもきれいでアニメーションやロード画面などあって PhotoSwipe よりできる感ある



以上の内容はhttps://let.blog.jp/tag/libraryより取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.14