概要 テンプレート文字列を記述できる構文が実装された。 テンプレートリテラル 基本の使い方 バッククオート『 ` 』で囲んだ文字が、文字列リテラル同様に文字列として評価される。 var t = `テンプレート` var s = "テンプレート" console.log(t) // "テンプレート" console.log(t == s) // true 改行がそのまま認識される。 var t = `テンプ レート` var s = "テンプ\n"+ "レート" console.log(t) // "テンプ⏎レート\t" console.log(t == s) // true 文字列中に変数などを埋め込む リテラル中の『${』と『}』で囲まれた部分は式として評価される。 var n = 123, f = () => 339 var t = `0${ n }45${ f() * 2 }9` v

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

引っ越し前のサイトから移植しました。 文字列の切り出しっていつも迷うよね。 実際にスクリプトを動かして確認してみよう。 slice 文字列.slice(開始位置 [,終了位置] ) 開始位置と終了位置を指定。終了位置は省略可能。 省略すると最後まで切り出す。 終了位置は、末尾が0になる。 開始位置をマイナス値にすると、後からの桁数になる（右端のみ切り出せる）。 <例> str.slice(3); //"3456789" str.slice(-2); //"89" str.slice(3, -1)); //"345678" var str = "0123456789"; str.slice( , ); strの内容 : 結果 substr 文字列.substr(開始位置 [,切り出す長さ] ) 開始位置と切り出す長さを指定。長さは省略可能。 省略すると最後まで切り出す。 開始位置をマイナス値

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2016年8月⁩. Learn more See full compatibility Report feedback 構造分解（destructuring、旧：分割代入）構文は、配列から値を取り出して、あるいはオブジェクトからプロパティを取り出して別個の変数に代入することを可能にする JavaScript の構文です。これは、データを受け取る場所（代入の左辺や、新しい識別子バインディングを作成する場所ならどこでも）で使用できます。

const map1 = new Map(); map1.set("a", 1); map1.set("b", 2); map1.set("c", 3); console.log(map1.get("a")); // Expected output: 1 map1.set("a", 97); console.log(map1.get("a")); // Expected output: 97 console.log(map1.size); // Expected output: 3 map1.delete("b"); console.log(map1.size); // Expected output: 2 Map オブジェクトは、キーと値のペアのコレクションです。Map のキーは一度しか出現しません。Map の集合の中で一意です。Map オブジェクトはキーと値のペアで反復処理されます。f

/** * 1～10の繰り返し処理 */ var i = 0; while (i < 10) { console.log(i++); } /** * 配列の繰り返し処理 */ var array = ['a', 'b', 'c', 'd', 'e', 'f'], i = 0, len = array.length; while (i < len) { console.log(array[i++]); } /** * イテレータの繰り返し処理 */ var mapIterator = new Map([[0, 'a'], [1, 'b'], [2, 'c'], [3, 'd'], [4, 'e']]).entries(), iteratorResult; while (iteratorResult = mapIterator.next(), !iteratorResult.done) { c

#はじめに JavaScriptで配列やオブジェクトをループする時どのように書きますか？ シンプルにfor文？ Array.forEachを使う方法もありますね。 あるいはES6から取り入れられたfor-of文でしょうか？ ただこうしたいくつかの方法がある中、僕が以前思ったのは 「で、結局何が良いんだってばよ？？(￣へ￣|||)」ということです 単なる文法の違いでどれでも良いのか？それともリスクやパフォーマンスがそれぞれ違ったりするだろうか・・？ その疑問の答えを出すために、ループの各手法を主にリスク・パフォーマンスの面で比較・調査して「配列やオブジェクトをループする良い方法」の結論を出してみました。 もし良ければ参考にしてみてください。 #どんなループ方法があるか まず配列とオブジェクトそれぞれでどんなループ方法があるかを挙げます。 ※jQueryやUnderscore.jsでのループ方

ES2016 Specifications included the includes() method for Array data structure. The includes() method check if an array includes a certain element, returning true or false as appropriate. But in ES5 we are used to performing operations like this with indexOf() method. Using includes() method. const array = [1,2,3,4,5,6]; if(array.includes(4) ){ console.log("true 4 was found in the array")// tru

標準組み込みオブジェクトStringコンストラクターString() コンストラクター静的メソッドString.fromCharCode()String.fromCodePoint()String.raw()インスタンスメソッドString.prototype.anchor() 非推奨; String.prototype.at()String.prototype.big() 非推奨; String.prototype.blink() 非推奨; String.prototype.bold() 非推奨; String.prototype.charAt()String.prototype.charCodeAt()String.prototype.codePointAt()String.prototype.concat()String.prototype.endsWith()String.prot

NaN はグローバルオブジェクトのプロパティです。言い換えれば、グローバルスコープにある変数です。 NaN の初期値は非数であり、 Number.NaN の値と同等です。最近のブラウザーであれば、 NaN は設定、書き込みがともに不可能なプロパティとなっています。そうでない場合であっても、オーバーライドは無効となります。プログラムの中で NaN を使用するのは、むしろまれなことです。 NaN を返す演算には 5 種類があります。 数値が解釈できない (例えば parseInt("blabla") または Number(undefined)) 結果が実数にならない数学演算 (例えば Math.sqrt(-1)) オペランドが NaN である (例えば 7 ** NaN) 不確定形 (例えば 0 * Infinity または undefined + undefined) 文字列が関わる加算以外

皆さんこんにちは。今回の記事ではJavaScriptの等値比較について見ていこうと思います。 「どうせ==と===の違いとかだろ？　今さらそんな記事書くなよバーカｗ」と思った人はぜひ期待せずに読み進めてみてください。 「じゃあObject.isでしょ？　知ってる知ってる、使ったことないけど」と思った人はまあ読まなくても大丈夫です。 さて、等値比較というのは、2つの値が等しいかどうか判定することです。JavaScriptにおいて等値比較はどのように行うのか、そしてどのような場面で等値比較が発生するのかをこの記事では余すことなく紹介します。 以降、この記事で仕様書という場合はECMAScript® 2018 Language Specificationを指すものとします。 ==と=== とはいえ、まずは==と===の話をしないことには始まりません。==はJavaScript初心者がとりあえず習

概要 今風の手法でJavaScriptアプリを作ろうとすると色々ツールがあって便利な反面、複雑でわからないことがたくさんあります。 わからないことがあったら、それを放置せず、しっかり理解して大いに寄り道しつつブラウザで動作するJavaScriptアプリをゼロから作っていきます ブラウザ上で動作するフロントエンドアプリを作ったら、ライブラリ化してnpmモジュールとして公開します 対象読者＝今風のJavaScript開発の入門者、初心者 11年前からタイムトラベルしてきたひと ブラウザ用アプリを作りたいが今風の手法の初心者(jQueryだけでなんとか生きてきた人とか） Node.jsの環境をつかってフロンドエンドアプリかいているけど、「何となく」理解している人 来年の新人教育係 キーワード 本投稿では、以下のようなキーワードが出てきます。 Node.js、npm、ES6(ECMAScript6

JavaScript Promiseの本という無料で読める電子書籍を書きました。 タイトルそのままで、JavaScriptのPromiseについて書いた書籍です。 書籍の目的 この書籍を読むことで学べる事として、次の3つを目標にして書きました。 Promiseについて学び、パターンやテストを扱えるようになる事 Promiseの向き不向きについて学び、何でもPromiseで解決するべきではないと知る事 ECMAScript6 Promiseの基本をよく学び、発展した形を自分で形成できるようになる事 Promiseは、次のECMAScriptの言語仕様として策定が進められていて既に多くのブラウザに実装されています。 Promiseについて扱う書籍ですが、この機能はjQuery.Deferred()やAngularJSの$qやBluebird等の類似の機能が既にあるため扱ったことがあるかもしれま

今後必要になるプログラム言語を読む前提知識 時代背景と当時の知識がないと読むのが非常に難しいので、僕の知っている範囲内の前提知識を書いておこうと思います。 当時の背景 当時というのは、ここでは 2000 年前後の Java 黎明期を指します。 僕個人で言えば PostPet 2001 などの開発に携わっていた頃のことです。 この少し前にインターネットの世界ではウェブブラウザが誕生しました。 そして、元々はセットトップボックス用に開発された言語 Java (Oak と呼称されていた)も開発されていました。 誕生間もない Java と誕生間もないウェブブラウザが出会うのは必然だったかもしれません。 この２つが出会ったことで、ウェブブラウザ上に動的なコンテンツを表示する Java Applet という技術が誕生しました。 Netscape Communications と Sun Microsy

結果はどうなったでしょうか。 自分が今使っているGoogle Chromeだとこうなりました。 結果は{a: 10}というオブジェクトです。まあ、これは当然ですね。3 + 5と入力すれば実行されて8が返ってくるのですから、{a: 10}というオブジェクトリテラルを書けば{a: 10}というオブジェクトが作られるのは当然です。 ……。 ここで、一部の人は「おいふざけんなよ」と思っているかもしれません。というのも、この例は環境によっては違う結果になるのです。具体的には、Chrome以外2のブラウザのREPL（FirefoxやEdgeなど）が該当します。あと、ts-nodeのREPLも該当するらしいです。これらの環境では、結果は{a: 10}ではなく次のようになります。 オブジェクトを作ったはずなのに結果が10とか意味不明ですね。そもそも、こんな簡単なプログラムで結果が全然違うとか、JavaSc

いい加減配列のループにはArray#forEachを使っていきたいと思っています。 通常の配列であれば下記のような感じ。 var array = ['暁', '響', '雷', '電']; array.forEach(function(val, i) { console.log(i, elmval; }); /* ↓ 出力 0 "暁" 1 "響" 2 "雷" 3 "電" */ 連想配列をforEachでループさせる しかし連想配列(オブジェクト)の場合 var obj = { first: '暁', second: '響', third: '雷', fourth: '電' }; obj.forEach(function(val, key) { console.log(key, val); }); // => Uncaught TypeError: obj.forEach is not a

現在 侍エンジニア塾が大炎上 していますね。 自分はもともと侍でお仕事させて頂いていたこともあり、中の人の知り合いも何人もいたりします…。 だからこそ、炎上及び その後の対応にブチ切れてしまった ので、ブログに経緯と心境、今後取ってほしい対応をまとめておきます。 正直、胸が苦しすぎて昨日から仕事どころじゃなかったよ…。 ほんとに…。 こんなにストレスで動悸が激しくなったの久々だよ…。 多分、侍の知り合いもこれ読むだろうけど、むしろ読んで反省しやがれください。 ひっさびさのブログ更新がこんなネタとは…。 引用元： 侍エンジニア塾マンツーマンコースのご案内 権利者： 株式会社侍 侍エンジニア塾の炎上の経緯 炎上の発端 【10/12 (金) 18:36】侍への指摘が入る 炎上後の経緯 【10/13 (土)】炎上を確認した為一旦該当のバナーを外す 【10/15 (月)】企業サイトのTOP下部に謝罪

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017. Learn moreSee full compatibilityReport feedback

JavaScriptを書くにあたって、未だにブラウザによっては存在しない機能を考慮せざるを得ない状況が続いています。そこで取る対策として、PolyfillとPonyfillがあります。 気の抜けない、ブラウザごとの差 最近でこそブラウザは強制バージョンアップするものが増えてきましたが、もはやバージョンアップすることのないIE 11、そしてOSとセットでしかアップデートできないiOSのSafariなど、常に最新といかない環境も残り続けています。さらに言えば、JavaScript自体もECMA 201xというように、毎年バージョンアップし続けるので、ブラウザごとにそれをキャッチアップできるタイミングも違ってきます。 ということで、どこまで行っても「ブラウザごとの実装差」は残り続けることとなってしまいます。 Polyfillのメリットと欠点 Polyfillとは、「標準となったメソッドが存在しな