最新のJavaScript機能の概要

JavaScriptは、おそらく最も有名なマルチパラダイム言語であり、多くの明白でない機能があります。 それにもかかわらず、私たちが彼を愛していようが、彼を、ろうが、これが現代のウェブが機能する主要言語であるという事実は残っています。



昨年、ECMAScript 2015標準(非公式にはES6)が発表されました。 本質的に既存の問題を解決しようとしている言語の最新のスーパーセットを表す多くの新しい機能が登場しました。 クラス、let、const、arrow関数... ES6で記述されたコードを以前に見たことのない開発者は、実際には自分の目の前が古き良きJSであることにすぐには気付かないでしょう。



現代の標準に関する素晴らしい記事がたくさんあります。 同じ投稿で、緊急の問題を解決する必要があるときに現代のJSが提供できるものを示したいと思います。 たとえば、皆さんに明けましておめでとうございます。



命令的アプローチ



最も簡単な解決策は、すべてを命令的に実行することです。 はい、確かに、「少ないほど多い-多いほど少ない」という原則に従う場合、これが最も実用的なソリューションになります。



function sayHappyNewYear(year){ console.log('Happy New ' + year + ' Year!'); } sayHappyNewYear(2016);
      
      







ソリューションはシンプルで、コンソールオブジェクトの実装があるすべての環境で機能しますが、問題があります。新年だけでなく、他の多くの休日もあります。 休日ごとに独自の機能を作成することは、あまり合理的な仕事ではありません。 メッセージを均一にフォーマットする必要がある場合、メッセージフォーマットを変更する場合、すべての関数で対応するコードを変更する必要があります(はい、記事の例は少し人工的であることが判明しました)。 もちろん、フォーマットに関連するすべてを別の関数formatMessage()に入れて、すべての関数にお祝いの言葉を渡すことができます。 しかし、まず、OOPを使用してサブジェクト領域を反映し、この状況でJa​​vaScriptがどのように役立つかを見てみましょう。



オブジェクト指向アプローチ



JSでは皆さんもご存知のように、プロトタイプベースの継承を使用してオブジェクト指向スタイルで記述できます。



 function Greeter() {} Greeter.prototype.doGreeting = function(msg) { console.log(msg); } function NewYearGreeter(currentYear) { this.currentYear = currentYear; } NewYearGreeter.prototype = Object.create(Greeter.prototype); NewYearGreeter.prototype.constructor = NewYearGreeter; NewYearGreeter.prototype.doGreeting = function() { var year = this.currentYear + 1; var newYearMsg = 'Happy New ' + year + ' Year!'; Greeter.prototype.doGreeting.call(this, newYearMsg); } var newYearGreeter = new NewYearGreeter(2015); newYearGreeter.doGreeting();
      
      







かなり冗長なソリューションであることが判明しました。さらに、このコードはすべての最新のランタイム環境(ブラウザー、Node.js)で機能します。 ES6のオブジェクト指向アプローチの実装が冗長であるため、C ++、Java、C#、Pythonなどを知っているプログラマーに馴染みのあるクラスが登場しました。 ES6クラスを使用する場合、上記の例は次のようになります。



 'use strict'; class Greeter { doGreeting(msg) { console.log(msg); } } class NewYearGreeter extends Greeter { constructor(currentYear) { super(); this.currentYear = currentYear; } doGreeting() { let year = this.currentYear + 1; let newYearMsg = 'Happy New ' + year + ' Year!'; super.doGreeting(newYearMsg); } } let newYearGreeter = new NewYearGreeter(2015); newYearGreeter.doGreeting();
      
      







すでにきれいに見えます。 しかし、ご存知のとおり、JSのクラスをめぐる多くの論争がありました。 この革新には熱烈な反対者がいました。 一般に、彼らの立場は明確でした-長期的には、PLOは「ゴリラとバナナ」の問題を引き起こします。



オブジェクト指向言語の問題は、暗黙の環境をすべて持っていることです。 あなたはバナナが必要でした-そして、あなたはバナナとさらにジャングル全体でゴリラを手に入れました。

職場でのジョーアームストロングコーダー


したがって、クラスの複雑な分類を簡単な方法で作成することを可能にした言語ツールは、反対側から敵意をもって認識されました。 なるほど、クラスは今や言語の標準であり、それを使用していますが、狂信的ではありません。



さて、継承が接続の問題を引き起こす場合、代替手段は何ですか? 構成。



クラス継承よりオブジェクト構成を優先する

Gamma、Helm、Johnson、Vlissids「オブジェクト指向設計技術。 デザインパターン。


JSでは、構成はさまざまな方法で実装できます。 すべての最新のランタイム環境で機能する1つのソリューションを次に示します。



 function extend(destination, source) { for (var key in source) { if (source.hasOwnProperty(key)) { destination[key] = source[key]; } } } function Greeter() { this.doGreeting = function(msg) { console.log(msg); } } function NewYearGreeter(year) { this.year = year; this.doNewYearGreeting = function() { var newYearMsg = 'Happy New ' + this.year + ' Year!'; this.doGreeting(newYearMsg); } } var greeter = new Greeter; var newYearGreeter = new NewYearGreeter(2016); extend(newYearGreeter, greeter); newYearGreeter.doNewYearGreeting();
      
      







この例では、コンストラクターを使用して、拡張サービス関数を使用してプロパティ(メソッド)が1つのエンティティ(newYearGreeterオブジェクト)にコンパイルされるオブジェクトが作成されます。 最新の標準により、Object.assign()を使用して構成の実装を簡素化できます。



 'use strict'; let greeter = { doGreeting(msg) { console.log(msg); } }; let newYearGreeter = { setYear(year) { this.year = year; }, doNewYearGreeting() { let newYearMsg = 'Happy New ' + this.year + ' Year!'; this.doGreeting(newYearMsg); } }; Object.assign(newYearGreeter, greeter); newYearGreeter.setYear(2016); newYearGreeter.doNewYearGreeting();
      
      







Object.assign()は基本的に拡張と同じことを行いますが、「そのまま」使用でき、任意の数のオブジェクトを作成できる点が異なります。



これが問題のオブジェクト側です。 ただし、JSは関数型プログラミングツールも提供します。



機能的なスタイル



このアプローチの特徴は、オブジェクトを操作するのではなく、 純粋な関数を操作することです。その構成により、問題を解決できます。 私たちの例は小さすぎるので、例として関数型プログラミングから別の概念を取り上げます- カリー化



 function createGreeter(msg) { return function(param) { return msg.replace(/%.*%/, param); } } var greetWithNewYear = createGreeter('Happy New %year% Year!'); console.log(greetWithNewYear(2016));
      
      







ES6では、関数型プログラミングを簡素化するためのツールのうち、最も注目すべき革新は矢印関数です。 矢印関数は、関数型キャンプの人々が言うように、匿名関数(たとえば、上記の例から戻った直後の関数)またはラムダ式です。 これは、「太い矢印」を使用した場合の例の変換方法です。



 function createGreeter(msg) { return param => msg.replace(/%.*%/, param); } var greetWithNewYear = createGreeter('Happy New %year% Year!'); console.log(greetWithNewYear(2016));
      
      







関数型スタイルのプログラミングには多くの利点があります:副作用のないよりコンパクトなコードですが、関数型プログラミング中に命令レベル(方法)からの推論が宣言レベル(何をすべきか)になるため、それに慣れる必要があります。



読む/見るものは?



アクセルラウシュマイヤーブログ



mozilla.orgのES6の詳細な記事シリーズ:



マティアス・ジョンソンのYoutubeチャンネル





まとめ



JavaScriptは非常に高速に開発されています-将来の標準は言語の他の優れた革新を準備していますが、今日のWebアプリケーションを作成するために使用できるのは、概して言語の新しい化身であり、その目標はすべての開発者の生活を簡素化することです。



 (_ => ++_)(2015);
      
      






All Articles