自分用 Web フロントエンドライブラリメモ。
名前 | リポジトリ | 備考 |
---|---|---|
MobX | https://github.com/mobxjs/mobx | |
Immer | https://github.com/immerjs/immer | |
Mutative | https://github.com/unadlib/mutative | faster Immer |
名前 | リポジトリ | 備考 |
---|---|---|
memoize-one | https://github.com/alexreardon/memoize-one/ | |
Reselect | https://github.com/reduxjs/reselect | 全状態を単一オブジェクトに詰め込んでいる場合に限り有効。 |
名前 | リポジトリ | 備考 |
---|---|---|
Linaria | https://github.com/callstack/linaria | |
style9 | https://github.com/johanholmerin/style9 | |
https://github.com/okotoki/cssed | ||
https://github.com/atlassian-labs/compiled | ||
https://github.com/uhyo/lightwindcss |
名前 | リポジトリ | 備考 |
---|---|---|
tailwindcss | https://github.com/tailwindlabs/tailwindcss | |
tailwindcss-intellisense | https://github.com/tailwindlabs/tailwindcss-intellisense | https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss |
tailwindcss-classnames | https://github.com/muhammadsammy/tailwindcss-classnames | |
twind | https://github.com/tw-in-js/twind | |
twin.macro | https://github.com/ben-rogerson/twin.macro | |
https://github.com/Arthie/xwind | ||
https://github.com/thien-do/typed.tw | ||
Windi CSS | https://github.com/windicss/windicss | |
UnoCSS | https://github.com/unocss/unocss | |
Master CSS | https://github.com/master-co/awesome-master-css |
名前 | リポジトリ | 備考 |
---|---|---|
Vest | https://github.com/ealush/vest | |
Yup | https://github.com/jquense/yup |
名前 | リポジトリ | 備考 |
---|---|---|
Balloon.css | https://github.com/kazzkiq/balloon.css | CSS カスタムプロパティが利用されている(そのままでは IE 11 で動かなそう)。 |
Hint.css | https://github.com/chinchang/hint.css | [class*="hint--"] のようなセレクターが使われている。古いベンダープレフィックス付きの -moz-transform や -moz-transition が使われていて冗長。 |
Tlite | https://github.com/chrisdavies/tlite | title 属性を見てくれるので既存コードへの適用がラク。 |
html5tooltips.js | https://github.com/ytiurin/html5tooltipsjs | 表示アニメーションのプリセットがいくつかあっておもしろい(ただし実際のプロダクトではツールチップが目を引いちゃダメ)。 |
https://github.com/eliortabeka/tootik | ツールチップ本体表示後、遅れて吹き出しの尻尾が出てくる。この挙動が気になるので使えない。 | |
https://github.com/ghosh/microtip | 対象要素に role="tooltip" を付与しなければならない奇妙仕様。 |
|
https://github.com/atomiks/tippyjs | Popper ベース。重い。 |
名前 | リポジトリ | 備考 |
---|---|---|
Toastify | https://github.com/apvarun/toastify-js | |
toastedjs | https://github.com/shakee93/toastedjs |
名前 | リポジトリ | 備考 |
---|---|---|
topbar | https://github.com/buunguyen/topbar | |
Rsup Progress | https://github.com/skt-t1-byungi/rsup-progress | |
https://github.com/HubSpot/pace | XHR 時代は何も考えずに使えて非常に便利だった。既知のメモリリークがある。 |
名前 | リポジトリ | 備考 |
---|---|---|
html-native-modal | https://github.com/luncheon/html-native-modal | <dialog> は z-index に関係なく他の absolute / fixed / sticky 要素より手前に表示されるので、ツールチップやトーストなどポップアップと相性が悪い場合がある。 |
Modal Vanilla | https://github.com/KaneCohen/modal-vanilla | |
Micromodal.js | https://github.com/Ghosh/micromodal | |
HystModal | https://github.com/AddMoreScripts/hystModal | |
https://github.com/robinparisi/tingle | 背景が全く見えなくなる。 閉じるときアニメーションがない。 |
|
https://github.com/edenspiekermann/a11y-dialog/ | マークアップが非常に煩雑。 閉じるときアニメーションがない。 |
名前 | リポジトリ | 備考 |
---|---|---|
Golden Layout | https://github.com/golden-layout/golden-layout |
名前 | リポジトリ | 備考 |
---|---|---|
Tabby | https://github.com/cferdinandi/tabby |
名前 | リポジトリ | 備考 |
---|---|---|
flex-splitter-directive | https://github.com/luncheon/flex-splitter-directive | |
Split | https://github.com/nathancahill/split/ |
名前 | リポジトリ | 備考 |
---|---|---|
Flicking | https://github.com/naver/egjs-flicking | |
Embla Carousel | https://github.com/davidcetinkaya/embla-carousel | |
Splide | https://github.com/Splidejs/splide |
名前 | リポジトリ | 備考 |
---|---|---|
elab | https://github.com/luncheon/elab | スクリプト記述不要 |
Virtual Select | https://github.com/sa-si-dev/virtual-select | |
vanillaSelectBox | https://github.com/PhilippeMarcMeyer/vanillaSelectBox | |
Choices.js | https://github.com/jshjohnson/Choices | |
<multiselect-combo-box> | https://github.com/gatanaso/multiselect-combo-box | Polymer |
名前 | リポジトリ | 備考 |
---|---|---|
<input type="date"> |
もうこれで十分 | |
Pikaday | https://github.com/Pikaday/Pikaday |
名前 | リポジトリ | 備考 |
---|---|---|
Clocklet | https://github.com/luncheon/clocklet |
名前 | リポジトリ | 備考 |
---|---|---|
Rough.js | https://github.com/rough-stuff/rough | SVG または Canvas に描画するグラフィックスライブラリ |
Rough Notation | https://github.com/rough-stuff/rough-notation | 下線や囲み線などによる装飾ライブラリ |
Chart.xkcd | https://github.com/timqian/chart.xkcd | グラフライブラリ |
roughViz.js | https://github.com/jwilber/roughViz | グラフライブラリ/要 D3.js |
名前 | リポジトリ | 備考 |
---|---|---|
svgo | https://github.com/svg/svgo | SVG Optimizer |
svg-path-properties | https://github.com/rveciana/svg-path-properties | <path> の getPointAtLength() と getTotalLength() |
svgpath | https://github.com/fontello/svgpath | <path> のアフィン変換 |
svg-path-bbox | https://github.com/mondeja/svg-path-bbox | <path> のバウンディングボックス計算(上の svgpath 依存) |
SVGCatmullRomSpline | https://github.com/SatoshiKawabata/SVGCatmullRomSpline | 点の配列を曲線で結ぶ(Catmull-Rom Spline 補完) |
simplify-svg-path | https://github.com/luncheon/simplify-svg-path | 点の配列を曲線で近似(Paper.js から当該機能だけ切り出したモジュール) |
svg-path-morph | https://github.com/Minibrams/svg-path-morph | 複数パス間のモーフィング(中間パス) |
名前 | リポジトリ | 備考 |
---|---|---|
Fabric.js | https://github.com/fabricjs/fabric.js | |
Konva.js | https://github.com/konvajs/konva | |
Two.js | https://github.com/jonobr1/two.js | |
iDraw.js | https://github.com/idrawjs/idraw |
名前 | リポジトリ | 備考 |
---|---|---|
agGrid | https://github.com/ag-grid/ag-grid | Enterprise 版は有料(商用利用有料って紹介してる記事もあるけど大丈夫そう) |
Grid.js | https://github.com/grid-js/gridjs | |
Cheetah Grid | https://github.com/future-architect/cheetah-grid | Canvas に表を描画する。 |
名前 | リポジトリ | 備考 |
---|---|---|
Importabular | https://github.com/renanlecaro/importabular | 編集可能な文字列テーブル(表計算というよりフォームの代替) |
Luckysheet | https://github.com/mengshukeji/Luckysheet | 非常に高機能な表計算ライブラリ(Canvas, jQuery UI, font-awesome, echarts)。 |
FortuneSheet | https://github.com/ruilisi/fortune-sheet | TypeScript で書き直された Luckysheet。まだ機能不足、今後に期待 |
x-spreadsheet | https://github.com/myliang/x-spreadsheet | Canvas ベースの表計算ライブラリ。 Luckysheet の方が高機能なので出番はなさそうか |
Jspreadsheet |
https://github.com/jspreadsheet/ce |
Table ベースの表計算ライブラリ(Canvas と違って CSS が効くので扱いやすい場合がある)。有償版あり。 Luckysheet の方が高機能なので出番はなさそうか |
https://github.com/handsontable/handsontable/tree/develop/handsontable | 商用版は非常に高価。数式評価が Hyperformula として切り出されているがこちらの商用利用はサポート問い合わせ。 | |
https://github.com/rowsncolumns/grid | 商用は高価 | |
RevoGrid | https://github.com/revolist/revogrid | MIT ライセンスのスプレッドシートコンポーネント。 |
SheetJS | https://github.com/SheetJS/sheetjs | 多様なスプレッドシートファイル形式の読み書き |
ExcelJS | https://github.com/exceljs/exceljs | xlsx ファイルの読み書きと操作 |
xlsx-populate | https://github.com/dtjohnson/xlsx-populate | xlsx ファイルの読み書きと操作 |
名前 | リポジトリ | 備考 |
---|---|---|
Clusterize.js | https://github.com/NeXTs/Clusterize.js |
名前 | リポジトリ | 備考 |
---|---|---|
SortableJS | https://github.com/SortableJS/Sortable | |
Dragula | https://github.com/bevacqua/dragula |
名前 | リポジトリ | 備考 |
---|---|---|
HC-Sticky | https://github.com/somewebmedia/hc-sticky |
名前 | リポジトリ | 備考 |
---|---|---|
Chart.js | https://github.com/chartjs/Chart.js | |
APEXCHARTS.JS | https://github.com/apexcharts/apexcharts.js | |
C3.js | https://github.com/c3js/c3 | 要 D3.js |
billboard.js | https://github.com/naver/billboard.js | C3.js のフォーク |
morris.js | https://github.com/morrisjs/morris.js | 要 jQuery |
Flot | https://github.com/flot/flot | 要 jQuery |
Plotly | https://github.com/plotly/plotly.js | |
Apache ECharts | https://github.com/apache/echarts |
名前 | リポジトリ | 備考 |
---|---|---|
Peity | https://github.com/benpickles/peity | 要 jQuery |
Sparklines | https://github.com/gwatts/jquery.sparkline | 要 jQuery |
名前 | リポジトリ | 備考 |
---|---|---|
MUI | https://github.com/muicss/mui | |
https://github.com/Dogfalo/materialize | 重い。 |
名前 | ホームページ | 備考 |
---|---|---|
98.css | https://jdan.github.io/98.css/ | A CSS library for building interfaces that look like Windows 98 |
XP.css | https://botoxparty.github.io/XP.css/ | A CSS library for building interfaces that look like old UIs |
System.css | https://sakofchit.github.io/system.css/ | A CSS library for building interfaces that resemble Apple's System OS which ran from 1984-1991 |
名前 | ホームページ | 備考 |
---|---|---|
Simple Icons | https://simpleicons.org/ |
名前 | ホームページ | 備考 |
---|---|---|
Iconer | https://iconer.app/ |
名前 | ホームページ | 利用規約 | 備考 |
---|---|---|---|
いらすとや | https://www.irasutoya.com/ | https://www.irasutoya.com/p/terms.html | |
イラストセンター | https://illustcenter.com/ | https://illustcenter.com/terms/ | |
shigureni | https://www.shigureni.com/ | https://www.shigureni.com/terms-of-use | |
商用利用無料、国内のフリーイラスト素材の総まとめ | https://coliss.com/articles/freebies/freebies-illustrations.html |
名前 | ホームページ | 利用規約 | 備考 |
---|---|---|---|
ぱくたそ | https://www.pakutaso.com/ | https://www.pakutaso.com/userpolicy.html | |
フリービーAC | https://www.freebie-ac.jp/ | https://www.freebie-ac.jp/terms.php | 要ユーザー登録 |
スキマナース | https://nurse-web.jp/photo/ |
名前 | ホームページ | 備考 |
---|---|---|
reveal.js | https://revealjs.com/ | |
Bespoke.js | http://markdalgleish.com/projects/bespoke.js/ |
名前 | リポジトリ | 備考 |
---|---|---|
docx | https://github.com/dolanmiu/docx | .docx ファイル作成 |
docxjs | https://github.com/VolodymyrBaydalka/docxjs | .docx 描画 |
PDF.js | https://github.com/mozilla/pdf.js | PDF を Canvas に描画 |
PDF-LIB | https://github.com/Hopding/pdf-lib | PDF ファイル作成 |
PDFKit | https://github.com/foliojs/pdfkit | PDF ファイル作成 |
jsPDF | https://github.com/parallax/jsPDF | PDF ファイル作成 |
open-pdf-sign | https://github.com/open-pdf-sign/open-pdf-sign | PDF 署名 |
名前 | リポジトリ | 備考 |
---|---|---|
<model-viewer> | https://github.com/google/model-viewer | glTF & GLB viewer |
CascadeStudio | https://github.com/zalo/CascadeStudio | |
Online 3D Viewer | https://github.com/kovacsv/Online3DViewer |
名前 | リポジトリ | 備考 |
---|---|---|
Zod | https://github.com/colinhacks/zod | TypeScript DSL -> TypeScript Types, Runtime Validator, JSON Schema |
Runtypes | https://github.com/pelotom/runtypes | TypeScript DSL -> TypeScript Types, Runtime Validator (, JSON Schema) |
io-ts | https://github.com/gcanti/io-ts | TypeScript DSL -> TypeScript Types, Runtime Validator |
Superstruct | https://github.com/ianstormtaylor/superstruct | TypeScript DSL -> TypeScript Types, Runtime Validator |
TypeBox | https://github.com/sinclairzx81/typebox | TypeScript DSL -> TypeScript Types, JSON Schema |
TypeScript-JSON | https://github.com/samchon/typescript-json | TypeScript Types -> Runtime Type Validator, JSON Schema (TypeScript Plugin) |
typescript-is | https://github.com/woutervh-/typescript-is | TypeScript Types -> Runtime Type Validator (TypeScript Plugin) |
ts-runtime | https://github.com/fabiandev/ts-runtime | TypeScript Types -> Runtime Type Validator (API/CLI でコード変換) |
type-predicates-generator | https://github.com/d-kimuson/type-predicates-generator | TypeScript Types -> Runtime Type Validator (CLI でコード生成) |
ts-auto-guard | https://github.com/rhys-vdw/ts-auto-guard | TypeScript Types -> Runtime Type Validator (CLI でコード生成) |
typescript-json-schema | https://github.com/YousefED/typescript-json-schema | TypeScript Types -> JSON Schema (API/CLI) |
Ajv | https://github.com/ajv-validator/ajv | JSON Schema Validator |
名前 | リポジトリ | 備考 |
---|---|---|
PEG.js | https://github.com/pegjs/pegjs | |
Ohm | https://github.com/harc/ohm | |
nearley | https://github.com/kach/nearley |
名前 | リポジトリ | 備考 |
---|---|---|
ts-essentials | https://github.com/ts-essentials/ts-essentials | |
type-fest | https://github.com/sindresorhus/type-fest | |
ts-toolbelt | https://github.com/millsp/ts-toolbelt |
名前 | リポジトリ | 備考 |
---|---|---|
Magic bytes | https://github.com/LarsKoelpin/magic-bytes | ファイルの内容からファイルの種類を判定 |
GPU.js | https://github.com/gpujs/gpu.js | |
Parallel.js | https://github.com/parallel-js/parallel.js | |
lz-string | https://github.com/pieroxy/lz-string | 高速なテキスト圧縮 compressToUTF16() https://pieroxy.net/blog/pages/lz-string/demo.html |
LZ-UTF8 | https://github.com/rotemdan/lzutf8.js | 高速なテキスト圧縮 |
opentype.js | https://github.com/opentypejs/opentype.js | ttf, otf, woff ファイル読み書き |
Moji.js | https://github.com/niwaringo/moji | 半角全角変換ライブラリ |
YubinBango | https://github.com/yubinbango/yubinbango-data | 郵便番号 → 住所データ |
ScrollBooster | https://github.com/ilyashubin/scrollbooster | ドラッグで慣性スクロール |
Chrome Network Log | chrome://net-export/ |