ES6でJavascriptが簡単にかける！便利な追加機能とは？ - Qiita
ES6とは ES6とは、ECMAScriptのバージョン6のことです。 現在では標準化され、正式にはES2015と呼びます。 ECMAScriptとは、、Javascriptの仕様、ルールのようなものです。 ES6から加わった機能 constとlet 今まで変数宣言はvarだけで行っていました。 しかし、新しく以下の2つが追加されました。 let :再宣言NG const :再宣言NG再代入NG 変数のスコープ var :関数内 let :ブラケット{}のブロック内 const :ブラケット{}のブロック内 関数functionのスコープもブロックスコープになっています。 セミコロンは要らない？ 文の最後は区切りとして、セミコロンを付けることが一般的でした。 しかし、ES6ではセミコロンがなくても正常に動くようになりました。 即時関数をブロックスコープで 即時関数ってこんなもの。
ES2015(ES6) 入門 - Qiita
はじめに 今更ですが、ES2015(ES6)で追加された機能や構文に関する備忘録です。 「JSは書けるけどES2015(ES6)はわからないっす...!」といった人達向けの記事です。 入門記事のためイテレータやジェネレータ等のわかりづらかったり、 説明が長くなりそうな機能や構文は割愛しております。 ES2015(ES6)とは ECMASCriptの6th Editionのこと。ECMAScript 6th editionの6を取ってES6と呼ばれていたが、 2015年に標準化されたため正式名称はES2015になった。 正式名称がES2015ならES6という名称を使うのは間違いなのか どちらの名称でも問題はない。 ES6の名称の方がエンジニアコミュニティに中では浸透しているらしく、ES6と記載されていることが多い。 詳細は以下を参考。 ES6 or ES2015 ? 〜WEB+DB PRES
ES6のPromiseの基本を考えてみた - Qiita
１．Callbackパターン 以下がcallbackのみを使ったパターンです。readFileのCallbackの中でwriteFileを呼んでいます。writeFileのCallbackの中で最終的な処理の成否がわかります。 const fs = require("fs"); fs.readFile("ttt.txt", (err,contents) => { if(err) { console.log(err); return; } fs.writeFile("ttt2.txt", contents, (err) => { if(err) { console.log(err); return;} console.log("書き込み成功！"); }) }) このパタンの悪いところは、処理が長くなるにつれてCallbackの入れ子が深くなり読むに堪えないコードになっていくことです。今回は2
FN1710004 | Vue.js + ES6: グリッドコンポーネントをつくる | HTML5 : テクニカルノート
ID: FN1710004 Technique: HTML5 / ECMAScript 2015 Library: Vue.js 2.5.2 Vue.jsサイトの「グリッドコンポーネントの例」は、コンポーネントの使い方を知るのによい作例です。 これをECMAScript 2015(ECMAScript 6)の構文でつくってみます(サンプル001)。とくに、データのコレクション(リスト)は、Arrayクラスの新しいメソッドとアロー関数式で扱うようにしました。Vue.jsについては、すでに入門ノートを何本か書いています。これらノートやVue公式サイトの情報は必要に応じて本文に引用しましたので、詳しく知りたい場合にはそちらをお読みください。 サンプル001■Vue.js + ES6: Grid component with sort and search See the Pen Vue.js +
D3.jsでアロー関数を使う時の注意点 - Qiita
既存のD3.jsのコードをアロー関数で置き換える際に変な動作を起こしてしまったのでメモしておきます。 追記 (2020/08/29) 2020年8月にリリースされた D3 v6 ではイベントリスナの書き方が変わりました。 詳しくは D3 v6 アロー関数使用時の移行ガイドへ。以下は v5 以前のコードとなります。 D3.jsでは、DOMにイベントを与えるselection.on(typenames, listener)で、イベントリスナ内でそのDOMを選択したいときにthisを使うことが多いです。 例えば、以下のようなコードがよく使われます。 d3.selectAll("rect") .data(data) .enter() .append("rect") .attr("x", function(d) {return xScale(0);}) .attr("y", function(d)
Airbnb JavaScript Styleの気になる点のメモ - Qiita
再度、AirbnbのJavaScriptスタイルを読んだところ、気になる点をメモします。 Airbnb JavaScript Style object-shorthand メソッドの記載にfunctionが要らない // bad const atom = { value: 1, addValue: function (value) { return atom.value + value; }, }; // good const atom = { value: 1, addValue(value) { return atom.value + value; }, }; const anakinSkywalker = 'Anakin Skywalker'; const lukeSkywalker = 'Luke Skywalker'; // bad const obj = { episodeOn
ECMAScript6で書こう！WebPackとES6-loaderで環境を作り、ES6を先取り体験する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。私事ですが、サイトリニューアルに伴いあだ名が変わり、「先生」となりました。（元博士） 降格になった訳ではありません。馴染まなかっただけです。 さて、ES5のブラウザ対応も広まり、ES6の話題がちらほらと出始めました。 ES6ではClassやConstが加わることとなり、これまでのJavaScriptの書き方も変わってくることでしょう。 というわけで早速ES6でコードを書いてみたいと思いますが、普通に書いたのでは動かないブラウザが多数です。 そこで本日は、WebPackとES6-Loaderを使い、ES6で書きつつもES5にコンバートさせていく手順を紹介したいと思います。 インストールの前に開発ディレクトリを作ります。今回はこんな感じにします。 /es6 ┣ /node_modules ┣ /source ┗ package.json Node.js npmが使える状態になってい
ES2015再入門 - Qiita
ES2015とは？ 将来的にはブラウザに対応される予定の 「今までのJS(ES5)に様々な機能が追加された新仕様」 のこと。 ES6とも言ったりします。 現在は一部のみ（Chromeは対応）で機能が実装されていたり、されていなかったり。 Babelのドキュメントに機能の一覧がまとめられています。 https://babeljs.io/docs/learn-es2015/ BABELって？ ES2015仕様のJavascriptをES5仕様に整形するツール です。 ES2015に対応していないブラウザのために、 「ES2015の記法で書いたコード」 => 「ES5」 としてくれる。 対応していないんなら必要ないのでは？ 将来的にはブラウザに実装されていく ものなので、今から使って慣れておいた方がよさそうです。 ES2015で書いてみよう ES2015についてのチュートリアルがあったのでやって
ECMAScript6の新機能 - Qiita
以下はGithubで2万☆を獲得している、Overview of ECMAScript 6 featuresというコンテンツの日本語訳です。 Introduction ECMAScript2015とも言われているECMAScript6は、ECMAScript標準の最新バージョンです。 ES6は、2009年に標準化されたES5以来、初めての重要なアップデートになります。 主要なJavaScriptエンジンにおいて、現在これら新機能の実装が進行中です。 ES6の完全な仕様については、ES6 standardを参照してください。 ES6には、以下のような新機能が含まれています。 ECMAScript 6 Features arrows アロー=>は、functionの省略表記で、C#、Java8やCoffeeScriptのアローと似たような構文で書けるよ。 式と文どちらの書き方もサポートするよ。
【webpack】(現時点で)ES2015 (ES6)のままminifyする方法 - Qiita
※この記事は2017年6月に書いた記事です。 【webpack】(2018年2月25日現時点で)ES2015 (ES6)のままminifyする方法を新しく書いたのでこちらを参照したほうが幸せになれると思います。 こちらの結論は、webpackv4.0.0使えということになります。 残念ながらwebpackv4.0.0には出来ないという方は、 【webpack】(2018年1月現時点で)ES2015 (ES6)のままminifyする方法も書いているので参照されると幸せになれると思います。 以下、記事の概要です。 今（2018年1月）はuglifyjs-webpack-pluginを個別にインストールして （webpackからuglifyjs-webpack-pluginへの依存だとバージョン古いので） uglifyOptions: {ecma: 6}等のオプションをつけるのがスマートな様子で
JavaScript のもう一つの「関数名」 —— name プロパティ - Qiita
「関数名」と name プロパティ JavaScript において「関数名」あるいは「メソッド名」というと何を指すでしょうか。 関数オブジェクトを参照している変数名やプロパティ名を指すことが多いと思います。 しかし、もう一つ「関数の名前」と言える物として、関数オブジェクトの name プロパティがあります。 これは関数オブジェクトの生成時に決定される、文字列のプロパティです。 function foo() { // do something } let bar = foo let baz = foo let qux = [foo, foo] console.log( foo.name ) // 出力 -> "foo" console.log( bar.name ) // 出力 -> "foo" console.log( baz.name ) // 出力 -> "foo" console.l
ECMAScript 2015 の分割代入は奥が深かった - Qiita
はじめに 配列やオブジェクトの個々の値を各々の変数に代入する事ができる「分割代入」というのが登場しました。 結構便利そうではありますが、具体的にどのような事ができるのでしょう。 ECMAScript 2015 (ES2015 / ES6) にまだ慣れない人向けと、自分のためのメモとして置いておきます。 基本編 おそらく一番使うであろう書き方です。 配列 通常、配列から値を取り出すときはインデックス（添字）を指定してやらなければいけませんが、分割代入ではまとめて変数に代入できるので便利です。 /* 一個ずつ取り出す場合 */ var individuals = ['早坂美玲', '森久保乃々', '星輝子']; var cute = individuals[0], cool = individuals[1], passion = individuals[2]; console.log(cut
ES6 Proxy をつかって堅牢なオブジェクトをつくるTips
What is Proxy The Proxy object is used to define custom behavior for fundamental operations (e.g. property lookup, assignment, enumeration, function invocation, etc). オブジェクトをラップし、オブジェクトが持つ基本的な機能(obj.keyと書いてvalueを取得する機能など)を上書くことができるのがProxy Objectです。 (高機能なオブジェクトを生成することができる、けっこうイカした仕様だと思います😋) つかいかた 詳細な用法やパラメータの説明は MDNに任せるとして、基本的なSyntaxだけ記します。
ES2016 / ES2017の最新動向を追ってみた - Qiita
今回はES2016で実装された2つの仕様と、ES2017以降で実装されるであろうStage 4の仕様の紹介をしていきたいと思います。 Array.prototype.includes() 配列内に求めている値が入っているかをtrue or falseで返しています。 今までの値チェックの方法はindexOf()とか使って値が入っているかどうかを確認していましたが、正直-1を返すとかが若干ややこしかったので返ってくる値がboolean型なのは可読性がぐっと上がるだろうなと感じたので、今後はこれを使っていこうと思いました。 const arr = ['hoge', 'fuga', 'piyo']; console.log(arr.includes('hoge')); // true console.log(arr.includes('hogera')); // false
ES6の新機能: 「let」「const」宣言を調べてみた - Qiita
JavaScript はES6によっていろいろと機能が充実することになっているのですが、classとかgeneratorとかがよく取り上げられていると思っ立てたので、てっきりこれだけだと思ったのですよ。 まさか他にも機能があるとは。。。 というわけで、あまり話題に登っていないように見える新機能。。。というか新宣言について調べてみました まさかの記事書きで年越すとは・・・ 宣言が追加されてた！ JSの宣言文といえば、「var」しかなかったのですが、なんとES6にて、「let」「const」が追加されていたようです。 いまのところ、'use strict'を使わないと動きませんでした。 let ・・・ 「再宣言」が不可 まずは「let」宣言です。 こいつは端的にいうと、「再宣言ができない」宣言です。 簡単な例を以下に示しています。 'use strict' var spam = 12;// 当
今年のうちに知っておきたい！ES2017に入る5つの新仕様 - エンジニアをリングする
はいっ Goodpatch Advent Calendar 2016 5日目です！ 2016年もまもなく終わりますね。 あと半年もすればES2017のリリースですね！ というわけで先月Node学園祭でご紹介したES2017の新仕様をブログにおこしておさらいしてみようと思います！ ES2017に入る5つの新仕様 Object.values / Object.entries String padding Object.getOwnPropertyDescriptors Trailing commas in function parameter lists and calls Async Functions https://github.com/tc39/proposals/blob/master/finished-proposals.md 1. Object.values / Object.e
Ecmascript2015とその周辺について
この資料では、JavaScript でオブジェクト指向プログラミングを行う際に備えておくことが望ましい、基礎知識や概念について解説します。 【対象者】 ・JavaScript でアプリケーションを構築できる方 ・JavaScript におけるオブジェクト指向プログラミングの 実現手法や原理への理解を深めたい方 ・Java 的なクラスベースの言語との違いに違和感や混乱を 感じてらっしゃる方
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to Use ES2015 Today with Babel and Gulp | Constant Contact Tech Blog
babel-plugin-transform-es2015-template-literals · Babel
ES5とES6の違いをまとめてみた(メモ) - Qiita
