[B! JavaScript] gt-r-blazeのブックマーク

GitHub - js-cookie/js-cookie: A simple, lightweight JavaScript API for handling browser cookies

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

gt-r-blaze 2024/07/11

リンク

JsDocをもとにドキュメントを自動生成する - Qiita

Documentation.js コマンドひとつで、ドキュメントを自動生成してくれる！まずは、JsDocで記述 JsDocの概要については、おググりください。 VSCodeとかだと、関数の上の行で/** + EnterでJsDocテンプレートが挿入される import { TweenMax } from 'gsap'; /** * TweenMax の基本操作 */ export default class TweenAnimation { /** * @param {any} target * @param {number} duration * @param {gsap.TweenConfig} vars */ constructor(target, duration, vars) { this._tween = TweenMax.to(target, duration, vars)

gt-r-blaze 2024/04/03

scripts: {"mkdoc:src": "documentation build src/**/*.src.{jt}s -f html -o docs/src",}

リンク

ユーザーエージェント文字列を用いたブラウザーの判定 - HTTP | MDN

HTTP ガイドリソースと URI ウェブ上のリソースの識別データ URL MIME タイプ入門よくある MIME タイプ www 付きと www なしの URL の選択 HTTP ガイド HTTP の基本 HTTP の概要 HTTP の進化 HTTP メッセージ典型的な HTTP セッション HTTP/1.x のコネクション管理プロトコルのアップグレードの仕組み HTTP セキュリティ Content Security Policy (CSP) HTTP Strict Transport Security (HSTS) X-Content-Type-Options X-Frame-Options X-XSS-Protection Mozilla web security guidelines Mozilla Observatory HTTP アクセス制御 (CORS) HTTP

gt-r-blaze 2024/03/27

リンク

JavaScriptでオブジェクトのコピー・合体ができるObject.assign()が便利

JavaScriptでオブジェクトのコピー・合体ができるObject.assign()が便利 2018/6/7 2018/6/21 JavaScript, プログラミング真新しい内容でもないのですが、最近JavaScriptに触れている中でよくObject.assign()について触れる機会があったので、ブログに記録しておこうかなと思います。オブジェクトのコピー・合体ができるObject.assign()は本当に便利だなーと思いますよ！ちなみにこの記事は、JavaScriptのオブジェクトについて、書き方をご存知の方を対象としていますので、その点ご注意くださいね！ JavaScriptにおける参照渡しを理解する Object.assign()を理解する上で必要なのが、JavaScriptにおける「参照渡し」の仕組みを理解することです。これを理解しないと、Object.assing(

gt-r-blaze 2024/03/22

参照渡し回避: Object.assignのメカニズム: 第一引数の参照を取得し、その参照を書き換える。第一引数部分をダミー {} とすることで、JSの参照渡しを回避できる。

!
JavaScript

リンク

サービスワーカーの使用 - Web API | MDN

この記事はサービスワーカーを使い始めるための情報を提供するページです。基本的な構造、サービスワーカーの登録、新しいサービスワーカーのインストールと有効化のプロセス、サービスワーカーの更新、キャッシュやレスポンスの操作を含めた、オフラインで動作するシンプルなアプリケーションの機能についてです。ウェブユーザーが長年苦しめられてきた主要な問題の一つは、接続を失うことです。世界中の最高のウェブアプリは、ダウンロードできないときの使い勝手が最悪でした。これまでにも、この問題を解決するための技術を生み出す試みはさまざまに行われ、いくつかの問題は解決されてきました。しかし、一番の問題は、資産のキャッシュとカスタムネットワークリクエストのための優れた全体的な制御メカニズムが存在しなかったことです。このような課題を修正したのがサービスワーカーです。サービスワーカーを使用すると、キャッシュ資産を最初に使用

gt-r-blaze 2024/02/29

リンク

Service Workerの基本とそれを使ってできること - Qiita

Service Workerとはブラウザが Web ページとは別にバックグラウンドで実行するスクリプトオフラインのアプリを実現・サポートするために作られたものですちなみに、ブラウザの対応状況はこんな感じ http://caniuse.com/#search=service%20workers 特徴 DOM にアクセスできない DOM を操作したい場合は、Service Worker がコントロールしているページ(js)と postMessage でメッセージのやり取りをして行うリクエストをプロキシすることが可能 Service Worker はブラウザが必要に応じて起動・終了するので、変数の値を保持しておけない Cache、IndexedDB 等で値を保存して、必要になった時に取り出すようにする Promise を多用する https か localhost 上でしか動作しないラ

gt-r-blaze 2024/02/29

リンク

JavaScriptで二次元配列の行列を転置するワンライナー - Qiita

日本語で検索してもコレというのが出てこなかったのですが、海外の記事に秀逸なワンライナーがあったのでご紹介。元記事はコチラ。function()を使いたくなかったので代わりにアロー関数を使用しています。コード const transpose = a => a[0].map((_, c) => a.map(r => r[c]));

gt-r-blaze 2024/02/27

JavaScript

リンク

JavaScript の Segments の使い所を考える - Qiita

JavaScript の Segments という機能を知りました。 JavaScript って標準 API でこんなこともできるのかhttps://t.co/ckHTlqcium pic.twitter.com/hrwfgvtF4J — naporitan (@naporin24690) December 25, 2023 これは面白い！ブラウザの標準機能で自然言語処理ができる時代だ！とりあえず、お手元で試したい方はこちらをどうぞ。お使いのブラウザの console に貼り付ければ動くはずです。 const segmenter = new Intl.Segmenter("ja", { granularity: "word" }); const string1 = "東京都府中市は「とある科学の超電磁砲」の舞台ではない。京都府中京区も違う。"; const segments = seg

gt-r-blaze 2024/01/06

JavaScript

リンク

アラートダイアログのOKが押されたタイミングで処理を実行する - Qiita

2023年9月7日追記以下長々書いていますが、alertダイアログが表示されている間は、その後のJavaScriptの実行はブロックされるため、 console.log("Before alert"); alert("OKを押してください。"); console.log("After alert"); のようにalertのあとに、実行したい処理を書けばいいだけでした。。。やりたいこと上の画像のようなアラートダイアログのOKを押されたタイミングで処理を実行したいとします。一般的には、上の画像のような確認ダイアログを使って、OKボタンが押された場合とキャンセルボタンが押された場合の処理を書くことが多いかと思います。キャンセルボタンの押せない、OKボタンのみの確認ダイアログを作りたいただ、時には諸々の事情でキャンセルボタンを押してもらいたくない場合もあります。ということで、キャンセ

gt-r-blaze 2023/12/06

alertの挙動

JavaScript

リンク

body-scroll-lock.js「すべてのブラウザでスクロールのロックしたるで」←こいつ超有能 - Qiita

この記事に書いてあること JavaScriptプラグインのbody-scroll-lock.jsの使い方についてサイトリンク GitHubリポジトリ npmサイト body-scroll-lock.jsとは？ターゲット要素（モーダル/ライトボックス/フライアウト/ナビメニューなど）のスクロールを中断せずに、ボディスクロールを禁止にするプラグインです対象ブラウザ iOS Mobileおよびタブレット、Android、デスクトップSafari/Chrome/Firefox どんな時に使うか？例えばモーダルを表示した時に、背景を固定したいといった場合に使うことができます。モーダルの中だけスクロールを有効にして、背景固定を実現するなんてことも簡単に実装可能です。なぜ使うの？スクロールのロックは簡単そうに思えて、実は結構面倒くさい処理内容です。例えば、 overflow:hidden

gt-r-blaze 2023/11/02

JavaScript

リンク

HTML Standard

4.12 Scripting4.12.1 The script element4.12.1.1 Processing model4.12.1.2 Scripting languages4.12.1.3 Restrictions for contents of script elements4.12.1.4 Inline documentation for external scripts4.12.1.5 Interaction of script elements and XSLT4.12.2 The noscript element4.12.3 The template element4.12.3.1 Interaction of template elements with XSLT and XPath4.12.4 The slot element4.12 Scripting Scri

gt-r-blaze 2023/10/16

async / defer / module / module,async GPT: 複数の script タグにそれぞれ defer 属性を付与した場合でも、すべての js ファイルが並列読み込みされるわけではなく、順次読み込まれます。

リンク

How to fetch XML with fetch api

gt-r-blaze 2023/10/13

JavaScript

リンク

プロジェクトをJavaScriptからTypeScriptへ移行する手順 - Qiita

tsconfig.jsonの設定をプロジェクトに合わせる。次に先ほど作成したtsconfig.jsonを編集していきます。今回はtargetをES2019、moduleをcommonjsにしました。またコンパイル後にできるjsファイルの置き場所として、distディレクトリを指定しています。("outDir": "dist") そしてコンパイルの対象ファイルをsrcディレクトリ以下にあるファイルとしています。("include": ["src/**/*]) tsconfig.json { "compilerOptions": { /* Visit https://aka.ms/tsconfig.json to read more about this file */ /* Basic Options */ // "incremental": true, /* Enable increm

gt-r-blaze 2023/09/28

js to ts 手動移行

リンク

JS/UML

Welcome to JS/UML What is JS/UML? JS/UML is a plugin for the Eclipse IDE that creates UML models and diagrams from JavaScript code. What does JS/UML do? Imports JavaScript that is written in the styles of JSDoc, jGrouseDoc or YUI Creates a UML model of the parsed JavaScript code which can be viewed using the Eclipse UML2 model editor Creates UML diagrams that can be editing using the diagram edito

gt-r-blaze 2023/09/25

リンク

dompurify

gt-r-blaze 2023/09/14

リンク

HTML Web Workers API

gt-r-blaze 2023/08/01

リンク

@babel/plugin-syntax-dynamic-import · Babel

gt-r-blaze 2023/07/31

JavaScript

リンク

全モダンブラウザで使えるJavaScriptのdynamic import（動的読み込み） - Qiita

JavaScriptでは他のJSファイルを読み込みES Modulesという仕組みがあり、Chrome、Edge、Safariなどブラウザのサポートが拡大しつつあります（参考記事「JavaScriptでモジュールを使う時代に！ブラウザで覚えるES Modules入門」）。さらに、モジュールをimport()を使って「関数のように」呼び出すためのdynamic importという仕組みが2020年に公開されるECMAScriptの仕様で導入されます（tc39/proposal-dynamic-import）。Google Chrome、Firefox、Safariではではモジュールのdynamic importに対応しており、ブラウザでその挙動を確認できます。 dynamic importのメリットは、任意のタイミングでモジュールを読み込めること。たとえば、ページの初期表示に必要なJav

gt-r-blaze 2023/07/31

JavaScript

リンク

Event: currentTarget プロパティ - Web API | MDN

js function hide(e) { e.currentTarget.style.visibility = "hidden"; console.log(e.currentTarget); // この関数がイベントハンドラーとして使用されるとき： this === e.currentTarget } const ps = document.getElementsByTagName("p"); for (const p of ps) { // クリックされた <p> 要素を隠す p.addEventListener("click", hide, false); } document.body.addEventListener("click", hide, false); // 周辺をクリックすると段落が消えます。