{ "componentChunkName": "component---src-templates-blog-post-jsx", "path": "/post/es2017-object-syntax/", "result": {"data":{"site":{"siteMetadata":{"title":"WEB EGG","author":"Leko - CTO at Yuimedi"}},"markdownRemark":{"id":"5f458916-8699-58f7-b83c-86e8a2962bac","excerpt":"こんにちは。 たまには基礎に返ってみるのも良いじゃないか、ということで 今回は、{ a, b, c }とか昨今のNode.js…","html":"

こんにちは。
\nたまには基礎に返ってみるのも良いじゃないか、ということで

\n

今回は、{ a, b, c }とか昨今のNode.jsのオブジェクト周りの構文は難解だと知人に言われたのでまとめてみます。

\n\n

（たぶん）昔書いていたオブジェクト定義

\n
function getProfile () {\n    var obj = {\n        name: 'Leko',\n        age: 25,\n        getName: function() {\n            return this.name\n        },\n        setName: function(name) {\n            this.name = name\n        },\n        isAdult: function() {\n            return this.age >= 20\n        }\n    };\n\n    for (var i = 1; i <= 10; i++) {\n        obj['metadata_' + i] = 'あああ'\n    }\n\n    return obj\n}
\n

中身は適当ですが、構文的にはこんな感じのを書いていたような気がします

\n

キー名の省略

\n

まず、変数名とキー名が一致する場合、キー名が省略可能になりました。
\n以下のreturnの結果は{ name: name, age: age }と等価です。
\nいちいち冗長な書き方をせずとも済むようになりました。

\n
const name = 'Leko'\nconst age = 25\nreturn { name, age }
\n

メソッド定義

\n

classの登場によってメソッド定義もなにやら簡素になりました
\n書き方はclassのメソッド定義と同等の構文だと思えば良いと思います

\n
return {\n    // こんなリテラルが登場。\n    getName () {\n        return this.name\n    },\n    // 以下と等価\n    // getName: function () {\n    //     return this.name\n    // }\n}
\n

get, set

\n

これもclassからの輸入品だと思いますが、ゲッタセッタが定義できるようになっています
\nゲッタセッタ自体は割と昔から書けた気がするので、昨今と表現するのはやや古いかもしれません。

\n
return {\n    get name () {\n        return this.name\n    },\n    // 以下とだいたい等価\n    // getName: function() {\n    //     return this.name\n    // },\n\n    set name (name) {\n        this.name = name\n    },\n    // 以下とだいたい等価\n    // setName: function(name) {\n    //     this.name = name\n    // },\n}
\n

キー名を変数や式にする

\n

jsのオブジェクトのキー名は[]で囲うと式が使えます
\nそれだけ単体で見ると変な構文に思えますが、今まで動的にキー名を指定したい場合、
\n一度変数にとってから[]でアクセスする必要がありました。その歴史から来ていると考えると割と自然な気がします。

\n
const keyName = 'name'\nreturn {\n    [keyName]: 'Leko',\n    ['hoge_' + 1]: 123\n}\n\n// こう書かなくて良くなった\nconst ret = {}\nret[keyName] = 'Leko'\nret['hoge_' + 1] = 123\nreturn ret
\n

キー名にtemplate literalを使う

\n

[]の中には式が書けるのでtemprate literalも使用可能です
\nキー名にプレフィックスつけたりサフィックスつけたりするときに便利です

\n

js const i = 0 return { [`metadata_${i}`]: 'Hogehoge' }

\n

分割代入

\n

これまではオブジェクトの作成時に使う構文の話でしたが、オブジェクトを利用するの構文も変化してます。
\nオブジェクト名を削りたい場合に、これまではいちいちxxx.propを代入していく必要がありましたが、新しい構文が増えて便利になりました。

\n
const obj = { name: 'Leko', age: 25 }\nconst { name, age } = obj\n\n// 以下と等価\nconst name = obj.name\nconst age = obj.age
\n

ちなみにこの構文は関数の引数にも利用できます

\n
// と等価\n// function cheapClone (original) {\n//     return { name: original.name, age: original.age }\n// }\nconst cheapClone = ({ name, age }) => {\n    return { name, age }\n}\nconst obj = { name: 'Leko', age: 25 }\nconst obj2 = cheapClone(obj)\nconsole.log(obj === obj2) // false
\n

ブラウザ互換

\n

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

\n

MDNによると、（2017/06/16現在）ChromeとFirefoxは素で動きます。その他は動きません。
\nなので用法用量をお守りのうえ上記構文をお楽しみ下さい。
\nとはいえ、BabelやWebpackを使わない例も減ってきていると思うので、あまり互換性とか気にしなくて良いのかなぁ、なんて思ってます

\n

さいごに

\n

いかがでしたでしょうか。
\n色々な構文が増えてどんどんシンプルに記述できるようになっている一方で、古いjsのまま知識が固定されてると知識レベルの差がどんどん広がっています。

\n

少しでも情報格差が減っていき、JSerの人と非JSerの人が手を取り合える世界がくることを願ってます

","timeToRead":4,"frontmatter":{"title":"シンプルすぎて難解？昨今のNode.jsのオブジェクト周りの構文をまとめてみた","tags":["JavaScript","Nodejs"],"date":"June 20, 2017","featuredImage":null}}},"pageContext":{"slug":"/es2017-object-syntax/","previous":{"fields":{"slug":"/how-to-implement-dirty-check-and-method-missing-with-nodejs/"},"frontmatter":{"title":"Node.jsのProxyでdirty checkとmethod missingを実現してみる","tags":["JavaScript","Nodejs","Proxy","Ruby"]}},"next":{"fields":{"slug":"/es2017-arrow-func-syntax/"},"frontmatter":{"title":"条件付きな構文が多い昨今のNode.jsのアロー関数の構文をまとめてみた","tags":["JavaScript","Nodejs"]}}}}, "staticQueryHashes": ["2585454260","2954598359"]}