タグ

JavaScriptに関するfuyu77のブックマーク (730)

  • Array.prototype.some() - JavaScript | MDN

    This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. Learn moreSee full compatibilityReport feedback some() は Array インスタンスのメソッドで、指定された関数で実装されているテストに、配列の中の少なくとも 1 つの要素が合格するかどうかを判定します。配列の中で指定された関数が true を返す要素を見つけた場合は true を返し、そうでない場合は false を返します。配列は変更しません。

    Array.prototype.some() - JavaScript | MDN
  • ブラウザでローカル画像をリサイズしてアップロード - Qiita

    【2019/8/20】 多くの方に見ていただいている記事なので、改めてまとめ直しました。 https://www.mahirokazuko.com/entry/2019/08/20/133713 よくある画像アップロード機能を作ってみた😋 ◆ 要件 ・ フォルダにある画像を選択すると、小さくリサイズされたサムネが表示される ・ 送信ボタンを押すとリサイズ済みの画像がフォームデータとして送信される ◆ サンプル ↓ ファイル選択するとサムネを表示 上の画像、生データだと横幅6000pxくらいあります。最近のスマホで撮った写真はサイズが大きすぎるので、通信量を抑えるためにもリサイズしてアップロードは必須ですね。 ◆ コード ファイル取得→canvas描画→base64取得→Blob作成→Blob送信 という流れ <!-- ファイル選択ボタン --> <div style="width: 50

    ブラウザでローカル画像をリサイズしてアップロード - Qiita
  • JavaScript で queueMicrotask() によるマイクロタスクの使用 - Web API | MDN

    このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。 View in English Always switch to English マイクロタスクは、それを作成した関数やプログラムが終了した後、 JavaScript 実行スタックが空の場合にのみ実行され、ユーザーエージェントがスクリプトの実行環境を動かすために使用しているイベントループにコントロールを返す前に実行される短い関数です。 このイベントループは、ブラウザーのメインイベントループか、ウェブワーカーを駆動するイベントループのどちらかです。これにより、他のスクリプトの実行を妨げるリスクなしに与えられた関数を実行することができ、同時に、ユーザーエージェントがマイクロタスクによって行われるアクションに反応する機会を得る前に、マイクロタスクが確実

    JavaScript で queueMicrotask() によるマイクロタスクの使用 - Web API | MDN
  • JavaScriptのイベントループまわりは、どういう仕組みで動いているのか?

    概要 JavaScriptのイベントループがどう動いているのかを自分の中で整理したいと思い、記事を書きました。図がかなり多めです👀 イベントループ イベントループとは、タスクキューにあるタスク(関数)を順次実行していくための仕組みをいいます。 MDNは、下記の抽象的なプログラムでその内容を説明してくれています。 while(queue.waitForMessage()){ queue.processNextMessage(); } queue.waitForMessageは、もしその時点でタスクキューにタスクが存在しないのであれば、タスクが到着するのを待つ、というメソッドです。 そしてqueue.processNextMessage()は、次のタスクを実行する、というメソッドです。 つまりイベントループは、タスクキューにタスクが存在していた場合は順次それぞれを実行していき、そうでない場合

    JavaScriptのイベントループまわりは、どういう仕組みで動いているのか?
  • JS基礎いろいろーイベントループ

    イベントループ(Event Loop)とはなんでしょう。一言で言えば、JavaScriptという言語を理解する一つのキーであり、コード実行のモデルだと考えられます。今回はそのイベントループについて詳しく見ていきたいと思います。 同期と非同期 イベントループに入る前に、まずは同期実行と非同期実行の理解が必要です。 JSは基的にシングルスレッドで非同期実行、というメカニズムになっています。 シングルスレッドだけでは、一つのタイミングに一つの仕事しかできないので、例えばリモートサーバーから何かデータをリクエストすると、シングルスレッドではその返事を待たなければならなく、画面のレンダリングが止まり、フリーズ状態になってしまいます。 ただ実際の開発中・使用中には、そういう状況がありません。これは、単純に非同期だから、というわけでもなく、ブラウザーでは複数のスレッドがあります(後節で説明)。つまり、

    JS基礎いろいろーイベントループ
  • JavaScript イベントループの仕組みをGIFアニメで分かりやすく解説

    JavaScript イベントループの仕組みについてGIFアニメーションで分かりやすく解説された記事を紹介します。 ✨♻️ JavaScript Visualized: Event Loop by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 JavaScriptを視覚的に解説: イベントループ イベントループは、JavaScriptデベロッパーが避けては通れない関門の1つですが、最初は理解しにくいかもしれません。私は視覚学習者なので、GIFアニメで視覚的に説明することで、あなたの手助けをしようと思います。 説明の前に、まずイベントループとは何でしょうか? なぜ気にする必要があるのでしょうか? JavaScriptはシングルスレッドで、一度に実行できるタスクは1つだけです。通常は問題ありませんが、30

    JavaScript イベントループの仕組みをGIFアニメで分かりやすく解説
  • 並行モデルとイベントループ - JavaScript | MDN

    barを呼び出すと、barの引数とローカル変数を含んだ最初のフレームが生成されます。barがfooを呼び出すと、fooの引数とローカル変数を含んだ2番目のフレームが生成され、最初のフレームの上にプッシュされます。fooから返ると、先頭のフレーム要素はスタックからポップされます(barのコールフレームのみが残ります)。barから返るときスタックは空になります。 ヒープ オブジェクトはヒープに割り当てられています。ヒープは、メモリの大規模で大部分は構造化されていない領域を意味する名前です。 キュー JavaScript ランタイムはメッセージキューを含んでいます。メッセージキューは、処理されるメッセージのリストです。各メッセージに関数を関連付けられています。スタックが空のとき、メッセージがキューから取り出され、処理されます。その処理は、関連する関数の呼び出し(と最初のスタックフレームの作成)で

    並行モデルとイベントループ - JavaScript | MDN
  • エープリルフールなのでJavaScriptの信じがたい話をします - Qiita

    今日はエープリルフールなので、JavaScriptに関する、にわかに信じがたい話(実話)をしたいと思います。実用的な話ではないので、息抜きがてらお読みいただき、「嘘だろ!?」とツッコミながらJavaScriptへの関心を少しでも深めていただければと思います。 思いつきでゆるめにとりとめもなく書いたため、内容がざっくりしているところがあります。詳しい方はコメントなどで補足いただけると助かります🙇🏻‍♂️ できるだけ十分に調査したつもりですが誤りなどあればご指摘いただければ幸いです。 JavaScriptは10日で作られました JavaScriptは最も利用される言語のひとつで、JetBrainsの統計によれば70%近くの開発者が使ったことがあるほど、広く普及している言語です。 ここまで普及したとなると、JavaScriptはどれほど練りに練って、じっくり作り込まれた言語だったのでしょうか

    エープリルフールなのでJavaScriptの信じがたい話をします - Qiita
  • Boolean - JavaScript | MDN

    解説 論理値は、通常、関係演算子、等値演算子、[論理 NOT (!)] によって生成されます。また、条件を表す関数、例えばArray.isArray() によっても生成されます。 なお、バイナリー論理演算子、例えば && や || などは、オペランドの値を返します。これらの値は論理値である場合もあれば、そうでない場合もあります。 論理値は一般に条件分岐の検査、例えば if...else や while 文の条件、条件演算子 (? :)、 Array.prototype.filter() の述語の返値などに使用されます。 JavaScript では、論理値への明示的な変換はほとんど必要ありません。 JavaScript は論理値のコンテキストにおいて自動的に変換を行うため、値が真値であるかどうかに基づいて、任意の値を論理値として使用することができます。また、自分のコードでは、if (cond

    Boolean - JavaScript | MDN
  • String.prototype.trim()

    This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩. Learn more See full compatibility Report feedback

    String.prototype.trim()
  • JavaScriptエンジン - Wikipedia

    この項目「JavaScriptエンジン」は翻訳されたばかりのものです。不自然あるいは曖昧な表現などが含まれる可能性があり、このままでは読みづらいかもしれません。(原文:英語版 "JavaScript engine" 2019年10月16日 (水) 18:18(UTC)) 修正、加筆に協力し、現在の表現をより自然な表現にして下さる方を求めています。ノートページや履歴も参照してください。(2019年11月) JavaScriptエンジン (英語: JavaScript engine) は、JavaScriptのコードを実行するコンピュータプログラムである。初期のJavaScriptエンジンは単なるインタプリタであったが、近年の全てのエンジンは、性能の向上のためにJITコンパイルを利用している[1]。 JavaScriptエンジンは通常、ウェブブラウザのベンダーによって開発されており、全ての主要

  • Mozilla、今後はV8の正規表現エンジンをFirefoxにそのまま取り込むと表明。そのための互換レイヤを開発

    Mozilla、今後はV8の正規表現エンジンをFirefoxにそのまま取り込むと表明。そのための互換レイヤを開発 WebブラウザにはJavaScriptを実行するためのJavaScriptエンジンが搭載されています。それはChromeであれば「V8」、Firefoxであれば「SpiderMonkey」と呼ばれ、それぞれのWebブラウザベンダがECMAScriptの標準に準拠したうえで独自に実装しています。 そしてJavaScriptは以前から正規表現の機能を備えているため、正規表現を解釈し展開するための正規表現エンジンもそれぞれのWebブラウザベンダが実装を行っていました。 その正規表現エンジンについてMozillaは今後、V8の正規表現エンジンのコードをそのままFirefoxのSpiderMonkeyに取り込むようにすると表明しました。 Mozillaはこれを実現するため、V8用の正規表

    Mozilla、今後はV8の正規表現エンジンをFirefoxにそのまま取り込むと表明。そのための互換レイヤを開発
  • JavaScript - Wikipedia

    HTML中のJavaScript。scriptタグで囲まれている。 JavaScript(ジャバスクリプト)は、プログラミング言語であり、HyperText Markup Language(HTML)やCascading Style Sheets(CSS)と並ぶ World Wide Web(WWW)の中核技術の一つである。JavaScriptで書かれたプログラムはHTMLCSSと同様に、ウェブサービスのクライアントであるウェブブラウザ上で解釈、実行される。 プロトタイプベースのオブジェクト指向スクリプト言語であるが、クラスなどのクラスベースに見られる機能も取り込んでいる。 利用される場面はウェブサイト、ウェブアプリケーション、バックエンド、デスクトップアプリケーション、モバイルアプリケーションなど、ウェブブラウザからサーバ、デスクトップパソコンからスマートフォンまで多岐にわたっている。

    JavaScript - Wikipedia
  • JavaScriptの進化で変わる身近なコーディング習慣

    JavaScriptの進化で変わる身近なコーディング習慣 uhyo ( https://twitter.com/uhyo_ ) JavaScript歴史が結構長い言語であり、さまざまなベストプラクティスがあります。一方で、JavaScriptは進化を続けており、それに伴ってこれまでに蓄積したベ…

    JavaScriptの進化で変わる身近なコーディング習慣
    fuyu77
    fuyu77 2022/03/26
    これからもどんどん便利になるのか。
  • マイクロソフト、JavaScriptに型宣言を追加しつつトランスパイラ不要の「Types as Comments」をJavaScript仕様策定会議のTC39に提案へ

    マイクロソフト、JavaScriptに型宣言を追加しつつトランスパイラ不要の「Types as Comments」をJavaScript仕様策定会議のTC39に提案へ マイクロソフトのTypeScript開発チームは、JavaScriptのコードにTypeScript互換のアノテーション(注釈)を加えることで変数や関数などの型を宣言し、エディタなどのツールで型情報を活用可能にする一方、実行時にはJavaScriptエンジンがアノテーションを無視することでコードをトランスパイラで変換することなく実行可能なJavaScriptの新構文「Types as Comments」を、JavaScriptの使用を策定する「TC39」(Ecma International, Technical Committee 39)に提出する計画を明らかにしました。 このマイクロソフトの発表には、TC39の共同議長で

    マイクロソフト、JavaScriptに型宣言を追加しつつトランスパイラ不要の「Types as Comments」をJavaScript仕様策定会議のTC39に提案へ
  • async/await で複数の非同期処理を待つときに注意したいこと - Qiita

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

    async/await で複数の非同期処理を待つときに注意したいこと - Qiita
  • JavaScriptの演算子の優先順位と「禁止ルール」の一覧

    ただし、種別は以下の通りです。 prefix (前置演算子) …… もとの式の手前に何個でもつけられる演算子。 例: -~-~x postfix (後置演算子) …… もとの式の直後に何個でもつけられる演算子。 例: x.foo()`bar`[0] postfix once …… もとの式の直後に1個だけつけられる演算子。 例: x++ は可能だが x++-- はパースされない。 逆に ++--x はパースされるが、構文とは別のルールで禁止される。 (後述) infixL …… 中置演算子で左結合 (演算子の優先度が同じ場合は左側にあるほうが優先される) 例: 0.1 + 1.0 - 1.0 は (0.1 + 1.0) - 1.0 になる infixR …… 中置演算子で左結合 (演算子の優先度が同じ場合は右側にあるほうが優先される) 例: 2 ** 2 ** 3 は 2 ** (2 **

    JavaScriptの演算子の優先順位と「禁止ルール」の一覧
  • JavaScriptはJavaのScript版(であろうと努力はした) - きしだのHatena

    JavaJavaScriptを混同する人に、名前がかぶってるだけの別モノという指摘がされることもあります。間違いではない。 技術的にも実務的にもコミュニティ的にもそのとおりではあります。 ただ、そう言い続けられた結果、ほんとに単にLiveScriptの名前にJavaをもってきてJavaScriptにしただけという誤解があるようです。 JavaScriptJavaのScript版、少なくともそうであろうという努力はされていました。 JavaScriptリリース時のCNETの記事には「JavaScript is based on Java」という記述があります。 Netscape and Sun Unveil JavaScript - CNET 実際には、LiveScriptにJavaから文法やライブラリなどを持ち込んでリリースにこぎつけたというのがあります。 JavaScriptのDat

    JavaScriptはJavaのScript版(であろうと努力はした) - きしだのHatena
  • モダンフロント開発に必須の知識(ES2015~ES2023まとめ + 高階関数) - Qiita

    はじめに モダンフロント開発に必須の知識であるES2015〜以降の記法と、実務でよく使用される高階関数について、自分の中で改めて復習、整理しておきたいと思います。 それぞれの項目に★~★★★の重要度も記述しています。 ★★★ => 必ず覚えておくべき ★★ => 覚えておくべきだが、使う場面が限られる ★ => 知識としては知っておいた方が良い 現在フロントエンドエンジニアの方やフロントエンジニアになりたての方、フロントエンドエンジニアを目指して勉強中の方に読んでいただけたら幸いです。 ES(ECMAScript)とは? JavaScriptの標準仕様。 現在ブラウザで使われているJavaScriptは、ECMAScriptの仕様に則って開発されています。 JavaScriptは他の言語のようにversionなどが存在せず、「ECMAScriptのversion~~に対応しているJavaS

    モダンフロント開発に必須の知識(ES2015~ES2023まとめ + 高階関数) - Qiita
  • Deep JavaScript

    Homepage Please support this book: buy it or donate (Ad, please don’t block.) Deep JavaScript Table of contents