【JavaScriptの実践】モーダルウィンドウの作り方 – ワードプレステーマTCD
JavaScriptには既存の機能として、alert, prompt, confirmのポップアップウィンドウが用意されています。ユーザーに確認して欲しい内容をダイアログ形式で表示させることができます。 今回は、実用的なモーダルウィンドウの作り方を解説していきます。 モーダルウィンドウは、元々のウィンドウの上から新たに表示されたウィンドウのことで、指定された操作が完了されるかキャンセルされるまでは、他のウィンドウに移ることができません。 モーダルウィンドウが使われる場面としては、ページにアクセスしたときに広告が表示されるパターンや、ボタンをクリックすると何かしらの案内が表示されるパターンなどです。 デモ 今回は、ボタンをクリックするとモーダルが開き、バツ印かモーダルコンテンツ外のどこかをクリックするとモーダルが閉じるように実装します。 <!DOCTYPE html> <html labg=
Node.js v20 の主な変更点 - 別にしんどくないブログ
2023 年 4 月 18 日にリリースされた Node.js v20 の主な変更点を紹介します。 nodejs.org ファイルのアクセスやプロセスの起動を制限する新しいパーミッションモデル (experimental) --allow-fs-read でファイルの読み込みを許可する --allow-fs-write によるファイル書き込み許可 --allow-child-process による child_process の許可 --allow-worker による Worker Threads の許可 Permission Model の参考記事 V8 11.3 による新しい JavaScript の機能 テストランナー（node:test）が stable に昇格 Single Executable Application JSON の config を使った Blob が必要に
Node.js v20 から使える ECMAScript の新機能
Node.js v20 リリースされました。 V8 のバージョンが 11.3 まで上がったことで、いくつかの新しい ECMAScript の機能が使えるようになりました。v フラグが好きなのでうれしいです。 どのバージョンからどの機能が使えるようになったかとか忘れてしまうのでメモしておきます。 String.prototype.isWellFormed / String.prototype.toWellFormed 文字列が Well Formed Code Unit Sequence かどうか判定する isWellFormed と、それに変換する toWellFormed が追加されます。WebIDL の文脈では USV 文字列とか言われますね。 これは WebAssembly みたいな USV 文字列前提の環境とやり取りするときに便利。Babel みたいな JavaScript を解釈
「Webブラウザがメモリを食い過ぎる」理由はこれだ
ダウンロードはこちら 人気アーティストのライブチケットや話題のプラモデルの争奪戦から、業務アプリケーションによるビジネスプロセスの実行まで、Webブラウザは文字通りあらゆる活動の起点になりつつある。それほど大事な役割を担うWebブラウザがうまく動かなくなったとすれば、くだんの争奪戦に“門前払い”を食らうどころか、何より仕事にならなくなる。 Webブラウザが突然重くなった――。こうしたトラブルはメモリ消費に起因する可能性がある。メモリ消費量が過剰になると、Webブラウザだけではなく、他のアプリケーションやPC全体の動作にも支障を来しかねない。Webブラウザがメモリを“食い過ぎる”のはなぜか。メモリ消費量を抑えるには、どうすればよいのか。 中身を読むには、「中身を読む」ボタンを押して無料ブックレットをダウンロードしてください。 Webブラウザ「メモリ使い過ぎ」防止法 Copyright © I
ウインドウサイズを取得する 【JavaScript 動的サンプル】
JavaScriptでウインドウサイズを取得する場合、取得する箇所により関数(命令)が異なります。 一般的なスマートフォンでも下記のJavaScriptで画面サイズやブラウザサイズを取得することができます。 サンプルは全てライセンスフリーとしていますので、改変や再配布も自由です。（コメントを残していただけると幸いです） ただし、動作の保証は一切行っておりませんのでご理解の上、ご利用ください。
Window: setInterval() メソッド - Web API | MDN
HTML DOM APIWindowインスタンスプロパティcachesclosedcookieStorecredentialless Experimental crossOriginIsolatedcryptocustomElementsdevicePixelRatiodocumentdocumentPictureInPicture Experimental event 非推奨; external 非推奨; fence Experimental frameElementframesfullScreen 非標準 historyindexedDBinnerHeightinnerWidthisSecureContextlaunchQueue Experimental lengthlocalStoragelocationlocationbarmenubarmozInnerScreenX 非標準 m
setTimeout() - Web API | MDN
グローバルの setTimeout() メソッドは、時間切れになると関数または指定されたコードの断片を実行するタイマーを設定します。 setTimeout(code) setTimeout(code, delay) setTimeout(functionRef) setTimeout(functionRef, delay) setTimeout(functionRef, delay, param1) setTimeout(functionRef, delay, param1, param2) setTimeout(functionRef, delay, param1, param2, /* … ,*/ paramN) functionRef タイマーが満了した後に実行する関数。 code 関数の代わりに文字列を含める代替構文も許容されており、タイマーが満了したときに文字列をコンパイルして実
WebAssemblyとJavaScriptの非同期処理を橋渡しするAPI「JSPI」、Google V8が実験的に実装
WebAssemblyとJavaScriptの非同期処理を橋渡しするAPI「JSPI」、Google V8が実験的に実装 Google Chromeなどに組み込まれているJavaScript/WebAssemblyエンジンのV8の開発チームは、WebAssemblyとJavaScriptの非同期処理の橋渡しを行うAPI「JavaScript Promise Integration API」（JSPI）を実験的に実装したことを明らかにしました。 最近のモダンなWeb APIの多くが非同期型になっており、APIを呼び出した後も別の処理が可能で、呼び出し先の処理が完了すると通知されるようになっています。 非同期処理のAPIでは、呼び出し時には結果が返る代わりに、将来の処理完了時に値が提供されるPromiseオブジェクトを返しますが、WebAssemblyではPromiseの操作ができないため、非
指定されたページが見つかりません。｜Infoseekニュース
404 NOT FOUND 指定されたページが見つかりません。 掲載から一定の日数が経過した記事は、 配信社との契約に基づき削除される場合がございます。 （その場合、一定期間経過後は記事を見ることが出来ません。） それ以外のケースについては、お手数ですが 以下のいずれかの方法でページをお探しください。 ブラウザの再読み込みを行う 入力したURL（ページアドレス）にタイプミスがないか確認する ブラウザの「戻る」ボタンを押して前画面からやり直す
指定されたページが見つかりません。｜Infoseekニュース
404 NOT FOUND 指定されたページが見つかりません。 掲載から一定の日数が経過した記事は、 配信社との契約に基づき削除される場合がございます。 （その場合、一定期間経過後は記事を見ることが出来ません。） それ以外のケースについては、お手数ですが 以下のいずれかの方法でページをお探しください。 ブラウザの再読み込みを行う 入力したURL（ページアドレス）にタイプミスがないか確認する ブラウザの「戻る」ボタンを押して前画面からやり直す
スクロールテーブルを実装する際の注意点
前回ヘッダー・フッター・列固定可能なテーブルを実現するためのjQueryプラグインを作ってみたので，その際に気がついた点についてまとめてみた．すこしづつ増えてる・・・ 2011/02/14更新． 2011/03/01更新． 2011/05/30更新． 2013/12/24更新． 2018/01/24更新. (position:sticky法を追加…素晴らしい) 2018/04/27更新. display:grid+position:stickyによる実装例を追加 スクロール可能なテーブルを実現する手段としてはだいたい次の6つの方法が挙げらる．まあここらへんはアイディアの問題なので細かく考えていけばもっとあるかもしれない． テーブル分割法 テーブル要素を複数のテーブルに分割して対処する方法 いろいろな場所で公開されている． pushpin header法 cssのposition設定を利用す
「秀丸エディタ」、JavaScriptによるマクロに対応
設定が初期状態かつ保存されない状態の秀丸エディタを別のアプリとして使える「プライベートモード」も利用可能になった。検索窓やクリップボードの履歴などでもダークモードを使えるようになった他、メニューバー・ツールバーに関する調整が入った。 関連記事 「秀丸」11年ぶりメジャーバージョンアップ ダークモードなど新搭載 「秀丸エディタ」の最新版「Ver9.00」が公開。11年以上ぶりのメジャーバージョンアップだ。 ITエンジニアが使いたいエディタトップ10 「Visual Studio Code」は3位 1位は？ ITエンジニアが最も使いたいエディタは？──パーソルキャリアがランキングを発表。1位は「サクラエディタ」、2位は「秀丸エディタ」だった。 iPhoneとMacを行き来して原稿を書く方法 iPhone用テキストエディタをお探しの貴兄に。 関連リンク 秀丸エディタの更新履歴
導入がカンタンで開発効率爆上げなVisual Studio Code拡張機能のご紹介 | SIOS Tech. Lab
みなさん、こんにちは。サイオステクノロジー武井です。今回は、導入がカンタンで開発効率爆上げなVisual Studio Code拡張機能をご紹介したいと思います。 ※ 本記事は技術評論社出版の「Software Design」2022年10月号(詳細はこちら)に私が寄稿した「エディタこそ開発の要 ［最大活用］Visual Studio Code」の記事をベースとしております。是非、Software Designの方も合わせてご覧ください！！ はじめに Visual Studio Code はインストール初期でも機能は豊富であり、かつインタフェースもシンプル、そして拡張機能により利用者の環境に合わせて自由にカスタマイズできることが、大きな魅力となっております。 一方で、その機能の豊富さにより、どの機能を使ってよいのかと迷われる方もいると思います。 そこで本記事では、「導入がカンタンで開発効率
JavaScript／TypeScriptの非同期処理に向けたライブラリ「Axios 1.0.0」が登場
Axiosは、JavaScript／TypeScriptで非同期API呼び出しを容易にするライブラリ。各種WebブラウザやNode.jsと組み合わせて使用する。 JavaScript／TypeScript、Node.jsでは、処理の完了を待つことなく、完了したときにコールバック関数を呼び出すようにする「非同期処理」を多用する。しかし、非同期処理は回数が多くなるとコードの入れ子が深くなり、混乱しやすい。また、処理完了の順序を事前に特定できないため、順不同でやって来る処理完了の知らせを適切に処理しなければならない。 これらの問題を解決するために、「Promise」という非同期処理の状態を監視するオブジェクトが導入されている。これを利用することで、非同期処理の記述はある程度容易になるが、まだ面倒は残る。 そこで、Promiseオブジェクトを強く意識することなく非同期処理を記述することを可能にした
依存してる npm パッケージの作者を調べる
日々いろんな npm パッケージに依存してるわけですが、その作者が気になるときがある。 単純に気になるときもあるけど、調査が必要になるときもある。 たとえば最近 substack の GitHub アカウントが削除された。npm から消えたわけじゃないから、すぐに困るってことはないけど、誰にも移譲されていないリポジトリがあっとして、もし自分がそれに依存してしまっていたら代替を探したくなる。 また、自分が関わっている OSS プロジェクトでは過去のメンテナーが作ったたくさんのライブラリに依存していて、その人がすでにアクティブでなくなったいるため、やや悪い影響が出始めていたりする。 そのため、自分の依存している npm パッケージの作者をシュッと調べて、フォークするか移管してもらうか色々判断できると便利である。 ということでそれに役に立つツールを作った。 npm に publish してあるの
インスタンスとオブジェクトの違い - きしだのHatena
インスタンスとオブジェクトは混同しがちで区別がようわからんになりがちです。 とりあえず某所で説明したものを再構成します。 ※2022/12/10追記: クラスに対するのはインスタンスになるべき(たとえばクラス変数とインスタンス変数)なので、ちょっと修正するべきですが、このエントリはそのまま残してます。 クラス・インスタンス・オブジェクト クラスをインスタンス化(実体化)したものがオブジェクト(物)です。 実際に在るものはクラスとオブジェクトで、インスタンスはそれらの関係です。colorsやsportsが並んでるツリーが「オブジェクト」で、右のパレットに並んでるTreeが「クラス」、Treeからみたときのツリーが「インスタンス」ということになります。 ここでツリーはオブジェクトでもインスタンスでもあります。 このように、同じものをオブジェクトともインスタンスともいうことができるので混同してし
Next.jsのホスティング先としてFirebaseは『かなりアリ』な選択肢になっている
Next.jsのホスティング先といえば、Vercelという認識は結構多くの人の中での共通認識になりつつあると思う。実際にVercelは特に難しいことをする必要もなく、また月額＄20の課金（Proプラン）でのできる範囲はかなり広いと思う。 私も普段作っているサービスのDeploy先の1つとしてVercelを持っているが、今回はFirebaseもかなり良いと言う話をしていきたいと思う。 2022年5月、FirebaseHostingがNext.jsに対応した 実はGoogleI/Oの中で、こっそりとFirebaseHostingがNext.jsに対応していたのだ GoogleI/Oの記事はこちら 厳密には、Next.jsのプロジェクトを FirebaseHosting+FirebaseFuncitons(裏側でゴニョゴニョやってくれて第二世代のFunctionsにdeployされている)にfi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「Node.js」にセキュリティ更新 ～全10件の脆弱性、最大深刻度は「High」／v16.20.1、v18.16.1、v20.3.1への更新を
起きる！メモリーリーク（javascriptクロージャー編）
拡張機能に署名して安全に提供 ～「Visual Studio Code」のマーケットプレイスで開始／ダウンロードの途中で改竄がないことを証明
