TypeScript で window 直下にいろいろ生やしたりグローバル変数を定義する | DevelopersIO
TypeScript は開発に安定をもたらしてくれますが、たまにやりたいことがちょちょっとできずにハマることがあります。今日はそのひとつ、 window オブジェクトにいろいろ生やしたいんだけどうまく生やせないあなたのための記事です。 ポイントは次のふたつです。 tsconfig.json の lib に "DOM" が指定されているかどうか window の定義において import / export を使っているかどうか tsconfig.json の lib に "DOM" が指定されているかどうか tsconfig.json の lib プロパティに "DOM" が指定されているかどうかで書くべき内容が変わります。ご自身の tsconfig.json の中身を確認してみてください。 lib プロパティがない場合は "DOM" が指定されているものとして扱ってください。 DOM あり
Use JSDoc
Syntax @type {typeName} Overview The @type tag allows you to provide a type expression identifying the type of value that a symbol may contain, or the type of value returned by a function. You can also include type expressions with many other JSDoc tags, such as the @param tag. A type expression can include the JSDoc namepath to a symbol (for example, myNamespace.MyClass); a built-in JavaScript ty
Mutation observer
MutationObserver は DOM 要素を監視し、変更があった場合にコールバックを起動する組み込みのオブジェクトです。 最初に構文を確認してから、実際のユースケースを見ていきましょう。 構文MutationObserver は簡単に使用できます。 まず、コールバック関数を引数にもつオブザーバ(observer)を作成します。: config はブール値のオプションを持つオブジェクトで、“どの種類の変更に反応するか” を指定します。: childList – node の直接の子の変更, subtree – node のすべての子孫に対する変更, attributes – node の属性の変更, attributeFilter – 指定したものだけを監視するための、属性の配列 characterData – node.data (テキストコンテンツ) を監視するかどうか, ほかに
Building a dialog component | Articles | web.dev
In this post I want to share my thoughts on how to build color-adaptive, responsive, and accessible mini and mega modals with the <dialog> element. Try the demo and view the source! Demonstration of the mega and mini dialogs in their light and dark themes. If you prefer video, here's a YouTube version of this post: Overview The <dialog> element is great for in-page contextual information or action
他の国のローカルタイム（現地時刻）を文字列形式で取得する | まくまくJavaScriptノート
タイムゾーンを指定して時刻文字列を取得する Date クラスの下記のメソッドは、第 2 引数のオプションオブジェクトで、timeZone プロパティを指定できるようになっています (メソッド名は toLocalXxx ではなく、toLocaleXxx であることに注意してください）。 Date#toLocaleString メソッド: 日付＋時刻 Date#toLocaleDateString メソッド: 日付のみ Date#toLocaleTimeString メソッド: 時刻のみ 下記の例では、ユーザ環境、ロンドン、米国ニューヨークのローカルタイムを出力しています。 ユーザ環境、ロンドン、ニューヨークの現地時刻を出力する var date = new Date(); console.log(date.toLocaleString()); console.log(date.toLocal
Intersection Observer API の使い方
Intersection Observer API の使い方 Intersection Observer API は特定の領域を監視して指定した要素がその領域に入ったかどうかを検知してくれる JavaScript の API です。 例えば、スクロールして要素が画面上に現れた時にアニメーションを開始したり、スクロールスパイ（要素が表示されている位置に対応するリンクをハイライトする）などの機能を比較的簡単に実装できます。 スクロールを検出する方法とは異なり、パフォーマンス的にも優れていて、主なモダンブラウザで利用することができます。can i use IntersectionObserver IE など古いブラウザに対応するには polyfill が必要です。 その他の Observer のページ ResizeObserver の使い方 MutationObserver の使い方 Inter
Webフロントエンドパフォーマンスチューニング85選 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こんにちは、ぬこすけです。 近年、Webフロントエンドではサイトのパフォーマンスの重要性が高まっています。 例えば、GoogleはCore Web Vitalというパフォーマンスに指標を検索結果のランキング要因に組み込みました。 また、近年の某企業が「パフォーマンスの改善に取り組んだ結果、セッション数〇％アップ、CVR〇％アップ...」などの事例は枚挙にいとまがないでしょう。 パフォーマンスチューニングするためには、定量的に計測してボトルネックを探すようなトップダウンなアプローチもあります。 しかしながら、時には千本ノック的にハウツーを
JSDoc 書き方
メソッド・関数へのコメント /** * 関数の説明 * @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
TypeScriptのJSDocサポートでできること、できないこと
TypeScriptの主要な入力ファイルは .ts, .tsx, .mts, .cts ですが、JavaScriptファイル (.js, .jsx, .mjs, .cjs) も読み込んで処理することができます。JSDocによる型アノテーションを認識するため、生のJavaScriptでもそれなりに型をつけることができます。 本稿ではタイトル通り、TypeScriptのJSDocサポートでできることとできないこと (.ts でしかできないこと) をまとめます。 おことわり 本記事はTypeScript 4.4時点での実装状況に基づいています。なるべくソースコード中の関係する箇所を参照するようにしたので、今後の変更はご自分で検証してください。 (TypeScript Playgroundで試すだけでも有用です JavaScriptモードで開始できるリンク) JSDocの機能一覧・TypeScri
レガシーなjs環境におすすめなts-checkコメントについて - MANA-DOT
このエントリの内容 このエントリは、javascriptの型チェックをすることができるtypescriptの機能 @ts-check について紹介し、個人的に感じた便利なところや使い所を紹介していきます。 このエントリの読者は以下のような人を想定しています。 レガシーな環境でTypeScriptを導入しづらいが、複雑化するコードベースを少しでも楽に保守したい人 TypeScriptに興味があるが、昨今のjsのツールチェインについていけず、とりあえず試してみたい人 @ts-checkとは @ts-checkとは、JavaScriptファイルの先頭に //@ts-check というコメントをすることで、TypeScriptコンパイラや、TypeScriptを標準で型チェックできる VSCode により、JavaScriptファイルに対してTypeScript相当の型チェックを行う事ができる仕組
JSDocで型を定義してTypeScriptの恩恵を受ける
普段から TypeScript で開発されているほうならば、TypeScript の恩恵を十分に堪能されていることと思います。 特に私は VS Code のインテリセンスには頼りっぱなしでこれがなければまともにコーディングができない体になってしまいました。 しかし時には、TypeScript という概念が存在しない退屈な世界で開発を行わなけらばならない状況はあるでしょう。私はもはやキーボードでタイピングすることすらままなりません。 そんな JavaScript しか利用できない状況で代替手段となるのが、JSDoc です。JSDoc のアノテーションによって型を付与することによって最低限の支援を受けることができます。 @Type @Type タグを使用すると、TypeScript で型をつけるときと同じように型を宣言できます。
jQuery不要の最新スライダー［Splide］の使い方と全オプション
今日は最新のJavaScriptスライダー［Splide］を紹介します。 まずは［Splide.js］の特徴をいくつかピックアップします。 jQueryなどのライブラリに依存せず単体で動く 軽量（圧縮版で11kB） IE10以降対応 ブレイクポイントの指定でレスポンシブ対応 マウスのドラッグとタッチスワイプに対応 SEOフレンドリー スライダー、またはスライドショー、カルーセルに必要とされる要素はすべて揃っており、近年評価が高い［swiper.js］や［slick.js］などと肩を並べられるスペックです。 Splide → https://splidejs.com ［Splide］本体ファイルをインストール Splide.jsをウェブサイトにインストールする方法は3つあります。 NPMでダウンロード CDNを利用 Githubからダウンロード 1.NPMの場合 $ npm install
Next.js(React)に最軽量＆高機能スライダープラグインSplideを導入してみる
スライダープラグインは何を使うべきか フロントエンドエンジニアのおとのです🙆♂️ Webサイトに以下のようなスライダーを埋め込む際、Web制作のコーダーやマークアップエンジニア、フロントエンドエンジニアは外部プラグインを利用して実装することが多いかと思われます。 jQueryが全盛期だった時には、Slickが多く利用されていた印象です。あらゆるオプションが用意されており、さまざまなカスタマイズが可能で、私もよく使ってきました。 また、IEのサポートが終了してからSwiperが利用されるようになった印象があります。こちらも複数のオプションがあり、比較的モダンなCSS（flex等）が組み込まれていることから、slickよりもカスタマイズが容易であるように思えます。jQueryに依存していないのも大きなメリットですね。 今までのスライダープラグインの問題 ただ、スライダープラグインは決して容
モジュール, 導入
アプリケーションが大きくなるにつれ、それを複数のファイルに分割したくなります。いわゆる ‘モジュール’ です。通常、モジュールはクラスや便利な関数のライブラリを含みます。 長い間、JavaScript には言語レベルのモジュール構文は存在しませんでした。当初はスクリプトが小さくて単純だったため問題ではありませんでした。そのため、モジュールの仕組みも必要ありませんでした。 しかし、スクリプトが徐々に複雑になってきたため、コミュニティはコードをモジュールにまとめるための様々な方法を発明しました。 いくつか挙げます: AMD – 最も古いモジュールシステムの1つで、最初はライブラリrequire.jsで実装されました。 CommonJS – Node.js サーバ用に作られたモジュールシステムです。 UMD – もう1つのモジュールシステムで、ユニバーサルなものとして提案されています。AMD と
5_1_1：ピッチ抽出(Pitch Detection)サンプル ml5.js JavaScript – HIM.CO ヒム・カンパニー
本稿は「ml5-examples/p5js/PitchDetection/PitchDetection」サンプルの解説です。 下記リンクをクリックすると、実際の動作が確認できます。このサンプルを試すには、 マイクを接続しておき、リンク先を開きます。 ブラウザがマイクへのアクセス許可を求めてくるので、[許可]をクリックします。 ブラウザ画面のどこかをクリックします。動作しない場合は再ロードします。 「ピッチ抽出(Pitch Detection)サンプル」 HTMLでは、p5.sound.jsを読み込みます。 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0
VS Code & TypeScriptとp5.jsで始めるモダンなクリエイティブコーディング入門 - ICS MEDIA
ページの背景で動くダイナミックなパーティクルやラインアニメーション、あるいはちょっとした遊びごころの溢れるキャラクターアニメーションなど、webページにクリエイティブな表現を組み込めるようになりたいと考える方はエンジニアにも多いでしょう。 この記事では、基本的なJavaScriptの知識があれば誰でも始められるp5.jsというライブラリを使用して、クリエイティブな作品作りの入門を解説します。 環境面では、フロントエンド開発のデファクト・スタンダードとも言えるVisual Studio Code（以下VS Code）とTypeScriptを使用して、モダンで快適な開発環境を作ります。 環境構築といっても、とくに難しい作業はありません。記事を読みながらぜひ、オリジナルの作品作りにチャレンジしてみてください。 ▼ VS Codeでp5.jsを使って制作している環境の例 クリエイティブ・コーディン
5_1：ピッチ抽出(Pitch Detection) ml5.js JavaScript – HIM.CO ヒム・カンパニー
pitchDetection() ピッチ抽出アルゴリズムは、音声信号のピッチや基本周波数を推測する方法です。このメソッドを使用すると、訓練済みの機械学習ピッチ抽出モデルを使って、サウンドファイルのピッチを推測することができます。 ピッチ抽出アルゴリズム(PDA)はWikipediaの「Pitch detection algorithm」によると、音声学、音楽情報検索、音声符号化、音楽演奏システムなどさまざまな状況で使用され、通常、準周期信号の周期を推定し、その値を反転して周波数を求める、とあります。 現時点で、ml5.jsはCREPEモデルのみサポートします。このモデルはgithub.com/marl/crepeを直接移植したもので、ブラウザのマイクから直接入ってくる入力でのみ機能します。 コンストラクタ ml5.pitchDetection(model, audioContext, st
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Convert a Date to another Time Zone using JavaScript | bobbyhadz
ml5 examples index
p5.jsをはじめよう｜文系大学生のためのp5.js入門
