【初心者】JavaScript ファイル分割／相対パス／パッケージ【備忘録１３】

##11/08～11/09に勉強したこと
###ファイルの分割
コード量が増えてくると一つのファイルでの管理が大変になるので
ファイル分割をするとわかりやすくなる。

ただ単に分割するだけでは、互いのクラスで紐づけしている場合が
多々あるので、インポート・エクスポートを行わなければならない。

【例】Animal,Dogクラスがある場合・・・Animalクラスをエクスポート

class Animal{...
}

export default Animal;
//クラス定義の後でexportを書く。この形はデフォルトエクスポートと呼ばれる。

【例】Animal,Dogクラスがある場合・・・Animalクラスをインポート

//ファイルの一番先頭に書く。
inport Animal from "./animal";

//一番はじめのAnimalはクラス名、語尾のanimalはファイル名。

###値のエクスポート
クラスだけでなく、値もエクスポート可能。
先ほどのクラス名のところに「定数名」を入れればOK！

###名前付きエクスポート
上記で説明しているデフォルトエクスポートは、１つのファイルにつき
１つしか使用できない！いくつか使用する際は下記のように書く。

【例】

export {dog};
//定数名の間を[,]で区切ると複数もOK！ [default]不要なので気を付ける！

import {dog} from "./dogData";

###相対パス
同じディレクトリ内にファイルが存在する場合、インポート時の語尾は
"./animal";などでよいが、他のディレクトリ同士の場合は書き方が変わってくる。

-　上記などで書いてきた物は、srcというファイルの中に同列で４つのファイルが
存在している状態の時に使える書き方。
-　例１の場合と例２の場合は、ファイルの存在する場所が違う。

【例】
【srcファイル】に【dataファイル】【classファイル】＜script.jp＞が存在。
【dataファイル】⇒dogData.js
【classファイル】⇒dog.js

★例１⇒scriptをdogDataへ
★例２⇒dogDataをdogへ

//★例１
import {dog1,dog2} from "./data/dogData";

//★例２
import Dog from "../class/dog"
//　　　　　　　　↑一つ上の階層に行く場合は ../

###パッケージ
JavaScriptの世界では、他の方が作った便利なプログラムが
パッケージとして公開されてて、自分のプログラムに組み込むことが可能。
それぞれコラムもあり、調べてみると使用方法も掲載されている。

一例として、、、

• chalk⇒コンソール出力の文字に色！
• readline-sync⇒コンソールに値を入力！　質問文⇒入力⇒出力のような形がとれる。

【例】chalk

import chalk from"chalk";
//クラスの文頭に書く。

console.log(chalk.yellow("Hello!"));
//文字が黄色に！
console.log(chalk.bgCyan("Hello!"));
//文字の背景が水色に！

【例】readline-sync

import readlineSync from "readline-sync";

const name = readlineSync.question("名前を入力してください:");
//年齢など、整数を入力してほしいときは、readlineSync.questionInt 

console.log(`${name}です。`);