Progate Javascript学習

内容

レッスン１

・console.log(“文字列“);　コンソールという画面に文字列にある文字を表示

　　　　　　　“文字列”は’文字列’（シングルクォーテーション）でもOK

・//　コメント

・console.log(2+3)　計算。コンソールに2+3の結果5が表示される。

　　　　　　　　　−引き算、*掛け算、/割り算、%割り算のあまり

　console.log(“2” + “3”) 　ダブルクォーテーションで囲うと２３と文字列がならんで表示　される。

・let　変数を定義

　　　let name = “TOM”　nameという変数にTOMを代入したという意味

　　　console.log(name)でTOMが出力される。

　　変数をつかうメリット

・同じ値を繰り返しつかえる

・変更に対応しやすい（一度の変更で変数すべてが置き換わる）

・名前をつけられるので値の意味がわかりやすい

　　名前をつける際の注意点

　　　数字から初めてはいけない　let 1name = “TOM”　だとエラーが起きる

　　変数の変更

　　　途中で変数の値を変更できる。その際、letはいらない

　　既にある変数にある値を足したり、かけたりする

　　　Let number = 3

      number = number + 3   5と出力される

　　　短縮系

　　　number += 3    5

      number -=3     1

      number *=3     9

      number /= 3     1

      number %=3     0

・const　定数を定義　変数と違い、途中で値を変更することができない

　　　定数をつかうメリット

　　　　変更できないので、意図せず値が変わってしまうことがない

・${定数・変数}　文字列の中に定数や変数を入れられる

　 let name = “TOM”

   console.log = (`こんにちは${name}さん`) 　　こんにちはTOMさん

   文字列をバッククォートで囲うことに注意

・if　条件式

　　if (条件式){

 　　 処理

  　}　　　　　　　　　　　　　　　　もし条件式が成り立てば処理をする

・true false　真偽値

・比較演算子　a>b  a>=b  a<b a<=b  a === b  a!== b

・else else if　if文で成り立たなかったときの処理を指定

　　　if(条件式1){

        条件式1が成り立った(true)ときの処理

     } else if(条件式2){

   　　 条件式2が成り立った(true)ときの処理

     } else{

    　　条件式1も2も成り立たなかった(false)ときの処理

     }

　一度trueになるとその下が適応されないので注意

・かつ　a && b

・または　a || b

・swich文　ifとは違った条件分岐の文

　　　swich(条件の値){

         case 値1：

　　　　 条件の値が値1と同じだった場合の処理

　　　　 break;

         case 値2：

　　　　 条件の値が値2と同じだった場合の処理

　　　　break;

        default:

　　　　falseのときの処理

　　　　break;

}

レッスン２

・while文　繰り返しの処理

・for文　while文をシンプルに　

　　　for(変数の定義; 条件式; 変数の更新){

        処理

　　　}

・計算式の省略

　　number += number  →　number++

    number -= number  →　number—

・forとifの組み合わせ

　　for(変数の定義; 条件式; 変数の更新){

      if(条件式){

        trueの処理

　　　}else{

        falseの処理

      }

     }

・配列　複数の値をまとめて管理　[値1, 値2, 値3]

　それぞれの値には０から始まるインデックス番号がついている

  上書きもできる

  let animals =[“dog ”, “cat”, “sheep”];

　console.log(animals[0]);     dog

  console.log(animals[1]);      cat

　animals[0] = “pig”;

  console.log(animals[0]);      pig

・配列とfor文

　const fruits = [“apple”, “banana”, “orange”];

   for(let i = 0; i < 3; i++){

    console.log(fruits[i]);

   }

・配列.length　配列の要素の数を取得できる

　　for文の条件式を　i < 配列.lengthにできる

・オブジェクト　それぞれの値にプロパティ値という名前をつけてまとめて管理

　　オブジェクトの値を取り出すときは「オブジェクト.プロパティ名」にする

　const item = {name:”手裏剣”, price:300};

    console.log (item.name);　　手裏剣

　item.price = 500;

    console.log(item.price);   　500

・オブジェクトを要素にもつ配列

　const item = [

{name:”手裏剣”, price:300},

{name:”忍者刀”, price:1200}

];

console.log(item[1].price)        1200

・オブジェクトの値に配列を用いることもできる

　const character = {

      name:TOM,

      age:15,

      food:[“ラーメン”, ”うどん”, ”焼きそば”]

   };

レッスン３

・関数　いくつかの処理をまとめたもの

　　const 関数名　= function(){

　　　　まとめたいくつかの処理

　　　};                               関数の定義

　　関数名();                           関数の呼び出し　処理が実行される

・アロー関数　function()　の部分を　() >= とシンプルに置き換えられる

　　const 関数名　= () >={

　　　　まとめたいくつかの処理

　　　};                              

　　関数名();

・引数　関数の中でつかう値を追加する

　　const 関数名　= (引数) >={

        引数をつかった処理

　　　};

     関数名(引数に代入する値);          代入された値をふくんだ処理結果

　　引数は複数いれることもできる

　　const 関数名　= (引数1, 引数2) >={

        引数1, 2をつかった処理

　　　};

     関数名(引数1に代入する値, 引数2に代入する値);       

・戻り値　関数に値を与え、その関数の処理によって返ってきた値　returnをつかう

　　const add = (a, b) =>{

        return a + b;

    }                          a, bが与えた値　a+bが戻り値

　　consu sum = add(1, 3);     関数の呼び出し部分がそのまま戻り値になる 戻り値は4

    console.log(sum);        4      

   関数の中に戻り値を設定することによって、関数の外側に戻り値をつかった処理の文をつくれる。関数が多くの計算をふくんだブラックボックスになり、そこに値を代入すると計算結果が出てくる。

　　returnにifのような条件式を設定すると、true, falseのような真偽値を返すこともできる

　　const 関数名= (引数){

      return 引数をつかった条件式

　　};

    console.log(関数名(引数に代入する値));            true or false　

　　returnは関数内の処理を終了する性質もある。したがってreturnより後にある処理は実行されない

・スコープ

関数の中で定義した定数は関数の外ではつかえない。つかうとエラーが起こる。

　逆に関数の外で定義した定数は、関数のなかで使える。

　定数は関数の外での定義、一択か

レッスン４

・オブジェクトの中に関数を入れることもできる

　const 定数名= {

    プロパティ名: () => {

    　処理

     }

   };

 定数名.プロパティ名();　　　関数の呼び出し                      

・クラス　似たようなデータを大量につくるときにその設計図になる

　　　　　class クラス名{

             設計図の中身

　　　　　};

・インスタンス　クラスから生成したオブジェクトnewクラス名()　とする

　　class クラス名{

     };

   const 定数名= インスタンス;

　　console.log(定数名);　　　　　　　　　クラス名

・コンストラクタ　インスタンスを生成するときに実行したい処理や設定を追加する機能

　　class クラス名{

     constructor(){

       処理

　　　　}

    }

   const 定数名= インスタンス（new クラス名()）　　　　　処理

 　「this.プロパティ= 値」　これをコンストラクタの中にいれることで生成されたインスタンスにプロパティと値を追加することができる

　　　class クラス名{

       constructor(){

           this.プロパティ= 値

         }

      const 定数名= new クラス名() （インスタンス）

　　　　console.log(定数名.プロパティ);         値

　　　　　ひつとの定数にいくつものプロパティをいれられる。

　コンストラクタには引数を受け取れる

　　　class クラス名{

       constructor(引数1, 引数2){

           this.プロパティ1 = 引数1

           this.プロパティ2 = 引数2

         }

      const 定数名= new クラス名(引数1に代入する値, 引数2に代入する値)

　　　　console.log(定数名.プロパティ1);         引数1に代入した値

・メソッド　クラスにいれる動作

　　　class クラス名{

       constructor(引数1, 引数2){

           this.プロパティ1 = 引数1

           this.プロパティ2 = 引数2

         }

　　　　メソッド名(){

           処理

　　　　　}

      const 定数名= new クラス名(引数1に代入する値, 引数2に代入する値)

　　　　定数名.メソッド名　　　　　　処理

　　　メソッドのなかでコンストラクタのなかのプロパティの値を使いたいときは「this.プロパティ名」としていれこむ

　　　　　class クラス名{

       constructor(引数1, 引数2){

           this.プロパティ1 = 引数1

           this.プロパティ2 = 引数2

         }

　　　　メソッド名(){

           console.log(“こんにちは${this.プロパティ1}です”)

　　　　　}

      const 定数名= new クラス名(引数1に代入する値, 引数2に代入する値)

　　　　定数名.メソッド名　　　　　　こんにちは[引数１に代入する値]です

　　メソッド内で「this.メソッド名」とすることで同じクラスの他のメソッドをつかうことができる。

　　   class クラス名(){

         メソッド名1(){

        }

         メソッド名2(){

        this.メソッド名1();

        }

・継承　既存のクラスの機能をすべて引き継いで新しいクラスを作成すること

　　class 子クラス（新しいクラス）extends 親クラス（既存のクラス）{

    }

　　継承したクラスにメソッドをいれることもできる

　　継承したクラスは親クラスと子クラスの両方のメソッドを使える

　　　同じメソッド名の場合、子クラスが上書きされるので子クラスのメソッド優先（オーバーライド）

・コンストラクタのオーバーライドは一行目に「super()」が必要

　　オーバーライドすると親クラスの引数も消えてしまう。

　　そのため、super(親クラスの引数)　で親クラスの引数を引き続きつかえるようにする。

レッスン５

・ファイルの分割　コードの量が増えるとひとつのファイルでまとめるのが大変になる

・ファイルの関連付け　それぞれのファイルに必要な値を渡す

　export

　export default クラス名　　クラスの定義の最後にこれを打つとそのクラスがエクスポートされ他のファイルに値を渡すことができる

 import

  import インポートしたいクラス名 from “./インポートしたいクラスのあるファイル名”

　　ファイルの先頭にこれを打つと、エクスポートされたほしい値をインポートできる。

　import,exportできるのはクラスだけでなく、どんな値、定数、関数、文字列でもできる

・デフォルトエクスポート

　そのファイルがインポートされると自動的にexport default 値　の値がインポートされるため、インポートの値とエクスポートの値が違っていてもよい

　エクスポートできる値はひとつのファイルにつきひとつまで

　名前付きエクスポート　複数の値をインポートするとき

　　エクスポート　export {値1, 値2};

    インポート　　import {値1, 値2} from “./ファイル名”;

・相対パス　“./ファイル名”のこと　記述されているファイルからみた位置関係

　　./DogData  ./ 同じディレクトリの　DogData.js を指定

　　./date/DogData  ./data/ 同じディレクトリのdataディレクトリに移動　DogData.js を指定

　　../class/data ../ ひとつ上の階層に移動class/ classディレクトリに移動data.jsを指定

・パッケージ　誰かがつくった便利なプログラム。自分のコードにインポートできる

　　パッケージ例　chalkコンソール出力の文字に色をつけられる

　　import 定数名from “パッケージ名”

　chalkパッケージの使い方

　　console.log(chalk.yellow(“Hello World”));

 readline-syncパッケージの使い方　コンソールから値を受け取れる

　import readlineSync from “readline-sync”

  readlineSync.question(“名前を入力してください:”);

 　コンソールに入力された値は定数や変数に代入できる

　　const name = readlineSync.question(“名前を入力してください:”);

    console.log(`${name}が入力されました`)

　　整数を入力してほしいときは　readlineSync.questionlit

レッスン６

・push　配列の最後に新しい要素を追加するメソッド

　　const numbers = [1, 2, 3];

    console.log(numbers);            [1, 2, 3]

    numbers.push(4);

    console.log(numbers);            [1, 2, 3, 4]

・forEach　配列の中の要素をひとつずつとりだして、すべての要素に繰り返し同じ処理を行うメソッド

　配列= [要素1, 要素2, 要素3]

  配列.forEach ((引数) >= {処理});

  (引数) >= {処理}　部分はアロー関数

　引数に要素1が代入され、それによって処理が実行。次は、要素2が…の繰り返し。

　配列された要素が順番に関数のブラックボックスに入り、処理や計算された値がそれぞれ出てくる。

・find　アロー関数の処理部分に記述した条件に合うひとつ目の要素を配列の中からとりだすメソッド。条件にあった要素が見つかった時点で終了するのでひとつの要素しか取り出せない。要素がオブジェクトの場合もつかえる。

　const numbers = [1, 3, 5, 7]

  conrt findNumber = numbers.find((number) => {

    return number > 3;

  }); 

console.log(findNumber);                                               結果   5

　・filter　記述した条件に合う要素のみを選んで新たに配列をつくるメソッド

　　　　　findはひとつだけだが、filterはすべてを選べる

          find同様、配列がオブジェクトでもつかえる

　const numbers = [1, 3, 5, 7]

  conrt findNumber = numbers.filter((number) => {

    return number > 3;

  }); 

console.log(findNumber);                                          結果   [5, 7]

・map　配列内のすべての要素に同じ処理を行い、その戻り値から新しい配列をつくるメソッド。find, filter同様、配列のオブジェクト要素にもつかえる。

　const numbers = [1, 2, 3]

  conrt doubledNumber = numbers.map((number) => {

    return number * 2;

  }); 

console.log(doubledNumber);                                      結果   [2, 4, 6]

forEachと異なるのは、それぞれの値を配列にできるところ

感想

レッスン１

このレッスンは文の基本なので丸暗記しないといけない印象

難しいところは特になかった

レッスン２

条件式によって導かれるtrueとfalseの概念についての理解が大事。

この二つに分かれることで、処理が分岐する。

また、配列をつかってよりスマートな文を書けるようにするのが大事。

かっこが多くなるので、おのおのの処理がどこに属しているのかを常に把握する必要がある。

レッスン３

今回は関数についての学習

値があちこちにいったりきたりするのでそれを追うのが大変

代入した値がどういうルートをとおって処理され表示されるのか、

その道筋を追うのが大切。逆にそれが追えないと理解できていないかもしれない。

レッスン４

　所要時間２時間

　クラスはプロフィールのテンプレみたいなもの

　名前や歳のような値から、値を代入して計算した結果までプロフィールにいれられる

　クラスの中には、プロパティと関数を入れられる

　定数名、プロパティ名、クラス名ととにかく自分で設定する名前が多いので、それぞれを見失わないように管理するのが大変そう。わかりやすいコードを心掛けなければいけない

　レッスンを追うごとに思うが、完全に積み重ね学習なので前回の内容が理解できていないとさらに訳がわからなくなると思う。つくづく、一回一回の理解が大切。できるだけわからないところをそのままにしないほうがいい。

※レッスン４の途中におこった疑問と解決

　結構複雑だけど何のためにあるんだ？

　オブジェクトの概念がわからない

　どちらもいろんな処理を詰め込めるけど、関数とコンストラクタの違いってなんだ？

　　　→　過去のレポートから確認

　　　　コンストラクタはプロパティと値をいれる役割。処理を入れるメソッドと分ける

　クラスの役割

　　ひとつのクラスのなかに、情報をいれるコンストラクタと処理をいれるメソッドをいれられる。つまり、ひとつの定数に情報と処理の両方をしっかり部屋（コンストラクタとメソッド）を分けていれられる。

　　;が必要なときといらないときの違いって？

 　${ }はいってる分のバッククォート忘れがち

  　同じクラスのなかでそのクラス内の他のプロパティやメソッドを使う場合はthisをつける

   クラスは値や処理のテンプレートになる

　　クラスを継承することでテンプレートに値の違った処理を行わせることができる

　　プロパティ　プロフィール項目みたいなもの

レッスン５

　所要時間　一時間

　レッスン４までとは打って変わって、定数や代入がでてこない

　複数ファイルどうしの移動方法や、便利なコードを取り込む方法

　コードはほとんど書かない

積み重ねがなくてもいける

定数の設定や代入がない

レッスン６

今回は定数や引数、関数を存分につかったので積み重ねがないと難しかったと思う。

　forEach, find, filter, mapとすべて形が同じなので、それぞれ少し形を変えるだけで覚えることが少なかった。

javascriptコースを終えて

　基本的にひとつの関数やメソッドなどが紹介され、それについてのみの演習問題を行うかたちなので、無理なくさくさく進むことができた。でも、理解していなくても進んでいけるきらいがある。

　基本的に役立てる方法としては、紹介される技術を知り、手を動かしてなんとなくできていることを実感するところまで。

　覚えた関数やメソッドの組み合わせてより高度なコードを作成するためには書籍がいいかもしれない。プロゲートはあくまでの紹介された技術を知るにとどまる。

　また、道場コースがほしい。頭をつかった演習がないので、理解のアウトプットができない。

　あと、HTML、CSSとの組み合わせの機会がなかったのでそれもしたかった。　

　ただ大事な知識がたくさんあるので、入門編としては超おすすめ