{"componentChunkName":"component---src-modules-datocms-post-page-page-tsx","path":"/posts/42","result":{"data":{"post":{"title":"ES6のexport/import構文をScalaと比べながら解説","author":{"name":"suin","images":{"r32":{"src":"https://www.datocms-assets.com/29850/1591833290-avatar512.jpg?auto=format&fm=png&h=32&mask=ellipse&w=32","srcSet":"https://www.datocms-assets.com/29850/1591833290-avatar512.jpg?auto=format&dpr=1&fm=png&h=32&mask=ellipse&w=32 1x,\nhttps://www.datocms-assets.com/29850/1591833290-avatar512.jpg?auto=format&dpr=1.5&fm=png&h=32&mask=ellipse&w=32 1.5x,\nhttps://www.datocms-assets.com/29850/1591833290-avatar512.jpg?auto=format&dpr=2&fm=png&h=32&mask=ellipse&w=32 2x,\nhttps://www.datocms-assets.com/29850/1591833290-avatar512.jpg?auto=format&dpr=3&fm=png&h=32&mask=ellipse&w=32 3x"},"r48":{"src":"https://www.datocms-assets.com/29850/1591833290-avatar512.jpg?auto=format&fm=png&h=48&mask=ellipse&w=48","srcSet":"https://www.datocms-assets.com/29850/1591833290-avatar512.jpg?auto=format&dpr=1&fm=png&h=48&mask=ellipse&w=48 1x,\nhttps://www.datocms-assets.com/29850/1591833290-avatar512.jpg?auto=format&dpr=1.5&fm=png&h=48&mask=ellipse&w=48 1.5x,\nhttps://www.datocms-assets.com/29850/1591833290-avatar512.jpg?auto=format&dpr=2&fm=png&h=48&mask=ellipse&w=48 2x,\nhttps://www.datocms-assets.com/29850/1591833290-avatar512.jpg?auto=format&dpr=3&fm=png&h=48&mask=ellipse&w=48 3x"}},"bio":"好き: TypeScript, DDD, OOP／#YYTypeScript の主催者／Qiita 4位／株式会社クラフトマンソフトウェア取締役／『実践ドメイン駆動設計』邦訳レビュア／#分報 考案者／Web自動テストShouldBeeを開発"},"date":"2015年10月13日","tags":["JavaScript","ES6","Scala"],"category":"プログラミング","body":"\"image.png\n

ES6ではexportとimportが追加されてモジュール化が明示的にできるようになりました。

\n

自分はサーバサイドをScalaで書いているのですが、
\nScalaのimportなどと比べると、ES6は結構違ったので、
\n気づいた点をまとめてみました。

\n

\n > ファイル名が明示的ファイル名が明示的

\n

ScalaやGoにはコンパイルがあるので、importを宣言する場合ファイル名を指定する必要がないが、ES6ではimportするときファイル名を明示する必要になる。

\n

つまり、Scalaのimport FooはES6ではimport Foo from \"./Foo\"となる。これはどうしようもない。同じスクリプト言語のPHPですらオートローダーがあるのに…。

\n

\n > ES6は\"public\"であることを明示する派ES6は\"public\"であることを明示する派

\n

ScalaにもES6にもパッケージのプライバシーがあるが、公開・非公開どちらを明示的にするかの戦略が異なる。Scalaはデフォルトでpublicになり、非公開をprivateキーワードで明示する。一方、ES6はデフォルトがprivateで、公開するものをexportキーワードで明示する。

\n

\n > privateprivate\n

\n

Scalaでは公開がデフォルトなので、非公開は明示する。

\n
\n
\nscala
\n
private class Foo\n
\n
\n

ES6では非公開がデフォルト。

\n
\n
\nes6
\n
class Foo {}\n
\n
\n

\n > publicpublic\n

\n

Scalaでは公開がデフォルト。

\n
\n
\nscala
\n
class Foo\n
\n
\n

ES6は非公開がデフォルトなので、公開はexportで明示する。

\n
\n
\nes6
\n
export class Foo {}\n
\n
\n

\n > exportのバリエーションexportのバリエーション

\n

exportのしかたにもバリエーションがある。

\n

\n > export defaultexport default

\n

ある変数をモジュールとして公開する。1ファイル、1クラス向き？

\n
\n
\nHello.js
\n
export default class Hello {\n  greeting() {\n    console.log(\"hello!\");\n  }\n}\n
\n
\n
\n
\napp.js
\n
import Hello from \"./Hello\";\nnew Hello().greeting();\n
\n
\n

\n > exportexport

\n

変数をモジュールのメンバとして公開する。クラスに名前をつけてexportするとき。

\n
\n
\nHello.js
\n
export class Hello {\n  greeting() {\n    console.log(\"hello!\");\n  }\n}\n\nexport class GutenTag {\n  greeting() {\n    console.log(\"Guten Tag!\");\n  }\n}\n
\n
\n
\n
\napp.js
\n
import {Hello, GutenTag} from \"./Hello\";\nnew Hello().greeting();\nnew GutenTag().greeting();\n
\n
\n

\n > export {...}export {...}

\n

変数をモジュールのメンバとして公開する。クラスに名前をつけて、あとでまとめてexportするとき。

\n
\n
\nHello.js
\n
class Hello {\n  greeting() {\n    console.log(\"hello!\");\n  }\n}\n\nclass GutenTag {\n  greeting() {\n    console.log(\"Guten Tag!\");\n  }\n}\n\nexport {Hello, GutenTag};\n
\n
\n
\n
\napp.js
\n
import {Hello, GutenTag} from \"./Hello\";\nnew Hello().greeting();\nnew GutenTag().greeting();\n
\n
\n

\n > export { ... as ... }export { ... as ... }

\n

変数をモジュールのメンバとして公開する。名前を変えて公開する場合に使う。

\n
\n
\nHello.js
\n
class GreetingInEnglish {\n  greeting() {\n    console.log(\"hello!\");\n  }\n}\n\nexport {GreetingInEnglish as Hello};\n
\n
\n
\n
\napp.js
\n
import {Hello} from \"./Hello\"\nnew Hello().greeting();\n
\n
\n

\n > importのバリエーションimportのバリエーション

\n

\n > import ... from \"...\"import ... from \"...\"

\n

最も典型的なimport宣言。

\n
\n
\njs
\n
import Hello from \"./Hello\";\n
\n
\n

Hello.jsがHelloをexport defaultしている場合にだけ使える。

\n

\n > import { ... } from \"...\"import { ... } from \"...\"

\n

これも典型的なimport宣言。

\n
\n
\njs
\n
import { Hello } from \"./Hello\";\n
\n
\n

Hello.jsがHelloを単にexportしている場合にだけ使える。

\n

\n > import { ..., ... } from \"...\"import { ..., ... } from \"...\"

\n

同じファイルから、いくつか一度にimportする宣言。

\n
\n
\njs
\n
import {Hello, GutenTag} from \"./Hello\";\n
\n
\n

上のコードは下と同じ。

\n
\n
\njs
\n
import {Hello} from \"./Hello\";\nimport {GutenTag} from \"./Hello\";\n
\n
\n

\n > import { ... as ... } from \"...\"import { ... as ... } from \"...\"

\n

名前を変えてimportする宣言。

\n
\n
\njs
\n
import {Hello as EnglishGreeting} from \"./Hello\";\nnew EnglishGreeting().greeting();\n
\n
\n

Scalaのimport {Foo => Bar}のようなもの。

\n

\n > import * as ... from \"...\"import * as ... from \"...\"

\n

モジュールまるごと名前を変えてimportするケース。

\n
\n
\njs
\n
import * as Greetings from \"./Hello\";\nnew Greetings.Hello().greeting();\nnew Greetings.GutenTag().greeting();\n
\n
\n

\n > まとめまとめ

\n\n

解説に間違っている部分があれば教えて下さい！

\n"}},"pageContext":{"id":"DatoCmsPost-5142977-ja","description":"ES6ではexportとimportが追加されてモジュール化が明示的にできるようになりました。 自分はサーバサイドをScalaで書いているのですが、 Scalaのimportなどと比べると、ES6は結構違ったので、 気づいた点をまとめてみました。 ファイル名が明示的 ScalaやGoにはコンパイルがあるので、importを宣言する場合ファイル名を指定する必要がないが、ES6ではimportするときファイル名を明示する必要になる。 つまり、Scalaのimport FooはES6ではimport Foo from \"./Foo\"となる。これはどうしようもない。同じスクリプト言語のPHPですらオー","toc":[{"tag":"h1","depth":1,"href":"#%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E5%90%8D%E3%81%8C%E6%98%8E%E7%A4%BA%E7%9A%84","text":"ファイル名が明示的","html":"ファイル名が明示的"},{"tag":"h1","depth":1,"href":"#ES6%E3%81%AF"public"%E3%81%A7%E3%81%82%E3%82%8B%E3%81%93%E3%81%A8%E3%82%92%E6%98%8E%E7%A4%BA%E3%81%99%E3%82%8B%E6%B4%BE","text":"ES6は\"public\"であることを明示する派","html":"ES6は\"public\"であることを明示する派"},{"tag":"h2","depth":2,"href":"#private","text":"private","html":"private"},{"tag":"h2","depth":2,"href":"#public","text":"public","html":"public"},{"tag":"h1","depth":1,"href":"#export%E3%81%AE%E3%83%90%E3%83%AA%E3%82%A8%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3","text":"exportのバリエーション","html":"exportのバリエーション"},{"tag":"h2","depth":2,"href":"#export%20default","text":"export default","html":"export default"},{"tag":"h2","depth":2,"href":"#export","text":"export","html":"export"},{"tag":"h2","depth":2,"href":"#export%20%7B...%7D","text":"export {...}","html":"export {...}"},{"tag":"h2","depth":2,"href":"#export%20%7B%20...%20as%20...%20%7D","text":"export { ... as ... }","html":"export { ... as ... }"},{"tag":"h1","depth":1,"href":"#import%E3%81%AE%E3%83%90%E3%83%AA%E3%82%A8%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3","text":"importのバリエーション","html":"importのバリエーション"},{"tag":"h2","depth":2,"href":"#import%20...%20from%20"..."","text":"import ... from \"...\"","html":"import ... from \"...\""},{"tag":"h2","depth":2,"href":"#import%20%7B%20...%20%7D%20from%20"..."","text":"import { ... } from \"...\"","html":"import { ... } from \"...\""},{"tag":"h2","depth":2,"href":"#import%20%7B%20...,%20...%20%7D%20from%20"..."","text":"import { ..., ... } from \"...\"","html":"import { ..., ... } from \"...\""},{"tag":"h2","depth":2,"href":"#import%20%7B%20...%20as%20...%20%7D%20from%20"..."","text":"import { ... as ... } from \"...\"","html":"import { ... as ... } from \"...\""},{"tag":"h2","depth":2,"href":"#import%20*%20as%20...%20from%20"..."","text":"import * as ... from \"...\"","html":"import * as ... from \"...\""},{"tag":"h1","depth":1,"href":"#%E3%81%BE%E3%81%A8%E3%82%81","text":"まとめ","html":"まとめ"}],"ogpImageUrl":"https://www.datocms-assets.com/29850/1593190022-pastedimage20200627146.png?fm=png&mark64=aHR0cHM6Ly93d3cuZGF0b2Ntcy1hc3NldHMuY29tLzI5ODUwLzE1OTMxNTQ2MzYtdHJhbnNwYXJlbnQtcGl4ZWwucG5nP3c9NDAwJmg9NjQmZml0PWNyb3AmYmxlbmQ2ND1hSFIwY0hNNkx5OTNkM2N1WkdGMGIyTnRjeTFoYzNObGRITXVZMjl0THpJNU9EVXdMekUxT1RFNE16TXlPVEF0WVhaaGRHRnlOVEV5TG1wd1p6OXRZWE5yUFdWc2JHbHdjMlVtWm0wOWNHNW5KbmM5TWpVMkptZzlNalUyJmJsZW5kLWg9NjQmYmxlbmQteD0wJmJsZW5kLXk9MCZibGVuZC1tb2RlPW5vcm1hbCZtYXJrNjQ9YUhSMGNITTZMeTloYzNObGRITXVhVzFuYVhndWJtVjBMMzUwWlhoMFAzUjRkQzFoYkdsbmJqMXRhV1JrYkdVbE1rTnNaV1owSm5SNGRDMW1iMjUwUFhOaGJuTXRjMlZ5YVdZbE1rTmliMnhrSm5SNGRDMWpiMnh2Y2oweU1qRTRNVFltZEhoME5qUTlZek5XY0dKbkpuUjRkQzF6YVhwbFBUTXdKbWc5TmpRJm1hcmsteD02NCZtYXJrLWFsaWduPW1pZGRsZSUyQ2xlZnQ&mark-align=bottom%2Cleft&mark-x=100&mark-y=496&blend64=aHR0cHM6Ly93d3cuZGF0b2Ntcy1hc3NldHMuY29tLzI5ODUwLzE1OTMxNTQ2MzYtdHJhbnNwYXJlbnQtcGl4ZWwucG5nP3c9MTIwMCZoPTYzMCZmaXQ9Y3JvcCZtYXJrNjQ9YUhSMGNITTZMeTkzZDNjdVpHRjBiMk50Y3kxaGMzTmxkSE11WTI5dEx6STVPRFV3THpFMU9UTXhOVEE1TkRBdFkzSmhablJ6YldGdUxUQXhMbkJ1WncmbWFyay1hbGlnbj10b3AlMkNjZW50ZXImbWFyay13PTI1MCZtYXJrLXk9ODAmYmxlbmQ2ND1hSFIwY0hNNkx5OWhjM05sZEhNdWFXMW5hWGd1Ym1WMEwzNTBaWGgwUDNSNGRDMWhiR2xuYmoxdGFXUmtiR1VsTWtOalpXNTBaWEltZEhoMExXWnZiblE5YzJGdWN5MXpaWEpwWmlVeVEySnZiR1FtZEhoMExYQmhaRDB4TURBbWRIaDBMV052Ykc5eVBUSXlNVGd4TmlaMGVIUTJORDFTVmsweU5EUkhkVnBZYUhkaU0wb3dUREpzZEdOSE9YbGtUMkZ1YVMxaFYyZ3RUME5yYkU1cVdWZDRhRFEwUjI4MWNTMVZORFJITlRRMFIzRTBORWROTkRSTFNqWkxaV28yUzNGekpuUjRkQzF6YVhwbFBUVTFKbmM5TVRJd01DWm9QVFl6TUEmYmxlbmQtbW9kZT1ub3JtYWw&blend-mode=normal","otherPost":{"type":"author","title":"英語？日本語？マイクロサービスのエラーメッセージは何語が良い？","slug":"/posts/44"}}}}