GitHub - phimage/Erik: Erik is an headless browser based on WebKit. An headless browser allow to run functional tests, to access and manipulate webpages using javascript.You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
SharedArrayBufferとAtomics APIを用いてWorker間でデータを共有する
従来のJavaScriptではWorker間でのデータ共有はできませんでしたが、SharedArrayBufferとAtomics APIを用いればそれが実現できるようになりました。 WorkerはJavaScirptでマルチスレッドを実現するための仕組みです。詳しくは「Web Workersを用いてJavaScriptをマルチスレッド化する」をご覧ください。 Workerは元来メッセージのやりとりのみでデータを共有し、同じメモリの値を共有することはできませんでした。しかし近年になって導入されたSharedArrayBufferで、Worker間のメモリ共有が可能になりました。 SharedArrayBufferは固定長のTypedArrayです。使用するには、単にバイト長を指定してnewするだけです。 // SharedArrayBufferを作成する。 // SharedArrayBu
npmfs - home
JavaScript Package Inspector Package Viewer — Browse package files at any version. Package Diff — Compare packages across versions. Deep Links — Link to specific lines in files and diffs. Download Contents — Download any directory or file. Motivations Published packages don't always include a link to their source on GitHub. The linked repository is not necessarily representative of published packa
全モダンブラウザで使えるJavaScriptのdynamic import（動的読み込み） - Qiita
JavaScriptでは他のJSファイルを読み込みES Modulesという仕組みがあり、Chrome、Edge、Safariなどブラウザのサポートが拡大しつつあります（参考記事「JavaScriptでモジュールを使う時代に！ ブラウザで覚えるES Modules入門」）。 さらに、モジュールをimport()を使って「関数のように」呼び出すためのdynamic importという仕組みが2020年に公開されるECMAScriptの仕様で導入されます（tc39/proposal-dynamic-import）。Google Chrome、Firefox、Safariではモジュールのdynamic importに対応しており、ブラウザでその挙動を確認できます。 dynamic importのメリットは、任意のタイミングでモジュールを読み込めること。たとえば、ページの初期表示に必要なJavaS
高速化の観点から new Array(100) を使わない方が良い理由
別件で V8 の JIT コードの逆アセンブルを眺めている時に気づいたのですが、JavaScriptで new Array(100) という形で配列を作るのは、高速化の観点から言うと V8 においては避けるべき書き方です。 高速化を求める方は、 new Array() や [] で作成して Array#push で追加していくのが良いでしょう。この記事では、その理由を説明します。 今回の記事は、以下の V8 のブログ記事を参考にしております。 https://v8.dev/blog/elements-kinds 「詰まった配列(Packed Array)」と「穴あき配列(Holey Array)」 v8 は内部的に、その配列がどういうタイプの配列であるかの状態を記録しており、その情報を利用して最適化を適用します。状態は内部的には21個あるのですが、今回話題にするのは、その中でも「詰まってい
SPAにおける状態管理:関数型のアプローチも取り入れるフロントエンド系アーキテクチャの変遷｜ハイクラス転職・求人情報サイト アンビ（AMBI）
こんにちは、小林（@koba04）です。 本記事では、シングルページアプリケーション（以下、SPA）における状態管理について解説します。 GmailやTwitterは、SPAとして構築されている代表的なWebアプリケーションであり、スムーズなページ遷移をSPAによって実現しています。またElectronやPWA（Progressive Web Apps）の登場により、複雑なアプリケーションをWebの技術を使って構築する場面も増えてきました。 これらの複雑なアプリケーションにおいては、既存のページ単位での状態管理の考え方では対応が難しくなります。 そこで今回は、具体的なフレームワークも取り上げながら、Webフロントエンドにおける状態管理のアプローチについて紹介します。 フロントエンドでの状態管理の複雑化 ページの単位を超えた状態の保持 モデルとビューによる処理の分割 イベントの管理が複雑にな
自作JSの読み込みはbodyの最後に書いたほうがいいのに、なんで外部ライブラリはheadにあるんでしょうか？ - Qiita
調べるキッカケ 最近フロントエンドを触り出して、JQueryの勉強（初歩中の初歩）をしていたのですが、 「JSの読み込みはbodyの最後に」という決め事があるようで、ちょっと気持ち悪いので調べていました。 すこしググると見解として、 HTML中にJavaScriptファイルを読み込む記述があると、そのJavaScriptを読み終わるまで、ウェブページのレンダリング(描画)が止まってしまうからです。 https://allabout.co.jp/gm/gc/380498/2/ などと記載されていて、なるほどと思ったのですが、 Qiitaのページも含め、ざっと確認したページではJSライブラリはすべてheadに書かれており、 なぜ**「はじめからJSを全部bodyの最後に置かないんだろう？」**と思い、調べてみました。 結論 bodyの最後になんて書かず、deferオプションを使おう。 経緯 レ
GitHub - google/j2cl: Java to JavaScript transpiler
Seamless Java in JavaScript applications that tightly optimizes with Closure Compiler J2CL is a powerful, simple and lightweight transpiler from Java to Closure style JavaScript. Get the best out of Java and JavaScript. You no longer need to choose between the two or lock into a specific framework or a language. Choose the right language at the right place and hire the best talent for the job. Get
ブラウザがJavaScriptを直接サポートしない世界 - Qiita
TL;DR WASMって凄いね．JavaScript処理系すら実装できるんだって． ならブラウザはWASMだけをサポートすれば楽なんじゃないかな． という考察記事です． 経緯 私は少し前からRustでJavaScript処理系を書いています．(まだまだ機能不足ですが) ある日，ふと思いました．*Rustで書いてるんだからWASMに変換するのも楽なんじゃないか?*と． 面白そうなので，試してみたわけです． 意外と面倒だった RustからWASMへと変換する方法を説明した記事は，調べればいくらでもでてきます．無論そのとおりに手を動かしてみるわけです． しかし，いざやってみるとコンパイラに結構文句を言われます．考えてみれば当たり前ですが，libcなんて使っていたらWASMには変換できません． なので余分なコードは削り，WASMに変換できるようコードを書き直しました． すると，すんなりWASMに変
騙されるな。JavaScript の function は関数じゃない。コンストラクタだ。 - Qiita
といった書き方を目にしたことがあると思います。また、普段から「関数」として使っている人も多いと思います。 しかし、結論から言うと、JavaScript の function は普通の「関数」ではなく「コンストラクタ」です。JavaScriptの構文・キーワードに騙されてはいけません。(私自身、少し勘違いをしていて、以前書いた記事(JavaScript初心者にはfunctionよりも、まずアロー関数を教えるべき)では function は「メソッド」だと主張していました。) 「newができるからコンストラクタって言いたいだけなんでしょう」と思った方、とりあえずブラウザバックしようとする手を止めて最後までお読みください。 function を「関数」として使用すると、状況によってはパフォーマンスに影響する可能性があります(若干誇張表現です。最適化の度合いによります)。 以下、function
OYOのキャンペーン「#いきなり東京0円ライフ」をハッキングして当選してみた - Qiita
※プログラムの解析に類する内容を扱っております。 ※ハッキングと称していますが、犯罪に類する行為は一切しておりません。 ※混乱を避けるため当該キャンペーンの終了を待って、この記事を公開させていただきました。 プロモーション周りの分析も書いているのでこちらもぜひご一読ください https://note.mu/aiharayuki/n/n87909fdd40c7 まず実際に抽選してみましょう この「くじを引く」ボタンを押すことで抽選がされるわけだ。 ハズレの画面はこんな感じ 外れた。悲しい。 どういった仕組みでくじ引きが動いているんだろう phpかなんかでサーバーサイドで制御してるのかなー。 https://www.oyolife.co.jp/tokyo-cp/ どうやらjsで抽選をしているみたいだぞ？ でもまず基本のscript.jsをみてみよう クッキー消して何回かくじ引きしよう http
Private Class Field の導入に伴う JS の構文拡張 | blog.jxck.io
Intro ECMAScript の Private Class Field の仕様策定と各ブラウザの実装が進んでいる。 これにより、従来の JS にはなかった Class の Private フィールドが使えるようになる。 提案されている構文や、挙動について解説する。 Class Field Declaration まず前提として、現状の Class の フィールドはコンストラクタで定義する必要がある。 例えば count フィールドを持つ Counter クラスを定義した場合、以下のようになる。 class Counter { constructor() { this.count = 0 } increment() { this.count ++ } display() { console.log(this.count) } } const c = new Counter() c.in
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptでの賢いconsole.log( )の使い方 & その他便利なconsole.xxx( )使い方まとめ (dir・table・warn・groupとか) - Qiita
https://www.tweag.io/posts/2019-05-09-inline-js.html/
【2019年4月版】JavaScriptのconsoleがすごいことになってた。 - Qiita
サーバーサイドエンジニアも知っておくべきフロントエンドの今
GitHub - goolord/jshark: 🦈 Safe JavaScript EDSL
Vuetify — A Vue Component Framework — Vuetify
GitHub - jamiebuilds/the-super-tiny-compiler: :snowman: Possibly the smallest compiler ever
Mozilla releases Iodide, an open source browser tool for publishing dynamic data science