概要 JavaScriptが多くの言語と異なる点のひとつに、イベントループベースの同時実行モデルがあります。これは、JavaScript自体というよりも、ブラウザの仕組みにも関わりがあります。 今回はそれについて書いてみようと思います。 ラインタイム MDNの図を拝借すると、JavaScriptのラインタイムは以下のような要素で構成されています。ひとつずつ説明してゆきます。 ヒープ ヒープはヒープですね。今回のテーマとは少し外れるので省略します。 スタック JavaScriptで処理を呼び出すと、コールスタックが積み上がります。 JavaScriptはシングルスレッドなので、一度にひとつの処理しか実行できません。例えば、以下のように関数を呼び出すような処理を考えます。
Pinker.jsはpreタグに書いたデータをcanvasにダイアグラムとして描いてくれるスクリプトです。 特定のルールに沿った書き方をpreタグにする事で簡易的なダイアグラムを生成できる、というもの。割と複雑なものも書けるみたいです。 以下動作サンプルです。 動作サンプル 左のpreタグのテキストを元に右のcanvasタグにダイアグラムが生成されています。 使い方 Pinker.jsを読み込みます <script src='Pinker.js'></script> preにルールに沿った記法で書き、idを振ります。Layout:で位置を決め、Relate:で関係性を設定します。 <pre id="Source01">Layout: [A] [B][D][E] [C]...[F] Relate: [B]->[A],[C] [D]->[B],[E],[F] </pre> canv
メインはバックエンド、時々フロントエンドエンジニアの古見澤（こみざわ）です。 久しぶりのブログ記事となります。 先月に発売されたOculusQuestというVRヘッドセットを購入し、最近プライベートではVRゲームを楽しんでいます。Quest良いですね、6DoFのスタンドアロン型で回転できる腕も振り回せる〜とか色々語りたいのですが、脱線しすぎで長くなるのでこの場ではやめておきます。 さて、VRコンテンツというとUnityやUnrealEngine4（UE4）で作られる事が多いと思いますが、Web系の言語でも作れる事はご存知でしょうか。現時点ではまだ一般的とは言い難いですが、今回はWebでのVRコンテンツ作成について取り上げようと思います。 WebVRとは、Webブラウザ上からVRヘッドセットの位置・向き・傾きや加速度などの情報を取得できるJavascriptのAPIです。現在の最新バージョン
morishitaです。 いこーよやいこレポでは、情報を共有してもらいやすいようにシェアボタンをページに置いています。 シェアボタン 現状はTwitterやFacebookなど各サービスごとにシェアボタンを用意していますが、 モバイルに於いてはWeb Share APIを使っても良い状況ではないか？ と思って調べてみました。 ちなみにCan I use... ではこんな感じです。 Can I use ... Web Share API スマホに限るとiOS SafariもAndroid Chromeもサポートしているようです。 モバイルでは使えそう?! コード とりあえず、試すためのページを用意をしないと、ということで Web Share APIを使ったシェアボタンだけのページを作りました。 コードは次の通りです。 <html lang="ja"> <head> <meta charset
PySpa統合思念体です。あと、 @yosuke_furukawa にも協力いただきました。 基本的に、あまりエラーの種別を細かく判定してあげることはJavaScriptでは今までやってこなかったのですが、ちょっとしたメタデータを乗っけてあげるとか（例えばリトライ回数）、何か凝ったことをしたくなったらこういう方針でやればいいのでは、という試行錯誤録です。 エラーと例外の区別が必要か この手の話になると、エラーと例外の違いとか、こっちはハンドリングするもの、こっちはOSにそのまま流すものとかいろんな議論が出てきます。このエントリーではエラーも例外も差をつけずに、全部例外とひっくるめて説明します。 例外というのはすべて、何かしらのリカバリーを考える必要があります。 ちょっとしたネットワークのエラーなので、3回ぐらいはリトライしてみる 原因: ネットワークエラー リカバリー: リトライ サーバー
別件で V8 の JIT コードの逆アセンブルを眺めている時に気づいたのですが、JavaScriptで new Array(100) という形で配列を作るのは、高速化の観点から言うと V8 においては避けるべき書き方です。 高速化を求める方は、 new Array() や [] で作成して Array#push で追加していくのが良いでしょう。この記事では、その理由を説明します。 今回の記事は、以下の V8 のブログ記事を参考にしております。 https://v8.dev/blog/elements-kinds 「詰まった配列(Packed Array)」と「穴あき配列(Holey Array)」 v8 は内部的に、その配列がどういうタイプの配列であるかの状態を記録しており、その情報を利用して最適化を適用します。状態は内部的には21個あるのですが、今回話題にするのは、その中でも「詰まってい
はじめに 私はJavaScriptを学習し始めて、２週間目の初学者です。 2週間目という節目を迎えて、JavaScriptで５つアプリを作成したので公開しようと思います。 サーバーにアプリをアップロードしたので、もしコードに興味がある方は各項目のリンクから飛んでソースを見ていただけたら、と思います。 基本的にコードはタイミングゲームアプリ以外汚いです。 ※FizzBuzzアプリは、サーバーへアップロードしていません。 作成したアプリの目次 1.FizzBuzzアプリ 2.ビンゴアプリ 3.カードゲームアプリ 4.すごろくアプリ 5.タイミングゲームアプリ 1.FizzBuzzアプリについて FizzBuzzアプリは、プログラミング界隈ではお馴染みだと思いますが3の倍数の時に”Fizz！”、５の倍数の時に”Buzz!”、そして３の倍数かつ５の倍数である数の時に"FizzBuzz!"と表示する
スクロールの速度に合わせたアニメーション、スクロールの位置に合わせたパララックス、マウスの位置・速度に合わせたパララックス、ビューポートのサイズに合わせたレイアウト変更などを実装するために、ビューポートを監視し、その状態を簡単に取得できる軽量JavaScriptライブラリを紹介します。 位置を取得できるのはよくありますが、速度まで取得できるのは珍しいですね。 Tornis Tornis -GitHub Tornisの特徴 Tornisのデモ Tornisの使い方 Tornisの特徴 Tornisは、ブラウザのビューポートの状態を監視する軽量のJavaScriptライブラリです。ビューポート・スクロール・マウスなどに何か変化があった時にその値を取得できます。 マウスの位置 マウスの速度 ビューポートのサイズ スクロールの位置 スクロールの速度 デバイスの向き（近日対応予定） ユーザーが操作し
![[JS]スクロール・マウスの位置や速度など、ビューポートの状態を簡単に取得できるJavaScriptライブラリ -Tornis](https://cdn-ak-scissors.b.st-hatena.com/image/square/33d3350d493f36f108ffe61f3810fe6f149501d0/height=288;version=1;width=512/https%3A%2F%2Fsiteproxy.ruqli.workers.dev%3A443%2Fhttps%2Fcoliss.com%2Fwp-content%2Fuploads-201902%2F2019052210.png)
Shibuya.XSS techtalk #11 の発表資料です。
PWA Night vol.4 ～PWAのミライや活用方法をみんなで考えよう～の資料です。 https://pwanight.connpass.com/event/128434/
こんにちは、Recruit-CSIRTのきっかわです。 「ウィルスオタクの若手エース」と呼ばれるようになったから、というわけではないでしょうが（笑）、このたび、話にはよく聞くが見かけたことのなかった「クレジットカード情報を盗むJavscript」を見つけたので、そのマルウェアと周辺の攻撃について情報を共有します。みなさんにとって本ブログが有益な情報になれば幸いです。 忙しい方へ 今回発見されたJavaScriptの概要 クレジットカードのチェックディジットの計算とクレジットカード番号の構成をチェックする チェックが通ると、外部サイトへ入力情報を全て送信する Javascriptコードの仕込まれ方 Webサイトのjsファイルを改ざんして動作 元のサイトの動きに対して、見た目上の動きは変わらない IOC https://ww1-filecloud[.]com/img 攻撃の流れ 今回観測した攻
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 調べるキッカケ 最近フロントエンドを触り出して、JQueryの勉強（初歩中の初歩）をしていたのですが、 「JSの読み込みはbodyの最後に」という決め事があるようで、ちょっと気持ち悪いので調べていました。 すこしググると見解として、 HTML中にJavaScriptファイルを読み込む記述があると、そのJavaScriptを読み終わるまで、ウェブページのレンダリング(描画)が止まってしまうからです。 https://allabout.co.jp/gm/gc/380498/2/ などと記載されていて、なるほどと思ったのですが、 Qiitaの
ユーザーの閲覧環境はPCからスマートフォンへ移りつつある今日この頃ですが、地図ページやクーポンページ、領収書ページなど、依然として「印刷されやすい」ページというものは残っています。 こういったページで実際に印刷された回数を計測するには、最近では「印刷ボタン」をページへ設置して、そのクリック数を計測するのが主流ですが、逆に言うとボタンが押されずに直接ブラウザの機能にある印刷を行われたり、そもそもボタンが設置されていないページでは計測がされません。 そこで今回はJSのイベントリスナーを使った、（ページに設置されている「印刷ボタン」のクリック計測ではなく）ブラウザの機能として「印刷」のダイアログが表示されたタイミングで計測する方法についてご紹介します。 （Googleタグマネージャの新機能ではありません。いつかトリガーとして加わってほしいですね） ブラウザ機能から印刷ダイアログが表示された回数を
function main() { (async () => { try { const response = await fetch('/cms/api/csv/upload', createFetchPostData()); const json = await response.json(); console.log(json); } catch (error) { console.log(error); } })(); } function createFetchPostData(data = {}) { return { method: 'POST', // *GET, POST, PUT, DELETE, etc. mode: 'cors', // no-cors, cors, *same-origin cache: 'no-cache', // *default, no-ca
リンク ics.media WordPressをやめ、静的サイトジェネレーターで高速化した話 - ICS MEDIA ICS MEDIAは2019年4月にリニューアルしました。シンプルでモダンなデザインへと見栄えは変わり、フロントエンドの最新技術によって爆速なサイトへと生まれ変わっています。 技術的におもしろいポイントは、WordPressワード・プレスを廃止したことです。 この記事では、オウンドメディアとしてWordPressをやめた理由、代用技術の選定で苦労したことを紹介します。 リニューアル前後の違い リニューアルによってどのくらい改善したか、定量的な結果を紹介します。 880 users 686
20年くらい前、ジオシティーズとか全盛期の頃でしょうか、個人ブログなどで必ずと言っていいほど設置されていたカーソルに追従するエフェクトを現在のJavaScriptで実装しなおした「90's Cursor Effects」を紹介します。 こんなの知らない！ という人も多そうですね。 90's Cursor Effects -GitHub スクリプトは現在用に実装されており、スマホなどのタッチデバイスでも動作します。アニメーションの動きや絵文字など、当時には実現できなかったものも使用されています。 雪が降って、ブラウザの枠に積もるのとかも懐かしいですね。
こんにちは！ 開発部の武内です。 Webフロントエンドの開発はここ数年で急激に高度化していますが、 それを大きく後押ししている一因にブラウザ付属の開発ツールがあります。 Chrome、Firefox、Edge、Safariなどに付属していますが、どれも非常に高機能です。 Webフロントエンドエンジニアで使っていない方はいないのではないでしょうか。 グラフィカルなデザイン調整 コードのステップ実行 通信のロギング etc… 今回、Chrome 59のアップデートでCSS/JavaScriptのカバレッジ機能が追加されたので試してみました。 CSS and JS code coverage What’s New In DevTools (Chrome 59) Find unused CSS and JS code with the new Coverage tab. When you load
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
