Web における Beacon の変遷 (sendBeacon(), fetch() keepalive, fetchLater()) | blog.jxck.io
Intro ページを閉じる際に何かしらの情報をサーバで収集したいケースがある。 これを Beacon の送信(Beaconing)と呼び、ブラウザではページ表示中に収集したパフォーマンス統計の収集や、広告タグによるトラッキングなどに用いられる。 しかし、「ページが閉じる直前に、サーバにリクエストを送信する」を確実に実行するのは実は難しく、これを標準技術で実現する過程で、複数の API が生まれるに至った。 各 API の策定経緯と、挙動の違いについて解説していく。 <img> での送信 最もプリミティブな Beacon の送信は、<img> を用いたものだった。 window.addEventListener("unload", () => { const beaconImage = new Image(1, 1); beaconImage.src = "https://telemetry
document.write()を使わない方法 - Qiita
「document.write()は使わない方がいい」は、言われ続けて久しいと思いますが、じゃあどうすればいいか考えてみました。 document.write() は使わない方がいい理由 MDN document.write()説明ページにはどんなことが書かれているかというと、 deferred または asynchronous のスクリプト内では無視 →非同期の使い勝手が悪いですね Chrome55からキャッシュされていないHTTP の場合、document.write()を通じて挿入された<script>要素は実行されない →そもそも期待通りに処理が動かない可能性がある など動作が特殊で、期待通り動かないことがあるということ強調されています。 さらにW3Cはdocument.writeのHTML5での使用を非推奨としていて、 HTMLパーサーに影響を与えるよーとか、実行しても無視される
tsconfigのmoduleとtargetには何を設定すればいいか - TypeScript - Qiita
TypeScriptの設定ファイルを雰囲気でコピらないための記事 TL;DR moduleはどのモジュールパターンで出力するかを指定する Node.jsでの利用想定ならcommonjs ブラウザ側での利用ならumd targetはどの動作環境向けにトランスパイルするかを指定する 利用環境が想定できないならes3やes5 下位互換性のあるコードへの変換をBabelで行うならesnext module とは JavaScriptにはいくつかのモジュールパターン（CommonJSやAMD、ECMAScriptなど）がある。TypeScriptをJavaScriptに変換する際、どのモジュールパターンにするかをmoduleに指定する必要がある。 moduleには'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'esnext'
2020年に立ち上げたWebフロントエンド構成の振り返り
こんにちは、よしこです。 株式会社ナレッジワーク というスタートアップで、2020年4月の創業時から一人目のフロントエンドエンジニアをしています。 初期に考えて組み上げたスタックで1年半ほど開発・運用してみて、なかなか快適に日々開発ができているので 新規開発のプロダクト立ち上げ時にどのようにフロントエンドを構築したのか？ 立ち上げから1年以上開発・運用を続けてきた今、それらの選択はどうだったのか？ を記事にして振り返り、公開したいなと思いました。 （プロダクトの内容はステルスで進めていてあまり対外的な発信ができないので、かわりに技術的なところはどんどんオープンにしていきたいなという気持ちがあります） いろいろな項目ごとに振り返りたいので、この記事は各項目を横断するindexとして項目ごとの概要を簡単に説明し、深堀りは項目ごとに追って詳細な記事を書いていく予定です！ 前提 プロダクトとしての
【JavaScript】FetchAPIとaxiosの違いって？機能やメリットを比較
今回はJavaScriptのFetchAPIとHTTP通信のライブラリであるaxiosの違いについて解説します。 「fetchAPIとaxiosってやってること同じ...？何が違うの？」という疑問から色々調べてみたのでまとめてみました。 なお、基本構文や根底にある非同期通信、Promise自体の解説は割愛します。 FetchAPIとは まずイメージを掴むために、Fetchの語源から確認してみます。 フェッチとは、取りに行く、取ってくる、持ってくる、などの意味を持つ英単語。ITの分野では機器やプログラムなどが特定の場所からデータなどを読み出す動作のことを指すことが多い。 (フェッチとは - IT用語辞典 より) プログラミングではAPIサーバーなどからデータを持ってくる、取ってくるという意味でfetchという単語がよく使われていますね。 次にFetchAPIに関して確認してみましょう。 Fe
Callback を撲滅せよ
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。言語サポート（Node.js）チームの伊藤（@koh110）です。 Node.js v10 も10月にLTSとなり async/await によるフロー制御は当たり前のように利用されるようになってきました。JavaScriptの非同期処理は async/await から覚える人も今後増えていくでしょう。今回はそんな非同期処理について、社内での事例を交えて記事を書いていこうと思います。 index Promise 化がなぜ重要なのか ユーザーに promisify をさせる落とし穴 Road to Promise まとめ Promise 化がなぜ重要なのか ちょうど3年前のアドベントカレンダーで、今後はいろいろなモジュー
Socket.IOでメッセージが届いたことを確認する - Qiita
WebSocket使ってると、クライアントからサーバーにメッセージ送って、届いたのがはっきりしてから何かしたいことがあったりします。WebSocketの仕様その物にはそういう機能は無いようですが、Socket.IOにはそういう機能があったのでこれが使えました。 （低レベルの話を期待していた方、済みません） ドキュメントに書いてあることそのままではあるんですが：Sending and getting data (acknowledgements) Socket.IOのacknowledgements機能 emitするクライアント側のコード、サーバー側のonで待ち受けるブロックのコード、のそれぞれでコールバック関数を登録することで、クライアントからのメッセージが届いた時の処理を書けます。処理を書けるということは、届いたことが確認できるということです。
Socket.ioで作ったWebSocketサーバをELBでロードバランスする - Qiita
課題 現在、作っているサービスではsocket.ioを使って作ったWebSocketサーバをELB経由で使っています。 開発環境はELB配下にEC2が1台で、本番環境は複数台です。 これ、どちらも正しく動いているように見えていたんですが、最近セットアップした本番環境の方でWebSocketへのUpgradeがうまくいっておらず、pollingで動いていることに今日気がつきました。 サービスとしてはまぁ一応問題はないんですが、WebSocketで動いていると思っていたものが実はPollingだったというのはわりかし衝撃です。 原因 なんでやねんと思ってググるとわりと簡単に原因に行き当たりました。公式ドキュメントで思いっきり説明されています。 日本語だとこの辺でが参考になります。 Express / Socket.IO をスケールアウトしてみよう Socket.IO or WebSocket
webpackとBabelの基本を理解する(1) ―webpack編― - Qiita
独学の内容をまとめたものです。誤りがございましたら、ご連絡いただけると幸いです。 リンク webpackとBabelの基本を理解する(1) ―webpack編―（本記事） webpackとBabelの基本を理解する(2) ―Babel編― webpackとBabelの基本を理解する(3) ―webpackとBabel編― webpackとBabelの基本を理解する(4) ―React編― webpackとBabelの基本を理解する(5) ―Sass編― 概要 この記事の概要 目的 フロントエンドの環境構築に利用されるツールへの理解を深める 本記事のゴール webpackでJSファイルを結合する方法を知る 対象者 WEBフロント担当者 HTML,CSS,JavaScript(es2015含む)の基本的な構文を理解している人 npmの利用方法を理解している人 環境・バージョン Windows1
4歳娘「パパ、Promiseやasync/awaitって何？」〜Promise編〜 - Qiita
setTimeout(() => console.log(5), 1000); setTimeout(() => console.log(4), 1000); setTimeout(() => console.log(3), 1000); setTimeout(() => console.log(2), 1000); setTimeout(() => console.log(1), 1000); setTimeout(() => console.log(0), 1000); よめ太郎「↑このコードを実行するのに、合計で何秒かかると思う？」 娘「ええと、setTimeout()は確か」 娘「タイマーをセットするメソッドだから」 娘「1,000ミリ秒後・・・つまり1秒後にconsole.log(5)が実行されるよね」 よめ太郎「せやな」 娘「その後、次の行が処理されるから」 娘「また1秒経過し
TypeScript + VSCodeで快適プログラミング｜erukiti
JavaScript大好きの皆様ごきげんよう。 今回は、JavaScriptのスーパー強い版であるTypeScriptとVSCodeの組み合わせがとても快適である！という記事をお送りします。 JavaScriptJavaScriptは、RubyやPHPなどと同じ、いわゆる動的型付け言語です。 const hoge = (arg) => console.log(arg + 1) hoge(1) // 2 hoge('1') // 11 hoge([1, 2]) // 1,21この hoge という関数は引数 arg に、数字、文字、配列などどういう型のデータでも突っ込めますが、配列を入れた場合の挙動とか、誰得な感じがするので、数字だけを入れたいとします。 const hoge = (arg) => { if (typeof arg === 'number') { console.log(ar
次にJSガッツリ書くときはTypeScriptで - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? すっかりTypeScript厨（同僚談）になっているyprestoです。 AndroidでKotlinがどんどん採用されていくのを横で指を加えて見てるわけには行かないので、JSにもTypeScriptをぶち込みました。SwiftかKotlinを書いたことがある人ならばすっと馴染むと思います。 新しく書くJSはもう基本的にTSで書いてます（botすらTypeScriptに書き換えて引かれましたｗ）。ちょうど1年前からガッツリ使っていたので知見を垂れ流すフェーズに入ります。 完全な初級というよりは、ちゃんと使いたい中級な人向けに、基本的な使
Node.jsのexportsについて - 30歳からのプログラミング
Node.jsにはモジュール機能があり、他のファイルの内容を読み込むことが出来る。 だが、何となくでしか使い方を理解していなかったので、調べてみた。 このエントリのコードは全て、v4.4.3で動かした。 基本 まず、呼び出される側のファイルで、モジュール化する値やオブジェクトをexportsしておく。 そうすることで、その値やオブジェクトに外部からアクセスすることが可能になる。 呼び出す側ではrequire()関数を使い、ファイルを読み込む。 読み込んだファイルから、exportsされている値やオブジェクトにアクセスできるようになる。 // parts.js var value = '値'; var foo = 'foo'; exports.value = value; // index.js var parts = require('./parts.js'); console.log(p
JavaScript の this を理解する - tacamy--blog
this はインスタンス自身を指す、ただそれだけの話でしょう？ そんなふうに考えていた時期が私にもありました。そう、JavaScript の this に出会うまでは・・。 用語について 私は Java 脳で書いてるので、言葉遣いが JavaScript と若干違う部分があると思います。 下記のようなイメージで言葉を使っています。 用語 意味 クラス インスタンスオブジェクトの元となる設計図 コンストラクタ クラスのコード部分で、new したときにコンストラクタの内容で初期化する インスタンス クラスを元に実体化したオブジェクト メンバ変数 クラスやインスタンスに属するローカル変数 メソッド クラスやインスタンスに属する命令（関数） オブジェクト指向とプロトタイプと this JavaScript のオブジェクト指向開発では、元になるクラスを new することで、インスタンスを生成します。
JavaScript の超便利なメソッド bind で this を制御する
JavaScript の関数オブジェクトには、「bind」という便利なメソッドがあります。このメソッドは関数内で参照できる this を指定のオブジェクトに束縛できるものです。この関数を使うと、this に関連した良く有る問題をスマートに解決できます。 this にまつわるよくある問題 次の例は、実行後に「こんにちわ ぷんちゃん」とアラートするコードです。 var Person = function (name) { this.name = name; } Person.prototype.sayHello = function() { alert('こんにちわ ' + this.name); } var punchan = new Person('プンちゃん'); punchan.sayHello(); //「こんにちわ プンちゃん」と表示される
[JS]便利なのが登場！実装はかなり簡単なのに、さまざまなチャートやグラフを実装できるスクリプト -ApexCharts
チャートやグラフを実装するのは面倒、と思われがちですが、そんな人にはこのスクリプトをお勧めします。 div要素一つと外部ファイルを一つ、あとはグラフのデータを設定するだけで、さまざまなチャートやグラフが簡単に実装できてしまう単体のJavaScriptライブラリを紹介します。 レスポンシブ対応で、アニメーションにも対応、カラー変更やグラデーションやパターンにも対応している優れものです。 ApexCharts ApexCharts -GitHub ApexChartsの特徴 ApexChartsのデモ ApexChartsの使い方 ApexChartsの特徴 ApexChartsはシンプルなAPIを使用して、インタラクティブなチャートやビジュアライゼーションを作成するためのモダンJavaScriptのチャート作成ライブラリです。 MITライセンスで、個人でも商用でも無料で利用できます。 レスポ
![[JS]便利なのが登場！実装はかなり簡単なのに、さまざまなチャートやグラフを実装できるスクリプト -ApexCharts](https://cdn-ak-scissors.b.st-hatena.com/image/square/b793c623eb3187e192351b9611f75aea908bbf46/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018080101-02.png)
webpackを使った Rails上でのReact開発 - クックパッド開発者ブログ
はじめに こんにちは、投稿開発部エンジニアの芳賀です。 既存のRailsプロジェクトの中でReact.jsを利用する機会があったので、その時にやったことについてまとめてみます。 私自身は普段RailsのサーバサイドとCoffeeScriptが中心で、最近のJavaScript開発環境についてあまりキャッチアップできていなかったのですが、それらの状況を把握しつつ試行錯誤で開発していった経験から、できるだけ「React採用してみたいけどJavaScript界隈よくわからない目線」で書いてみようと思います。 RailsでReact.jsを使ういくつかの方法 2016年時点で、RailsでReact.jsを使う方法はいくつかあって、どれを採用するかで悩みました。 vendor/assets/javascripts にreact.jsを置いて利用する react-rails gem を利用する br
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Node: textContent プロパティ - Web API | MDN
オブジェクトリテラルのプロパティ/メソッドのいろんな書き方（ES6版） - Qiita
ES5とES6の違いをまとめてみた(メモ) - Qiita
