タグ

javascriptとES6に関するnyangryのブックマーク (7)

  • ECMAScript6にシンボルができた理由

    Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? ECMAScript6 (ES6, ES2015) で導入された新機能の大半は、読めば便利さが想像くらいはできるけど、自分にとってしばらく訳がわからなかった新機能が「シンボル」(MDNのリファレンス)。これまで文字列だけで上手くやってきたJavaScriptに、急になぜこんなものが導入されたの? イマイチ分からなかったので、調べたことのまとめ。 シンボルの簡単なおさらい 知ってる人は読み飛ばし推奨。詳しく見たい人は、こことかの他のページを参照。 ES6で導入された、 Symbol() で作成できる特殊な値。 Symbol() は、 ty

    ECMAScript6にシンボルができた理由
  • テンプレートエンジン不要?JavaScriptで文字列処理を簡潔にするTemplate literal

    テンプレートエンジン不要?JavaScriptで文字列処理を簡潔にするTemplate literal 高津戸壮(株式会社ピクセルグリッド) これまでのJavaScriptでは、複雑な文字列処理はテンプレートエンジンを使うことが一般的でした。しかしECMAScript 2015(ECMAScript 6)では、パワフルなTemplate literalが標準で利用できるようになりました。この新たに追加されたTemplate literalについて、概要とサンプルコードを紹介します。 これまでの文字列組み立て ES6で追加されたTemplate literalを使うと、文字列をより柔軟に、シンプルに組み立てることができます。例えば、これまでのJavaScriptでは、文字列を組み立てるために、例えば以下のような方法を取る必要がありました。 var name = 'john'; var cou

    テンプレートエンジン不要?JavaScriptで文字列処理を簡潔にするTemplate literal
  • JavaScriptにもクラスがやってきた!JavaScriptの新しいclass構文をマスターしよう

    JavaScriptにもクラスがやってきた!JavaScriptの新しいclass構文をマスターしよう 高津戸壮(株式会社ピクセルグリッド) ECMAScript 2015(ECMAScript 6)で新たに追加された待望のclass構文について、その概要をサンプルコードを交えて紹介します。 これまでのJavaScriptにおけるクラス 多くのプログラミング言語はクラスを作れる機能を持っていますが、JavaScriptにその機能は用意されていませんでした。しかし、JavaScriptにはprototypeという柔軟な仕組みが存在しており、このprototypeを利用することで、他の言語で表現されている「クラス」と似たような振る舞いを再現することが可能でした。 それは例えば、こんなふうにです。 /* Cat雛形の作成 */ function Cat(name) { this.setName(

    JavaScriptにもクラスがやってきた!JavaScriptの新しいclass構文をマスターしよう
  • ES5で書かれたライブラリをES6に書き換える手順

    textlint 3.6.1でコードベースをES6に書き直して、特に問題無く動いてるっぽいのでどういう手順で書き換えたかについての話。 Release Moving to ES6 · azu/textlint 具体的な作業は以下に残ってます。 Move to ES6 · Issue #11 · azu/textlint to ES6 by azu · Pull Request #27 · azu/textlint 事前準備 テストを書く テストが書かれてると変換した時にエラーがスグ発見できるのでカバレッジが高いテストがあると安心して変換出来ます。 面倒な時はExampleテストを追加してみるといい気がします。 npmパッケージをExampleテストしよう | Web Scratch そのライブラリのユースケースを考えて幾つかのパターンを実行出来るExampleテストを作っておくと、普通に実

    ES5で書かれたライブラリをES6に書き換える手順
  • React.js – アカベコマイリ

    前回、音楽プレーヤーを作成したのだが、もうすこし機能を盛り込みたくなった。せっかく Spectrum を取得しているのだから Analyzer 表示がほしい。ジャケット画像も表示できたら更によし。 というわけで、これらの実装と Electron 的な考察などをまとめてみる。 シリーズまとめ – Electron を試す もくじ Spectrum Analyzer ジャケット画像の取得と表示 Artist & Album View userData のディレクトリ名 サンプル プロジェクト Spectrum Analyzer 前回、というより元となった nw.js を使ってみる 5 – 簡易音楽プレーヤーのサンプル時点で既に音声の Spectrum 取得は実装されていたのだが、UI を決めかねていた。専用のスペースを作るのか、それとも Electron なので専用ウィンドウを個別に表示するの

  • テストを考慮した singleton の ES6 export

    テスト時の singleton を避けたい export facebook/flux のサンプル準拠だと、Store や Dispatcher が singleton でテストを書きづらいことがあるので、普段使う singleton インスタンスと、テストで使う class オブジェクトを両方 export した。 import AppDispatcher, {Action, Payload} from '../dispatcher/AppDispatcher'; import * as Events from 'events'; const CHANGE_EVENT = 'change'; // 生クラスの export export class AcmeStore extends Events.EventEmitter { dispatchToken: string; construc

    テストを考慮した singleton の ES6 export
  • Understanding ECMAScript 6: Class and Inheritance — SitePoint

    Stay Relevant and Grow Your Career in TechPremium ResultsPublish articles on SitePointDaily curated jobsLearning PathsDiscounts to dev toolsStart Free Trial7 Day Free Trial. Cancel Anytime. Key Takeaways ES6 allows developers to simulate classes and inheritance with JavaScript, a prototype-oriented language, facilitating the creation of large applications for the web. ES6 introduces new semantics

    Understanding ECMAScript 6: Class and Inheritance — SitePoint
  • 1