setTimeout は、指定された時間以降に指定されたコードを実行する JavaScript の API です。ブラウザでも Node.js でも広く使われているのですが、実装はまちまちで、色々と特殊な条件も多く、挙動を完璧に理解している人は少ないと思います。この記事では、そんな setTimeout を可能な限り深堀りしてみようと思います。 先に書いておきますが、ものすごくニッチで細かい話ばかり並びます。突然私が、ただ純粋に setTimeout について調べたくなったので、その結果をまとめただけのものです。普通に開発している人には必要のない情報が多くなるでしょう。この記事は基礎から setTimeout を学ぼう、という方には全然向かないと思います。 また、JavaScript のイベントループについてある程度理解していることを前提とします。その詳しい理解には、@PADAone さん
GitLabで1クリックアカウント乗っ取りが可能だった脆弱性から学ぶ、OpenID Connect実装の注意点 - GMO Flatt Security Blog
はじめに こんにちは。株式会社Flatt Securityセキュリティエンジニアの森(@ei01241)です。 最近は認証や認可に際してOpenID Connectを使うWebサービスが増えていると思います。「Googleアカウント/Twitter/Facebookでログイン」などのUIはあらゆるサービスで見かけると思います。しかし、OpenID Connectの仕様をよく理解せずに不適切な実装を行うと脆弱性を埋め込むことがあります。 そこで、突然ですがクイズです。以下のTweetをご覧ください。 ⚡️突然ですがクイズです！⚡️ 以下の画面はOAuth 2.0 Best Practice上は推奨されないような実装になっており、潜在的リスクがあります。https://t.co/bXGWktj5fx どのようなリスクが潜んでいるか、ぜひ考えてみてください。このリスクを用いた攻撃についての解説記
Vue.jsを使った開発でよく悩まされるのがコンポーネントの肥大化です。複雑なアプリケーションになると、1つのコンポーネントが<script>ブロックだけで数百行…なんてこともめずらしくないでしょう。従来、Vue 2までの標準的な書き方では、UIとしてのコンポーネントの細分化はできてもロジックの分割や整理には限界がありました。しかし、Vue 3のComposition APIを活用すると、はるかに柔軟な整理・分割が可能です。 「Composition APIは難しそうだからまだ使っていない」という方、あるいは「導入はしているけどイマイチメリットがわからない」という方は、この機会にぜひComposition APIを活用したコンポーネントの整理術を試してみてはいかがでしょうか？ なぜ、Vueのコンポーネントは肥大化するのか？ 簡単な例を見てみましょう。下のサンプルはミニマムなアナログ時計のコ
Ink を使って CLI アプリを React で書く
Ink は CLI アプリを React で書くためのライブラリです。Flexbox レイアウトエンジンである Yoga を使用しているため、Web アプリケーションと同じような CSS を使って UI を構築できることが特徴です。Codex や Claude Code といったコーディングエージェントの CLI アプリが Ink で書かれています。 Ink は CLI アプリを React で書くためのライブラリです。Flexbox レイアウトエンジンである Yoga を使用しているため、Web アプリケーションと同じような CSS を使って UI を構築できることが特徴です。Codex や Claude Code といったコーディングエージェントの CLI アプリが Ink で書かれています。 プロジェクトを作成する 以下のコマンドで Node.js のプロジェクトを作成します。 mk
主なNode.js独自API
// CommonJS Modules の場合 const fs = require("fs"); const fs = require("node:fs"); // ES Modules の場合 import fs from "fs"; import fs from "node:fs"; process のように、グローバル変数としても組み込みモジュールとしても提供されているAPIもあります。 global globalThisの別名です。Webブラウザでは window と self がglobalThisの別名として定義されていますが、Node.jsには window や self はなく、かわりに global が定義されています。 Buffer ArrayBuffer, TypedArray (Uint8Arrayなど), DataView はJavaScriptの標準機能です。
はじめに 「オープンソースに挑戦したいけど、どんなプロジェクトを作ればいいかわからない…」そんな悩みを持っていませんか？ 本記事では、初心者・中級者・上級者・達人 の4つのレベルに分けて、合計 120個のオープンソースプロジェクトアイデア を紹介します。 それぞれのアイデアの詳細については折りたたんであります。興味がある内容については広げてみて機能要件や実装のポイント、拡張機能、学べることを見てみてください！ 自分のスキルレベルに合ったプロジェクトを見つけて、実際に開発に挑戦してみましょう！ 初心者向けプロジェクトアイデア 1. ToDoリストアプリ 概要 ToDoリストアプリは、ユーザーがタスクを追加・編集・削除し、完了状況を管理できるシンプルなアプリです。 初心者でも取り組みやすく、プログラミングの基礎となる CRUD（Create, Read, Update, Delete） の概念
本日、CloudflareはVercel、Shopify、およびNode.jsとDenoの両方の中心的な個々のコントリビューターと協力して、Webブラウザではない、JavaScriptベース開発環境で標準化Web APIを相互運用できる実装に焦点を当てた、新しいコミュニティグループの設立を発表いたします。 W3CおよびWeb Hypertext Application Technology Working Group（WHATWG）は、開発環境としての標準化APIとWebの機能を、長い間先頭に立って開発してきました。fetch()、ReadableStreamおよび WritableStream、URL、URLPattern、TextEncoder などのAPIは、現代のWeb開発における馴染みの、そして貴重なコンポーネントになりました。ただし、これら既存グループは常にWebブラウザの特定
あ、ユーザーが日本語で挨拶してきた。 なんか良いですねw 生成し直してみても お、朝から日本語で挨拶が来た。ユーザーは多分日本の会社や学校関係かも？ という調子なので、フランクな感じな味付けなんですね。 javascriptプログラミング 出力が長いこともあり具体的な内容は省略します。 テトリスを作成するには、以下のステップを考えます。 ゲームボードの作成: 通常は10列×20行ですが、テキストベースで表示するのではなく、HTML/CSSを使ってブロックを配置します。 テトロミノの種類と形状: 7つのテトロミノ（I, J, L, O, S, T, Z）とその回転形を定義します。 ゲームの制御: ユーザーがブロックを操作して落下させ、満タンした行を消去し、新しいブロックが床に当たるまで続ける仕組みです。 スコアリングとゲームオーバーの判定。 thinkタグ内は日本語で生成は14秒ほどと簡潔な
Reactで作るアナログ時計
Reactで作るアナログ時計以前よりReactの勉強がてら、1時間を40分で区切った36時間時計というのをモクモクと作っています。その中でReact Hooksの使い方などを学んでいるので、今回はよくあるアナログ時計を作りながら勉強メモとして残しておきます。 よくある時計ですね！個人的にはデジタル時計派なのですが、意外と需要があるようなので作ってみることに。ちなみにこれは別に React を使わなくても、素の JavaScript（Vanilla.js）で作成可能です！が、上記36 時間時計を作る中で React コンポーネントとして必要だったので今回は React で挑戦しました。 CSS でベースとなるアナログ時計作りアナログ時計自体は空の div にサイズや position の設定をして作成。時計の角度は rotate プロパティーを使いますが、CSS カスタムプロパティーで初期値
チーム向けのチャットボットAIを提供しているGlama.aiのエンジニアであるフランク・フィーゲル氏が、容量削減のために変数名を短縮し、改行や空白を消す「Minify」が行われたJavaScriptのコードをChatGPTを使って読みやすい形式に戻すことに成功したと報告しています。 Using ChatGPT to reverse engineer minified JavaScript - ChatGPT for teams | Glama https://glama.ai/blog/2024-08-29-reverse-engineering-minified-code-using-openai フィーゲル氏が最初に注目したのは、以下のサイトで背景に表示されているアニメーションでした。このアニメーションは文字で構成されたアスキーアートが波打って目まぐるしく変化していくもので、フィーゲル
こんにちは！株式会社ｉｉｍｏｎでフロントエンジニアをしている「ひが」です！ 本記事はアドベントカレンダー19日目の記事になります！ 先日夢で「メリークロージャマス！！！」と叫んでスベる夢を見ました。 冬だからか、みなさん冷たかったです（現実では暖かいです） そのようなこともあり、思い切って記事にしてみようと思いました！ どうか、暖かい目で見守っていただけると嬉しく思います！！ 本題 本題ですが、みなさんはクロージャをご存知でしょうか。 MDNよりお言葉を借りると クロージャは、組み合わされた（囲まれた）関数と、その周囲の状態（レキシカル環境）への参照の組み合わせ です！ 初見だと何言ってるかよくわからないですよね。 本記事でざっくり掘っていきますので、是非一緒に見ていただければ幸いです！ ※ 本記事は基本的にMDNの内容に沿う形で進めつつ、たまに脱線したり小ネタを挟んだりします ※ コード
Service Worker がページをコントロールし始めるタイミングを skipWaiting と clients.claim から理解する - カミナシ エンジニアブログ
こんにちは。カミナシでソフトウェアエンジニアをしております佐藤です。 先日、『カミナシ レポート 記録アプリ（Web）』の提供を開始いたしました。 現場帳票システム『カミナシ レポート』、マルチデバイスで記録ができるWeb版をリリース PWA として利用が可能であり、また、ネットワークが不安定な現場での使用も想定したオフライン機能も備えています。これらを実現する上では、Service Worker が重要な役割を果たしています。 『カミナシ レポート 記録アプリ（Web）』の実装には、VitePWA を利用しています。VitePWA では Service Worker の制御に Workbox が使用されています。 Workbox は Service Worker の扱いをよしなにやってくれる非常に便利なライブラリなのですが、正しく活用する上では、やはり、Service Worker その
メモリリークを検出するmemlabをAngularで試してみた - Taste of Tech Topics
アクロクエスト アドベントカレンダー 12月15日 の記事です。 こんにちは。 最近の趣味がAtCoderのmaron8676です。パズルを解くみたいに楽しめて、勉強にもなるので毎週コンテストに参加しています。 さて、2022/09にMeta社からmemlabというメモリリーク検出のためのフレームワークがリリースされました。 facebook.github.io 気になって調べたところチュートリアルを試していた方はいましたが、他にもスナップショットファイルの解析などmemlabが提供している機能があるようだったため、この機会に試してみた結果を書いていきます。 memlabとメモリリーク memlabの機能 Angularのメモリリークを検出してみる 検出対象のWebアプリ memlabを使った検出 memlabを使った原因調査 修正後の確認 まとめ 参考サイト memlabとメモリリーク
In the early 90’s, being a frisian kid obsessed with computers there weren’t a ton of ways to get access to new software or learn more about computers. The two main ways were exchanging 3.5” diskettes with friends, or go to the library. One book I remember more than others was “Windows for Kinderen” (“Windows for Kids”) by Addo Stuur. I must have been around 10 years old and was obsessed by this b
Syntax Highlighting in Hand-Coded Websites The problem I have been trying to identify practical reasons why hand-coding websites with HTML and CSS is so hard (by hand-coding, I mean not relying on frameworks, generators or 3rd party scripts that modify the DOM). Let's say, I want to make a blog. What are the actual things that prevent me from making—and maintaining—it by hand? What would it take t
この記事に辿り着いたという事は、プラグインやライブラリに頼らずにスライダーを書きたい、もしくはプラグインを使う事に抵抗はないけれど仕組みを理解しておきたいという方だと想定しています。 大前提 他人の書いたコードはクソ 今からお見せするのは「他人のコード」です。 (他人のコードといっても自分で書いてますが、読者からしたら他人だと思うので) 他人のコードは基本的に不正解だと思ってかかってください。私は正解を発表しているのではなく、アイディアの一つを投げかけているにすぎません。 もしかしたらバグが眠っているかもしれない、もっといい書き方があるかもしれないという視点を常に持ち、そしてにわかコーダー私にJavaScriptをご教示頂けたらと思います。 挙動 実装した機能 スライドの枚数に応じてスライダー内部のスタイル・ドットが自動で調整される(htmlを書き換えるだけでスライドの枚数を変更可能) ド
【JavaScript】スクロールメーター 自動スクロール機能つき - Little Strange Software
どうも！LSSです！！ 2021年もまもなく終わる頃、またちょっと変わったものを作ってみました。 画面左下に表示されています コード 一部解説 あとがき 画面左下に表示されています 画面左下に、 ↑こんなものが表示されていると思います。 ページを開いた後、ちょっと画面をスクロールさせると画面左下定位置に出現します。 この黄緑が「現在このページをどこまでスクロールさせているか」を示しており、一番下までスクロールすると完全に黄緑の円になります。 また、自動スクロールスイッチを兼ねていて、クリックする毎に 「自動スクロールOFF」→「低速自動スクロール」→「高速自動スクロール」 が切り替わります。 コード <style> #scrlm{ position:fixed; bottom:50px; left:10px; border-radius:50%; width:50px; height:50
Patterns for Memory Efficient DOM Manipulation with Modern Vanilla JavaScript – Frontend Masters Blog
Patterns for Memory Efficient DOM Manipulation with Modern Vanilla JavaScript I’ll discuss best practices to avoid excess memory usage when managing updating the DOM to make your apps blazingly fast™️. DOM: Document Object Model – A Brief Overview When you render HTML, the live view of those rendered elements in the browser is called the DOM. This is what you’ll see in your developer tools “Elemen
React コンポーネントをリファクタリングする方法 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
Reactアプリケーションに適用されるリファクタリングに関する一般的な問題について解説します。 クラスコンポーネントから学習してしまい、フックに移行する前に少し混乱する可能性があります。 関数コンポーネントが好まれる理由と、クラスコンポーネントよりも関数コンポーネントを使用する利点があるかどうかを詳しく学んで下さい。 なぜクラスではなくフックなのか？ 状態がない場合 状態を持つコンポーネント Props ライフサイクルの簡素化 これから 最後に なぜクラスではなくフックなのか？ Reactでクラスを使用する利点は、状態がいつ変化したかを識別し、this.stateキーワードを使用してグローバル状態またはコンポーネント状態を更新するライフサイクルメソッドがクラスに含まれていることです。 対照的に、フックはReact 関数コンポーネントで使用され、クラスを必要とせずにコンポーネントの状態やその
DisclaimerAll projects mentioned in this blog post have been contacted, and I confirmed that the behavior described in this article is either working as intended, already fixed, or will not be fixed. TL;DRThe browser loads elements in the HTML from top to bottom, and some JavaScript libraries retrieve data or attributes from the DOM after the page has been completely loaded. Because of how the con
止まってしまった時計の針を動かしたい
この記事は Cybozu Frontend Advent Calendar 2023 の 15 日目の記事です。 14 日目はこちら → 主要ブラウザでサポートされつつある WasmGC とは何なのか こんにちは。ryounasso です。 ある日、ちょっとした興味で、フロントエンドで処理を行うカウントダウンタイマーを実装しました。 実際に、動かして使おうとしました。 何秒か後に、経過した時間を確認してみると…… 動いていなかったのです…… 😭 なぜ動かなかったのか このタイマーの処理は、フロントエンド側で setInterval 関数を用いて実装しています。 setInerval 関数は、タブがバックグラウンドになると、ブラウザがリソースの節約のために、実行を遅らせたり、停止させたりするそうです。 そのため、別タブに移動した際に setInterval が停止して、タイマーが動いてなか
リアルタイムな情報をプッシュする技術「Server Sent Events」のフロントエンド実装方法とは？#SSE #フロントエンド #実装 - ハイパーマッスルエンジニア
Server Sent Events (SSE)は、サーバからクライアントにリアルタイムで情報をプッシュするための技術です。この記事では、そのフロントエンドでの実装方法をいくつか紹介します。 完成品 今回実装したものは下記に収めてます。Next.jsを使っています。 github.com 下記で実際にブラウザで動作確認できます。 https://server-sent-events-example.vercel.app ChatGPTのようなUIを実装するのに色々な方法を試しました。 SSEのサーバー側のコード サーバーサイドの設定は以下のとおりです。 SSEをサポートするエンドポイントを作成します。 レスポンスのヘッダーに'Content-Type': 'text/event-stream'を設定し、接続を開いたままにします。 必要に応じて、特定の間隔でデータを送信します。 pages/
While browsing the Internet for inspiration, I came across an interesting-looking component. I thought the block with the running ASCII art looked cool, but I couldn't quite figure out how it was implemented, so I started looking at the source code. I found the code that looked like it might be doing the job, but it was minified. const { floor: ra, abs: KE, min: QE } = Math, O5 = ["reactive.networ
YouTubeで広告表示中は自動でミュートして、広告が終わったらミュート解除する(Chrome拡張) - Qiita
はじめに YouTube視聴中、急に音量デカすぎ広告が始まることがあるので自分の耳を保護するために作成しました。 広告開始を検知して即座にミュートしてくれるし、終わったらアンミュートもしてくれるので大変快適に。 初めての拡張機能作成でしたが、↓の記事を参考に無事作成できました。 YouTubeの動画広告をスキップする拡張機能を作ってみた 作業の流れ 基本的には参考元と同じです。 処理をJavaScriptで書く manifest.jsonを用意 フォルダ/ファイルを用意 拡張機能を有効にする 私の場合は自分用に作成していますので、自分が使っているChromeで有効にするだけですね。 1. 処理をJavaScriptで書く コードはこちら。 const hostName = location.hostname; const subDomain = hostName.split('.')[0]
PyScriptを使うと、ブラウザ上で手軽にPythonを実行できる。JavaScriptを使わなくても、大抵のことがPythonだけで実現できる。図形の描画ができるのでゲームも開発できる。ライフゲームを実装してみて、使い方を確認してみよう。 PyScriptでライフゲームを作ってみよう PyScriptとは何だろう？ PyScriptとは、Pythonをブラウザ上で直接実行できるようにしたフレームワークだ。HTMLに<script type="py">…</script>と記述するだけで、Pythonをブラウザで動かすことができる。 本連載の110回目(https://news.mynavi.jp/techplus/article/zeropython-110/)でも、簡単にPyScriptについて紹介したが、その後も順調にバージョンアップを重ねている。仕組み的には、PythonをWeb
HTMLに埋め込んだYouTube動画の状態を監視して、指定した再生位置になったら何かする方法 - Qiita
本記事では、HTMLに埋め込んだYouTube動画プレーヤーを監視 ＆ その再生情報を取得してJavaScriptであれこれする方法についてまとめています。 機能実装には 「YouTube IFrame Player API」 を使用します。 （仕様の詳細は公式のリファレンスをご覧ください。） YouTube IFrame Player APIとは？ YouTubeさんが提供してくれている無料のAPIで、JavaScriptで制御可能な動画プレーヤーをウェブサイト上の任意の場所に <iframe> として配置するものです。 API経由で配置したYouTube動画については、動画プレーヤーの状態変化をイベントとして検知できるほか、JavaScriptでプレイヤーを直接操作することも可能。 再生 / 一時停止 / 再生終了の状態 再生位置（シークバー）の変化 再生速度、音量、画質の変化 などな
JavaScript のコーディングを始めるための 40 個のやさしい JS プロジェクト (初心者向け)
原文: 40 JavaScript Projects for Beginners – Easy Ideas to Get Started Coding JS プロジェクトの構築こそ新しいプログラミング言語を学ぶ最善の方法です。 そこで、純粋な JavaScript、React、TypeScript を使用する、初心者にやさしい 40 個のプロジェクトチュートリアルの一覧を作成しました。 チュートリアルについてのアドバイスなのですが、ビデオを見て、プロジェクトを構築し、それを分解してから独自の方法で再構築してみてください。新しい機能を追加したり、違う方法を試したりしてください。 そうすることで、プロジェクトの概念をつかめたかどうかテストできます。 なお、以下のリストの各プロジェクトの上でクリックすれば、対応する記事のセクションまでジャンプできます。 純粋な JavaScript のプロジェク
ruby.wasmはじめの一歩: Ruby Next Playground構築の舞台裏（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: First steps with ruby.wasm: or how we built Ruby Next Playground—Martian Chronicles, Evil Martians’ team blog 原文公開日: 2024/02/06 原著者: Vladimir Dementyev（首席バックエンドエンジニア）、Travis Turner（技術記事編集者） サイト: Evil Martians -- ニューヨークやロシアを中心に拠点を構えるRuby on Rails開発会社です。良質のブログ記事を多数公開し、多くのgemのスポンサーでもあります。 日本語ブログ: 合同会社イービルマーシャンズ - Qiita はじめに 当初はHTMLやCSSのレンダラーに過ぎなかったWebブラウザは、やがて洗練された実行環境へ
Introduction There is a wide base of ECMAScript runtime environments being used beyond web browsers, specifically in web server and edge platforms. A major benefit to this approach is the ability to use a single programming language across multiple contexts, reducing specialisation and allowing for reuse of code across the server and client side. Since code running in web browsers makes up the vas
javascript <!-- スライドの外枠 --> <div class="slide-wrapper"> <!-- スライド（コンテンツ） --> <div id="slide" class="slide"> <div> <p>スライド１</p> </div> <div> <p>スライド２</p> </div> <div> <p>スライド３</p> </div> </div> <!-- 左右のボタン --> <span id="prev" class="prev"></span> <span id="next" class="next"></span> <!-- インジケーター --> <ul class="indicator" id="indicator"> <li class="list"></li> <li class="list"></li> <li class="list"
はじめに Tampermonkeyは、Chromeをはじめとしたモダンブラウザー上でユーザースクリプトを実行する拡張機能です。 Safariに未対応なものの、オープンソースで開発されているViolentmonkeyというのもあります。 元々は特定のページを使いやすいように書き換えたりする用途に使われますが、開発業務でも入力フォームにテストデータを事前に入力するといった支援ツールとして利用する事ができます。 ここでは、その際によく使ったコードスニペットをまとめてみました。 選択系 // ID属性が設定されている場合はquerySelector()よりgetElementById()を優先して使う document.getElementById('email').value = email document.querySelector('input[id="email"]').value =
【JavaScript】setTimeoutから返るIDは絶対0じゃないし、clearTimeoutに0を渡しても何もしない - Qiita
【JavaScript】setTimeoutから返るIDは絶対0じゃないし、clearTimeoutに0を渡しても何もしないJavaScriptsetTimeoutsetInterval 超小ネタです。JavaScriptのタイマー系関数にsetTimeoutとsetIntervalがあります。これらは返り値として数値型のタイマーIDを返し、このタイマーIDをclearTimeout及びclearIntervalに渡すことでタイマーをキャンセルできます。 このタイマーIDは0よりも大きいことが保証されています。またclearTimeoutまたはclearIntervalに無効なタイマーIDを渡しても何もしないことも保証されています。（以下参照） なのでタイマーを使っていないときはタイマーIDに0を代入しておけば、clearTimeoutを使うときに毎回タイマーを起動しているかをチェックする
０．初めに 私は、非エンジニアなのでこの記事は初心者向けです。 Qiitaや掲示板を閲覧するときに、自動スクロールして、ぼーっと眺めたかったのでそういうブックマークレットを探してみました。 １．見つけたもの 以下のページにひな形になる情報がありました。 速度調整できる自動スクロールのブックマークレット | MIII.me https://miii.me/4326.html 個人的には、以下の点が、不便だったので変更してみました。 ブックマークバーから起動/停止はちょっと使いづらい スクロール速度が変更できない ２．作った物 以下の画像の通りです。 処理の流れは以下。 ブックマークバーで「スクロ」クリック スクロールボタンが常に画面左上部に表示される スクロールボタンを押すとスクロール速度を入力するプロンプトが表示 プロンプトでOKを押すとスクロール開始 もう1回スクロールボタンを押すと停止
はじめにSHIFT DAAE(ダーエ) 開発グループ所属の武藤です。 うっかりSolidJSに触れてみたら、沼にハマりそうです。そんな個人的に第一印象抜群のSolidJSは、高パフォーマンス&Reactの様にコードが書けることが特徴の、最近注目を集めるJavaScriptフレームワークです。 早速、ご紹介していきます。入門編としてご覧ください！ SolidJSとは概要ReactやVueと同じく。宣言型のJavaScriptフレームワークです。仮想DOMを使用せず、一度作成された実DOMノードをSignalやMemoといったプリミティブの変化に伴い部分的に更新させることで、高パフォーマンスなUIを実現しています（SignalとMemoについては後程の実装で触れますので、分からない場合はとりあえず読み飛ばしていただいて大丈夫です）。 Reactの様に書けるJSX, Fragment, Cont
本文書はこれまでSvelteを利用した経験がない人を対象にした入門的な文書です。Svelteのすべての機能の説明を行なっているわけではありませんが利用頻度の高そうな機能を中心にシンプルなコードを利用して解説を行なっているので本文書を読み進めるとSvelteの基本的な機能を理解することができます。 ライブラリの追加を行うことなく利用できるTransition、Animationやwritable storeによるコンポーネント間のデータの共有(状態管理)の設定についても解説しています。 Svelteについて SvelteはWEBアプリケーションのUI(ユーザインタフェイス)を効率的に開発するためのJavaScriptフレームワークです。JavaScriptのフレームワークと言えば最近ではReact, Vueと並んで紹介されるほど人気のあるフレームワークになっています。 ではSvelteとRe
WordPressでプラグインを使わずにポップアップを表示させる方法を紹介 この記事では「WordPressのプラグインを使わずに画像バナーなどのポップアップ表示する方法」を解説します。 バナーだけでなく独自で書いたHTMLや好きなタイミングでポップアップを表示する方法まで紹介しますのでお楽しみに！ ポップアップのサンプルデモ 完成するポップアップはどんな動きになるのか？実際に見てみた方が早いので下記のボタンを押してポップアップのデモを見てみてください (※画像は引き延ばしてるのでちょっと粗いです) このような機能がプログラムの知識なしで、コピペで実装できます。 実装にはプラグインではなくショートコードを使いますので、使う場所はいつもの投稿ページなどの記事編集画面です。 プラグインを使わずにショートコードで実装する利点 WordPressに機能を追加するというとすぐにプラグインに頼りがちで
はじめに 本記事ではuseRef, useStateについて説明した後、両者の違いについて解説します。 useRef とは レンダリングに必要ない値を参照する際に用いられる React Hook です。 入力 initialValue: ref のcurrentの初期値。最初のレンダリング後、この値は無視されます。 返り値 currentというプロパティを有するオブジェクトを返します。currentは最初initialValueで初期化されますが、後に他の値を指定することもできます。このrefオブジェクトを JSX ノードのref属性として React に渡すと、React はそのcurrentプロパティに設定します。 ポイント ref.currentを変更しても React は再レンダリングを行いません。refは単なる JavaScript オブジェクトであり変更が行われても React
Account hijacking using "dirty dancing" in sign-in OAuth-flows
Account hijacking using “dirty dancing” in sign-in OAuth-flows Combining response-type switching, invalid state and redirect-uri quirks using OAuth, with third-party javascript-inclusions has multiple vulnerable scenarios where authorization codes or tokens could leak to an attacker. This could be used in attacks for single-click account takeovers. Frans Rosén, Security Advisor at Detectify goes t
さてさて、私の開発メインはPHP（Laravel）+ JavaScript（Vue.js）で、もしこれらに不向きな部分があればPythonを使うという形になっています。 実際この３つがあれば（私の）業務的に困ることはほぼないのですが、根っからのプログラム好きですので、「別のテクノロジーもかじっておきたい」欲があったりします。 そこで注目したのが、 Rust言語 です。 なぜ「Rust言語」かというと、ブラウザのJavaScriptを高速化することができる「WebAssembly」をつくることができるからなんですね。 ※ WebAssemblyについては、過去記事がありますのでぜひご覧ください。（前回はC言語を使いました） 📝 参考ページ： 入門！WebAssemblyを試してみた つまり、Rust言語はウェブ開発に関連させることもできるわけです。 そこで❗ 今回はRust言語でWebAs
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
setTimeout を完璧に理解する
コンポーネントを小さく・きれいに設計しよう。Vue Composition APIを活用したコンポーネント分割術 - ICS MEDIA
レベル別で紹介！オープンソースで挑戦できる120のプロジェクトアイデア集 - Qiita
Web相互運用性JavaScriptランタイムコミュニティグループ
新しいR1で蒸留されたDeepSeek-R1-0528-Qwen3-8Bを試す
MinifyされたJavaScriptのコードをChatGPTで読みやすい形式に戻すことに成功
歴史を感じつつ、クロージャで遊んでみた（JavaScript編） - iimon TECH BLOG
Neko - A brief history and porting to Javascript
Font with Built-In Syntax Highlighting
プラグインに頼らないスライダーを素のJavaScriptで書いてみた
DOM-based race condition: racing in the browser for fun
Using ChatGPT to reverse engineer minified JavaScript
ゼロからはじめるPython(126) ブラウザで動くPython「PyScript」でライフゲームを作ってみよう
Minimum common web API
【素のjavascript】自作スライドショーの作り方：完全ガイド - tagnote
Tampermonkey(JavaScript)でよく使うコードスニペット集
ぼーっと眺める自動スクロール用Bookmarkletを作った - Qiita
SolidJSがどうやら魅力的です｜SHIFT Group 技術ブログ
はじめてSvelteを利用する人のためのSvelte入門 | アールエフェクト
WordPressでポップアップを表示(プラグイン無しで実装) | タルト株式会社
【React】useRefの深掘り ~ useStateとの違い、レンダリングの際の挙動等
WebAssembly を Rust でつくり、JavaScript でつかう