Array.prototype.flatMap() - JavaScript | MDN
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020. Learn moreSee full compatibilityReport feedback flatMap() は Array インスタンスのメソッドで、最初にマッピング関数を使用してそれぞれの要素をマップした後、結果を新しい配列内に平坦化します。これは、 map() の後に深さ 1 の flat() を行うのと同じですが (arr.map(...args).flat())、これら 2 つのメソッドを別々に呼び出すよりもわずかに効率的です。
Array.prototype.flat() - JavaScript | MDN
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020. Learn moreSee full compatibilityReport feedback const arr1 = [0, 1, 2, [3, 4]]; console.log(arr1.flat()); // expected output: Array [0, 1, 2, 3, 4] const arr2 = [0, 1, [2, [3, [4, 5]]]]; console.log(arr2.flat()); // expected output: Array [0, 1, 2, Array [3,
Everything you need to know from ES2016 to ES2019
JavaScript is a language in constant evolution and in the past few years many new features have been added to the ECMAScript specification. This article is an extract of my book Complete Guide to Modern JavaScript and it covers the new additions of ES2016, ES2017, ES2018, ES2019. At the end of the article you will find a link to download a cheatsheet that summarizes everything. Everything new in E
【脱jQuery】JavaScriptをネイティブで書くときのあれこれTips | Will Style Inc.｜神戸にあるウェブ制作会社
こんにちは、デザイナーの奥田です。 最近では「脱jQuery」や「Vanilla.js」という言葉が流行っていますがjQueryをはじめに覚えた僕としてはなかなかハードルが高いイメージでした。 jQueryを切り捨てるメリットとしては「ファイルサイズ」や「表示速度」があると思います。そこまで大きな差は感じないかもしれませんが少しでもクオリティを上げるためであれば切り替えてみてもいいかもしれません。 今回は脱jQueryする際によく使う書き方をjQueryとNativeを見比べながら解説していきたいと思います。 Table of contents要素の取得イベントの操作クラスの操作属性の操作スタイルの操作ループ処理Vanilla.jsのプラグイン最後に要素の取得IDはDocument内に1つというルールがあるので取得はgetElementByIdで取得するのが手っ取り早いでしょう。 ID//
Document: querySelector() メソッド - Web API | MDN
ドキュメントオブジェクトモデル (DOM)DocumentコンストラクターDocument()インスタンスプロパティactiveElementadoptedStyleSheetsalinkColor 非推奨; all 非推奨; anchors 非推奨; applets 非推奨; bgColor 非推奨; bodycharacterSetchildElementCountchildrencompatModecontentTypecookiecurrentScriptdefaultViewdesignModedirdoctypedocumentElementdocumentURIdomain 非推奨; embedsfeaturePolicy Experimental fgColor 非推奨; firstElementChildfontsformsfragmentDirectivefullscr
Document: getElementById() メソッド - Web API | MDN
ドキュメントオブジェクトモデル (DOM)DocumentコンストラクターDocument()インスタンスプロパティactiveElementadoptedStyleSheetsalinkColor 非推奨; all 非推奨; anchors 非推奨; applets 非推奨; bgColor 非推奨; bodycharacterSetchildElementCountchildrencompatModecontentTypecookiecurrentScriptdefaultViewdesignModedirdoctypedocumentElementdocumentURIdomain 非推奨; embedsfeaturePolicy Experimental fgColor 非推奨; firstElementChildfontsformsfragmentDirectivefullscr
🚀⚙️ JavaScript Visualized: the JavaScript Engine
JavaScript is cool (don't @ me), but how can a machine actually understand the code you've written? As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳 | Note: This post is mainly based on the V8 eng
javascriptで文字コード変換 - Qiita
javascriptで文字コード変換 概要 javascriptの文字列はUTF-16で String#charCodeAt(i) で取得出来る数値は2byte(0x0000から0xffff)になる。 escape("あ") は UTF-16がそのままエスケープされ "%u3042" になるが encodeURI("あ"),encodeURIComponent("あ") などではUTF-8に変換されて "%E3%81%82" になる。 とすることで UTF-16<=>UTF-8 の変換は出来るが、その他の文字コードは変換テーブルを用意する必要がある。 Shift_JIS(MS932), EUC-JP, UTF-8, JIS(iso-2022-jp)に対応したライブラリを2つ見つけたので検証する。 Encoding.js - Converts character encoding. http
条件 (三項) 演算子 - 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 条件 (三項) 演算子は JavaScript では唯一の、3 つのオペランドをとる演算子です。条件に続いて疑問符 (?)、そして条件が真値であった場合に実行する式、コロン (:) が続き、条件が偽値であった場合に実行する式が最後に来ます。この演算子は、 if 文の代替としてよく用いられます。 function getFee(isMember) { return isMember ? "$2.00" : "$10.00";
本当は速くならない「Webサイトの表示高速化アンチパターン」10選｜榊原昌彦
ベストプラクティスや「高速化につながる！」と紹介されている記事では、逆効果、もしくは効果があるシチュエーションがあまりに限定的な手法が紹介されていることが多いので、アンチパターンとして紹介します。 本記事は「Webパフォーマンス Advent Calendar 2019」2日目の記事です。 https://qiita.com/advent-calendar/2019/web_performance 本記事はWebパフォーマンス高速化の専門家である株式会社Spelldataの竹洞 陽一郎氏にアドバイスをもらいました。HTTP/2の伝送の画像など一部資料のご提供もいただいております。誠にありがとうございます。 https://spelldata.co.jp/ ほとんどの場合で間違い 1. すべての画像をCSSスプライトその昔、画像をすべて1枚にまとめて、DOMのbackground-image
モダンJavaScript再入門 / Re-introduction to Modern JavaScript
FRONTEND CONFERENCE 2019の登壇資料です。 https://2019.kfug.jp/session/onoueyosuke Webサイト・Webアプリ制作への高まる要求に耐えられるようにJavaScriptは進化を続けてきました。特にこの約5年間で、JavaScriptは…
私たちはなぜ SPA で開発するのか / Why you choose SPA
2019.11.02 に FRONTEND CONFERENCE 2019 (#frontkansai) にて発表したスライドです。
JavaScriptで文字列の有無を調べるにはindexOfではなくtestを使う
indexOfではなくtestメソッドを使う JavaScriptで文字列の有無を調べる際にindexOfが使用されているコードをよく見かける。 indexOfを使用すれば以下のように文字列の有無を調べることができる。 indexOfは指定した文字列が含まれている場合は初めて出現したインデックス。見つからなかった場合は-1を返す。 var str = 'This is a apple pen'; if (str.indexOf('apple') !== -1) { console.log(true); } else { console.log(false); } // => true indexOfは正規表現が使用できないため文字列の有無を調べるなら正規表現が使用できるtestメソッドを使用したほうが良い。 例えばappleまたはbananaも含まれているかどうかをindexOfで調べるに
JavaScriptの同期、非同期、コールバック、プロミス辺りを整理してみる - Qiita
対象 このあたりの理解があいまいな方： JavaScriptは非同期で処理できる！？ 並行処理と非同期処理って同じ！？ そもそも同期と非同期って何が違う！？ 非同期の結果はコールバックで受け取る！？ コールバックを多用するとコールバック地獄に陥る！？ Promiseを使うとコールバック地獄を回避できる！？ JavaScriptの基礎 大前提として、JavaScriptはシングルスレッドで動いています。 これはつまり、JavaScriptは並行処理はできないということです。 同期であろうと非同期であろうと2つ以上の処理を同時に行なうことはできません。 JavaScriptでは、キューに登録された関数が順番にひとつずつ実行されていきます。 でもキューに登録される順番が同期であったり非同期であったりします。 JavaScript以外（例えばデータベース等）に仕事を任せてる間、その処理を待たないで
JavaScriptの非同期処理を並列処理と勘違いしていませんか？ - Qiita
この記事を書くにあたり.. いわゆるカメラアプリをブラウザで実装するにあたり，canvas要素をpng形式に変換する処理が150msほどかかってしまっていて，その間にブラウザに映し出される映像がカクついてしまったという問題が発生しました． その問題を解決する中で，Web上で色々な記事を読んでいると，JavaScriptの非同期処理を並列処理と勘違いしている人が結構いたので，今回はそんな初心者から中級者になろうとしている人のための記事です． ＊JavaScript上級者の方は．何か間違っていることがあればコメントください． そもそも非同期処理とは プログラムが記述された通りに実行されるものを同期処理と言います． しかし，同期処理だと，1行のプログラムに時間がかかったら，全体が重くなってしまいます． (例えば，サーバーにリクエストしてそれが何秒もかかって，UIまでもがフリーズしたら，何だこのペ
Array.prototype.push() - JavaScript | MDN
const animals = ["pigs", "goats", "sheep"]; const count = animals.push("cows"); console.log(count); // Expected output: 4 console.log(animals); // Expected output: Array ["pigs", "goats", "sheep", "cows"] animals.push("chickens", "cats", "dogs"); console.log(animals); // Expected output: Array ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"]
EJS -- Embedded JavaScript templates
What is EJS? What is the "E" for? "Embedded?" Could be. How about "Effective," "Elegant," or just "Easy"? EJS is a simple templating language that lets you generate HTML markup with plain JavaScript. No religiousness about how to organize things. No reinvention of iteration and control-flow. It's just plain JavaScript. Use plain JavaScript We love JavaScript. It's a totally friendly language. All
【JavaScript】全角スペースは使ってよい（仕様では） at softelメモ
問題 JavaScriptに全角スペースが入っているのを見つけたのですが、エラーも何も問題が発生していないです。 そんなもんなんですか。 //↓ifの後ろに全角スペースが！ if (a > 0) { } 答え JavaScriptの仕様（ECMAScript 5.1の仕様）によると、以下の文字がホワイトスペースとして定義されている。 Table 2 — Whitespace Characters
event.currentTargetとevent.targetの違い – １日ひとつ、強くなる。
event.target と event.currentTargetは違う イベントが発生した時に、イベントリスナーでイベントオブジェクトを取得することができるが、このイベントリスナーの event.target と event.currentTarget は「異なる性質」を持つので注意したい。 確認：イベントリスナーとは イベントリスナーとは、イベントターゲット(HTMLの各種要素=ノード等)に対して、イベント(clickやhover)が発生した際に実行する「関数、もしくはオブジェクト」を関連付ける仕組みのこと。具体的には、あるdivがマウスオーバーされた時に特定の関数を実行する、といった機能を実装する際に使われる。 //ES6です 'use strict'; class AddHover { constructor(target) { this.target = target; thi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ASCII.jp：
