JavaScript(ES2015ES6) 〜🐟立ち止たっお䞀旊埩習👣②🐥🐥🐓🐒〜

MHK

䞀旊埩習第二匟⭐

【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ず匕数に代入された関数が出力。
　　　　　　　　　　　　　　⚠匕数が代入されおいる際は、コヌルバック関数でも匕数を代入しないず出力できない。



🍀タヌミナルに぀いお

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様でやっおいくこずの再確認や次の孊習ビゞョンが芋えおきたした👀🌱

たた、
远加孊習で探す䞭でこんなのも芋぀けお少しやっおみたしたが

GitHubでのログむンが可胜だっったから、うヌヌヌヌヌヌん  むマむチ(￣◇￣;) 達成感に欠ける 
ずいうか、
マナブ氏のブログを改めお芋お、ただただただ 道半ばであるこずの実感や、html /cssにもう䞀回戻っお緎習したい気持ちなどが出おきたしお 
こ、これが 焊り 💛💙💚
もう少し他サむトでJavaScriptの孊習をチラ芋しおから、次を定めたす٩( 'ω' )و


この蚘事が気に入ったらサポヌトをしおみたせんか