あしあと

明日の自分への情報発信

Javascript(7日目)とLinuxの学習(5日目)とプロになるためのweb技術入門(3日目)

今日も引き続き勉強。今までやってきたLinuxの勉強がただの作業とかしたので、ubuntuをインストールし、別の「入門者のLinux 素朴な疑問を解消しながら学ぶ (ブルーバックス)」で学習してみる。

 

 Javascript

配列を操作するメソッドを学ぶ

pushメソッド

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

下の画像で言えば、1,2,3で出力した後にpushメソッドを入力することで、配列の最後に新しい要素を追加している。これによって簡単に要素の追加をできるようになった。

f:id:keropp1234:20200107062442p:plain

 

forEachメソッド

forEachメソッドはforEach(それぞれの)という言葉の通り、配列の中の要素を1つずつ取り出して、全ての要素に繰り返し同じ処理を行うメソッド。括弧の処理が非常に多いのでそれに注目まずforEachの後に小括弧がある。その中にnumberのアロー関数があるイメージである。そのため中括弧もあるので見た目が少し複雑になり、誤字脱字があると出力されなくなるので要注意。

f:id:keropp1234:20200107062855p:plain

 

forEachメソッド内の引数に配列内の要素が繰り返し入力されることで、一つのメソッドでひとまとめに処理できるようになる仕組み。

f:id:keropp1234:20200107063037p:plain

 

forEachメソッド(number)とすることで定数名numberの引数それぞれが、定数numberに代入され出力処理されるというのが以下の画像の流れである。

f:id:keropp1234:20200107063228p:plain

 

引数に入っている関数をコールバック関数を呼ぶ。コールバック関数は長くなりやすいので,改行して見やすくするのが一般的。

f:id:keropp1234:20200107064508p:plain

 

findメソッド

findメソッドとは、コールバック関数の処理部分に記述した条件式に合う1つ目の要素を配列の中から取り出すメソッド。

f:id:keropp1234:20200107065833p:plain

 

配列がオブジェクトのときもfindメソッドを用いる。下の画像では、このとき戻り値にプロパティを条件(===)として指定することで、値も含めたオブジェクトそのものを取り出すことができる。

f:id:keropp1234:20200107070005p:plain



filterメソッド

先頭の一つしか取り出せないfindと違ってfilterメソッドは条件に一致する全ての要素を

 取り出すことができる。以下のようにfilterメソッド内で条件式に一致した値全てを取り出せる。

f:id:keropp1234:20200107180006p:plain

 

findメソッドと同様に、配列の要素がオブジェクトの場合でも呼び出すことができる。

以下の画像ではオブジェクトのプロパティを条件として呼び出しているが、プロパティそのものが呼び出されている。

f:id:keropp1234:20200107180223p:plain

 

mapメソッド

mapメソッドとは、配列内のすべての要素に処理を行い、その戻り値から新しい配列を作成するメソッドのこと。
以下の例では配列numbersの全ての要素を2倍した要素を持つ、新しい配列([2, 4, 6])を作成している。ようは任意の配列の要素全てにに何らかの処理を施せば、処理済みの配列になるだけのことである。

f:id:keropp1234:20200107181346p:plain



mapメソッドもこれまでと同様にオブジェクトにも使用することができる。以下の例では、mapでfirstNameプロパティとlastNameプロパティを繋げる処理をしている。

f:id:keropp1234:20200107181504p:plain

 

コールバック関数について

Javascriptでは引数に関数を渡すことができる。

このとき引数に渡された関数をコールバック関数と呼ぶ。

f:id:keropp1234:20200107182249p:plain

 

下の図のように、関数を呼び出す際に引数に関数を渡す。

f:id:keropp1234:20200107182606p:plain

 

関数は()をつけると関数の呼び出しになり、関数のみだと関数のそのものを指す。

下の画像ではコールバック関数を引数に渡すときは()をつけていない。

f:id:keropp1234:20200107191751p:plain

 

関数callの引数として渡した関数printWankoが呼び出されるまでの流れは以下の通り。

f:id:keropp1234:20200107192056p:plain

 

引数を関数で定義する

先ほどは事前に定義した関数をコールバック関数として渡したが、下右の画像では引数の中で直接コールバック関数を定義している。

f:id:keropp1234:20200107192743p:plain

 

具体的な流れは以下の通り。

f:id:keropp1234:20200107192925p:plain

 

コールバック関数は2つ以上の引数を渡すこともできる。

f:id:keropp1234:20200107193540p:plain

 

progateのJvascriptは終了。関数周りに曖昧な点がまだまだあるがここからは実践で経験していかないと覚えられないと思われる。

 

入門者のためのLinuxを85Pまで読了。非常に読みやすく面白いため、テキストを変更してよかった。ubuntuもモダンで扱いやすい。

 

プロになるためのweb技術入門は45Pまで読了 

javaの登場までのwebの歴史を学んだ。次回はHTTP ( Hyper text transfer protocol)についての勉強。プロコトルとは手順のような意味で、ある信号に意味を持たせる取り決めである。狼煙やモールス信号、手振りの旗も、信号に取り決めをしてパターンに意味を持たせている。