Javascriptの復習（5）

この記事について

　Javascript初学者がアウトプットの場として書いている記事なので、スルーしてもらっても大丈夫です。Rubyを学習した後なのでRubyと絡めて記事を書くこともあります。

#ファイルの分割
　コードの量が増えてくるとコードの修正が大変になります。1つのファイルに書くのではなく、複数のファイルに分割することで管理しやすくなります。今回は分割する時のコードの書き方を説明します。
　ファイルを分割する時は、それぞれのファイルを関連付け必要な値を渡さなければなりません。
「export default クラス名や定数等」とクラスや定数の下に書く事で他のファイルへとエクスポートできます。
※因みにexportは英語で「輸出」を意味します。

animal.js

class Animal {

}

//クラス定義後に書く事で他のファイルで使うように準備できます。
export default Animal;

次に、上記のAnimalクラスを使いたいファイルで「import クラス名や定数 from "./ファイル名"と書きます。
これにより、そのファイル内でAnimalクラスを使用できます。ファイル名の拡張子である".js"は省略できます。
※因みにimportは英語で「輸入」を意味します。

cat.js

//この記述でcat.js内でanimal.jsで定義したAnimalクラスを使用できる。
import Animal from "./animal"

#デフォルトエクスポート
これまで書いていたexport defaultですが、この書き方は「デフォルトエクスポート」と言います。importする時にfrom"./ファイル名"とファイルを指定すると思いますが、この記述を書くと自動的にexportに書かれているクラスや定数が読み込まれます。先程「import クラス名や定数 from "./ファイル名"」と書くと説明しましたが、ここにあるクラス名や定数名はexportに書いてあるものと一致しなくても実は大丈夫です。importでファイル名を指定した時点で、自動的にexport defaultに書かれているクラス名や値がインポートされます。

animal.js

class Animal {

}

export default Animal;

cat.js

//クラス名がAnimalじゃなくても問題ない。このCat.jsファイル内では、AnimalクラスはBeastクラスとして扱われる。
import Beast from "./animal"

ただし、エクスポートできるのは１つの値で、複数のクラスや定数をエクスポートしようとするとエラーが出ます。

#名前付きエクスポート
名前付きエクスポートとはdefaultと書かずに名前を指定してエクスポートする方法で、名前は{}で囲います。

dog.js

const dog1 = "チワワ"

//定数名を指定してエクスポート
export {dog1};

インポートする時も名前を書きます（importとfromの間）

script.js

//インポートも定数名を書く。
import {dog1} from"./dog"

console.log(dog1);

名前付きエクスポートはデフォルトエクスポートと違い複数のクラス及び定数をエクスポートすることができます。

dog.js

const dog1 = "チワワ"
const dog2 = "チャウチャウ"

//{}の中にエクスポートしたい物を全て書く
export {dog1, dog2};

script.js

//インポートも同様に全て書く
import {dog1, dog2} from"./dog"

console.log(dog1);
console.log(dog2);

#パッケージ
Javascriptには「パッケージ」と呼ばれる誰かが既に作ってそのまま支える物があります。自分のプログラムでも引用して使用できます。フレームワークと同じ物だと思います。今回は以下のパッケージを使用しました。

chalk : コンソールに出力する文字に色を付けられる。
redline-sync : コンソールに値を手入力できる(Rubyのgetsのような機能)

パッケージを使用する時は、importでパッケージをインポートします（exportはいらない）。

script.js

//定数はなんでも良いが、同じ名前の方がわかりやすい。
import chalk from "chalk";

インポートしたファイルではパッケージの機能を使えるようになります。

script.js

//文字列をchalk.yellow等で囲むと色が変化する。
import chalk from "chalk";
//文字がイエローになる
console.log(chalk.yellow("Hello World"));
//背景色がシアンになる(bgはback groundの略)
console.log(chalk.bgCyan("Hello World"));

redline-syncというパッケージを使用すると、コンソール上に値（文字）を入力することができ、その値をプログラム上で使用できるようになります。今回はredlineSyncという定数としてredline-syncを使用できるようにしていますが、readlineSync.question("質問文")というコードを書くことで、質問文が表示され、文字が入力できるようになります。
整数を入力したい時はquestionではなくquestionIntと書きます(integerのintだと思う。)

script.js

//redline-syncをredlineSyncとしてインポートする。
import redlineSync from "redline-sync";

//質問文が表示されて、文字を入力できるようになる。入力された文字は定数wordに代入される。
const word = readlineSync.question("文字を入力してください : ");
console.log(`${word}と入力されました。`)