ラノゲMVでES6の記法を試す

はいどーもみなさんこんばんは。
ラノゲMVってますか?
まだ先行体験版だけなので、ラノゲMVれてない方もいるかなと思います。
というわけで本日はES6の記法が使えるかどうか実験してきました。
焦点はRPGツクールMV(以下RMMV)で使えなかった記法がラノゲMV(以下VNMMV)で使えるかどうかです。

先に結論を書いておくと、確認した限りはES6の記法が問題なく使えます。
https://qiita.com/triacontane/items/c696f314e70edb383202
こちらの記事と読み比べてみると進歩の具合がよくわかるのではないでしょーか。
以下は詳細な結果です。

注*サンプルコードは『JavaScript本格入門』のコードを参考にしているものが多いです。

デフォルト引数

デフォルト引数とは、関数に引数が与えられなかった場合に自動で割り当てられる引数のことです。
従来のJavaScriptでは引数に値が割り当てられているかどうかをプログラマが手動でチェックしなければなかったのですが、これからはラクチンです。
サンプルコードもポイッと。

//デフォルト引数
var hoge = (text = 'ホゲエエエエ') => console.log(text);

hoge();
hoge('ほげですよ');

最初のhoge()ではホゲエエエエと表示され、次のhoge()ではほげですよと表示されます。
成功ですね。

なお、見慣れない=>というものがあるかと思いますが、これはアロー関数です。
こちらもRMMVでは利用不可でしたが、VNMMVでは利用可能となっています。
アロー関数は個人的に好きなので、ガンガン使っていきたいですね。

ジェネレーター

お次はジェネレーターです。
実はRMMVでも普通に使えるのですが、一応確認しておきました。

//ジェネレーター(RMMVでも動く)
function* gen(num){
for(let i = 1; i <= num; i++){ yield i; } } let str = ''; for(let num of gen(100)){ str += ${num}, ;
}
str = str.replace(/(.*)(,\s$)/, [$1]);
console.log(str);

問題なく動きます。

可変長引数

さて可変長引数です。
従来はargumentsオブジェクトを操作しなければ可変長引数を実装できませんでしたが、このargumentsオブジェクトが曲者です。
このargumentsオブジェクトは配列のように見えますが、配列ではありません。
つまり列挙可能(iterable)でないのです。配列のように扱いたい場合、面倒な変換作業が必要でした。
ですがES6の可変長引数は紛れもなく配列であり、iterableオブジェクトです。
サンプルコードを見てみましょう。

let sumTest = (...nums) => {
let result = 0;
for(let num of nums){
result += num;
}
return result;
};
console.log(sumTest(1, 2, 3, 4, 10));

引数として渡されている(...nums)が可変長引数です。
for-ofで回せていますし(つまりiterable)、結果もきちんと合計が表示されます。

引数の展開

ES6においてiterableオブジェクトは「…」演算子を用いることによって展開することができます
身近なiterableオブジェクトは配列ですから、さっそくサンプルを見てみましょう。

console.log(Math.max(...[1,2,-100,50,-50]));

配列の前に「…」演算子がついています。
この演算子によって配列の中身が展開され、Math.maxメソッドに展開された中身が渡されるのです。
いやあ便利ですねえ!
ちなみにですが、展開しなかった場合はMath.maxメソッドはNaNを返します(配列を受け取ることを前提にしていないため)。

分割代入

最後に分割代入を見てみましょう。
分割代入とは「配列かオブジェクトからデータを取り出して別個の変数に代入することを可能にする JavaScript の式」です
(参考:https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
僕もこれが何の役に立つのかイマイチわかってないのですが、以下のようなことができます。

//分割代入
let getMaxMin = (...nums) => [Math.max(...nums), Math.min(...nums)];
let [max, min] = getMaxMin(10, 30, -50, 0);
console.log(max);
console.log(min);

分割代入することにより、各値を個別に取り出せていますね。
うまい具合に使うとなんだかよろしいんでしょうが、僕はちょっと使いこなせない気がします(そのまんまのオブジェクトとして操作しそうw)

まとめ

いかがでしたでしょうか。
駆け足でざっとまとめただけなので実用的な例ではありませんが、「こんな機能があるんだなー」くらいは伝わってのではないかなと思っています。
ほなまた。

フォローする