2015～2017年のECMAScript コンプリートガイド - Qiita
以下はTHE COMPLETE ECMASCRIPT 2015-2017 GUIDEの日本語訳です。 THE COMPLETE ECMASCRIPT 2015-2017 GUIDE Introduction JavaScriptの記事を読むたびに、必ず以下のような用語が目に入ってきます。 ・ES3 ・ES5 ・ES6 ・ES7 ・ES8 ・ES2015 ・ES2016 ・ES2017 ・ECMAScript 2017 ・ECMAScript 2016 ・ECMAScript 2015 それぞれどういう意味なのでしょうか。 これらは全て、ECMAScriptという技術標準のことを指しています。 ECMAScriptはJavaScriptのベースとなっている技術標準であり、しばしばESと短縮して呼ばれます。 JavaScript以外にもECMAScriptを実装している言語は存在します。 ・A
JavaScript Clean Code - Best Practices
topic: JavaScript by Milos Protic relates to: Web Development, Advice on May, 19 2019 JavaScript Clean Code - Best Practices Introduction If you care about the code itself and how it is written, instead only worrying does it work or not, you can say that you practice and care about the clean code. A professional developer will write the code for the future self and for the "other guy" not just fo
JavaScriptエンジンのV8、WebAssemblyのコンパイル済みモジュールをキャッシュすることで2度目の訪問からは即実行可能に。V8 r7.5で
JavaScriptエンジン「V8」の開発チームは、現在ベータ版のChrome 75に搭載予定の最新バージョン「V8 release v7.5」（以下V8 r7.5）のリリースを発表しました。 V8 r7.5では、コンパイル済みのWebAssemblyモジュールをキャッシュすることで、Webページを採用したときには再コンパイルなしで即実行できるようになったと説明されています。 We are planning to roll out implicit caching of WebAssembly compilation artifacts in Chrome 75. This means users that visit the same page a second time don’t need to compile the already-seen WebAssembly modules
JavaScript/TypeScript で Promise を直列実行できるが、結局どう実装すればよいのか？（可読性・実行速度） - Qiita
単位は byte es2016以下の場合 async/await を使用した場合、トランスパイルで polyfill が挿入される よって、 async/await を使用しなければ、polyfill 分のサイズを削減できる ただし、その他の実装でも一切 async/await 使ってない場合に限る src全体で見て、他の実装で async/await を使っている場合、その実装のために polyfill が挿入される そのため、直列実行の実装を工夫しても polyfill 分のサイズは必ず増える es2017以上の場合 いずれの実装も、polyfillは挿入されない よって、書いたコード分のファイルサイズになる 所感 まぁ、妥当な結果 ベンチマーク 各 target の出力結果の JavaScript を実行 1 スレッド、100 Promise の直列処理 * 5 回計測の平均 es5
ChromeのデベロッパーツールでJSをデバッグする方法(2022年版) - ICS MEDIA
JavaScriptのデバッグは、ウェブ開発の必須スキルのひとつです。プログラムの実行をデバッグすることで、現在の変数の値や、処理がどのように進んでいるのかを確認できます。デバッグによってプログラムが意図した動作になっているかの分析に役立てられます。 本記事ではGoogle Chromeブラウザーの「Chrome Developer Tools」（以下「デベロッパーツール」、「DevToolsデブ・ツールズ」という略称もあります）を使用してJavaScriptをデバッグする際の基本的な使い方を解説します。「今までデベロッパーツールを使ったことのない」という方でもこの記事を読めば理解できるよう、チュートリアル形式になっています。20分ほどで理解できるようまとめているので、順番に試しながら読み進めてください。 この記事で学べること デベロッパーツールの使い方 JavaScriptのブレークポイ
<script> タグに async / defer を付けた場合のタイミング - Qiita
HTML5 においては、<script> タグに、defer や async 属性を付与することで、これらの読込が HTML パースを妨害しないようにすることができます。これにより、サイトのメインコンテンツの読込がある程度高速化されます。 async にせよ defer にせよ、それほど詳細に動作を解説した記事が見つかりませんでしたので、本記事では、これらの動作について解説します。 イベントについて まずは、async と defer の挙動を理解するために重要な、2つのイベントについて理解しましょう。 両者とも、MDN に十分な情報があるため、本記事ではそれほど詳細には解説しません。 DOMContentLoaded HTML のパースが完了した直後に発火します。 MDN load HTML のパースが完了し、CSS や画像などのダウンロードと表示、JavaScript ファイルのダウン
scriptのdefer/asyncを理解し、ページの高速化方法を探る | ゆっくりと…
Yslow ルールでは、スクリプトはページの最後尾、つまり </body> 直前に置け、と言っています。なぜなら、スクリプトの読み込みや実行により、他のページ要素の読み込みやレンダリングがブロックされてしまうからです。 一方、古くは IE4 の時代から Microsoft はこの問題に対処するため、defer 属性という独自の解決策を実装してきました。これは HTML 4.01、XHTML 1.0、1.1 で仕様として採用され、HTML5 にも発展する形で引き継がれています。 IE 以外のブラウザも既に対応されており、IE の独自仕様という色合いが濃かった従来と異なり、これからは広く利用されていくのではないかと思います。 下のビデオは、スクリプトの位置と defer 属性のあり／なしによる、ページの読み込み／表示速度の違いを Pagetest.com でテストしてみたもので、明らかな差異が
JavaScriptよ。文明を捨て、自然に還れ。
Web ナチュラリスト フィードを眺めていたら Alex Russell 氏の新作が投稿されていた。 The "Developer Experience" Bait-and-Switch | Infrequently Noted 本来の趣旨については原文を読んでもらえばいいし、下記はこれを読んだ上で普段の考えを踏まえて脳裏をよぎったポエムである。 我々は複雑性で仕事をしている 仕事をしている、もしくはそれでお金を稼いでいる。誰もが。 私は 2012 年頃から Web の、特に Web フロントエンドの複雑性に加担している自覚がある。 Web の専門性が高まることはその技術領域に深淵な価値があることを示唆し、それに携わることの価値を相対的に向上させることができる。 私の活動そのものは些細なものだが、かくして 2018 年現在の Web はかくも複雑になることに成功し、エンジニアリングの名の下
JavaScript で forEach を使うのは最終手段 - Qiita
この記事は JavaScript2 Advent Calendar 2018 の1日目の記事です。 こんばんは。@diescake です。 今年は、JavaScript 経験の浅い新人さんや外注さんをリードする立場として、 とにかく幅広いメンバーのコードレビューをする機会に恵まれたのですが、 事ある毎に Array.prototype.forEach を利用する人が多かったため、初心者向けに要点を整理してみました。 以下 ES2015 以降のバージョンをサポートするブラウザ、あるいは polyfill を利用していることを前提としています。 結論 配列に対して何らかの操作を行う際は、 filter, find, map, reduce などのメソッドを利用できないか検討し、 いずれのメソッドでも実現ができない場合の最終手段として forEach を選択しましょう。 下記に、いくつかのサンプ
JavaScript/TypeScript で Promise を直列実行する - Qiita
2019/05/19 追記 パフォーマンス測定した JavaScript/TypeScript で Promise を直列実行できるが、結局どう実装すればよいのか？（可読性・実行速度） 目的 複数の Promise を直列実行したい 同期的実行・シーケンシャル・シリアルなど呼び方色々あるが、とにかく Not 並列に Promise[] を実行したい Promise.all のような書き心地がいい 技術的な正しさを追求した記事ではなく、雰囲気で使いこなせることを優先した記事である 動作イメージ この記事に出てくるサンプルコードについて Promise, async/await はなんとなくわかってる人向け axios で書いている 標準の fetch は、ボイラープレートコードが読みづらい・この記事の本質から外れそうなのでやめた よって、試す場合は jsfiddle などで実行のこと やりす
JavaScriptに参照渡し/値渡しなど存在しない - Qiita
tl;dr JavaScriptに参照渡し/値渡しなど存在しない 存在するのは変数に入る値の参照のみ 変数に値を代入すると参照が切り替わる という様に考えれば不毛な議論を避けられるのではないかという妄想 そしてタイトルは明らかな誇張表現 はじめに よくJavaScript界隈で見られる変数に関する話題として、「値渡し/参照渡し」が上がりますが、そもそもJavaScriptにはC++のような参照渡しなど存在しないです。それなのにわざわざ値渡し、参照渡しと分類することで、勝手が違うC++の参照渡しと混同しかねないです。実際にそのような話題が人目に付く程度盛り上がったときには、大抵「それはC++の参照渡しと違う」などと指摘が入り、JavaScriptでの参照渡しと呼ばれていたものが「参照渡しのようなもの」で片付けられるのを何度も見たことがあります。 ここまでの自分はJavaScriptにはJav
イメージで伝われ！図解JavaScriptの非同期処理 - メモを揉め
ものすごい久しぶりのブログ更新になってしまいましたが、今回はJavaScriptの非同期処理について書いてみたいと思います。 このテーマはうまく説明できない部分が毎回ちょいちょいあるのですが、こうしてまとめることで頭の中が整理されていくということもあるので、最後まで頑張りたいと思います。 前提としてブラウザの実装の詳細や仕様については分からない部分も多いため、間違っている部分もあるかもしれません。 もし、お気づきの点などありましたら、教えていただけると助かります。 目次 目次 同期と非同期の比較その1 同期的実行 非同期的実行 同期的実行 非同期的実行 同期と非同期の比較その2 同期的実行 非同期的実行 並行処理と並列処理 非同期API 非同期APIの特徴 その他の非同期API addEventListenerに渡したコールバックの同期的実行 非同期処理のユースケース コールバック Pro
JavaScriptの日時処理はこう変わる！ Temporal入門 - Qiita
日時の処理は様々なアプリケーションにおいて避けては通れないタスクです。JavaScriptにおいてもそれは例外ではありません。 JavaScriptでは最初期からDateオブジェクトが日時を表すオブジェクトとして存在していましたが、これは非常に使いにくいAPIで知られています。その結果、momentに代表されるような日時処理ライブラリを使うのが事実上スタンダードとなっています。 この記事では、将来的に日時処理の有力な選択肢になると期待されるモジュールであるTemporalについて解説します。Temporalでは、既存のDateによる日時処理のつらい部分が解消されることが期待されています。 なお、例によってTemporalはまだ策定中の仕様です。現在Stage 2というフェーズにあり、APIを鋭意策定中という状況です。よって、この記事にかかれている内容は確定までにまだ変化するかもしれません。
WeakRef: JavaScriptに弱参照がやってくる（ついでにFinalizationも） - Qiita
WeakRef、すなわち弱参照は多くの（ガベージコレクションを持つ）プログラミング言語に存在する機能です。ちょっと「weakref」でGoogle検索するだけで、Python, Ruby, PHP, Javaにこの概念が存在することが確認できます。 皆さんもよくご存知の通り、JavaScriptもガベージコレクションを持つ言語のひとつです。しかし、残念なことに弱参照はいまだJavaScriptにありませんでした。 もちろん、そんな状況に置かれているJavaScriptに弱参照を導入しようという動きもしっかりとあります。それがWeakRefプロポーザルです。このプロポーザルは現在Stage 2、つまり方向性はおおよそ定まって絶賛仕様策定中という状況です。それゆえに、この記事で解説することの委細は今後変わるかもしれません。しかし大きな方向性はよほどのことがないと変わらないと考えられます。このこ
JavaScriptの数値型完全理解 - Qiita
数値というのはプログラミングにおいて極めて基本的な対象です。ほとんどのプログラミング言語は何らかの形で数値の操作を行うことができ、もちろんJavaScriptにおいても例外ではありません。 プログラミングにおける数値の特徴的な点は、往々にしてその性質に応じた複数の型1が与えられている点です。まず、数値は整数か小数かによって分類されます。さらに、値を表すのに使われるビット数、また整数に関しては符号ありか符号なしかという分類ができます。例えば、Rustという言語ではこれらの分類が分かりやすく表れています2。Rustにおける数値の型はi32, i64, u32, u64, f32, f64などがあり、見ただけでどのような特徴を持つ数値なのかが分かりやすくなっています。iというのは符号あり整数、uというのは符号なし整数、fは小数で、その後の数字がビット数ですね。 では、JavaScriptにおいて
知らないと怖い「変数の巻き上げ」とは？｜もっこりJavaScript｜ANALOGIC（アナロジック）
概要 とりあえず問題 なぜこうなるのか？ まとめと予防策 JavaScriptには、他の言語ではあまり聞かない（あるいは存在しない）「変数の巻き上げ(hoisting)」という概念があります。これは（たぶん）JavaScript特有のもので、かつ重要なポイントです。 この「変数の巻き上げ」が原因でコードが思った通りの動作をしなかった場合、この概念を知らないと、いくらコードを見直しても問題を発見することができません。ドツボにはまります。 そういう意味でも、この「変数の巻き上げ」の概念をおさえておくことは重要です。 とりあえず問題 変数の巻き上げを説明するには、文章で説明するよりもコードを見てもらった方が理解できると思います。 まずは次のコードを見てください。 var myname = "global"; function func() { console.log(myname); //出力内
【初心者向け】JavaScriptってどんな言語？何ができる？
はじめに JavaScriptは、動的なWebサイト制作には欠かせないプログラミング言語です。 本記事では、JavaScriptとは何か、Webサイト構築において何ができるのか具体的な事例を交えてご紹介します。 スポンサードサーチ JavaScriptってどんな言語？ JavaScriptはブラウザ上で動作するプログラミング言語として1995年に登場しました。 現在のWebページの多くは、文章構造を作るHTMLと、見た目を装飾するCSS、そしてそれらを操作するJavaScriptで構成されています。 「ボタンを押すとメニューが表示される」機能や、Google MapsやFacebookなどの画面上で様々な操作ができるアプリケーションの様な機能もJavaScriptで実現されています。 JavaScriptを学ぶことでWebでできることの幅がグーンと広がります。 JavaScriptで何がで
「Google Chrome 74」安定版リリース、JavaScriptのクラス構文にプライベートフィールドが登場
ウェブブラウザ「Google Chrome」の最新安定版であるバージョン74.0.3729.108がリリースされました。Google Chrome 74ではJavaScriptのプライベートクラスフィールドが実装されたほか、ユーザーがアニメーションを消す設定にしている時の挙動を決められるCSSメディアクエリーなどが実装されています。 New in Chrome 74 | Web | Google Developers https://developers.google.com/web/updates/2019/04/nic74 New in Chrome 74: Private Class Fields, Prefers Reduced Motion, CSS Transition Events, & more! - YouTube ・プライベートクラスフィールド かつてのJavaScri
TypeScript再入門 ― 「がんばらないTypeScript」で、JavaScriptを“柔らかい”静的型付き言語に｜ハイクラス転職・求人情報サイト AMBI（アンビ）
TypeScript再入門 ― 「がんばらないTypeScript」で、JavaScriptを“柔らかい”静的型付き言語に JavaScriptプロジェクトでTypeScriptを導入する際には、“柔らかい”静的型付き言語とするのがおすすめです。藤吾郎（gfx）さんがまとめた「がんばらないTypeScript」のガイドラインです。 TypeScriptは、すべてのJavaScriptプロジェクトで採用する価値のある技術です。TypeScriptとこれに対応したエディタを導入することで、補完や型ベースの整合性のチェックにより、すべてのプロジェクトで生産性が上がります。またリファクタリングも容易になるので、長期あるいは大規模なプロジェクトでも品質を保ちやすくなります。 この記事では、TypeScriptについて最低限の知識とともに、サクッと（どちらかというと既存のプロジェクトに）導入するための
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
リックテレコム 書籍情報