1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Progate JavaScript 学習コースメモ

Last updated at Posted at 2021-02-04

学習コースⅠ 変数 定数 条件分岐

変数の名前は自由だが、できるだけわかりやすくする
oddNumber など2語以上の場合は大文字で区切る

テンプレートリテラル
文字列の中で「${定数}」とすることで、文字列の中に定数や変数を含めることができます。
この時、文字列全体をバッククォーテーション(`)で囲む必要があります。
console.log(`${name}は${age})歳です`);などのように、複数の変数や定数を埋め込むことも可能です。

switch文では分岐の数だけcaseを追加していきます。
caseとdefaultのあとはコロン :
また、switch文ではbreakが非常に重要です。breakとはswitch文を終了する命令です。breakがないと、合致したcaseの処理を行った後、その次のcaseの処理も実行してしまいます。
switch文を使うときにはbreakを忘れないように!!

switchの条件の値がcaseの値と一致したとき、その部分の処理が実行されます。caseのどれにも一致しなかった時、defaultのブロックが実行されます。defaultはif文のelseに似たようなものです。

このようなswitch文の性質を利用すると、if, elseifによる分岐が多く複雑な場合、switch文で書き換えるとシンプルで読みやすいコードにできます。

学習コースⅡ 繰り返し 配列 オブジェクト undefined

forは繰り返しをシンプルに書ける。for文では「変数の定義」「条件式」「変数の更新」の3つを括弧の中に書きます。括弧の中ではそれぞれをセミコロン(;)で区切ります。

配列を代入する定数名は複数形
インデックス番号で呼び出すときは[]を使う
配列は要素を[]で囲みましたが、オブジェクトは{}で囲みます。
プロパティと値の間はコロン( : )で繋ぎます。また、配列と同様に、要素と要素はコンマ(,)で区切ります。

配列の中のオブジェクトのプロパティの値を取り出すには、
「配列[インデックス番号].プロパティ名」

undefined は、if文の条件式を使って対応する。

オブジェクトの値の部分には、文字列や数値だけでなく、オブジェクトを用いることができます。
このようなオブジェクトは、「オブジェクト名.プロパティ.プロパティ」のように呼び出します。

1つのプロパティに複数の値を当てはめるとき、配列も使うことができる

学習コースⅢ 関数 引数 戻り値 スコープ 最大値

function()」の部分を「() =>」としても、これまでと同じように関数を定義することができます。これはES6から導入された新しい書き方で、「function」を用いるよりシンプルに書くことができます。
この関数の書き方のことを、特別にアロー関数と呼びます。

引数は関数の中で、定数のように扱える

複数の引数において、渡す引数の順番と関数を定義したときの引数の順番は対応しているので、関数を呼び出すときは引数の順番に気をつけましょう。

関数の中でreturnを使うと、呼び出し元で値を受け取れるようになります。
「return 値」と書くことで、関数はその値を戻り値として返します。

戻り値も引数と同様に、様々な値を用いることができます。
例えば、if文で使うような条件式をreturnすると、その条件式の結果として得られる真偽値(trueまたはfalse)を返すことができます。

returnは、戻り値を返すだけでなく、関数の処理を終了させる性質も持っています。よって、returnの後にある関数内の処理は実行されませんので注意しましょう。
関数の引数や、関数内で定義した定数や変数は、その関数の中でしか使うことができません。 このようなそれぞれの定数や変数の使用できる範囲のことをスコープと呼びます。 一方、関数の外で定義した定数や変数は、関数の中でも使うことができます。

関数だけでなく、ifやswitchなどの条件文、forやwhileなどの繰り返し文などの、中括弧「{}」を使う構文でもスコープを作ります。

学習コースⅣ クラス コンストラクタ メソッド 継承

オブジェクトの「値」の部分には、関数を用いることもできます。
また、その関数を呼び出すには、「定数名.プロパティ名()」とします。

プロパティ名の後ろの()を忘れないようにしましょう。

クラス名は基本的に大文字から始める.

クラスからオブジェクトを生成するには、「new クラス名()」とします。

クラスにはコンストラクタと呼ばれる機能が用意されています。コンストラクタはインスタンスを生成するときに実行したい処理や設定を追加するための機能です。
まず、クラスの中括弧 { } 内に「constructor() { }」と記述します。

コンストラクタの中には処理を記述することができます。
ここに書いた処理はインスタンスが生成された直後に実行されます。
大切なのは、インスタンスごとに毎回実行されるということです。

コンストラクタの中で、生成したインスタンスに関する情報を追加してみましょう。
コンストラクタの中で「this.プロパティ = 値」とすることで、生成されたインスタンスにプロパティと値を追加することができます。

インスタンスに関する説明の通り、インスタンスとはオブジェクトです。
従って、コンストラクタの中で追加した値はオブジェクトと同様に「インスタンス.プロパティ」とすることでクラスの外で使用することができます。

コンストラクタでは、「学習コース Ⅲ」で学んだ関数と同じように、引数を受け取ることが可能です。
「constructor」の後の括弧「( )」内に引数名を記述することで、その引数をコンストラクタの処理内で使用できます。
コンストラクタに引数として値を渡すには、「new クラス名()」の括弧「( )」内に値を追加します。

クラスの重要な機能の1つである「メソッド」について学習していきましょう。
メソッドとはそのインスタンスの「動作」のようなものです。「名前」や「年齢」などの情報はプロパティで追加したのに対して、メソッドは「挨拶をする」「値を計算する」などの処理のまとまりを表します。

メソッドはクラスの中で定義します。「メソッド名() { }」とすることでメソッドは定義できます。
メソッドは関数と似たようなもので、中括弧「{ }」の中にそのメソッドで行いたい処理を記述します。
メソッドは、そのクラスから生成したインスタンスに対して呼び出します。
具体的には、「インスタンス.メソッド名()」とすることでそのメソッドを呼び出し、処理を実行することができます。

では次に、「name」の値を用いて「名前は〇〇です」と出力するメソッドを作成してみましょう。

メソッド内でインスタンスの値を使用するには、「this」という特殊な値を用いて、「this.プロパティ名」とします。

メソッド内で他のメソッドを呼び出すことも可能です。
以下の図のように、メソッド内で「this.メソッド名()」とすることで、同じクラスの他のメソッドを使うことができます。

継承を用いてクラスを作成するには「extends」を用います。
「Animalクラス」を継承して「Dogクラス」を作成するには、図のように「class Dog extends Animal」と書きます。

子クラスで定義した独自のメソッドは、親クラスから呼び出すことはできません。以下のように、AnimalクラスのインスタンスからgetHumanAgeメソッドを呼び出すとエラーが発生してしまいます。
親クラスと同じ名前のメソッドを子クラスに定義すると、子クラスのメソッドが優先して使用されます。 これは、子クラスのメソッドが親クラスのメソッドを上書きしていることから、オーバーライドと呼ばれます。

メソッドと同じように、コンストラクタもオーバーライドすることができます。
例えば、子クラスにプロパティを追加したい場合などに用います。

ただし、コンストラクタをオーバーライドする際は1行目に「super()」と記述する必要があります。

子クラスのコンストラクタ内の「super()」では、その部分で親クラスのコンストラクタを呼び出しています。そのため、親クラスのコンストラクタが引数を受け取る場合には、「super」の後ろの丸括弧「( )」に引数を渡す必要があります。

学習コースⅤ ファイルの分割 パッケージ

ファイルを分割するとエラーが出るのは、値が無いから。
そこで、クラスの定義の後で「export default クラス名」とすることで、そのクラスをエクスポート(出力)し、他のファイルへ渡すことができます。

他のファイルで定義されているクラスを使用するにはインポート(読込)をする必要があります。使用するファイルの先頭で「import クラス名 from "./ファイル名"」と書くことでインポートすることができます。
なお、ファイル名の拡張子の「.js」は省略することができます。

エクスポートできるのはクラスだけではありません。

文字列や数値や関数など、どんな値でもエクスポートが可能です。
エクスポートする際は、下図のように「export default 定数名」とします。 インポートする際は「import 定数名 from "./ファイル名"」とします。
export defaultはデフォルトエクスポートと呼ばれ、そのファイルがインポートされると自動的に「export default 値」の値がインポートされます。そのためエクスポート時の値の名前と、インポート時の値の名前に違いがあっても問題ありません。
デフォルトエクスポートは1ファイル1つの値のみ使えます。このファイルをインポートする際には、デフォルトエクスポートの値を自動でインポートするため、値が1つのみとなっています。 複数の値をエクスポートしたい場合は、「名前付きエクスポート」を用います。
名前付きエクスポートとは、defaultを書かずに、名前を{}で囲んでエクスポートする書き方です。 名前付きエクスポートした値をインポートする場合は、エクスポート時と同じ名前で値を指定します。インポートする値は、エクスポート時と同様に、「import { 値の名前 } from "./ファイル名"」と{}で囲んで指定します。

名前付きエクスポートは、デフォルトエクスポートと違い、複数の定数やクラスを指定してエクスポートが出来ます。 また、「export { 名前1, 名前2 }」という形で書くことにより、1つのファイルから複数のエクスポートが出来ます。
インポートの際も、コンマで区切ることで複数のインポートができます。

インポートすれば、そのファイルでパッケージが使えるようになります。
パッケージのインポートでは./は不要。
chalkは出力する文字の色を変えることが出来ます。
文字列を、chalk.yellowやchalk.bgCyanで囲むだけで、文字の色を変更できます。

readline-syncというパッケージを導入すると、コンソールへの値の入力と、その入力された値をプログラムの中で使うことができるようになります。
readlineSync.question(質問文) のように記述します。
質問文が出力されると一旦処理が止まり、コンソールに値が入力されると、次の処理に進みます。

入力された値は、定数や変数に代入することが出来ます。
readlineSync.questionの部分を定数に代入すると、入力された値がそのまま定数nameに代入されます。

年齢のように整数を入力してほしい場合はquestionIntを用います。

学習コースⅥ 配列を操作するメソッド

pushメソッドとは、配列の最後に新しい要素を追加するメソッドです。
pushメソッドの後の()の中に追加したい要素を入力します。

forEachメソッドとfindメソッドの引数と処理には単数形を使う

forEachメソッドは配列の中の要素を1つずつ取り出して、全ての要素に繰り返し同じ処理を行うメソッドです。
forEachメソッドの引数には、学習Ⅲで学んだアロー関数が入っています。
配列内の要素が1つずつ順番にアロー関数の引数に代入され、処理が繰り返し実行されます。
これから学ぶメソッドはこのようにアロー関数を使う形が多いので覚えておきましょう。

引数に入っている関数はコールバック関数と呼びます。
これから学ぶメソッドはコールバック関数を使う形が多いので、覚えておきましょう。

findメソッドとは、条件式に合う1つ目の要素を配列の中から取り出すメソッドです。
findメソッドを使うときは以下のように書きます。
配列numbersの要素が1つずつ引数numberに代入されて処理が進みます。
コールバック関数の中は { return 条件 } と書くことで、条件に合う要素が戻り値となります。

findメソッドは条件に合う要素が見つかった時に終了するので、条件に合う最初の1つの要素しか取り出せません。

filterメソッドとは記述した条件に合う要素のみを取り出して新しい配列を作成するメソッドです。

mapメソッドとは、配列内のすべての要素に処理を行い、その戻り値から新しい配列を作成するメソッドです。
頻繁に使う!

コールバック関数の中は単数形!!

学習コースⅦ コールバック関数

JavaScriptの実践において頻出の関数!

JavaScriptでは引数に関数を渡すことができます。 引数に渡される関数をコールバック関数と呼びます。

関数は、関数名の後ろに()をつけると呼び出され、()をつけなければ関数そのものを指します。

関数を直接引数の中で定義することもできます。

コールバック関数では、普通の関数と同じように引数を渡すことができます。
コールバック関数の引数と、実行時に渡す引数の数をそろえるように気をつけましょう。
1
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?