以下はDuomly ( Webサイト / Twitter )による記事、13 useful JavaScript array tips and tricks you should knowの日本語訳です。 Duomlyはプログラミング学習コースを提供しているWebサイトです。 ただランディングページにたいしたことが書いてないので、詳細はよくわかりません。 ここはもう少し書いておいてほしいところ。 13 useful JavaScript array tips and tricks you should know 配列はJavaScriptで最も一般的な概念のひとつであり、内部に格納されたデータを操作する手段は多数存在します。 配列はJavaScriptの最も基本的なトピックであり、プログラミング学習パスの最初に学習するものだという前提のうえで、この記事ではあなたが知らないかもしれない、しか

このリストは何？ MDN web docs を、あたかも書籍の目次かのごとく整理しなおしたものです。それぞれ MDN web docs の記事へリンクしています。 なぜこれが必要になったかというと、人材市場でフロントエンドエンジニアが少なすぎる現状をどうにかするべく教育体制を整えるところから考え始めたのですが、それならまずは日頃お世話になっている MDN web docs を教材として扱いたいなと思ったからです。慣れてきてもよく参照するし「アレどこだっけなぁ？」を軽減もしやすいかなって。 MDN web docs は内容そのものはかなり充実しているものの、リンクがあらゆる方向に張り巡らせられており ある一定の流れに沿って読む ということが少々難しい側面もあります。特に初学者にとっては、迷子になりやすいかもしれません。 ですので、初学者でも学習しやすいように MDN web docs 全体の

指標についてはこちらの記事がわかりやすいのでぜひご参考ください。 これらの指標それぞれについて先ほどの順位点数を出します(0〜100)。その5つの順位点数に重みを加味して平均値を出したものが、PageSpeed Insightsで表示される点数です。 つまりどういうことか PageSpeed Inshgtsの点数はいかにファーストビューが速く完成して操作できるようになるか、それが全てということです。 例えば、同じ内容のWebページでも、 A ファーストビューが1秒で表示されるが、スクロールしたときのコンテンツはその後4秒かけて少しずつ表示される場合 B 読み込みから5秒は画面が真っ白だが、その後ページの上から下まで一気に表示される場合 PageSpeed InsightsはAの場合を高く評価し、Bの点数は低く評価します。これは実際のページ離脱の感覚として理に適っていると思います。 点数が上

JavaScriptにおける非同期処理は一種の悪夢です。非同期処理は容易にコードを複雑化させ、品質の低下を招きます。そこでこの問題を解決するため、非同期処理を簡単に扱うことができる、Promiseやasync/awaitという機能が導入されました。この記事では、Promiseとasync/awaitを用いた非同期コードの単純化について簡単な解説をします。 実行順序がコード通りにはならない非同期処理 非同期処理とは何でしょうか。非同期な処理は、コードの順番通りには実行されません。どういうことか、簡単な例を見てみましょう。 setTimeout(() => console.log('hello'), 500); console.log('world!'); このコードでは500ミリ秒後に「hello」と表示し、その後に「world」を表示しようとしています。ですが、実際には「world」の後に

皆さん、JavaScriptで「アニメーションAを3秒かけて実行したあと、アニメーションBを実行」などと、順番に処理を実行したいとき、どのようにしていますか？　以下のように setTimeout() を使って実現しているでしょうか？ function serialAnim () { // ...アニメーションAの処理 setTimeout(() => { // ...アニメーションBの処理 }, 3000) } うーん、ダサいですね。 それとも以下のようにコールバックを利用しているでしょうか？ animA(animB) function animA (callback) { // ...アニメーションAを実行した後に、callback(この例ではanimB)を実行する処理 } setTimeout() は、保守性に問題があることはもちろん、そもそもが「◯秒以降」に実行されるという関数なので

IE11 でXMLHttpRequest()を使った JSON 取得ができなかった。 問題点responseType を指定する順番xhr.open("GET", "https://example.jp/rest-api/posts.json", true); xhr.responseType = "json"; xhr.send(); responseType の設定は、open()の後に記述する。 モダンブラウザでは問題ないが、IE11 などではエラーとなる。 IE11 では responseType に JSON が指定できないXMLHttpRequest - Web API インターフェイス | MDNを確認すると、IE11 ではresponseType = 'json'が未対応である事がわかる。 機能ChromeFirefox (Gecko)Internet ExplorerOp

近年のフロントエンドの盛り上がりはすごいですね。プログラミング初心者がJavaScript（最近ではTypeScriptも）から学び始めるなんて昔ではなかなか考えられなかったことです。 そんな世界中で大人気のJavaScriptですが、プログラミングに慣れていても困惑する部分が結構あります。特に初心者にとっては、非同期処理、this、コールバック関数、あたりが難しいのではないかと思います。 非同期処理については前に解説しましたし、thisの解説はネットに大量に転がってるので、今回はコールバック関数について解説します。 コールバック関数ってなんなんだ コールバック関数というとsetTimeoutなんかで使われるアレですね。Node.jsでもたくさん使われます。setTimeoutだと以下のような使い方になります： setTimeout(function() { console.log('He

ベーシックアドベントカレンダー22日目です。 8日ぶり3回目の@tkhrです。 画像の遅延読み込みライブラリ比較の話です。 LPの高速化のために遅延読み込みを導入します。 対象になるLPは広告からの流入で表示するページになります。 なのでユーザの熱を冷まさせない工夫が必要ですね。 そのための工夫の一つとして今回は画像の遅延読み込みに対応します。 画像ならキャッシュがあるじゃん。と言えるかもしれませんが、広告LPなので初めてのユーザが大半なのでアテにできませんね。 なので遅延読み込みによってファーストビューが表示されるまでの時間を短縮することが狙いとなります。 遅延読み込みとは ページにアクセスした時には画像の読み込みはせず、必要になった時に画像を読み込みます。 必要になった時というのは、その画像が表示される時ですね。 それによってページにアクセスした時の読み込み時間を短縮できるので、ユーザ

HTML5 においては、<script> タグに、defer や async 属性を付与することで、これらの読込が HTML パースを妨害しないようにすることができます。これにより、サイトのメインコンテンツの読込がある程度高速化されます。 async にせよ defer にせよ、それほど詳細に動作を解説した記事が見つかりませんでしたので、本記事では、これらの動作について解説します。 イベントについて まずは、async と defer の挙動を理解するために重要な、2つのイベントについて理解しましょう。 両者とも、MDN に十分な情報があるため、本記事ではそれほど詳細には解説しません。 DOMContentLoaded HTML のパースが完了した直後に発火します。 MDN load HTML のパースが完了し、CSS や画像などのダウンロードと表示、JavaScript ファイルのダウン

var xmlHttpRequest = new XMLHttpRequest(); xmlHttpRequest.onreadystatechange = function() { if( this.readyState == 4 && this.status == 200 ) { if( this.response ) { console.log(this.response); // 読み込んだ後処理したい内容をかく } } } xmlHttpRequest.open( 'GET', 'ここにURL', true ); xmlHttpRequest.responseType = 'json'; xmlHttpRequest.send( null );

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

###value - 0### 数値演算のオペランドに文字列値を書くと、暗黙に数値に型変換されます。（+は文字列連結として扱われる） そのため、value - 0 ではnumが暗黙の型変換によって数値になりますが、0を引いても数値は変わらないため型変換だけが行われることになります。 ###+value### また、+演算子を単項演算子で使用すると、正の符号演算になります。正の符号演算で数値型への型変換が行われるので、+value とだけ記述すると、結果的に数値型への型変換のみを行います。 ---- 2015/05/14追記 ---- +valueに関して Airbnb JavaScript Style Guideによると +valueは //badとなっておりましたので、parceInt()やNumber()を使用するのが良さそうです。 しかし、全てが同じ挙動をするわけではなく、それぞれ微

親ページ内からiframe内を操作したり、逆にiframe内から親ページを操作する方法をメモ。 要素の操作をする 必要箇所だけ抜粋していますので、詳細はデモページでご確認ください。 HTML(親ページ) <div id="oya"> <input type="text" /><button>実行</button> <div id="oya-result">結果がここに反映されます。</div> </div> <iframe id="child-frame" src="child.html"></iframe> HTML(子ページ) <div id="ko"> <p>子</p> <input type="text" id="" /><button>実行</button> <div id="ko-result">結果がここに反映されます。</div> </div> JavaScript(親ペー

自分用メモです。 戻るボタンが押された際、ページのJavaScriptを途中の状態から実行させない方法 まず、 B.html から「戻る」をしたときに、（s1 ではなく） s3 の状態になってしまうのは、Back Forward Cache というブラウザの機能によるものでした。 任意のページで予め、 のように window.onunload に空の関数を代入すると、 Back Forward Cache が機能しなくなるようです。 また、 Back Forward Cache が発生した場合（戻るで s3 に到達した場合）であっても、pageshow イベント（ window.onpageshow ）が呼ばれるようです。 onunload を書き換える以外にも、 onpageshow を書き換えてそこで処理を行なったり、onpageshow イベントが発火して呼ばれる関数内で event