JavaScript(ES2015（ES6）) 〜🐾立ち止まって一旦復習👣②🐥🐥🐓🐒〜

一旦復習第二弾⭐️

【Progate JavaScript　Ⅳ〜Ⅶ】
前回の「関数」まで復習から約10日ぶりです。「記録」って、大事でありがたいけど現実を突きつけられるよね… けど、改竄はしないよ★
Progateさまで忘れている箇所や分かってなかった箇所を再確認！

🍀オブジェクトの復習
　// 定数animalを定義してください
　　const animal = {
　　　name:"レオ" ,
　　　age:3 ,
　　　greet : () => {　console.log("こんにちは");　}
　　};　　　↑⚠️「：」忘れてた😱

　// animalのname🐷プロパティの値を出力してください
　　console.log(animal.name);

　// animalのgreet🐷プロパティの関数を実行してください
　　animal.greet();

🍀クラスから生成したオブジェクトはインスタンス
　→インスタンスをconsole.logすると、classのオブジェクトが出力される
　class Animal {　}
// Animalクラスのインスタンスを定数animalに代入してください
　const animal = new Animal ( ) ; ←⚠️🐽インスタンス＆引数用の「（ ）」
// 定数animalの値を出力してください
　console.log(animal);

🍀コンストラクタ（classの設計図）
　→インスタンスが生成された直後に実行
　　class Animal {
　// コンストラクタを追加してください
　　　constructor ( ) {　　←⚠️🐽引数用の「（ ）」忘れてた😱
　　　　console.log("インスタンスを生成しました"); }
　　　}
　　const animal = new Animal();

🍀コンストラクタの中で、インスタンスに関する情報を追加
　→インスタンスは、クラスから生成したオブジェクト
　→情報は、「プロパティ＝値」で追加（this）
　

🍀メソッド（インスタンスの動作）
　→メソッド内で、インスタンスの「値」を利用できる（「this.プロパティ名」を使用）
　→メソッド内で他のメソッドを利用することも可能（「this.メソッド名( )」）
　　🐷プロパティの関数を実行でも出来た…

🍀親クラスからメソッドを引き継ぐ子クラス
　→子クラス内で、新メソッドを作成し、戻り値も利用できる。
　　①class Dog extends Animal {
　　　　　　　④getHumanAge(){
　　　　　　　　　　　　　　　⑤return this.age*7; } }

　　②const dog = new Dog("レオ", ⑥4);
　　③dog.info();

　　⑦const humanAge = dog.getHumanAge( );
　　⑧console.log(`人間年齢で${humanAge}歳です`);

　①②③→dogとして、「レオ」という新しい情報を出力したい。
　④人間年齢を表示させたいな
　⑤レオの年齢を元に人間年齢を計算する値を「戻り値」として代入。
　⑥ご指名は「this.age」
　⑦　④の出力に必要な値を定義（⑥に対して⑤を作り、⑤が使える④を出力するために②も用いて⑦を定義）。
　⑧  ⑦を用いて情報を出力。

🍀オーバーライド（メソッド、コンストラクタ）
　　→子クラスが親クラスを上書き
　　class Animal {
　　　　constructor(name, age) {
　　　　　　　　　　　　　　　　　this.name = name;
　　　　　　　　　　　　　　　　　this.age = age;}
　　　　greet() {
　　　　　　　　console.log("こんにちは");}
　　　　info() {
　　　　　　　　this.greet();
　　　　　　　　console.log(`名前は${this.name}です`);
　　　　　　　　console.log(`${this.age}歳です`);}
　　}
　　class Dog extends Animal {
　　　　getHumanAge() {
　　　　　　　　　　　　　return this.age * 7;}
　　　　info(){
　　　　　　　　this.greet();
　　　　　　　　console.log(`名前は${this.name}です`);
　　　　　　　　console.log(`${this.age}歳です`);}
　　　　 　　🐽const humanAge = this.getHumanAge();
　　　　　 　🐽console.log(`人間年齢で${humanAge}歳です`);}
　　}
　　　　const dog = new Dog("レオ", 4);
　 　🐽dog.info();

2h30mかかったんですね…
今回は1ｈ程でした。やっぱりまとめてガットできると繋がりが分かりやすかったですね。


🍀クラス、定義名
     export default Animal;
　　→import Animal from "./animal";


🍀名前付きエクスポート
　→defaultを書かずに、名前を{}で囲んでエクスポートする

🍀相対パス
　ディレクトリの移動（ ./  / ）と、階層の移動（ ../ ）

🍀パッケージについて

　↑この時は不思議の国のウーロンでしたが、今はコラムを終え復習を終えて、無事に現実世界に戻ってこれたような気がします🐽⭐️ 現実世界で、「ウーロン🐽」と「プーアル😸」の違いに気づき、訂正した次第です🐾ヤムチャに天津飯、悟飯にベジータ、改めて、ドラゴンボールの世界観すごいですね✨

🍀コールバック関数（ push 、 forEach 、 find 、 filter 、 map ）
　引数に入っている関数
　【forEach】
　const characters = ["にんじゃわんこ", "ベイビーわんこ", "ひつじ仙人", "とりずきん"];
// forEachメソッドを使って、配列charactersの中身をすべて出力してください
characters.forEach ( (character) => {console.log(character);} );
　　　　→⚠️forEach（ ）が基本
　　　　　　→⚠️引数 character は単数　

　【forEach】
　const names = [
　　　　　　　　　　{firstName: "Kate", lastName: "Jones"},
　　　　　　　　　　{firstName: "John", lastName: "Smith"},
　　　　　　　　　　{firstName: "Denis", lastName: "Williams"},
　　　　　　　　　　{firstName: "David", lastName: "Black"}　];

　// 定数namesにmapメソッドを使って新しい配列を作り、定数fullNamesに代入してください
　const fullNames = names.map((name) => {
　　　　　　　　　return name.firstName + name.lastName ;　});
　　　→⚠️定数ではなく、引数の「 name . 」を忘れてた😱

　// 定数fullNamesを出力してください
　console.log(fullNames);

🍀コールバック関数
　const printWanko = () => {
　　　　console.log("にんじゃわんこ");　};
　const call = (callback) => {
　　　　console.log("コールバック関数を呼び出します。");
　　　　callback();　};　　←🐽関数を呼び出す
　　　　　　　　　　　　　　　⚠️引数を代入すると呼び出せない！
　call(printWanko);　　　←callの関数を呼び出した時、
　　　　　　　　　　　　　　consoleと引数に代入された関数が出力。
　　　　　　　　　　　　　　⚠️引数が代入されている際は、コールバック関数でも引数を代入しないと出力できない。

🍀ターミナルについて

Macターミナルは何ができる？初心者向けの使い方と困った時のQ&AMacターミナルは何ができる？初心者向けの使い方と困った時のQ&A | 侍エンジニア塾ブログ（Samurai Blog） - プログラミング入門者向けサイト

Homebrew　🐽macOS（またはLinuxシステム）の機能を補完
↓
nodebrew　🐽node.jsのバージョン管理ツール
　　　　　　（複数のnode.jsのバージョンを簡単に切り替えられる）
↓
node.js　　🐽サーバーサイドのJavaScript実行環境
　　　　　　　　node.jsでファイルを実行する際は、
　　　　　　　　「node ファイル名」とターミナルに入力
↓
npm　　　🐽node.jsのパッケージ管理アプリ
　　　　　　→package.json　
　　　　　　🐷「npm init」で生成されたnode.jsの設定管理ファイル
↓
babel　　　🐽新しい規格で記述されたコードをES5などの
　　　　　　　古い規格に書き換える（コンパイラ）パッケージ
　　　　　　🐷package.jsonに、babelコマンドを登録する

🍀npmパッケージ

【まとめ】
やはり復習という名の反復練習はとても大切だと実感した次第です…

【完全初心者向け】プログラミング学習の始め方【３ヶ月で達成できる】

約2ヶ月前に見た時よりはだいぶイメージがついて来るようになり（そりゃそうか😅）、Progate様でやっていくことの再確認や次の学習ビジョンが見えてきました👀🌱

また、
追加学習で探す中でこんなのも見つけて少しやってみましたが

CODEPREP | JavaScript入門 ES6編

（GitHubでのログインが可能だっったから）、うーーーーーーん… イマイチ(￣◇￣;) 達成感に欠ける…
というか、
マナブ氏のブログを改めて見て、まだまだまだ…道半ばであることの実感や、html /cssにもう一回戻って練習したい気持ちなどが出てきまして…
こ、これが…焦り…💛💙💚
もう少し他サイトでJavaScriptの学習をチラ見してから、次を定めます٩( 'ω' )و