{"id":23270435,"url":"https://github.com/umanari145/library","last_synced_at":"2025-10-09T00:04:21.279Z","repository":{"id":16737916,"uuid":"19495301","full_name":"umanari145/library","owner":"umanari145","description":"使えるライブラリ群などの登録","archived":false,"fork":false,"pushed_at":"2024-06-24T14:07:11.000Z","size":15268,"stargazers_count":0,"open_issues_count":16,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-12T15:19:13.712Z","etag":null,"topics":["babel","es6","gulp","laravel-mix","webpack"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/umanari145.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2014-05-06T13:31:41.000Z","updated_at":"2024-06-24T14:07:15.000Z","dependencies_parsed_at":"2024-06-24T15:43:34.556Z","dependency_job_id":"43fe7559-2d0e-458a-8f00-b065feb3e7ef","html_url":"https://github.com/umanari145/library","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umanari145%2Flibrary","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umanari145%2Flibrary/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umanari145%2Flibrary/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umanari145%2Flibrary/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/umanari145","download_url":"https://codeload.github.com/umanari145/library/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247463808,"owners_count":20942940,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel","es6","gulp","laravel-mix","webpack"],"created_at":"2024-12-19T18:51:40.827Z","updated_at":"2025-10-09T00:04:16.243Z","avatar_url":"https://github.com/umanari145.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# library\n\n主に JavaScript の実験など\n\n- ajax.html jquery1.5 以降の ajax の書き方\n\n  - application/x-www-form-urlencoded と application/json の違いなど\n    - form ・・・HTML で送信される通常の形で互換性が高く、シンプルで可読性が高い FormData\n    - json ・・・複雑なデータの表現に適しており、JSON オブジェクトでデータを表現することができる。主流になりつつある。payload\n    - https://qiita.com/Kunikata/items/2b410f3cc535e4104906\n    - https://qiita.com/amamamaou/items/b6cb39739bba4abf4544\n    - https://egapool.hatenablog.com/entry/2015/07/28/225658\n\n- ajax_matome.html ajax,promise,async_awit のサンプルパターンなど\n- Array_convert.html JS 標準で搭載されている配列加工手法\n- babel_source.js babel の元\n- babel_compiled.js babel の成果物\n\n```\n npx babel babel_source.js --out-file babel_compiled.js --presets es2015\n # 通常は.babelrcを使うが上記のようなコマンドでも可能\n```\n\npresets に関して\u003cbr\u003e\nhttps://akabeko.me/blog/2017/03/babel-preset-env/\u003cbr\u003e\nhttps://hakozaru.com/posts/understanding-babel\n\n- canvas canvas を使った画像の配置\n\n- when.html 並列ではあるが、順番は守りたい時の ajax の書き方\n- fileapi.html FILEAPI を活用した画像アップロード\n- formatter - formatterSample.js フォーマット用のサンプル\n  フォーマット(--write なしだと実行はせず、実行結果を出力してくれる)\n\n```\nnpx prettier formatter/formatSample.js --write\n```\n\n```\n{\n    //トップディレクトリであることのフラグ\n    \"root\": true,\n    \"env\": {\n      // browserで使うかnodeで使うか\n      \"browser\": true,\n      //esいくつのバージョンで使うか\n      \"es6\": true\n    },\n    //基本設定(eslint:recommendedはディフォルトのパターン)\n    \"extends\":[\"eslint:recommended\", \"prettier\"]\n  }\n\n```\n\n- 参考\n  - https://qiita.com/mysticatea/items/f523dab04a25f617c87d\n  - https://maku.blog/p/j6iu7it/#root-true\n- .prettierrc Prettier の設定ファイル\n- .eslint ESLint ツール\n- operator.js 三項演算子、エルビス演算子など\n- pagination.html paginationjs を使ったページャーのパターン\n- promise.html 非同期処理を Promise で使うパターン\n- promise_all.html 複数の非同期処理を Promise で使うパターン(when と同義)\n- non_promise.html 非同期処理、Promise を使わないパターン(Promise を書かない時との比較)\n- old_object_oridented.html 旧式の関数型のオブジェクト生成\u0026インスタンス化\n- async_await_basic.html async_await を使った基本サンプル\n- async_await.html api 連携でのサンプル\n- imageBinary.php 画像バイナリデータを http レスポンスを返す(読み込みは fileapi.php)\n- imageBinaryS3.php 画像バイナリデータを http レスポンスを返す。S3 経由(読み込みは fileapi.php)\n- CommandPool.php S3 へのバルクアップロード\u0026バルクダウンロード\n- dataTable.html 一般ページャー　https://datatables.net/　活用\n- dataTable(2).html 無限スクロールサンプル　https://datatables.net/　活用\n- datepicker_select2.html datepicker と select2 の活用\n- dynamic_element.html 主に要素が追加される系の動的なテーブル\n- js/bundle.js main.js がコンパイルされたもの(現在未使用)\n- js/main.js require されたライブラリ(現在未使用)\n\n- js_scraping (puppeteer を使ったログイン、スクショ)\n\n  - config.json 設定ファイル(通常は git 外かも)\n  - main.js エントリーポイント\n\n- es6sample ECMAScript2015 について\n\n  - lib/PersonClass.js,MemberClass,currency export するクラス\n  - es6sample.js let,const,アロー演算子,class の新しい書き方など\n  - es6load.js import を使った他ファイルの読み込み\n  - es6class.js class の書き方\n  - es6modules.js export を使った関数\n  - es6sample.html ブラウザへのデバッグ用の html\n  - scope.js スコープと var,let に関しての挙動の違い\n  - this.js this の参照について(es6sample.js でも this について扱っている)\n    https://qiita.com/takeharu/items/9935ce476a17d6258e27\n  - pakage.json 内に`{\"type\": \"module\"}`を記載すると node でも ES6 風の記載が可能\n\n- parcel 簡易コンパイル\n  - dist 成果物がここに吐かれる\n  - lib/PersonClass export するクラス\n  - es6load.js JS を import する側\n  - es6sample.html エントリーポイントする HTML\n\n```\nnpx parcel parcel/es6sample.html\n```\n\nex Server running at http://localhost:51478\u003cbr\u003e\nhttp://localhost:51478 にアクセス\n\n- rollup\n  - lib/PersonClass export するクラス\n  - bundle.js コンパイルされた JS\n  - es6load.js JS を import する側(生成される側の js)\n  - es6sample.html エントリーポイントする HTML\n\n```\ncd ./rollup\nnpx rollup es6load.js --file bundle.js --format iife\n```\n\n- requirejssamp\n  - libs 読み込まれる側の JS(dateutil,strutil が実ファイル)\n  - require.js ライブラリ\n  - sample1(main).html シンプルな require.js パターン\n  - sample2(main2).html 内部 require パターン\n  - sample3(main3).html config 使用系\n  - require_config.js main3 の設定\n  - sample4(build).html 1 ファイルにまとめたパターン\n\n```\n npx r.js -o name=main  out=build.js\n #設定ファイルでも可\n```\n\n- libs/js/original/utility.js 汎用的な JS 主に文字加工に関して\n- sweetalert スタイリッシュな alert 文(libs で読み込み)\n- html2canvas.min.js 　 html の画像\n- htmltojpeg.php HTML→base64→PHP 側でデコード →S3 にアップロード\n- http_request HTTP リクエストを飛ばす処理をまとめ(ajax,axios,fetch,async-await)\n- infinitescroll.html 無限スクロール　 jquery.infinitescroll.min.js 　活用\n  - page2.html スクロール後のページは数字をつけ、あらかじめ作っておく必要がある。\n- infinitescroll2.html 無限スクロール　オリジナル\n- modal.html leanModal を使ったモーダルウィンドウ\n- custom_modal.html 独自モーダルウィンドウ\n- loading.html 簡易ローディングサンプル\n- slidersample.html slider-pro slicker swiper を使ったスライダーのサンプル\n- sticky.html スティッキーヘッダーのサンプル(一定スクロール量を越えるとヘッダに固定されるタイプのヘッダー)\n- sugar.html JS ライブラリ Sugar のサンプル\n- sugar.html JS ライブラリ Sugar のサンプル(グローバル空間への拡張)\n- togglesample.html toggleClass, slideToggle, fadeToggle, CSS のみでの toggle のサンプル\n- typeahead.html 入力補完用のライブラリ\n- input_test.js(php) 入力補助ツール console 画面で、以下を入力\n  - testClass.getFormsInputHtml() 入力値の html 入力 JS を追加\n  - testClass.getSerializeData() JSON データの吐き出し\n- resources コンパイルを使った JS のサンプル\n- ckeditor.htm ビジュアルエディタ ckeditor を使ったサンプル\n- validation.html Laravel 風の JS バリデーションチェック\n- screen_shot_html2canvas.js スクリーンショット画像化\n- typescript\n  - sample(2).ts コンパイラの元\n  - sample(2).js 生成物\n  - libs モジュール\n  - main(2).ts エントリーポイントの JS\n  - index.html 読み込まれる JS require.js の活用法も合わせて\n\n```\n# -t コンパイルする形式\n# -sourceMap typescriptのままデバッグできるようになる\n# --module commonjs,umdなど\nnpx tsc -t ES5 --module umd --sourceMap main.ts\n```\n\n- typescript-webpack typescript+webpack の活用\n  - libs モジュール\n  - main.ts エントリーポイントの JS\n  - webpack.config.js\n  - index.html 読み込まれる JS\n\n```\n#--mode development 主に高速化\nnpx run dev\n#--mode production デバッグがしやすい\nnpx run prod\n```\n\n- typescript-rollup rollup+typescipt の構成。基本構成は他と同じ\n\n```\n npx rollup -c\n```\n\n- libs\n  - css select2 や jquery-ui の CSS\n    - common.scss(css) jquery-ui や select2 の css 読み込み\n  - js 色々なライブラリをインポート(具体的な library は resouces.js を参照)\n  - webpack.mix.js laravel-mix を使ったコンパイラ\n\nlaravel-mix でのコンパイル\n\n```\ncd ./libs\nnpx mix\n```\n\n- public dataTable.html を受け付けるプログラムのサンプル\n- gulpfile.js 下記コマンドで webpack を使ったコンパイル\n\n```\nnpm run gulp webpack\n```\n\n- sample_cross_env.js\n\n```\nnpm run cross-env-dev\n# package.jsonのscripts.cross-env-devを実行\n#\n# \u003e library@1.0.0 cross-env-dev\n# \u003e cross-env NODE_ENV=production node sample_cross_env.js\n\n# production\n# ちなみにcross-env NODE_ENV=production \u0026\u0026 node sample_cross_env.jsはNG\n```\n\nlibrary の update\u003cbr\u003e\nupdate library\n\n```\n# コンテナで既にインストール済み\nnpm install -g npm-check-updates\n# アップデート確認\nncu\n# 実際のアップデート\nncu -u\n```\n\n- watch_script.js 監視スクリプト()\n\n```\n npm run watch-script\n\n# \"watch-script\": \"watch 'node watch_script.js' ./watch_target/\"\n# 特定ディレクトリ修正時に↑script起動\n#\u003e Watching ./watch_target/\n#detect ----watch---\n```\n\n```\nnpm run browser-sync\nbrower-sync でホットリロードを行う。\ndocker内部だとおそらくport番号を全て同期しないと無理？\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fumanari145%2Flibrary","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fumanari145%2Flibrary","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fumanari145%2Flibrary/lists"}