7月23日 学習記録
実施内容
-
progate
第1章:ファイルを分割しよう
第2章:パッケージを使おう
本日学習したこと
-
1:ファイルの分割について
本格的な開発では、1つのファイルにすべての処理を書いてしまうと、ソースコードの可読性、仕様変更時の修正等の点で効率が悪い。
そのため、いくつかのファイルに分割してコーディングするのが一般的である。
しかし、そのままファイルを分割しただけでは、他ファイルのクラス、変数等を使用できない為、エラーが出る。
それを解決する為の手段、「インポート」、「エクスポート」について、以下で解説する。
-
2:エクスポートについて
エクスポートとは、クラスを他のファイルでも扱えるようにすることである。
クラス定義の後に、「export default クラス名」と記述する。
次のように、Animalクラスをエクスポートすることで、animal.jsファイル以外のファイルで扱えるようになる。
-
3:インポートについて
あるファイルでエクスポートされたクラスを、そのファイルで使用するためにはインポートを行う。
ファイルの先頭で、「import クラス名 from "ファイル名"」と記述する。(ファイル名の拡張子は省略可)
次のようにすることで、animal.jsファイルでエクスポートされたAnimalクラスを、dog.jsファイルで使用できるようになる。
-
4:クラス以外のエクスポート、インポートについて
エクスポート、インポートはクラスだけでなく、文字列、数値、関数などについても行える。
記述の仕方は、クラスの時と同じ。
以下のようにすることで、sample1.jsファイルの定数textをsample2.jsファイルで使用できる。
-
5:デフォルトエクスポートについて
前述した「export default」の部分は、デフォルトエクスポートと呼ばれそのファイルがインポートされると同時に、「export default 値」の値がインポートされる。
したがって、エクスポート時とインポート時のクラス名や定数名が異なっていたとしても、正しい値が取得できる。
しかし、デフォルトエクスポートは1ファイルにつき、1つしか使用できない。
複数の値をエクスポートしたい場合は、口述する名前付きエクスポートを行う必要がある。
-
6:名前付きエクスポートについて
名前付きエクスポートは、エクスポート時にdefaultを書かずに、名前を{}で囲んで記述する。
インポート時は、「improt {値の名前} from "./ファイル名"」と記述する。
※名前付きエクスポートは複数の値を設定できる。その場合は値を「,」で区切って記述する。
-
7:パッケージについて
世の中には、誰かが作成したプログラムの集まりが「パッケージ」という形で公開されている。
パッケージを自分のプログラムに組み込むことで、様々な機能を扱うことができる。
ここでは、一部のパッケージについて示す。
chalk readline-sync コンソール出力の文字に色を付ける コンソールに値を出力する パッケージを使用する為にはクラスや変数と同じくインポートを行う。
「import 定数名 from "パッケージ名"」と記述すれば、自分のプログラムでパッケージが使用できる。
今日のエラー
クラスをインポートする際に、上位のディレクトリを参照するために「../」と記述するべき箇所を誤って「./」としてしまった為、エラーが出た。
疑問に思ったこと
コンソールに出力するために、「console.log」と記述しているが「console」というのも、パッケージの一種か?
