24日目。Javascriptのモジュール、パッケージ、配列、npm

24日目 Javascriptのモジュール編。
クラスのインポートエクスポート、パッケージの使い方など。
なるほどわかりやすいのでした！

ところが、完成したJavascriptを実行しようとすると・・・
クラスのimport/exportがエラーになってしまいました。
どうしたらいいか、さっとは分からなかったので、今日のところはこの辺で。。。
そのうち分かってくるでしょう。あーくやしい！

24日目
http://appdays.herokuapp.com/Day24/

#モジュール
###ファイルの分割
JSファイルを分割する。

###クラスのexport,import
クラスの定義の後で「export default クラス名」として、他のファイルへ渡せるようにする。
使用するファイルの先頭で「import クラス名 from "./ファイル名"」と書いて、他のファイルのクラスを読み込む。
拡張子jsは省略、ファイル名は""でくくる。

###値のexport,import
文字列や数値や関数など、どんな値でもエクスポートが可能です。
「export default 定数名」
「import 定数名 from "./ファイル名"」

###データ定義を分割する
わかりやすい。

###デフォルトエクスポート
export defaultは自動的に「export default 値」の値がインポートされます。
そのためエクスポート時の値の名前と、インポート時の値の名前は違っても問題ありません。
デフォルトエクスポートは1ファイル1つの値のみ使える。
複数の値をエクスポートする場合は「名前付きエクスポート」

###名前付きエクスポート
defaultを書かずに、名前を{}で囲んでエクスポートする書き方です。
インポートする値は、「import { 値の名前 } from "./ファイル名"」
「export { 名前1, 名前2 }」1つのファイルから複数のエクスポートが出来ます。

###相対パス
使える。

###パッケージ
パッケージも使える。
`import 定数名 from パッケージ名; `

###完成！
さくさく進めました！

これをhtmlに読ませて実行してみると「SyntaxError: Unexpected token」となりました。
そうそう、script.jsしか読み込んでいなかった。
index.htmlに追記しましょう。

```
<html>
  <head>
  	<meta charset="utf-8">
  	<title>Javascriptの練習</title>
    <script type="text/javascript" src="animal.js"></script>
    <script type="text/javascript" src="dog.js"></script>
    <script type="text/javascript" src="script.js"></script>
    <script type="text/javascript" src="./data/dogData.js"></script>
  </head>
  <body>
  	<h1>このページは</h1>
  	console.log(xxxx); を使って開発ツールのコンソールに実行結果を出力しています。
  </body>
</html>
```

本当にこれでいいのかな。もっとスマートな方法がありそうなものですが・・・

実行
![js5err.png](https://qiita-image-store.s3.amazonaws.com/0/356263/a2b994a5-c2c7-cdd2-ff8d-4dd65e7ddc08.png)


クラスの`import`できず！
あれこれやってみましたが、動かず。
一旦ギブアップします。どうしたらいいんだろう。

(所要時間 1時間)

---

##配列を操作するメソッド

###push
配列の最後に新しい要素を追加するメソッド

###forEach
配列の中の要素を1つずつ取り出して、全ての要素に繰り返し同じ処理を行うメソッド
`characters.forEach((character)=>{ console.log(character)});`

おお、スッキリ！

###find
配列の中から条件に合う最初の１つを返す。
配列の要素がオブジェクトで、プロパティを条件にすると、findはオブジェクトごと返す。

```js
const evenNumbers = numbers.find((number)=>{
  return number % 2 === 0;
});
```

###filter
配列の中から条件に合う要素全部を返す。

```js
const evenNumbers = numbers.filter((number)=>{
  return number % 2 === 0;
});
```
###map
配列内のすべての要素に処理を行い、その戻り値から新しい配列を作成する。

```js
const doubledNumbers = numbers.map((number)=>{
  return number*2;
});
```
###完成！
(所要時間 30分)

#npmパッケージを開発環境で使えるようにする

###インストール

```console
$ npm install

> fsevents@1.2.7 install /Users/robamimim/Documents/JavaScript/npm_sample/node_modules/fsevents
> node install

node-pre-gyp WARN Using needle for node-pre-gyp https download 
[fsevents] Success: "/Users/robamimim/Documents/JavaScript/npm_sample/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" is installed via remote
npm notice created a lockfile as package-lock.json. You should commit this file.
added 329 packages from 155 contributors and audited 3493 packages in 14.638s
found 0 vulnerabilities
```

###使ってみる。
```console
$ npm run start

> npm_sample@1.0.0 start /Users/robamimim/Documents/JavaScript/npm_sample
> babel src --out-dir dist && node dist/index.js

Successfully compiled 1 file with Babel.
これはテストメッセージです
t$ npm install --save readline-sync
+ readline-sync@1.4.9
added 1 package from 1 contributor and audited 3501 packages in 4.304s
found 0 vulnerabilities
```
###できた！
ノートラブルであっさりできました！
(所要時間 30分）