world-wide holidays in gregorian calender This module provides dates of holidays for various countries, states and regions by type while considering the applicable timezone. The features are: calculation of public, bank and observance holidays for different countries, state, region, following ISO 3166-2 consideration of timezones for holiday checks consideration of start and end time dependent on

単なるアニメーションにとどまらない！条件分岐やイベント待機など「Tween24.js」の新機能 「Tween24.js」はメソッドチェーンで記述するのが特徴で、たった1行でアニメーションが実装可能なJavaScriptライブラリです。筆者が開発を続けており、今回の2021年8月アップデートでは条件分岐やイベント待機など、アニメーション作成をより柔軟にするための機能追加がメインとなっています。 基本的な使い方や導入方法は、記事「新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました」をご覧ください。 今回のアップデート内容 新機能：トゥイーンを条件分岐させるifCase() 新機能：イベントを受け取るまで待機するwaitEvent(), waitEventAndFunc() 新機能：途中で次のトゥイーンへ移行するjump() 新機能：親トゥイーンを進める

みなさんはPicture-in-Picture(PiP)という機能を使ったことがありますか。PiPは動画コンテンツなどを浮遊する小窓に表示する機能です。小窓はウィンドウの外側を自由に移動できます。 デスクトップが賑やかになりがちなPCでもPiPは大活躍なのですが、特にスマートフォンにおいては数少ない「ウィンドウ」機能になります。Androidはもちろん、iOS14も対応したことで話題になりました。 これによってスマホ一台あれば、ソシャゲの公式生放送を見ながらソシャゲのイベントを周回する地獄のような行為が可能になりました。 利用者という視点から見ると非常に便利なのですが、開発者から見ると動画しか表示できないのはなかなか使い所が難しくなります。そこで、この機能を使って好きな情報を表示できないか実験してみました。 PiP機能の対応環境 Chrome 70 Firefox 71（制限付き） mac

メソッド・関数へのコメント /** * 関数の説明 * @param {number|string} hoge パラメータの説明 * @param {string} [fuga] 任意の場合は [] がつく。 * @param {string} [fuga2='fuga'] 任意かつ未指定の場合の初期値が決まっている * @return {boolean} 〇〇か否か */ データ型の書き方いろいろ /** * @param {string|number} 文字列もしくは数値 * @param {string[]} hoge_ary その型の配列の場合 * @param {Object} user_info ユーザ情報 * @param {Object} user_info.name ユーザ名 * @param {Object} user_info.email ユーザのアドレス * @pa

アフィサイトごときが、右クリック禁止をするなんておこがましい。 銀行サイトごときが、残高表示の金額を選択させないなんて、バカにしてんのか。 ドメイン購入サイトごときが、戻るだけで決済されてませんって、フザケンナと。 というわけで、一瞬にして対策できるシンプルなコードを 右クリック禁止の対応。 ` selectstart contextmenu dragstart mousedown copy cut paste mousedown mouseup beforeunload beforeprint `.split(/\s/).filter(String).forEach((e, i) => { window["on"+e] &&( window["on"+e] = null ); document["on"+e] && (document["on"+e] = null); window.ad

ページの背景で動くダイナミックなパーティクルやラインアニメーション、あるいはちょっとした遊びごころの溢れるキャラクターアニメーションなど、webページにクリエイティブな表現を組み込めるようになりたいと考える方はエンジニアにも多いでしょう。 この記事では、基本的なJavaScriptの知識があれば誰でも始められるp5.jsというライブラリを使用して、クリエイティブな作品作りの入門を解説します。 環境面では、フロントエンド開発のデファクト・スタンダードとも言えるVisual Studio Code（以下VS Code）とTypeScriptを使用して、モダンで快適な開発環境を作ります。 環境構築といっても、とくに難しい作業はありません。記事を読みながらぜひ、オリジナルの作品作りにチャレンジしてみてください。 ▼ VS Codeでp5.jsを使って制作している環境の例 クリエイティブ・コーディン

JavaScript has been evolving very rapidly in recent years. Especially after the release of ES6 in 2015, things have been great. A lot of new features were being proposed to be included in the ES2020 version. The good news is that these proposals have been finalized. We now have a finalized list of features we can eagerly expect in ES2020 when it is released after approval. Some of these features h

Every year, JavaScript update adds new features. This year ES2020 or ES11 was released (Read ES2020 features article), with ES2021 or ES12 expected to be released in mid-2021. New features that are added to JavaScript each year go through a four-stage process, with the fourth stage being the last one. In this article, I will discuss the features that have already reached stage four and are added t

BabelとはBabelはJavascriptの新しいバージョン(ES6等)で書いたコードを、旧ブラウザ(IE11等)でも実行できる旧バージョンのJavascriptに変換することができます。 Babelを使うことで、新しいバージョンのJavascriptでコードを書いても、IE11に対応させることができます。今回はそんなBabelについてまとめました。 Babel公式サイトBabelのサイトで実際にJavascriptの変換を試してみることができます。 以下からBabelのサイトにアクセスします。 Babel · The compiler for next generation JavaScript Babelを試す 「Try it out」ページにいきます。 実際にコードを入力して変換することができます。 左メニューのPRESETS項目の、es2015にチェックが入っていることを確認し

JavaScriptでコードを記述する際、配列の各要素について処理をするケースは頻出します。開発の現場で配列操作の処理を見ていると、次のようなケースがよくあります。 配列の非破壊の望まれる場面が増えているが、元の配列を破壊操作している filter()やevery()など配列のメソッドで書けるところを、forEach()メソッドやfor ... of文を使ってコードを記載し、冗長になっている 記述しても効果のないArray.from()を使用している コード的には問題なく、アプリケーションは意図的に動作しているかもしれません。しかし、冗長な記述は可読性が低下し、予期せぬバグを誘発する可能性があるでしょう。 本記事では、配列操作でよく見かける冗長な記述を、簡潔な記述で置き換える方法について解説します。 本記事で紹介するJavaScriptの配列操作のチートシートを用意したので、まとめて読みた