JavaScript V

1.ファイルの分割（1）

モジュールを組み合わせよう
・このレッスンでは、JavaScriptのコードを複数のファイルに分割し、
それらを組み合わせる方法を学ぶ
・複数ファイルに分割することで、維持・更新のしやすいコードを書くことができる
・また、パッケージと呼ばれる便利な機能を使うための方法も学ぶ

ファイルの分割（1）
・コードの量が増えてくると1つのファイルで管理するのが大変になるため、複数のファイルでコードを管理することがある
・今回は、メインのプログラムを実行する「script.js」とAnimalクラスを定義する「animal.js」、Dog クラスを定義する「dog.js」の3つのファイルにコードを分ける

2.ファイルの分割（2）

エラーの理由
・前の演習ではファイルを分割したときにエラーが起きた
・これはファイルを分割したことで、ファイル内に必要な値がなくなったことが理由
・Animalクラスが「dog.js」の中に無いためにエラーが起きている

ファイルの分割（2）
・ファイルを分割したときのエラーは、それぞれのファイルを関連づけし、必要な値を渡すことで解決できる
・今回の場合「dog.js」でAnimalクラスを、「script.js」でDogクラスを使用できるように設定する必要がある

export
・まずは「animal.js」内のAnimalクラスを他のファイルでも使用できるようにする
・クラスの定義の後で「export default クラス名」とすることで、そのクラスをエクスポート（出力）し、他のファイルへ渡すことができる

import
・次に「dog.js」内でAnimalクラスを使用できるようにする
・他のファイルで定義されているクラスを使用するにはインポート（読込）をする必要がある
・使用するファイルの先頭で「import クラス名 from "./ファイル名"」と書くことでインポートすることができる
・なお、ファイル名の拡張子の「.js」は省略することができる

3.値のエクスポート

値のエクスポート
・エクスポートできるのはクラスだけではなく文字列や数値や関数など、どんな値でもエクスポートが可能
・エクスポートする際は、下図のように「export default 定数名」とする
・インポートする際は「import 定数名 from "./ファイル名"」とする

データ定義部分の分割
・「script.js」でDogインスタンスを定義している部分を、新しく作る「dogData.js」に移動する

Dogインスタンスのエクスポート
・「dogData.js」はDogクラスをインポートし、Dogインスタンスである定数dogをエクスポートする
・「script.js」は定数dogをインポートする

4.名前付きエクスポート

デフォルトエクスポート
・export defaultはデフォルトエクスポートと呼ばれ、そのファイルがインポートされると自動的に「export default 値」の値がインポートされる
・そのためエクスポート時の値の名前と、インポート時の値の名前に違いがあっても問題ない

デフォルトエクスポートの注意点
・デフォルトエクスポートは1ファイル1つの値のみ使える
・このファイルをインポートする際には、デフォルトエクスポートの値を自動でインポートするため、値が1つのみとなっている
・複数の値をエクスポートしたい場合は「名前付きエクスポート」を用いる

名前付きエクスポート（1）
・名前付きエクスポートとはdefaultを書かずに、名前を{}で囲んでエクスポートする書き方
・名前付きエクスポートした値をインポートする場合は、エクスポート時と同じ名前で値を指定する
・インポートする値は、エクスポート時と同様に、「import { 値の名前 } from "./ファイル名"」と{}で囲んで指定する

名前付きエクスポート（2）
・名前付きエクスポートは、デフォルトエクスポートと違い、複数の定数やクラスを指定してエクスポートできる
・また、「export { 名前1, 名前2 }」という形で書くことにより、1つのファイルから複数のエクスポートできる
・インポートの際も、コンマで区切ることで複数のインポートができる

5.相対パス

相対パス（1）
・これまでファイルの指定は「./ファイル名」としてきたが、これは相対パスと言い、記述されているファイルからみた位置関係を示している
"./dogData"と書いている相対パスは「script.js」からみた「dogData.js」の位置を表している

同じディレクトリのファイル指定
・ドット1つの「./」は相対パスが書かれているファイルと同じディレクトリを意味する
・つまり相対パス"./dogData"は「script.js」と同じsrcディレクトリの中にある「dogData.js」ファイルを意味する

異なるディレクトリのファイル指定
・相対パスを練習するためにこれまでのディレクトリ/ファイル構成を変える
・「script.js」で、dataディレクトリの「dogData.js」をインポートするときの相対パスを見ていく

相対パス（2）
・1つ上の階層に戻る場合はドット2つの「../」を用いる

6.パッケージ（1）

パッケージ
・JavaScriptの世界では、誰かが作った便利なプログラムがパッケージという形で公開されている
・また、JavaScriptの機能を使うことで、このパッケージを自分のプログラムの中に組み込んで使うことができる

パッケージのimport
・パッケージを自分のプログラムで使うためには、importを用いてパッケージをインポートする
・パッケージのimportは、ファイル名ではなくパッケージ名を指定する
・今回はchalkというパッケージをインポートする

chalkパッケージの使い方
・インポートすれば、そのファイルでパッケージが使えるようになる
・chalkは出力する文字の色を変えることができる
・文字列をchalk.yellowやchalk.bgCyanで囲むだけで文字の色を変更できる

7.パッケージ（２）

コンソールから値を受け取ろう
・最後に、コンソールから値を入力できるようにするためのパッケージを使ってみる
・入力された値に応じて、Dogクラスのインスタンスを作れるようにする

readline-syncの使い方
・readline-syncというパッケージを導入すると、コンソールへの値の入力と、その入力された値をプログラムの中で使うことができるようになる
・インポートし、readlineSync.question(質問文) のように記述する
・質問文が出力されると一旦処理が止まり、コンソールに値が入力されると、次の処理に進む

入力値を使う
・入力された値は、定数や変数に代入することができる
・readlineSync.questionの部分を定数に代入すると、入力された値がそのまま定数nameに代入される

整数の入力
・前のスライドではquestionを用いたが、年齢のように整数を入力してほしい場合はquestionIntを用いる
・あとは入力値を用いて、Dogのインスタンスを生成すれば完成