タグ

JavaScriptに関するakatakunのブックマーク (89)

  • 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

    Web における Beacon の変遷 (sendBeacon(), fetch() keepalive, fetchLater()) | blog.jxck.io
    akatakun
    akatakun 2025/02/25
    Beacon処理の推移。fetch+keepalive。unloadではブラウザより上のレイヤーでページが閉じられたときに検知できない => fetchLater
  • Node: textContent プロパティ - Web API | MDN

    This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. * Some parts of this feature may have varying levels of support. Learn moreSee full compatibilityReport feedback

    Node: textContent プロパティ - Web API | MDN
    akatakun
    akatakun 2025/01/21
    textContent: tag自身を含まず、textを取得。代入は内容がHTMLとして解析されない。innerText: tag自身を含まず、人間が読める状態のtextを取得。innerHTML: tag自身を含み、HTMLを取得。代入は内容がHTMLとして解析される
  • document.write()を使わない方法 - Qiita

    「document.write()は使わない方がいい」は、言われ続けて久しいと思いますが、じゃあどうすればいいか考えてみました。 document.write() は使わない方がいい理由 MDN document.write()説明ページにはどんなことが書かれているかというと、 deferred または asynchronous のスクリプト内では無視 →非同期の使い勝手が悪いですね Chrome55からキャッシュされていないHTTP の場合、document.write()を通じて挿入された<script>要素は実行されない →そもそも期待通りに処理が動かない可能性がある など動作が特殊で、期待通り動かないことがあるということ強調されています。 さらにW3Cはdocument.writeのHTML5での使用を非推奨としていて、 HTMLパーサーに影響を与えるよーとか、実行しても無視される

    document.write()を使わない方法 - Qiita
    akatakun
    akatakun 2025/01/21
    document.writeは非推奨。非同期JS上で実行される場合は無視される。HTMLがキャッシュされていない場合、これによって挿入されたscriptタグは実行されない
  • tsconfigのmoduleとtargetには何を設定すればいいか - TypeScript - Qiita

    TypeScriptの設定ファイルを雰囲気でコピらないための記事 TL;DR moduleはどのモジュールパターンで出力するかを指定する Node.jsでの利用想定ならcommonjs ブラウザ側での利用ならumd targetはどの動作環境向けにトランスパイルするかを指定する 利用環境が想定できないならes3やes5 下位互換性のあるコードへの変換をBabelで行うならesnext module とは JavaScriptにはいくつかのモジュールパターン(CommonJSやAMD、ECMAScriptなど)がある。TypeScriptJavaScriptに変換する際、どのモジュールパターンにするかをmoduleに指定する必要がある。 moduleには'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'esnext'

    tsconfigのmoduleとtargetには何を設定すればいいか - TypeScript - Qiita
  • 2020年に立ち上げたWebフロントエンド構成の振り返り

    こんにちは、よしこです。 株式会社ナレッジワーク というスタートアップで、2020年4月の創業時から一人目のフロントエンドエンジニアをしています。 初期に考えて組み上げたスタックで1年半ほど開発・運用してみて、なかなか快適に日々開発ができているので 新規開発のプロダクト立ち上げ時にどのようにフロントエンドを構築したのか? 立ち上げから1年以上開発・運用を続けてきた今、それらの選択はどうだったのか? を記事にして振り返り、公開したいなと思いました。 (プロダクトの内容はステルスで進めていてあまり対外的な発信ができないので、かわりに技術的なところはどんどんオープンにしていきたいなという気持ちがあります) いろいろな項目ごとに振り返りたいので、この記事は各項目を横断するindexとして項目ごとの概要を簡単に説明し、深堀りは項目ごとに追って詳細な記事を書いていく予定です! 前提 プロダクトとしての

    2020年に立ち上げたWebフロントエンド構成の振り返り
  • 【JavaScript】FetchAPIとaxiosの違いって?機能やメリットを比較

    今回はJavaScriptのFetchAPIとHTTP通信のライブラリであるaxiosの違いについて解説します。 「fetchAPIとaxiosってやってること同じ...?何が違うの?」という疑問から色々調べてみたのでまとめてみました。 なお、基構文や根底にある非同期通信、Promise自体の解説は割愛します。 FetchAPIとは まずイメージを掴むために、Fetchの語源から確認してみます。 フェッチとは、取りに行く、取ってくる、持ってくる、などの意味を持つ英単語ITの分野では機器やプログラムなどが特定の場所からデータなどを読み出す動作のことを指すことが多い。 (フェッチとは - IT用語辞典 より) プログラミングではAPIサーバーなどからデータを持ってくる、取ってくるという意味でfetchという単語がよく使われていますね。 次にFetchAPIに関して確認してみましょう。 Fe

    【JavaScript】FetchAPIとaxiosの違いって?機能やメリットを比較
    akatakun
    akatakun 2020/10/13
    Fetchから返されるPromiseは404や500をRejectしない,Fetchの役割はあくまで「リクエストを投げてレスポンスを受け取って返すこと」であり、4XXや5XXであってもリクエスト自体はちゃんと返ってきているから
  • オブジェクトリテラルのプロパティ/メソッドのいろんな書き方(ES6版) - Qiita

    Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

    オブジェクトリテラルのプロパティ/メソッドのいろんな書き方(ES6版) - Qiita
  • 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年前のアドベントカレンダーで、今後はいろいろなモジュー

    Callback を撲滅せよ
    akatakun
    akatakun 2020/08/15
    個々のメソッドをpromisifyでPromise化する際には、thisが変わらないように注意,Promise化はModule側でなるべく対応すべき
  • Socket.IOでメッセージが届いたことを確認する - Qiita

    WebSocket使ってると、クライアントからサーバーにメッセージ送って、届いたのがはっきりしてから何かしたいことがあったりします。WebSocketの仕様その物にはそういう機能は無いようですが、Socket.IOにはそういう機能があったのでこれが使えました。 (低レベルの話を期待していた方、済みません) ドキュメントに書いてあることそのままではあるんですが:Sending and getting data (acknowledgements) Socket.IOのacknowledgements機能 emitするクライアント側のコード、サーバー側のonで待ち受けるブロックのコード、のそれぞれでコールバック関数を登録することで、クライアントからのメッセージが届いた時の処理を書けます。処理を書けるということは、届いたことが確認できるということです。

    Socket.IOでメッセージが届いたことを確認する - Qiita
  • Socket.ioで作ったWebSocketサーバをELBでロードバランスする - Qiita

    課題 現在、作っているサービスではsocket.ioを使って作ったWebSocketサーバをELB経由で使っています。 開発環境はELB配下にEC2が1台で、番環境は複数台です。 これ、どちらも正しく動いているように見えていたんですが、最近セットアップした番環境の方でWebSocketへのUpgradeがうまくいっておらず、pollingで動いていることに今日気がつきました。 サービスとしてはまぁ一応問題はないんですが、WebSocketで動いていると思っていたものが実はPollingだったというのはわりかし衝撃です。 原因 なんでやねんと思ってググるとわりと簡単に原因に行き当たりました。公式ドキュメントで思いっきり説明されています。 日語だとこの辺でが参考になります。 Express / Socket.IO をスケールアウトしてみよう Socket.IO or WebSocket

    Socket.ioで作ったWebSocketサーバをELBでロードバランスする - Qiita
  • ES5とES6の違いをまとめてみた(メモ) - Qiita

    Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

    ES5とES6の違いをまとめてみた(メモ) - Qiita
    akatakun
    akatakun 2020/07/20
    Functionはオブジェクト内で宣言したとしてもthisはグローバルを指す(メソッド内でも),Allowで定義した関数は、現在のスコープにthisが束縛される(メソッド内でも)
  • 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

    webpackとBabelの基本を理解する(1) ―webpack編― - Qiita
    akatakun
    akatakun 2020/07/19
    分かりやすかった
  • 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秒経過し

    4歳娘「パパ、Promiseやasync/awaitって何?」〜Promise編〜 - Qiita
  • TypeScript + VSCodeで快適プログラミング|erukiti

    JavaScript大好きの皆様ごきげんよう。 今回は、JavaScriptのスーパー強い版であるTypeScriptVSCodeの組み合わせがとても快適である!という記事をお送りします。 JavaScriptJavaScriptは、RubyPHPなどと同じ、いわゆる動的型付け言語です。 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

    TypeScript + VSCodeで快適プログラミング|erukiti
    akatakun
    akatakun 2019/07/12
    たとえば hoge というようなパッケージをインストールして型情報が出てこない場合は、@types/hoge のインストールを試してみるといいでしょう。
  • 次に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です。 AndroidKotlinがどんどん採用されていくのを横で指を加えて見てるわけには行かないので、JSにもTypeScriptをぶち込みました。SwiftKotlinを書いたことがある人ならばすっと馴染むと思います。 新しく書くJSはもう基的にTSで書いてます(botすらTypeScriptに書き換えて引かれましたw)。ちょうど1年前からガッツリ使っていたので知見を垂れ流すフェーズに入ります。 完全な初級というよりは、ちゃんと使いたい中級な人向けに、基的な使

    次にJSガッツリ書くときはTypeScriptで - Qiita
  • 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

    Node.jsのexportsについて - 30歳からのプログラミング
    akatakun
    akatakun 2018/08/08
    呼び出される側のファイルでモジュール化する値やオブジェクトをexportsしておく。これにより呼び出し側で使うことが可能
  • JavaScript の this を理解する - tacamy--blog

    this はインスタンス自身を指す、ただそれだけの話でしょう? そんなふうに考えていた時期が私にもありました。そう、JavaScript の this に出会うまでは・・。 用語について 私は Java 脳で書いてるので、言葉遣いが JavaScript と若干違う部分があると思います。 下記のようなイメージで言葉を使っています。 用語 意味 クラス インスタンスオブジェクトの元となる設計図 コンストラクタ クラスのコード部分で、new したときにコンストラクタの内容で初期化する インスタンス クラスを元に実体化したオブジェクト メンバ変数 クラスやインスタンスに属するローカル変数 メソッド クラスやインスタンスに属する命令(関数) オブジェクト指向とプロトタイプと this JavaScript のオブジェクト指向開発では、元になるクラスを new することで、インスタンスを生成します。

    JavaScript の this を理解する - tacamy--blog
    akatakun
    akatakun 2018/08/06
    関数は独立したオブジェクトであり、定義したオブジェクトに所属せず、呼び出されたオブジェクトを指す,グローバルスコープの範囲から呼び出されたthisはグローバルオブジェクトを指す
  • 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(); //「こんにちわ プンちゃん」と表示される

    JavaScript の超便利なメソッド bind で this を制御する
    akatakun
    akatakun 2018/08/06
    オブジェクトのメソッドはオブジェクトに束縛されているものではなく、その時々のコンテキストにおいて実行されるからです。
  • [JS]便利なのが登場!実装はかなり簡単なのに、さまざまなチャートやグラフを実装できるスクリプト -ApexCharts

    チャートやグラフを実装するのは面倒、と思われがちですが、そんな人にはこのスクリプトをお勧めします。 div要素一つと外部ファイルを一つ、あとはグラフのデータを設定するだけで、さまざまなチャートやグラフが簡単に実装できてしまう単体のJavaScriptライブラリを紹介します。 レスポンシブ対応で、アニメーションにも対応、カラー変更やグラデーションやパターンにも対応している優れものです。 ApexCharts ApexCharts -GitHub ApexChartsの特徴 ApexChartsのデモ ApexChartsの使い方 ApexChartsの特徴 ApexChartsはシンプルなAPIを使用して、インタラクティブなチャートやビジュアライゼーションを作成するためのモダンJavaScriptのチャート作成ライブラリです。 MITライセンスで、個人でも商用でも無料で利用できます。 レスポ

    [JS]便利なのが登場!実装はかなり簡単なのに、さまざまなチャートやグラフを実装できるスクリプト -ApexCharts
  • webpackを使った Rails上でのReact開発 - クックパッド開発者ブログ

    はじめに こんにちは、投稿開発部エンジニアの芳賀です。 既存のRailsプロジェクトの中でReact.jsを利用する機会があったので、その時にやったことについてまとめてみます。 私自身は普段RailsのサーバサイドとCoffeeScriptが中心で、最近のJavaScript開発環境についてあまりキャッチアップできていなかったのですが、それらの状況を把握しつつ試行錯誤で開発していった経験から、できるだけ「React採用してみたいけどJavaScript界隈よくわからない目線」で書いてみようと思います。 RailsReact.jsを使ういくつかの方法 2016年時点で、RailsReact.jsを使う方法はいくつかあって、どれを採用するかで悩みました。 vendor/assets/javascripts にreact.jsを置いて利用する react-rails gem を利用する br

    webpackを使った Rails上でのReact開発 - クックパッド開発者ブログ
    akatakun
    akatakun 2018/05/20
    Webpack Loaderでアセット群の依存関係をいい感じにしてもらい、Babel LoaderでES2015(6)やJSXをJSに変換してもらい、Sprocketsにフィンガープリントを付与してもらう