feat(usecase): モジュール #505

lacolaco · 2018-06-25T13:13:20Z

#329

bot-user · 2018-06-25T13:15:05Z

Deploy preview for js-primer ready!

Built with commit 3177013

https://deploy-preview-505--js-primer.netlify.com

lacolaco · 2018-06-26T05:41:53Z

わかっていたけど、どこまで書いてどこまで書かないのかの判断が難しい…

lacolaco · 2018-06-26T05:44:36Z

fromの先のパス解決は実装に依存する、というのは書かないとダメかな。そうなるとブラウザとNode.jsの比較は最後に持っていったほうがいいのかな。でもNodeのESM対応はまだ書きたくないな…

lacolaco · 2018-06-26T05:51:33Z

ちがうかなーまずずっとESModuleの構文について触れて、最後に実行環境とモジュールシステムについて話す感じかな。commonjsの構文はnodecliのほうに任せて、Node.jsにはcommonjsがあって、ESModuleまだ実装されてないよ、っていう話と、バンドラによってモジュールシステムが変わるから気をつけなきゃダメだよっていう話か

azu · 2018-06-26T06:19:24Z

歴史的経緯:

ES6 draftまではloaderもECMAScriptに入っていた
ES 2015でloaderは外れて、構文だけを定義するようになった
https://github.com/whatwg/loader
https://teppeis.hatenablog.com/entry/2017/08/es-modules-in-nodejs

現実的な理由:

ブラウザにはファイルシステムがない
Node.jsにはURLでモジュールを読むのは一般的ではなかった
=> loader部分は共通のECMAScriptとして定義しにくそう

@teppeis 本(Web+DB vol87)では

CommonJS、AMDがあるという歴史的経緯
ES6 modulesの構文紹介
hoisting, strict modeになる話
各ホスト環境での読み込み方法
Transpiler系での使い方

http://exploringjs.com/es6/ch_modules.html も比較的似た流れ。
(Todoアプリでも https://asciidwango.github.io/js-primer/use-case/todoapp/entrypoint/#entrypoint スコープの話をしてた。)

はじめてのJavaScriptは時期的に入ってない感じ?(node_moduleだけ?)

azu · 2018-06-26T06:21:10Z

Node.jsにはcommonjsがあって、ESModuleまだ実装されてないよ

(実装はされてフラグで使えるけど、)まだまだStableじゃないよ(安定ってより一般的じゃないよというニューアンス) だからここでは書かないよ的なことがわかればいい気はする。

lacolaco · 2018-07-02T15:08:53Z

@azu とりあえずざっと書けたんですが、lint回りでけっこう苦しいことになっているので助けてもらいたいです...

azu

今日明日ぐらいで見ます。

azu · 2018-07-03T00:05:16Z

source/use-case/module/README.md

+
+まずは`export`文について見ていきましょう。
+
+### export文` {#export-syntax}


` がなぞに残ってる

azu · 2018-07-03T00:24:41Z

importがNode VMがパースできずにだめになるパターンか。
esmか --experimental-modules を使って解決できるかな?

lacolaco · 2018-07-03T23:52:29Z

あと、コードを分けて解決しているけど、同じコード例中で2回defaultエクスポートできないのがけっこう面倒ですね

azu · 2018-07-04T01:34:48Z

es moudleのテストってちゃんとimport/exportできてるかぐらいがわかればいい気がする。

import系実際に読み込んでエラーが起きない
- これがいまはない
export系別途テストからimportする

の2系統があればよさそう。
markdown-doc-test.js みたいな既存のテストパスには乗らない感じがする。

テストしたいものは全部のファイルにして([import](./file)しておく)
import("./myModule.js") してるやつはその位置にちゃんとファイルが存在するようにする

ができれば後からなんとかなりそう。
(こうすれば、markdown-doc-test.js は何もしないし、 *-example.js とかつけなければ実行されないので、とりあえずはテスト通るはず)

後でmodule用のテストの仕組みを追加する感じになりそう

azu

#505 (comment)
にも書いたけど、テストの仕組みは追加するしかなさそう。
とりあえず、必要な部分は全部ファイルになってればコードを[import]すれば、パースエラーとかにはならないのでCIは通せるかな

azu · 2018-07-04T11:15:23Z

source/use-case/module/README.md

+# モジュール {#module}
+
+この章では **ECMAScriptモジュール（ESモジュール、JSモジュールとも呼ばれる）** について見ていきます。
+ECMAScriptモジュールは、JavaScriptファイルをモジュールとして扱うための機能です。


モジュールとは何かというのを簡単に説明した方がよさそう。
（モジュールという概念自体が曖昧なままだとよくわからない話に見えそう）

JavaScriptでのモジュールは、機能をエクスポートしたJavaScriptのファイル、モジュールから機能をインポートしたファイルどちらもモジュールと読んでる。
たとえば、あるxxxという関数を書いて、それを別のところでも使いたいとなったときに、コピペで持ってくるより、モジュールとして再利用できるのでメンテンス性がいいよとかそういうイメージできる何かが最初にあるとよさそう。

[意訳]初学者のためのJavaScriptモジュール講座 Part1 - Qiita

JavaScript Modules: A Beginner’s Guide – freeCodeCamp

Modules :: Eloquent JavaScript

なんかキーワードは思いつくけど文章として難しいな

再利用性

名前空間: モジュール内はスコープが別れてるから、モジュール直下にコードを書いてもグローバルにはならない

1ファイル = 1モジュール?

疎結合化とテスト可能性とか

コピペするとバージョン管理が大変という話も動機として上げていいのでは

azu · 2018-07-04T11:17:52Z

source/use-case/module/README.md

+
+## ESモジュール {#es-modules}
+
+ESモジュールは、ECMAScriptの`import`、`export`構文を使って記述されるモジュールの形式です。


ECMAScriptのimport、export構文を使って記述されるモジュールの形式です。

import, export がなくてもモジュールなので、ここは何か冗長な感じがする。

ESモジュールは、[export文][]によって変数や関数などのシンボルできます。
また、[import文][]を使って別のモジュールからインポートできます。

とか

azu · 2018-07-04T11:19:18Z

source/use-case/module/README.md

+## ESモジュール {#es-modules}
+
+ESモジュールは、ECMAScriptの`import`、`export`構文を使って記述されるモジュールの形式です。
+[export文][]によって外部にエクスポートされた変数や関数などのシンボルを、[import文][]を使って別のモジュールからインポートできます。


シンボル

シンボルって何かが説明されてない感じがする?
(Symbolと勘違いもしそう)
シンボルって表現初めてみた気がするけどこれ仕様とかでそうなってたの?

使うなら最初のところで「〜をシンボルと呼びます」とかが必要そう。

azu · 2018-07-04T11:21:14Z

source/use-case/module/README.md

+ESモジュールは、ECMAScriptの`import`、`export`構文を使って記述されるモジュールの形式です。
+[export文][]によって外部にエクスポートされた変数や関数などのシンボルを、[import文][]を使って別のモジュールからインポートできます。
+
+まずは`export`文について見ていきましょう。


ここ若干の飛躍があって、おそらくここに入る前に、モジュールでは名前空間が別れてるという概念の説明が入りそうな気がする。
export/importできるけど、なぜするのかがよくわからない状態になってそう(グローバル変数ではだめなの?とか)

azu · 2018-07-04T11:21:55Z

source/use-case/module/README.md

+### export文 {#export-syntax}
+
+`export`文は変数や関数などのシンボルをエクスポートし、別のモジュールから参照できるようにします。
+エクスポートの方法は、名前付きとデフォルトの2種類があります。


エクスポートの方法は、名前付きエクスポートとデフォルトエクスポートの2種類があります。

正式名称で書いて良さそう。

azu · 2018-07-04T11:40:43Z

source/use-case/module/README.md

+import { foo as myModuleFoo } from "./myModule.js";
+```
+
+すべての名前付きエクスポートをまとめてインポートするための、`import * as`という構文もあります。


これ、セクション分けても良さそうな気がする。
なんていうんだろ？
NameSpaceImport?

azu · 2018-07-04T11:43:15Z

source/use-case/module/README.md

+// 名前付きエクスポートされたfooをインポートする
+import myModuleDefault, { foo } from "./myModule.js";
+```
+


この辺に、エクスポートされてないシンボルをインポートするとどうなるかというのも書けるかも?
ES moduleは静的に解決されるので、存在しないものをインポートしたら、パースエラーになる?

azu · 2018-07-04T11:43:56Z

source/use-case/module/README.md

+スクリプトとして読み込まれたJavaScriptで`import`文や`export`文を使用すると、シンタックスエラーが発生します。
+
+また、インポートされるモジュールの取得はネットワーク経由で解決されます。
+そのため、モジュール名はJavaScriptファイルの絶対URLあるいは相対URLを指定します。


詳しくはTodoアプリのユースケースでってリンクかな

azu · 2018-07-04T11:44:04Z

source/use-case/module/README.md

+
+作成したESモジュールを実行するためには、起点となるJavaScriptファイルをESモジュールとしてWebブラウザに読み込ませる必要があります。
+Webブラウザは`script`タグによってJavaScriptファイルを読み込み、実行します。
+次のように`script`タグに`type="module"`という属性を付与すると、WeブラウザはJavaScriptファイルをESモジュールとして読み込みます。


Weブラウザ

type="module"という属性を付与すると

というは省いていいかな

azu · 2018-07-04T11:47:19Z

source/use-case/module/README.md

+const myModule = require("./myModule.js");
+```
+
+Node.jsではESモジュールもサポートする予定ですが、現在はまだ安定した機能としてサポートされていません。


詳細はCLIのところでってリンク

yumetodo · 2018-07-04T16:37:06Z

source/use-case/module/README.md

+# モジュール {#module}
+
+この章では **ECMAScriptモジュール（ESモジュール、JSモジュールとも呼ばれる）** について見ていきます。
+ECMAScriptモジュールは、JavaScriptファイルをモジュールとして扱うための機能です。


疎結合化とテスト可能性とか

yumetodo · 2018-07-04T16:42:15Z

source/use-case/module/README.md

+
+## ESモジュールを実行する {#run-es-modules}
+
+作成したESモジュールを実行するためには、起点となるJavaScriptファイルをESモジュールとしてWebブラウザに読み込ませる必要があります。


ブラウザとは(近い将来)限らないはずなので、なにか別の表現を探したい

yumetodo · 2018-07-04T16:46:03Z

source/use-case/module/README.md

+# モジュール {#module}
+
+この章では **ECMAScriptモジュール（ESモジュール、JSモジュールとも呼ばれる）** について見ていきます。
+ECMAScriptモジュールは、JavaScriptファイルをモジュールとして扱うための機能です。


コピペするとバージョン管理が大変という話も動機として上げていいのでは

lacolaco · 2018-07-05T15:07:43Z

source/use-case/module/README.md

+
+JavaScriptにおけるモジュールは、保守性・名前空間・再利用性のために使われます。
+
+ * 保守性: 依存性の高いコードの集合を一ヶ所にまとめ、それ以外のモジュールへの依存性を減らすことができます


一ヶ所と一箇所が全体で揺れてるけど、prhどっちに寄せるべきか

https://ja.wikipedia.org/wiki/Wikipedia:%E8%A1%A8%E8%A8%98%E3%82%AC%E3%82%A4%E3%83%89#%E4%BB%AE%E5%90%8D だと
一箇所だったなー

一箇所でいい気がする。

lacolaco · 2018-07-07T00:28:02Z

なぜかnetlifyのデプロイが落ちてる

azu · 2018-07-07T00:33:39Z

cache消してdeployしなおしてみたけど、なんか変な原因でコケてるな

Error: Couldn't locate plugins "include-codeblock, anchors, js-console, github-issue-feedback, todo, highlight, sharing, fontsettings, theme-default", Run 'gitbook install' to install plugins from registry.

azu · 2018-07-07T00:45:12Z

別PR作ってもコケているので、Netlifyが何かおかしいか。
Node 8.11.3だとおかしいとかそういう系な感じがする
#513

lacolaco · 2018-07-07T00:49:04Z

NODE_VERSIONを8.10.0にしてみたけど変わらずでした
https://app.netlify.com/sites/js-primer/deploys/5b400d9402ed836c44d9110b

azu · 2018-07-07T00:54:43Z

workboxがコケるのは npm/hosted-git-info#35 だった。
手元だと gitbook の方はクリーンインストールでも通るのがなぞい

追記: Netlifyは勝手に治ったっぽい

azu

構文の所までをもう一度見た。

スコープの説明どうするかなー

azu · 2018-07-07T01:00:44Z

source/use-case/module/README.md

+ * 名前空間: モジュールごとに分かれたスコープがあり、グローバルの名前空間を汚染しません
+ * 再利用性: 便利な変数や関数を複数の場所にコピーアンドペーストせず、モジュールとして再利用できます
+
+JavaScriptのモジュールはひとつのJavaScriptファイルに対応します。


対応関係的に

ひとつのJavaScriptのモジュールはひとつのJavaScriptファイルに対応します。

azu · 2018-07-07T01:05:51Z

source/use-case/module/README.md

+
+`export`文は変数や関数などをエクスポートし、別のモジュールから参照できるようにします。
+エクスポートの方法は、 **名前付きエクスポート** と **デフォルトエクスポート** の2種類があります。
+名前付きエクスポートは、モジュールごとに複数持てます。


持てます。

持つだとなんか変な気がするから、

複数かけます

複数エクスポートできます

複数の変数や関数などをエクスポートできます

複数定義できます

複数回書けます

MDNのはモジュールが主語だと訳がおかしい。

You can have multiple named exports per module but only one default export.
export - JavaScript | MDN

azu · 2018-07-07T01:20:43Z

source/use-case/module/README.md

+[import, exportExample.js](src/export-default-1.js)
+
+また、次のように宣言とエクスポートを同時に行うことができます。
+ただし、関数とクラスに限られます。


ここの説明

関数とクラスのみは宣言と同時にエクスポートできる

名前を省略してエクスポートできる(関数式、クラス式としてエクスポートできる)

変数宣言などは宣言と同時にはエクスポートできない

カンマ区切りで複数宣言できてしまうため

Why is "export default var a = 1;" invalid syntax?

変数をエクスポートする場合は、すでに宣言されている変数をデフォルトエクスポートしないといけない

javascript - Why Is Export Default Const invalid? - Stack Overflow

という関係が微妙にわかりにくい気がする。

ただし、関数とクラスに限られます。

ただし、宣言と同時にエクスポートできるのは関数とクラスに限られ、変数宣言は構文エラーとなります。
変数宣言は、カンマ区切りで複数の変数を定義できてるため。そのため、名前付きエクスポートとは異なりデフォルトエクスポートでの変数宣言はできません。

文で説明すると長い

また、次のように関数とクラスは宣言とデフォルトエクスポートを同時に行うことができます。
....コード
ただし、変数宣言は宣言とデフォルトエクスポートを同時に行うことはできません。
なぜなら、変数宣言はカンマ区切りで複数の変数を定義できてしまうためです。
...だめなコード例

みたいにするとか?

また、次のように宣言とエクスポートを同時に行うことができます。
ただし、関数とクラスに限られます。

多分なんとなくくる違和感は、

XXX できます

ただし、<できる対象>だけです

というみたいな順番になっているのが原因な気がする。(後ろも読まないとできるのが誰かわからないし、逆にできないのは誰かが暗黙的になってる)

azu · 2018-07-07T01:40:18Z

source/use-case/module/README.md

+### import文 {#import-syntax}
+
+`import`文は、別のモジュールからエクスポートされた変数や関数などを自身のモジュールにインポートします。
+インポートした変数や関数は、そのモジュール内で宣言されたものと同じように扱えます。


- インポートした変数や関数は、そのモジュール内で宣言されたものと同じように扱えます。 + インポートした変数や関数は、そのモジュールの先頭で宣言されたものと同じように扱えます。

としてhoistingの説明を避けるか、hoistingの説明をするかかな。

console.log(App); import {App} from "./src/App.js"

hoisting自体の説明は一応されてるけど、どこに書いても先頭に書いたのと同じになるから、イメージ的には先頭でimportしろというのが伝わればいいかなーと思う。
https://asciidwango.github.io/js-primer/basic/function-scope/#hoisting-var

azu · 2018-07-07T01:43:31Z

source/use-case/module/README.md

+
+#### 名前付きインポート {#named-import}
+
+名前付きインポートは、指定したモジュールがもつ名前付きエクスポートをインポートします。


名前付きインポートは、指定したモジュールがもつ名前付きエクスポートをインポートします。

うしろで import { default as } をだしてるから、なんか違和感あるかも。

名前付きインポートは、指定したモジュールから名前を指定してインポートします

としか言いようがない感じはする。
こう書くと次の行とぶつかる。
やっぱり、named importとnamespace importは分けたほうがいい気がする。

分けてるケース:

ES6 Modules in Depth

azu · 2018-07-07T02:01:50Z

source/use-case/module/README.md

+
+[import, importExample.js](src/import-2.js)
+
+もうひとつの方法は、すべての名前付きエクスポートをまとめてインポートする`import * as`構文です。


これを"すべてインポート"みたいな感じで分けたほうがいい気がする。
あと、default も含めてインポートされない?

import * as all from "../src/myModule.js"; console.log(all);

azu · 2018-07-07T02:03:02Z

source/use-case/module/README.md

+#### デフォルトインポート {#default-import}
+
+デフォルトインポートは、指定したモジュールのデフォルトエクスポートをインポートします。
+デフォルトインポートには、専用の構文を使う方法と、名前付きインポートと同じ構文を使う方法の2つがあります。


名前付きインポートと同じ構文を使う方法の2つがあります。

具体的に名前付きインポートでdefaultを指定する方法の2つがあります。

とかでもよさそう。

azu · 2018-07-07T02:04:27Z

source/use-case/module/README.md

+ESモジュールでは、エクスポートされていないものはインポートできません。
+デフォルトインポートは指定したモジュールがデフォルトエクスポートをもっている必要があります。
+同様に、名前付きインポートは指定した名前の名前付きエクスポートをもっている必要があります。
+ESモジュールはJavaScriptのパース段階で解決されるため、対象が存在しないインポートはパースエラーを起こします。


パース段階で解決されるため

パース段階で依存関係が解決されるため

とか(循環参照が許容されるのはたしかこれが理由)

azu · 2018-07-07T02:05:19Z

source/use-case/module/README.md

+
+#### 付随効果のためのインポート {#import-for-side-effect}
+
+モジュールの中には、グローバルのコードを実行するだけで何もエクスポートしないものがあります。


モジュールの中には、グローバルのコードを実行するだけで何もエクスポートしないものがあります。

具体的に説明ないとピンとこなさそう。

付随効果は副作用のためのとかでいい気がする。

azu · 2018-07-15T08:12:29Z

source/use-case/module/README.md

+[import, importExample.js](src/import-default-3.js)
+
+ESモジュールでは、エクスポートされていないものはインポートできません。
+デフォルトインポートは指定したモジュールがデフォルトエクスポートをもっている必要があります。


- デフォルトエクスポートをもっている + デフォルトエクスポートをしている

じゃないかな。

azu · 2018-07-15T08:12:57Z

source/use-case/module/README.md

+
+ESモジュールでは、エクスポートされていないものはインポートできません。
+デフォルトインポートは指定したモジュールがデフォルトエクスポートをもっている必要があります。
+同様に、名前付きインポートは指定した名前の名前付きエクスポートをもっている必要があります。


どうように

- 名前付きエクスポートをもっている + 名前付きエクスポートをしている

デフォルトインポートと対にしたいので、

デフォルトインポートは、指定したモジュールがデフォルトエクスポートをしている必要があります。
同様に名前付きインポートは、指定したモジュールが指定した名前付きエクスポートをしている必要があります。

azu · 2018-07-15T08:14:20Z

source/use-case/module/README.md

+ESモジュールでは、エクスポートされていないものはインポートできません。
+デフォルトインポートは指定したモジュールがデフォルトエクスポートをもっている必要があります。
+同様に、名前付きインポートは指定した名前の名前付きエクスポートをもっている必要があります。
+ESモジュールはJavaScriptのパース段階で依存関係が解決されるため、対象が存在しないインポートはパースエラーを起こします。


対象が存在しないインポートはパースエラーを起こします。

"対象" が少し曖昧な感じはする。

ファイルパス

エクスポートされてない名前

の2つが対象?
パースエラーになるのはエクスポートされてない名前 ?

このパラグラフの先頭で

ESモジュールでは、エクスポートされていないものはインポートできません。

と言っているので、この文は同じことを半分言っているけど、微妙に離れてるのが気になる。

事実:

ESモジュールでは、エクスポートされていないものはインポートできません。

対象が存在しないインポートはパースエラーを起こします。

理由:

ESモジュールはJavaScriptのパース段階で依存関係が解決されるため

ESモジュールでは、エクスポートされていないものはインポートできません。なぜならESモジュールはJavaScriptのパース段階で依存関係が解決され、インポートする対象が存在しない場合はパースエラーとなるためです。そのためデフォルトインポートは、指定したモジュールがデフォルトエクスポートをしている必要があります。同様に名前付きインポートは、指定したモジュールが指定した名前付きエクスポートをしている必要があります。

とかかな?
もうちょっと短くできるといい気もするけど。

azu · 2018-07-15T08:30:51Z

source/use-case/module/src/export-2.js

@@ -0,0 +1,3 @@
+const _foo = "foo";


_ と internelFoo とかどっちがいいかな?

internalで

azu · 2018-07-15T08:32:55Z

source/use-case/module/README.md

+モジュールの中には、グローバルのコードを実行するだけで何もエクスポートしないものがあります。
+たとえば次のような、グローバル変数を操作するためのモジュールなどです。
+
+[import, sideEffect.js](src/sideEffect.js)


import-side-effects.js?のパスミス

これは存在するファイルです

sideEffects.js だった

azu · 2018-07-15T08:36:45Z

source/use-case/module/README.md

+## CommonJSモジュール {#commonjs-module}
+
+[CommonJSモジュール][]とは、[Node.js][]環境で利用されているモジュール化の仕組みです。
+ESモジュールの仕様が策定されるよりもずっと古くから使われており、Node.jsの標準パッケージや[NPM][]で配布されるサードパーティパッケージは、ほぼすべてCommonJSモジュールとして提供されています。


ほぼすべてCommonJSモジュールとして提供されています。

CommonJSモジュールとして提供されていることがほとんどです。

どっちが柔らかい感じかで迷った。

mjs が増える未来もあり得なくないので、少し柔らかい感じでもいいかなと思った。

azu · 2018-07-15T08:43:05Z

source/use-case/module/README.md

+結果として、Node.js向けでないアプリケーションのソースコードもモジュール化することが一般的になり、
+モジュールバンドラーはJavaScript開発において無くてはならないものになりました。
+
+現在では、CommonJSだけでなくESモジュールにも対応したモジュールバンドラーがいくつも登場しています。


現在って表現は脆くなりがちなので省いてもよさそう。

CommonJSだけでなくESモジュールにも対応したモジュールバンドラーがいくつも登場しています。

これ自体は事実なので、

モジュールバンドラーにはCommonJSだけでなくESモジュールにも対応したものもあります。また、バンドルする際にJavaScriptコードの最適化を行うなどバンドル以外の機能を持つものもあります。 [JavaScriptモジュールについてのドキュメント][]では、 +WebにおけるJavaScriptのモジュールと、バンドルする目的などについて詳しくまとめられています。

ぐらいな感じでいいんじゃないかな。
(最適化 ∋ 軽量化だと思うので)

azu

ほかはLGTM

azu · 2018-07-26T08:08:19Z

source/use-case/module/README.md

+モジュールバンドラーにはCommonJSだけでなくESモジュールにも対応したものもあります。
+また、バンドルする際にJavaScriptコードの最適化を行うなどバンドル以外の機能をもつものもあります。
+[JavaScriptモジュールについてのドキュメント][]では、
+WebにおけるJavaScriptのモジュールと、バンドルする目的などについて詳しくまとめられています。


+が入ってる

lacolaco · 2018-07-26T10:27:24Z

レビューありがとうございます修正してmergeします

lacolaco · 2018-07-26T10:29:19Z

なんかwebhook飛んでないな

lacolaco added the Status: In Progress label Jun 25, 2018

azu mentioned this pull request Jun 29, 2018

2018-06-29: ミーティングアジェンダ #492

Closed

azu reviewed Jul 3, 2018

View reviewed changes

azu reviewed Jul 4, 2018

View reviewed changes

yumetodo reviewed Jul 4, 2018

View reviewed changes

lacolaco force-pushed the module-section branch from 69d375c to f961279 Compare July 5, 2018 13:39

lacolaco commented Jul 5, 2018

View reviewed changes

lacolaco force-pushed the module-section branch from 54a673b to 84e7dd6 Compare July 5, 2018 15:25

lacolaco changed the title ~~WIP feat(usecase): モジュール~~ feat(usecase): モジュール Jul 5, 2018

lacolaco force-pushed the module-section branch from e4d87eb to 8265946 Compare July 6, 2018 00:17

lacolaco added Status: Review Needed and removed Status: In Progress labels Jul 7, 2018

azu requested changes Jul 7, 2018

View reviewed changes

yumetodo mentioned this pull request Jul 7, 2018

correct some trivial words #514

Merged

azu reviewed Jul 15, 2018

View reviewed changes

lacolaco added 12 commits July 22, 2018 20:18

WIP feat(usecase): モジュール

2c1c7ea

wip

52b8037

importとexport

4425917

type=module

47f4b87

.

3d82563

.

fb6f257

fix

49469d9

コードの外部ファイル化

16fee18

レビューを受けて修正

e9ac653

prh: 箇所

2049d3d

レビューをうけて修正

bbcbdee

レビューを受けて修正

4ea0123

lacolaco force-pushed the module-section branch from 2a59e39 to 4ea0123 Compare July 22, 2018 11:27

azu approved these changes Jul 26, 2018

View reviewed changes

remove +

9f85a77

azu mentioned this pull request Jul 26, 2018

2018-07-26 ミーティングアジェンダ #525

Closed

lintに怒られるので文字数を減らした

3177013

lacolaco removed the Status: Review Needed label Jul 26, 2018

lacolaco merged commit 8626bb4 into master Jul 27, 2018

lacolaco deleted the module-section branch July 27, 2018 13:58


		まずは`export`文について見ていきましょう。

		### export文` {#export-syntax}


		## ESモジュール {#es-modules}

		ESモジュールは、ECMAScriptの`import`、`export`構文を使って記述されるモジュールの形式です。


		## ESモジュールを実行する {#run-es-modules}

		作成したESモジュールを実行するためには、起点となるJavaScriptファイルをESモジュールとしてWebブラウザに読み込ませる必要があります。


		JavaScriptにおけるモジュールは、保守性・名前空間・再利用性のために使われます。

		* 保守性: 依存性の高いコードの集合を一ヶ所にまとめ、それ以外のモジュールへの依存性を減らすことができます


		#### 名前付きインポート {#named-import}

		名前付きインポートは、指定したモジュールがもつ名前付きエクスポートをインポートします。


		[import, importExample.js](src/import-2.js)

		もうひとつの方法は、すべての名前付きエクスポートをまとめてインポートする`import * as`構文です。


		#### 付随効果のためのインポート {#import-for-side-effect}

		モジュールの中には、グローバルのコードを実行するだけで何もエクスポートしないものがあります。

Uh oh!

feat(usecase): モジュール #505

feat(usecase): モジュール #505

Uh oh!

Conversation

lacolaco commented Jun 25, 2018

Uh oh!

bot-user commented Jun 25, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

lacolaco commented Jun 26, 2018

Uh oh!

lacolaco commented Jun 26, 2018

Uh oh!

lacolaco commented Jun 26, 2018

Uh oh!

azu commented Jun 26, 2018

Uh oh!

azu commented Jun 26, 2018

Uh oh!

lacolaco commented Jul 2, 2018

Uh oh!

azu left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

azu commented Jul 3, 2018

Uh oh!

lacolaco commented Jul 3, 2018

Uh oh!

azu commented Jul 4, 2018

Uh oh!

azu left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lacolaco commented Jul 7, 2018

Uh oh!

azu commented Jul 7, 2018

Uh oh!

azu commented Jul 7, 2018

Uh oh!

lacolaco commented Jul 7, 2018

bot-user commented Jun 25, 2018 •

edited

Loading

azu left a comment •

edited

Loading

azu commented Jul 7, 2018 •

edited

Loading

azu Jul 7, 2018 •

edited

Loading