javascript(6日目)とLinuxの学習(4日目)とプロになるためのweb技術入門(2日目)
昨日に引き続き学習学習！
ファイルの分割
ファイルを分割したとき、分割前では出力できていたコードが分割後はエラーが出るようになる。これは必要な値が分割されてなくなってしまったからで、分割されたファイル同士で値の受け渡しをする必要がある。
クラスの分割、エクスポートとインポート
他のファイルで使えるようにするには、クラスの定義の後で「export default クラス名」とすることで、そのクラスをexport（輸出、出力）し、他のファイルへ渡すことができる。
下の画像ではAnimalクラスを他のファイルでも使えるようにしている。
インポート
任意のクラスをexport(輸出)して他のファイルでも使えるようにしたあとは、それを受け取る側のファイルでimport(輸入)する必要がある。その際のコードは「import クラス名 from "/ファイル名"」と書くことでexportファイルを読み込めるようになる。なおファイル名の.js拡張子は省略可能。
要は分割したらちゃんと読み込みできるようにファイル間でインポートエクスポート設定しましょうってこと。
値のエクスポートおよびインポート
値のエクスポートもクラスのエクスポートと同様にできる。
「export default 定数名」。インポートは「import 定数名 from ".ファイル名"」
データ定義部分の分割
さっきはクラスの分割を行ったが今回はデータ定義部分の分割を行う。
下の画像では「Dog.Dateファイル」にdogファイルからDogクラスをインポートし、Dogクラスのインスタンスである定数dogをscriptファイルに出力するために、「export default dog;」と打ち込む。scriptファイル側では「import dog from "./dogData;」とし、dogのメソッドを読み込むためにdog.info();を打ち込む。
デフォルトエクスポート
export defaultはデフォルトエクスポートと呼ばれ、そのファイルがインポートされると自動的にexport defaultの値がインポートされる。そのため、import側で値の名前を間違えてもdefaultで指定したファイルがインポートされる。
じゃあdefaultがたくさんあったらどうするのという疑問が湧いてくるがその通りで、デフォルトエクスポートは一つのファイルに一つしか使えない。複数の値をエクスポートしたい場合は名前付きエクスポートを使用する。
名前付きエクスポート
名前付きエクスポートとは左の図のように、defaultを書かずに、名前を{}で囲んでエクスポートする書き方(「export {dog1};」)。importするときも同様に「import {値の名前} frome "./file名"」となる。
名前付きエクスポートは、,(カンマ)で区切ると複数まとめてエクスポートが可能。インポートも同じ要領で複数同時にインポートできる。
相対パス1
これまでファイルの指定は「./ファイル名」としてきたが、これは相対パスと言い、記述されているファイルからみた位置関係を示しているす。
ドット1つの「./」は相対パスが書かれているファイルと同じディレクトリを意味している。つまり右の図で書かれている相対パス"./dogData"は「script.js」と同じsrcディレクトリの中にある「dogData.js」ファイルを意味している。
異なるディレクトリのファイル指定
下の画像では、同じsrcディレクトリ内のdataフォルダ内にあるdogDataファイル、という相対パスになっている。
相対パス2
1つ上の階層に戻る場合はドット2つの「../」を用いる。
上の画像では同じディレクトリ内のdataフォルダ、という指定だったが、今回は
1個上の階層にあるdataフォルダと同じ階層にあるclassフォルダのdogファイル、という意味になる。ニュアンスとしては.一つで同じフォルダ、..で一つ上、...で三つ上といったところだろうか。...は習っていないので予想だが。
パッケージ
JavaScriptの世界では、誰かが作った便利なプログラムがパッケージという形で公開されている。そしてJacascriptの機能でこのパッケージの機能を自分のプログラムの中にインポートすることができる。
パッケージのインポートではファイル名ではなくパッケージ名で行う。このとき、""で囲うことを忘れずに。
chalkパッケージの使い方
インポートすればそのパッケージの機能を使えるようになる。chalkパッケージは文字の色を変えることができるので、文字列をchalk yellow や chalk bgCyanで囲って出力すると、そのようなカラーの文字が出力される。
コンソールから値を受け取る〜readline-syncの使い方〜
readline-syncというパッケージを導入すると、コンソールへの値の入力と、その入力された値をプログラムの中で使うことができるようになる。左の図のようにインポートし、readlineSync.question(質問文) のように記述すると質問文が出力され、一旦処理が止まる。コンソールに値が入力されると、次の処理に進む。
また入力された値は定数や変数に代入することもできる。下の画像では名前を入力してくださいにはケンが対応しているため、出力${name}とするとケンが出てくる。
整数の入力
前の画像ではquestionを用いたが、年齢など数字を用いたいときはquestionInt(int=integer=整数)を用いる。
Linux標準教科書
Ctrd + DはEOF(End Of File)を示すキーで、入力の終わりを意味する。)
正規表現とパイプについて学習。ちょっと面白くないのが日記の内容に現れている(笑)
テキスト変えようかな...
プロになるためのweb技術入門
32Pまで読了。httpとCGIについて学んだ。httpは通信プロコトルの一つであり、通信プロコトルによって、異なるコンピュータ間でも統一の取れた情報の送受信ができるようになった。CGIとはサーバー上で動くプログラムのことであり、ショッピングサイトの在庫数が勝手に変わるのがまさしくそれである。これによって逐一管理者が情報を更新する必要がなくなった。このサーバー側のプログラムで動くコンテンツを動的コンテンツといい、あらかじめ用意されている決まったコンテンツを静的コンテンツという。
