【勉強ノート】Progate⑦ JavaScript学習コースⅤ（有料コース）学習で、できる事、調べた事　まとめ

レッスン内容

ファイルを分割しよう

ファルの分割（１）、（２）

値のエクスポート

名前付きエクスポート

相対パス

パッケージを使おう

パッケージ（１）、（２）

Progate　JavaScript学習コースⅤ　より

身につくスキル（これが出来る）

• コードをファイルに分割して、維持・更新しやすくなる
• パッケージを活用して、コーディング効率が上がる

勉強になったこと

① コードを分割して、モジュールとして組み合わせる

• JavaScriptのコードをファイルに分割する
• 維持、更新しやすいコードになる
• ファイルの分割例
  • プログラムの実行部分
  • 各クラスの定義部分
• モジュール組み合わせに必要なこと
  • ファイルを関連づける
  • 必要な値を渡す

② クラスを他のファイルで使用可能にするには

• クラス定義後に「export default クラス名;」と宣言する

 class Staff {
 }

 export default Staff;

③ 他のファイルのクラスを読み込むには

• 使用するファイルの先頭で「import クラス名 from "./ファイル名";」と宣言する
• ファイル名の拡張子「.js」は表記を省略できる

 import Staff from ".staff.jp";

 class Programmer extended Staff {
 }

④ クラスに限らず、どんな値でもエクスポートできる

• 文字列、数値、関数など
• export default 定数名;

 // sample1.js
 const text = "Hello World";
 export default text;

 // sample2.js
 import text from "./sample1.js";
 console.log(text);

⑤ データ定義部分の分割

 // 変更前
 import Programmer from "./programmer.js";
 const prog = new Programmer("John", 22, "HTML/CSS");
 prog.info();


 // 変更後 progData.js
 import Programmer from "./programmer.js";
 const prog = new Programmer("John", 22, "HTML/CSS");
 export default prog;

 // 変更後 script.js
 import  prog from "./progData.js";
 prog.info();

⑥ デフォルトエクスポート

• 対象のファイルがインポートされると自動的に「export default 値」の値がエクスポートされる
• 「エクスポート時の値の名前」と「インポート時の値の名前」に違いがあっても問題はない

// progData.js
 const prog = new Programmer("John", 22, "HTML/CSS");
 export default prog;

// script.js
 import program from "./progData";
 program.info();

// progとprogramで名前に違いがあるが、programには定数progの値が入っている

• デフォルトエクスポートは１ファイル1つの値のみ使える

// progData.js
 const prog1 = new Programmer("John", 22, "HTML/CSS");
 const prog2 = new Programmer("Nancy", 28, "PHP/Ruby");
 export default prog1;
 export default prog1;

// コンソール出力結果はエラーとなる

⑦ 名前付きエクスポート

• エクスポート
  • export { 値の名前 };
• インポート
  • import { 値の名前 } from "./ファイル名";

// progData.js
 const prog1 = new Programmer("John", 22, "HTML/CSS");
 export { prog1 };

// script.js
 import { prog1} from "./progData";
 prog1.info();

• 名前付きエクスポートの利点
  • 複数の定数やクラスを指定してエクスポートできる

// progData.js
 const prog1 = new Programmer("John", 22, "HTML/CSS");
 const prog2 = new Programmer("Nancy", 28, "PHP/Ruby");
 export { prog1, prog2 };

// script.js
 import { prog1, prog2} from "./progData";
 prog1.info();
 prog2.info();

⑧ 相対パス

⑨ パッケージ

• パッケージとは
  • 他の人が作ったプログラムが公開されたもの
  • パッケージは自分のプログラムに組み込んで使える
  • 基本文法
    • import 定数名 from "パッケージ名";

// パッケージ：chalk
// コンソール出力に色をつける

 import chalk form "chalk";
 console.log(chalk.yellow("Hello World"));
 console.log(chalk.bgCyan("Hello World"));

// パッケージ：readline-sync
// コンソールへの値の入力と、入力された値をプログラムの中で使える

// 例文①
 import readlineSync from "readline-sync";
 readlineSync.question("名前を入力してください：");
 // 質問文が出力されると、一旦処理が止まる
 // コンソールに値を入力すると、次の処理に進む

// 例文②
 import readlineSync from "readline-sync";
 const name = readlineSync.question("名前を入力してください：");
 console.log(`${name}と入力されました`);

// 例文③
 // 整数を入力させる場合はquestionIntを使う
 const age = readlineSync.questionInt("年齢を入力してください：");

勉強不足だと思ったこと、調べたこと、感想

パスの記述に関しては階層の表記方法だけ覚えれば特に問題はなさそう。

ファイルを分割することでファイルごとのコードは管理しやすそうだけど、エクスポート・インポートする対象やそれぞれに対する記述様式は混同しないように整理しておかなければならないかなぁ。

• どういうファイル分けにするか？
• どういう値のやりとりをするか？

まずは構成を組み立てる必要がありますね。