プロゲートJavaScriptの解説記事、第２段です。
学習コースⅤ～Ⅶまでです。
ファイルの分割
エクスポートとインポートの書き方がややこしいですね。
- エクスポートはexportの次にdefaultを書いて「export default データ名;」。
- インポートは「import データ名 form “./ファイル名”;」。
これ、「デフォルトエクスポート」（export default）から学ぶから頭がこんがらがるんですよね。
次に学ぶ「名前付きエクスポート」(export {データ名})でもデータひとつだけ送れるなら、defaultは使わずに全部「export{データ名}」で覚えてしてしまえばいい。
そうすれば、
- エクスポートは「export{データ名};」
- インポートは「import {データ名} from “./ファイル名”;」
とシンプルに覚えられる気がします。
そのあとで、「データ1つだけならdefaultというものもあるんだよ」と学んだ方がいいような気がします。
※【注意】export、import、fromのあとにはそれぞれ半角スペースが入ります。
相対パス
これもややこしいですね。「./」やら「../」やら。
ひとつだけ言えるのは、これはimportの時だけです。
exportの時は相対パスは気にせず、全部「export {データ名};」と書けばOKです。
chalkパッケージ、readline-syncパッケージの意味は？なんの為に使うの？
学習コースⅤで学ぶchalkパッケージとreadline-syncパッケージについて。
まずchalkパッケージ、
これなんて読むの、ちゃ…ちゃるく？
調べると、「チョーク」だそうです。
そう、あの黒板に書くチョークと一緒。
チョークって英語で書くとこんなスペルだったんですね。
このchalkパッケージ、その名の通りコンソールの出力文字が色のついたチョークで書いたようになります。
これ何のために色をつけるんでしょうか？CSSと違って実際の表示画面の文字に色がつくわけではない。あくまでコンソール(制御盤)の文字に色がつくだけ。
ググっても出てきません。
おそらく、コード見やすいから。それだけではないでしょうか。
次にreadline-syncパッケージ。
syncは「シンク」と読むそうです。「同調」という意味。あのシンクロのシンクでしょう。
これもなんの為に使うのかがわかりません。
なぜコンソールに入力する必要があるのでしょうか？どんな時に使うのでしょうか？
ググりましたが難しい解説ばかりでよくわかりませんでした。
おそらくこのchalkパッケージとreadline-syncパッケージは、初心者が使うことはほとんどないのではないでしょうか。
ただプロゲート運営側で、「importと言えばパッケージというものがあるから、教えとくか。とりあえず有名なこの2つを簡単に教えておこう。」くらいの感じだと思います。
だから、パッケージに関しては「ああ、こんなものがあるんだ。」程度で覚えておけばいいと思います。
学習コースⅥ 配列を操作するメソッド
ここはそんなに難しくなかったのではないでしょうか。
forEachメソッドは、学習コースⅡでやった「配列の繰り返し処理」と同じだと思います。
例えば、
const fruits=["apple","banana","orange"];この配列の要素をひとつずつ順に取り出して出力するには、
for(let i=0; i<fruits.length; i++){
console.log(fruits[i]);
}と
fruits.forEach((fruit)=>{
console.log(fruit);
});どちらも一緒です。
コールバック関数とは？ファイナルファンタジーに例えてみた。
コールバック関数むずかしいですよね。初心者がつまずきやすい所らしいです。
コールバック関数とは、関数の引数に入れる関数のことです。
そこまではわかっても、「じゃあどんな時に使うの？」って疑問に思いますよね。
これについて色々調べ、むずかしかったのですが私なりの見解を書いていきたいと思います。
コールバック関数は、関数に何か処理を追加したい時に使うのではないでしょうか。
つまり関数の足し算。
ファイナルファンタジーに例えてみます（年代的に古いかもしれません）。
ここにバハムートを召喚する関数があったとします↓
const バハムート=()=>{
メガフレア;
};「これにリヴァイアサンを足したいなぁ」って時に、
const リヴァイアサン=(callback)=>{
おおつなみ;
callback();
};こういうコードを書いておきます。
そして、引数にバハムートを入れてリヴァイアサンを呼び出すと↓
リヴァイアサン(バハムート);
「callback」のところにバハムートが入り、おおつなみとメガフレアがさく裂するというわけです。
コールバック関数を直接定義する。
今の例はバハムートをあらかじめ定義していましたが、
リヴァイアサンの引数の中で直接定義することもできます。
const リヴァイアサン=(callback)=>{
おおつなみ;
callback();
};
リヴァイアサン(()=>{
メガフレア;
});これでもおおつなみとメガフレアがさく裂します。
でも、「あれ？バハムートって書いてないけど…」と思ったかもしれません。
そう、こういう風に直接定義するときは関数名は書かないんです。
これを無名関数と呼びます（プロゲートでは習いません）。
一度きりしか使わない関数なので、名前をつける必要がないからです。
コールバック関数を使う時の型は覚えてしまいましょう↓
const 関数名=(callback)=>{
処理;
callback();
};
「なぜわざわざこんな面倒くさいことするの？普通に関数の中の処理を書き足せばいいじゃん。」と思うかもしれませんが、
処理の中身を変えたくないときもあるんじゃないでしょうか？（よくわからんけど）。
以上が私なりのコールバック関数の解説です。
プロゲートJavaScript解説①もあります↓
コメント