トラたんの挑戦するBlog in Japan

プログラミング初心者が半年でプログラミングの仕事をする

雨大丈夫ですか?ここ最近になって、、、

こんばんは!!

 

トラたんです!

 

 

皆さん、7月も始まり今年も下半期へと突入しましたね!

いかがお過ごしでしょうか?

 

最近はが酷くて、沖縄県だったり、神奈川県の一部では大雨が降っているということでしたが、いよいよ夏が始まるって感じがしていますね!

 

特に夏の災害としては台風大雨洪水土砂災害などがあるので、注意が必要ですね

 

天候にも注意しながら、楽しい夏を過ごせることを祈っています!

 

最近は色々忙しかったのでプログラミングの勉強が出来ていませんでした!

けど、継続してやっていくので、そしてブログの方も続けていくので、

どうぞよろしくお願いします!!!

 

<本日のプログラミング学習>

 

①ファイルの分割⑴⑵

②エクスポート、インポート

 

①ファイルの分割⑴⑵

 

ここに関しては、

そこまで多くは語りませんが、

 

一つのファイルに対してクラスを何個も書くと欲しいデータが大量のデータで埋もれてしまうことがあるため、

 

一つのクラスに対して一つのファイルを設けようという話です!

 

それぞれを関連付けてファイルを設けないと、コンソールでエラーが発生するので、

その関連付けの方法を今から紹介します!

 

②エクスポート、インポート

 

まずはエクスポートについて

 

エクスポートとは、その名のとおり「輸出」という意味なので、

 

ほかのファイルにコードを移し替えるという意味になります!

 

例えば、Aファイルの中のCというクラスをMファイルの中に取り込みたいっていうときにこのエクスポートを使います!!!

 

書き方としては、クラスの定義の後に入力しますが、

 

export default クラス名 ;

 

と入力するだけです。

 

一方インポートについてですが、

 

エクスポートを使ったので、どのファイルにもエクスポートで指定したクラス名を受け取ることができるようになりました。

 

で、その書き方が、

 

import クラス名 from ". / ファイル名" ;

 

と書きます!

 

また、クラスをエクスポート、インポートできるといいましたが、クラスだけでなく値もエクスポート、インポート出来るのです!

 

これも単純で、

 

クラス名のところを定数名に変えるのみ!

 

簡単でしょ?

 

export default のことをデフォルトエクスポートと呼びそのファイルがインポートされると自動的にデフォルトエクスポートの値がインポートされます!

 

ここで驚きなのが、エクスポート時とインポート時の値の名前が異なっていても問題ないみたいです!

 

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/5/1578970369829.png

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/5/1578970369829.png

 

<注意>デフォルトエクスポートは1つの値のみとなります

 

もし複数の値をエクスポートしたい場合は、名前付きエクスポートを利用します!

 

これまた簡単で、

エクスポートにデフォルトをつけず入力します

そしてインポートするだけです

 

図にすると、こんな感じ

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/5/1542301893954.png

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/5/1542301893954.png

 

 

 

本日はここまで!

 

それじゃまた!

 

バイバイバイ~