JavaScript Tracker - DOMイベントを捕捉するGoogle Chrome機能拡張
JavaScriptはイベント購読型の処理が多いです。DOMをクリックした際のイベントであったり、変数の変化をウォッチして処理が行えます。しかし、そういったコードが散在していると、どこでイベントを購読しているのかが分からなくなります。 そこで使ってみたいのがJavaScript Trackerです。JavaScriptのイベント処理を一覧し、ハンドリングできるGoogle Chrome機能拡張です。 JavaScript Trackerの使い方 DOMを選択すると、そこに紐付いているイベントが要素、振る舞いなどを一覧してくれます。 そこから実際のコードを辿ることもできます。 動作デモです。 JavaScript TrackerはjQueryにも対応し、DOMイベントの収集ができます。スタイルを変更するイベントも分かります。そしてそこからコードを辿ってデバッグが可能です。これはフロントエンド
source_downloader - SourceMapを元のJavaScriptファイルへ展開
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました JavaScriptはサイズを軽減したり、簡単に内容が読まれないように難読化（ミニファイ）して公開します。しかし、それではデバッグしづらいという問題があるため、SourceMapと呼ばれる仕組みがあります。 今回紹介するsource_downloaderはSourceMapファイルを読み込み、元のJavaScriptファイルを生成してくれるソフトウェアです。 source_downloaderの使い方 source_downloaderはリモートまたはローカルファイルを読み込めます。変換後はJavaScriptだけでなく、TypeScriptにも対応しています。 $ cat src/_bin.ts import { join, resolve } from 'path' impor
JavaScriptのモダンな書き方 - ES2017〜ES2018のawait・async, includes(), padStart()等を解説 - ICS MEDIA
JavaScriptのモダンな書き方 - ES2017〜ES2018のawait・async, includes(), padStart()等を解説 ECMAScript 2015がリリースされて以降、JavaScriptの機能は大きく強化されました。const/let、アロー関数、クラス構文、Promiseなどが有名なところですが、ES2016、ES2017、ES2018、･･･ES2022、そしてさらにその先へJavaScriptの仕様は日々進化しています。JavaScript・TypeScriptの開発では、これまで当たり前だと思っていた手法を新しい新機能で置き換えることが何度もありました。 本記事では、JavaScriptのモダンな書き方について説明します。おもに2017年から2018年頃に搭載されたES2017・ES2018の機能について焦点を当てて解説します。 非同期のProm
Regexper - JavaScriptの正規表現を可視化
正規表現は慣れないと分かりづらいものです。また、複雑なものを作ってしまうと、作った時は良くとも、後でメンテナンスができなくなってしまいます。正規表現のデバッグも困難で、どう判定されているのか理解するのに時間を要するでしょう。 そこで使ってみたいのがRegexperです。Web上で正規表現を可視化してくれます。 Regexperの使い方 正規表現の例です。下にビジュアル化された図が表示されています。 +を*に変更しました。図も変わっています。 繰り返しを使った場合。 最初と最後を定義。 Regexperを使うと複雑な正規表現であっても可視化されます。これによって理解度が進むのかは分かりませんが、それでも説明しやすくなるのではないでしょうか。また、これによってデバッグしやすくなれば、誤った正規表現によるバグも発生しなくなるはずです。 RegexperはJavaScript製のオープンソース・ソ
WinampをHTML5とJavaScriptで再現した「Winamp2-js」
往年のMP3プレイヤーソフトウェア「Winamp」のバージョン2.9をHTML5とJavaScriptを用いて再現し、ブラウザ上で音楽を再生可能な「Winamp2-js」が公開されています。 Winamp2-js https://jordaneldredge.com/projects/winamp2-js/ GitHub - captbaritone/winamp2-js: A reimplementation of Winamp 2.9 in HTML5 and Javascript https://github.com/captbaritone/winamp2-js Winamp2-jsが動作するのはEdge、Firefox、Safari、Chromeで、Internet Explorerはサポート外。 「プレイヤー部分にファイルをドラッグ&ドロップ」「イジェクトアイコンを押してファイ
JavaScript の仕組み：メモリ管理+ 4つの共通のメモリリーク処理方法 - Qiita
この記事は sessionstack blog に投稿されている、How JavaScript works シリーズの一記事 "How JavaScript works: memory management + how to handle 4 common memory leaks" の和訳です。投稿されたのは Alexander Zlatkov, 原文はこちらです。翻訳については許諾いただいています。 メモリ管理もしくはC言語におけるメモリ解説他、用語なども怪しい箇所は多分にありますので、間違いがありましたら修正のご指摘・編集リクエスト等ください。 日本語の参考 URL 先に日本語の参考URLを記載しておきます。 JavaScriptで起こるメモリリークのパターン - EagleLand Browser Computing Structure // Speaker Deck Unders
NaN === NaN が false な理由とutil.isDeepStrictEqual - from scratch
NaN === NaN は false NaN、つまりは Not a Number 同士の同値比較が false になるのは、よく JavaScript とかで罠だと言われていますが、罠でもなんでもないです。 false が返るという仕様です。仕様の経緯を追うとすぐに『 IEEE754 という浮動小数点の標準規格で決められているから』、という理由がヒットします。 では IEEE754 ではなんで NaN == NaN を false にしようという話になったのか、というのを調べてみました。 今回はそういう歴史の話です。 IEEE754 現在のプログラミング言語の処理系の多くが採用している浮動小数点の標準規格です。 この標準規格は以下のことを定義している。 - 基本形式: 二進および十進の浮動小数点数データの集合。有限な数（符号付ゼロと非正規化数を含む）、無限、特殊な「数ではない」値（NaN
30 seconds of code
Discover short code snippets for all your development needs. Browse snippets by collection or check out our top picks and latest articles below. New & Popular Snippets JavaScript · June 10, 2024 Check if a JavaScript collection is empty Quickly determine if a collection of values is empty in JavaScript. JavaScript · June 9, 2024 Invert the key-value pairs of a JavaScript object Learn how to invert
JavaScript 長く使える系の知識 - Qiita
フロントエンドが戦国時代を迎えて数年が経ちましたね。 最新のあれこれの前に、その前提となる部分を押さえると理解が早くなります。基礎知識は土台の様なものです。こういう部分には大きな変化は頻繁には起きないので、長く使えます。また、一度知っておけば変化が起きてもキャッチアップが早くなります。 ※ 読みきれないと意味ないので、だいぶ削りました。 コーディング全般に関する知識 長く使えますし、JavaScript以外でも使えます。設計技法とデザインパターン、美しいコードを書く為のテクニックetc。良い本が沢山出てます。 ↓ 2017年末にバズってました。 【年末年始に読みたい！】優秀なエンジニアが影響を受けた本ランキングトップ32冊！（559冊収録の全ランキングデータPDFファイルつき） あと、変数と関数の命名は超大事 プログラミングでよく使う英単語のまとめ【随時更新】 - Qiita 今さら聞けな
ECMAScript 2015以降のJavaScriptの`this`を理解する
この記事はJavaScriptの入門書として書いているjs-primerのthisに関する部分をベースにしています。 またjs-primerでは書けなかった現在時点(2018年1月1日)でのブラウザの挙動についてを加えたものです。 次の場所にjs-primer版（書籍版）のthisについての解説があります。 この記事と違って実際にコードを実行しながら読めるので、学習ソースとしては書籍版を推奨します。 書籍版: 関数とthis · JavaScriptの入門書 #jsprimer また、バグ報告やPRも直接リポジトリにして問題ありません。 asciidwango/js-primer: JavaScriptの入門書 おかしい場所を選択した状態で右下にある”Bug Report”ボタンを押せば、簡単にtypoとかのバグを報告できます。(PRでも歓迎) 前置きはこの辺までで、ここから本編。 この記
Basecampメンバーによる新しいJavaScriptフレームワーク"Stimulus"を試してみた - Qiita
家族からおせちづくりの招集がかかるまでに書けるかどうかテスト GitHubでフォローしている@amatsudaさんがStarをつけていて、気になったので試してみたことをまとめてみました。 執筆時点でv1.0ではありませんので、理解した上で読み進めてください。 Stimulusとは Stimulusをひとことでいうと、HTMLに data-controller 属性を付与することで、HTMLをコンポーネント単位でJavaScriptオブジェクトに紐づけることのできるフレームワークです。 Basecampメンバーによって開発されており、主要開発者にはSprocketsやTurbolinks作者のsstephenson氏がいます。 BasecampのDOMも見てみましたが、Stimulusが実際に使われているようでした。 READMEにもありますが、Basecampで導入されていることからも予想
次にJSガッツリ書くときはTypeScriptで - Qiita
すっかりTypeScript厨（同僚談）になっているyprestoです。 AndroidでKotlinがどんどん採用されていくのを横で指を加えて見てるわけには行かないので、JSにもTypeScriptをぶち込みました。SwiftかKotlinを書いたことがある人ならばすっと馴染むと思います。 新しく書くJSはもう基本的にTSで書いてます（botすらTypeScriptに書き換えて引かれましたｗ）。ちょうど1年前からガッツリ使っていたので知見を垂れ流すフェーズに入ります。 完全な初級というよりは、ちゃんと使いたい中級な人向けに、基本的な使い方＋最初に引っかかるところという感じで書いたつもりです。どちらでも大丈夫なように書くつもりなので、疑問点をコメント頂けるとうれしいです・・！ なんでそんなにTypeScript使いたいの React使うなら常にTypeScriptという気持ちが高まりました
イマドキのJavaScriptの書き方2018
PySpa統合思念体です。これからJavaScriptを覚えるなら、「この書き方はもう覚えなくていい」（よりよい代替がある）というものを集めてみました。 ES6以降の難しさは、旧来の書き方にプラスが増えただけではなく、大量の「旧来の書き方は間違いを誘発しやすいから非推奨」というものを作り出した点にあります。5年前、10年前の本やウェブがあまり役に立たちません。なお、書き方が複数あるものは、好き嫌いは当然あると思いますが、あえて過激に1つに絞っているところもあります。なお、これはこれから新規に学ぶ人が、過去のドキュメントやコードを見た時に古い情報を選別するためのまとめです。残念ながら、今時の書き方のみで構成された書籍などが存在しないからです。 たぶん明示的に書いていても読み飛ばす人はいると思いますが、すでに書いている人向けではありません。これから書くコードをこのスタイルにしていくのは別にいい
改めて学び直すVuex - Qiita
まえがき 以前 Vue.js用のFluxライクなライブラリVuexを試してみる という記事を書きました。2年前の記事で更新もしていなかったので改めて整理して学び直してみようと思います。今回使用するバージョンは 3.0.1 です。 Vuexとは？ VuexはVue.js用の状態管理ライブラリです。Fluxの影響を受けています。ReactだとReduxに当たります。 Fluxの考え方はFacebookのリポジトリにあるflux-conceptsが詳しいです。その中の図をお借りすると以下のような考え方になります。 1 Action → Dispatcher → Store → View のようにデータが流れていきます。Vuexでもこの考え方と同じようなデータの流れになります。 2 Vuexでのデータの流れは Actions → Mutations → State → Vue Components
5文字で書くJavaScript/ Shibuya.XSS techtalk #10
Shibuya.XSS techtalk #10 の発表資料です。
JavaScript のスレッド並列実行環境
これは Chromium Browser アドベントカレンダーの十日目の記事です。本記事では Chromium における JavaScript のスレッド並列実行環境について仕様・実装・API の面から包括的に紹介します。ブラウザの内部実装に興味がある人を対象に、各機能の使い方ではなく実行モデルに焦点を当てて説明しているため、難易度は高いです。使い方を知りたい人は MDN などの記事を読んでください。この記事をきっかけに実装解読に挑戦してみる人が一人でも増えると幸いです。 本記事を書くにあたり、yuki3 さんに多くのコメントをいただき、議論に付き合っていただきました。ありがとうございました。なお、文責はすべて私 (nhiroki) にあります。誤りや補足、質問などは気軽に GitHub Issue もしくは Twitter へお寄せください。 更新履歴 2018/01/15 Layout
{x: 1} は何と見なされるか —— JavaScriptコンソールによる違い - Qiita
"type": "BlockStatement", "body": [ { "type": "LabeledStatement", "label": { "type": "Identifier", "name": "x" }, "body": { "type": "ExpressionStatement", "expression": { "type": "Literal", "value": 1, "raw": "1" } } } ] BlockStatement（ブロック文）の中に x というラベルが付いた LabeledStatement（ラベル付き文）があり、その中身が 1 という式になっています。 Firefoxのコンソールは素直な動作をしている つまり、何もない場所でコードが { } で囲われていると、それはブロック文と見なされるのが通常であって、Firefoxのコンソールはそ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JSベースで簡単ページネーション「paginathing」:phpspot開発日誌
ユーザのブラウザで起きた JavaScript のエラーを収集する - Qiita
Vue.js いろいろまとめ - Qiita
