トラたんの挑戦するBlog in Japan

プログラミング初心者が半年でプログラミングの仕事をする

毎日投稿していくはずが、、、(なんてこった。)

こんばんは!!!

 

 

トラたんです!

 

 

タイトルのとおり、毎日投稿していくはずがお休みしてしまいました。

 

これは僕自身あかんなって思いました。

 

なんでかっていうと、毎日このブログに学んだことを記録していくブログなので、毎日やらないと意味がないと思っているからなんですね。

 

正直、二日間お休みしたのには理由があって、

 

1つ目は卒論をそろそろ書き始めないといけないって話だよね

2つ目は昨日は友達と3人でゴルフをしていたって話。

 

そもそもプログラミングの勉強二日間お休みしていたので書くことないんですけど

 

それに、

 

毎日の勉強って大事だと思うんですけど、

 

二日間お休みすることによって頭がリフレッシュされてより理解できると思ったんですよ!

 

だから、毎日やるのもいいけどたまには休息も必要だなって思いました。

正直、あと少しでJavaScriptの学習も終わりを迎えているので、、、

 

それじゃあ今日の学びから!

 

<本日のプログラミング学習>

 

①pushメゾット

②forEachメゾット

③findメゾット

④filterメゾット

⑤mapメゾット

 

①pushメゾット

 

このメゾットは、

配列の最後に新しい要素を追加することができるメゾットです。

 

例えば、元々の配列が1,2,3だったとしましょう

その配列をコンソールにそのまま出力するだけでなく、新たに4という数字を配列の中の要素に加えましょうってなった際に使うメゾットがpushメゾットです

 

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/6/1543829630497.png

引用元:

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/6/1543829630497.png

 

②forEachメゾット

 

このメゾットは、

配列の中の要素を1つだけ取り出して、全ての要素に繰り返し同じ処理を行わせるメゾットです。

 

ここではアロー関数を使うことを覚えておきましょう!

 

仕組みとしては、配列の中の要素が引数の中に代入され、

コンソールにて処理が実行されることでこのメゾットが使えるというわけであります。

 

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/6/159002882228.png

引用元:

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/6/159002882228.png

 

③findメゾット

 

このメゾットは、

条件式に合う1つ目の要素を配列から取り出すメゾット

です。

 

例えば、配列が1,3,5,7とあったとする。

 

この配列の数から3より大きい数字を取り出せという条件式を書きます。

 

そしてこの配列の中から3より大きい最初の数字は5なので、コンソールには5が出力されます。

 

この場合の定数名はfoundNumberを書く必要があり、5がこの定数名に代入されることによってコンソール上に出力されます

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/6/1544087316788.png

引用元:

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/6/1544087316788.png

 

④filterメゾット

 

このメゾットは先ほどのfindメゾットと少し似ているのですが、

 

記述した条件に合う要素のみを取り出して新しい配列を作るメゾットです

 

先ほどの配列と条件式をそのまま使うと、

3より大きい数字を取り出すとすると、5の他に7もありました。

 

findメゾットは1つのみを取り出すのに対し、

 

filterメゾットは複数の要素を配列の中から取り出すことができます。

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/6/1572318080620.png

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/6/1572318080620.png

 

※findメゾットもfilterメゾットも数値のみを取り出すだけじゃなく、オブジェクトも取り出すことができるのでとても便利だと言えますね

 

findメゾットの場合

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/6/1543918178849.png

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/6/1543918178849.png

 

filterメゾットの場合

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/6/1568083446197.png

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/6/1568083446197.png

 

 

⑤mapメゾット

 

このメゾットの特徴は、

配列内の全ての要素に処理を行い、その戻り値から新たな配列を作るメゾットです

 

例えば、配列内の数字が1,2,3だったとします

 

次に定数名、doubledNumberがあるとします。

 

そうすることで、配列内の数字が×2され、

コンソール上では、2,4,6というふうに処理され実行されます。

 

戻り値returnを使うことで、このように処理されます。

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/6/1572318156790.png

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/6/1572318156790.png

 

このメゾットにもオブジェクトを呼び出すこともできるので覚えておく必要があります。

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/6/1572318180704.png

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/6/1572318180704.png

 

 

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

本日はここまで!

 

今日もありがとうございました!

 

 

それじゃまた

 

バイバイバイ~

 

 

 

 

戻り値は結局なんなん??

こんばんは!!

 

 

トラたんです!!

 

本日のブログは、主に戻り値について語って行こうかなって思います。

 

 

どうやらここに来て、過去最大の???がきました。

 

 

なにが言いたいのかというと、

 

プログラミングの壁にぶつかりました。

 

戻り値っていうのがどうも理解できず、今日は調子が悪いですね。

 

要するに、

 

呼び出し元で受け取る処理結果を戻り値だというそうで、

そのイメージはなんとなく分かるんですよね。

 

 

しかし、戻り値で使う return文と普通にコンソールで入力した場合とで

 

何か違いがあるのかなって思ったりするんですよ。

 

 

1つでも使える文とかがあるとバリエーションとかプログラミングする際のシステム作動とかでパフォーマンスの幅が広がると思うんですが、

 

どう考えても一緒だと感じてしまうというか、違いが分からないというか。

 

そんなこんなで今日の学習は、ずっと疑問だったのでまとめれませんでした。

 

 

だけど、少しでもまとめておかないと自分が困るんでまとめます。

 

 

<本日のプログラミング学習>

 

①戻り値について

 

 

戻り値とは、

 

呼び出し元で受け取る処理結果のこと

 

そして使うものとしては、

 

return文

 

具体例として、

 

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/3/157715607244.png

引用元:

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/3/157715607244.png

 

 

少し注意として、

 

return文はただ普通に戻り値として使われるのが通ですが、

 

return文には関数の処理を終了させる役割もあります。

 

つまり、

 

return文の後ろに書いたコンソールや文は関数として処理はされないので注意が必要だということを学びました。

 

戻り値をもし使い、さらにif文も使う場合は、

 

returnを書く前に、if文を先に書く必要があるということ

 

 

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

 

 

本日はここまで!!

 

 

分からなければ、参考書を買うのも良し、プログラミングに強い友達に聞くのも良し、

 

割り切ってコツコツやっていきます!!

 

 

それじゃまた

 

 

バイバイバイ~

 

 

 

 

縮毛矯正に先日行ってきました。その後のヘアスタイルは、、、、

皆さん、どうもこんばんは!!!

 

 

トラたんです!

 

本日も見てくださってありがとうございます!

 

 

先日、とある美容院に行ってきまして、縮毛矯正をしてきました。

 

 

わしがやってきた縮毛矯正は、頭皮にやさしい酸性の薬剤を使う縮毛矯正でした。

 

人間の頭皮って弱酸性に近いそうでして、

 

通常の縮毛矯正はアルカリ性で行うので頭皮に負担がかかりやすいんですね

酸性の薬剤を使うことで頭皮環境に負担をあまりかけないような施術ができるとのことでした。正直なところ、やっていただいた感じ、めちゃいい感じ!!

 

長年、癖毛に悩まされていたわしにとっては、サラサラヘアーって憧れていたのでとてもいい感じになりました。アイロンも使わず、ドライヤーのブローだけで伸ばしていただいたのでそこまでピンピンにもならず、自然な形に近いように生まれ変わりました。

 

しかし前よりボリュームがなくなったので、少しそこは否めないというか、、、

でも何事もやってみるのがいいですね!

 

やらずして後悔するより、やって後悔したほうがいいですし!

 

それでは参ります!

 

<本日のプログラミング学習>

 

①関数とは

②アロー関数

③引数とは

④複数の引数を受け取る関数

 

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

①関数とは

 

関数とは、いくつかの処理をまとめたものという意味になります。

 

例えば、自己紹介の文はいくつもありますよね!

「こんにちは!」や「私の名前は○○です!」などたくさんあります!

それらをまとめて処理して出力するときに、関数を利用します

 

関数の定義の仕方は、

 

const 定数名  =  fuction( ) {

    (まとめたい処理を書く)

} ;

 

このように関数を用意することを、「関数を定義する」といいます。

 

しかし上記の定義をしただけでは、処理はされません。

処理の実行をするためには上記の関数の下に、

 

const 定数名  =  fuction( ) {

    (まとめたい処理を書く)

} ;

定数名 ( ) ;

 

赤文字の部分を付け足すことで処理を実行してくれます。

 

このことを「関数を呼び出す」といいます。

 

 

②アロー関数

 

アロー関数は先ほどの関数定義の時に出た、function( )を変えるだけとなっております。

 

書き方としては、

 

function( )  ⇒ ( ) =>

 

だけです。こっちのほうがシンプルですね!

 

③引数とは

 

 

引数とは、「関数に与える追加情報みたいなもの」です

 

引数を受け取る関数定義っていうものがありまして、、、

 

先ほどの関数定義があるとします。

 

そこにfunction( )アロー関数に変え、

括弧内を引数名と表示することで引数を受け取ることが出来るのです!

 

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

    (まとめたい処理を書く)

} ;

 

また、引数を受け取る関数を呼び出すためには先ほどと同様に、

 

定数名(値);を入力するだけで引数を呼び出すことが出来るわけであります。

 

具体例として、

 

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/3/1573095867574.png

引用元:

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/3/1573095867574.png

 

引数は関数の中では、定数、変数と同じ使い方もできます。

そのため、テンプレートリテラルも同様に利用することができます!

 

 

④複数の引数を受け取る関数

 

関数は複数の引数を受け取ることもできます。

今さっきまでは、

 

一つの引数に対し、一つの引数を呼び出していましたが、

 

今回は、複数引き出すことができます。

 

書き方としては先ほどと同様で、

 

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

   (処理したい関数を書く)console.log使用

} ;

定数名(値1 ,値2);

 

と入力するだけで終わりです!!

 

 

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

 

本日はここまで!!

 

日々の積み重ねがいづれ大きな力となることを信じて日々努力し続けます!!

 

それではまた

 

バイバイバイ~

 

 

 

 

 

 

やっぱりプログラミング学習はそんな甘くないお話

こんばんは!!

 

 

トラたんです!!!

 

 

いつも見てくださってありがとうございます!

この際にReaderになってもらえると嬉しいのでどうぞよろしくお願いします!

 

 

やっぱりプログラミング学習はそんな甘くないですね~笑

 

まだまだ地に足がついていないというか、今わし自身がどこの部分を勉強していて、どんなことにつながるのかが見えてない状況です。

 

心は折れてないですし、やる気がなくなったわけではないですが、

やはりモチベの維持という面では難しいところって感じです。

 

でもこういうのって初心者の方は必ず通る道だと思うし、

正直、わし自身だけじゃないというか、なんというか、まぁ気楽にそのうちわかるよって気持ちでいこうかなっておもてますぅ~

 

 

割り切っていこうや!!って感じですぅ~

 

 

はい!笑笑

今日も割り切ってまとめていきましょ!!

 

 

<本日のプログラミング学習>

 

①オブジェクトを要素に持つ配列⑵

②undefinedとは

③favoriteプロパティってなあに?

 

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

①オブジェクトを要素に持つ配列⑵

 

この分野は昨日の続きとなっておりますので、

是非⑴見てないよ~って方は昨日の投稿を見てくださるとわかるんじゃないかな?

 

 

繰り返し処理を用いて、プロパティに対する値を上から順に出力するだけの話ですね。

 

そう、こんだけの話なので少しだけ余談をさせてください。

 

この後に練習問題をやったんだけど、

全く頭に入ってこなくて、何をやったらいいのかとかわからなかったんですよ。

 

なんかそういう時ってありません?

 

何やっても上手くいかない日とか今日はボーっとするなみたいな日

 

以前やったテンプレートリテラル(文字の連結)を忘れてしまっているし、

 

けど、一つだけわしすげぇって思ったのが、

 

テンプレートリテラル$マーク使うことは覚えていたみたいで

 

そこだけは褒めてやりました!笑

 

これぞ自己肯定感バク上げの秘訣?だそうです笑笑

 

 

②undefinedとは

 

 

わしはね、こう見えて英語できるんですよ笑

自慢じゃないかって思った方すみませんでした。

 

だから、この単語出てきて分からないってことがなかったというか、

あーあの意味ねみたいな感じになったのでそういうところはプログラミング学習をやっていて助かっている部分ですね。

 

undefinedとは、「不特定な、特定していない、定義されていない」っていう意味があります。

 

その名のとおり、プログラミングにおいても同じ意味で、存在しないプロパティをそのままコンソールに出力することを意味します。

 

そのままですね!インデックス番号とか存在しないものを入力しても出力したらコンソールにはundefinedと出力されるだけなので

 

だけど、

 

コンソール上にundefinedって表示されていたら、なんかカッコよくないじゃないですか!

 

それを避けるためにも、if文elseを一緒に使うということをするとコンソール上にundefinedって表示されないようにするんです。

 

if (○○ === undefined) {

(プロパティの値が定義されていない時の処理をする所)

} else {

    (プロパティの値が定義されている時の処理をする所)

}

 

この文をfor文の中に書いていくんですね

そうすることで、定義されてないものを出力した時にundefinedと表記されなくするのです!

 

 

③favoriteプロパティってなあに?

 

 

オブジェクトの値の部分には、数値や文字列だけでなく、オブジェクトを用いることができるんですね!

 

その時に、favoriteプロパティを使って表現していくということになります

 

オブジェクトを呼び出すときの方法としては、

「オブジェクト名.プロパティ.プロパティ」と書くことで

その特定のプロパティだけを出力することができます!

 

 

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

 

 

ということで本日はここまで!

 

初めにも書いたんですが、わからないところは割り切って前へ前へ進みたいと思います!!

 

 

それじゃ!またあした!!

 

バイバイバイ~

 

 

 

 

 

 

プログラミング学習、少しコツをつかみ始めたかも!!

こんばんは!

 

 

トラたんです!!!

 

 

プログラミング学習のコツ、少しつかみ始めたかもしれません!!!

 

 

なんとなく無意識にではありますが、出力するスピードであったり、この状況にはあの操作が必要であろう等、わし自身で区別することができていると感じますね~

 

 

わからないことが分かるようになったり、できなかったことができるようになると楽しさや達成感等味わうことができてより学びたいって思う気持ち、これからも大切にしていかないといけないなって感じました!!

 

 

<本日のプログラミング学習>

 

①配列の繰り返し

②オブジェクトとは

③オブジェクトの値の取得、更新

④オブジェクトを要素に持つ配列⑴

 

 

①配列の繰り返し

 

通常、配列を書いた後、コンソールに出力をしなければいけないため、

配列の下にコンソール文を入力します。

 

しかし、配列文の下にfor文を用いることで、いちいちコンソール文を書く手間を省くことができます。

 

(従来の配列と書き方)

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/2/1512365445885.png

引用元:

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/2/1512365445885.png

for文を使った配列とコンソール出力)

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/2/1512622288736.png

引用元:

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/2/1512622288736.png

 

このようにして従来の書き方よりかは手間も時間も省けることに気が付くと思います!

変数の値は0から始めることも注意が必要ですね!!

 

また、配列数をコンソールに出力したい場合は、

lengthを用いて配列と一緒に使います!

 

使い方として、

 

const fruits = ["apple", "banana", "orange"];

console.log(fruits.length);

 

というふうに書くこともできますし、(コンソール部分、コンマをつけて分けるのを忘れないこと!)

 

const fruits = ["apple", "banana", "orange"];

for ( let i = 0; i < fruits.length,; i++) {

console.log(fruits[i]);

}

 

for文用いて書くことができます。

 

 

 

②オブジェクトとは

 

配列では、主に文字列や数値が配列部分に並ぶのでしたね!

 

配列部分に並ぶ文字が大きくなったバージョンがオブジェクトになります

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/2/152591638596.png

引用元:

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/2/152591638596.png

 

ここにはいくつかのルールがあります

 

1、まずは、配列と違い{ }で囲います

2、プロパティと値は:(コロン)でつなぎます

3、要素と要素同士は  ,(コンマ)で区切ります

 

(書き方の具体例)

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

 

 

また、オブジェクトも定数に代入することができるので、

下にコンソール文を書くことを忘れないようにしましょう!

 

 

③オブジェクトの値の取得、更新

 

コンソールにオブジェクト全部を出力しないで、オブジェクトの中のプロパティ一部を出力したい時ってありますよね笑(いや、しらんけど)

 

その時に、オブジェクトの下にコンソール文を書くとできます

 

具体例として

 

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

console.log(itme.name);

 

赤文字を付け加えることで、コンソールに手裏剣だけを出力することができます

 

また、オブジェクトの更新もできます!

 

書き方として、

 

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

item.price = 500;

console.log(item.price);

 

赤文字部分を入力することでコンソールに出力することができます。

 

 

 

④オブジェクトを要素に持つ配列⑴

 

今回の部分はただ単にオブジェクトを配列のようにまとめることができるということを学びました。

 

どういうことかというと、

 

[ {プロパティ1:値1, プロパティ2:値2} ] , [ { プロパティ3:値3, プロパティ4:値4} ]

 

どうでしょうか、、、、

 

長くないですか??

 

横に長くなるのを防ぐためにまとめた方法があります!!

 

書き方は、

 

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/2/1512539259356.png

引用元:

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/2/1512539259356.png

 

そして配列にはインデックス番号も振られているのでしたね!

上の要素から0、1、2・・と振られています。

 

また、コンソールに特定の要素だけを出力した場合は、

インデックス番号を指定して出力します。

それだけではなく、要素の中の値だけを出力したい場合もあると思います。

その場合の書き方を今から紹介します。

 

まず、要素だけを出力したい場合

 

 console.log(items[1]);

 

次に、要素の中の値のみを出力したい場合

 

 console.log(items[1].price);

 

このようにして入力をすることでコンソールに出力するものを変えることができます

 

 

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

 

 

 

本日はここまで!!

 

 

明日もプログラミング学習頑張ります!!!

 

 

それではまた!

 

バイバイバイ~

 

 

 

継続は力なり、プログラミング学習も継続が力なり

こんばんは!!

 

 

トラたんです!!

 

 

いつも見てくださって本当にありがとうございます!!

もし見てくださっている方がいらっしゃるなら、是非ブックマークやReaderになっていただけると幸いです!!

わし自身の成長を見届けていただきたいなって思いますので、どうぞよろしくお願いしますm(_)m

 

 

それでは本日の~JavaJava行きましょう!!

 

<本日のプログラミング学習>

 

①while文について

②for文について

③配列とは

④配列の要素の取得

⑤配列の要素の更新

 

 

 

①while文について

 

繰り返し処理を行う時にwhile文を用います。

書き方は、、

 

while (条件式) {

    (繰り返し処理される文);

}

 

この際、条件式がTrueの間、{ }内の処理を繰り返すことができます!

更新するコードを書き忘れることがあり、そのままにしていると繰り返し処理される部分が無限に処理される「無限ループ」が発生するので注意が必要です

必ず終わりを見せるコードを出力させる必要があります!

 

 

②for文について

 

while文の他に繰り返し処理させることができるのが、for文です

 

何が違うのかというと、for文のほうがシンプルかつ書きやすいというメリットがあります。

 

書き方としては、、、

 

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

    ( 処理される文)

}

 

というように書きます。

 

どうでしょう。シンプルじゃありませんか?

 

また、計算式の省略についても学びました。

 

例えば、

 

変数定義が、let number = 1; 

条件式は変数numberが100以下まで

変数の更新が、変数numberに1を加えていく(または1を引いていく)

 

だったとしましょう。

 

通常なら、

 

for (let number = 1; number <= 100; number += 1;) {

    console.log(number);

}

と書きますが、計算式の省略をすると

 

number += 1 ⇒ number ++

number -= 1 ⇒ number --

 

というように省略可能というわけであります!

 

 

③配列とは

 

複数の値をまとめて扱う方法を配列といいます!

 

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/2/1512365273645.png

引用元:

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/2/1512365273645.png

 

このような状態を一つにまとめるのが配列といいます。

書き方としては、

 

[ A, B, C, D, E, F,]のようにまとめることができます。

アルファベットの部分を要素と呼び、コンマで区切るルールがあります。

 

配列も一つの値なので、定数に代入することができます。

例えば、

 

const fruits = ["apple", "banana", "orange"];

 console.log(fruits);

 

というような配列があるとします。

 

定数名はfruitsと書いてありますが、定数名は常に複数形で入力することを覚えておく必要があります。

 

 

④配列の要素の取得

 

 

配列の中の要素にはインデックス番号というものが振り分けられています。

 

 

上記の配列で見てみましょう。

 

 ["apple", "banana", "orange"];

 

このような配列があるとして、

インデックス番号は、0から始まるルールがあります。

 

左の要素から0、1,2・・・となります。

 

また、要素の中の一つを出力したい場合は、、、

 

console.log(定数名[0])と入力することで、

コンソールにインデックス番号0の要素が出力されるというわけであります。

 

 

⑤配列の要素の更新

 

この部分は要素の更新をする方法を学びました。

 

要素に値を代入することで、その要素を上書きすることができます。

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/2/1512465642993.png

引用元:

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/2/1512465642993.png

 

このように入力することで、コンソールに新たな要素を出力することができます。

 

 

 

 

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

 

 

以上、本日の学びでした!!

 

JavaScriptもだいぶ勉強してきましたね。

 

わし自身も覚えることが多くて大変ですが、負けずに学習を続けていきたいと思います

 

 

それじゃ、また明日!!!!

 

 

バイバイバイ~~

 

 

【プログラミング学習】JavaScriptの学習はやっぱりProgateでしょ!!って思ったこの頃

こんにちは!!

 

 

トラたんです!!

 

 

今朝、北海道にクマが出て自衛隊員が負傷したニュースを見ました。

 

なんというかどちらもかわいそうだなって思いました。

 

自衛隊員の方も怖かっただろうし、怪我された方が無事であればなって思うばかりです

 

クマの方も襲うつもりもなかっただろうし、射殺されて痛かっただろうなって思いますね。まぁ、人命を考えると致し方なかったことだと思います。

 

 

重い話からはじめてすみません!少し興味深いニュースだったので、、、

 

 

それでは今回もプログラミング学習の学びについて、

共有したいと思います!!

 

 

<本日のプログラミング学習>

 

① elseについて

② else ifについて

③複数の条件式について

④switch文について

 

 

 

 

① elseについて

 

昨日投稿しました、if文の続きになるんですが、

 

if文は「もしこの場合、このような処理をします」というものでしたね

 

しかし、全てが処理されて出力されるわけではなく、間違った条件式を入力をすると成り立たないことがあります。そのため、「もしこの条件式が成り立たなかった場合、違う処理をします」というのが、elseの役割ということになります!

 

例えば、定数が7の場合で、ifの条件式が、「定数numberの値が10より大きい」だったとしましょう。

 

もしこの条件式が正しいなら⇒YES

もしこの条件式が異なるなら⇒NO

 

となるわけでありまして、値が10以下であるということを出力するようにプログラミングしなければいけないわけであります。

 

 

その時に if文と一緒にelseを入力することで、いちいち正しい場合のif文と誤りの場合のif文を書く必要がなくなります。つまり、1つの条件分岐で2つの条件式を入力し、出力することができるわけであります。

 

 

これがelseを使った条件分岐ということです。

 

 

②else if について

 

else ifの文はこのような場面の時に使います

 

引用元:

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/1/1525675259822.png

 

例えば、値10より大きいという条件式が満たされなかったとき、違う条件式を処理する分岐を設定することができます。

 

その方法とは、、、、

 

else if (条件式)を用いるのです!!!

 

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/1/1512454005746.png

 

引用元:

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/1/1512454005746.png

 

最初に入力した条件が満たされず、処理がFalseとなった場合で、条件式2がTrueの場合に else if が登場するということになります。最終的にどの条件式もFalseだった場合に、else文の条件がコンソールに処理されるという訳であります。

 

 

③複数の条件式について

 

高校生の数学の時間に「集合」という単元を学習した覚えはありませんか?

 

そう、まさに「集合」をここでは学習しました!!

 

「~かつ~」とか「~または~」みたいなの思い出しました!

 

 

JavaScriptの世界でもそれは存在していまして、、、

 

JavaScriptの世界では

 

「~かつ~」「&&」で表し、

「~または~」「||」で表します。

 

またJavaScriptの世界では、

 

Aの条件が正しくかつBの条件も正しい場合、

 

その時の複数の条件式は正しいと言えるそうです

 

一方で、Aの条件が正しくかつBの条件は誤りの場合

 

その時の複数の条件式は誤りになるそうです

 

つまり、両方の条件式のうち、一つでも誤りがある際は、

それらの条件式はFalseとして処理されるということになります。

 

 

また、

 

 

Aの条件が正しくまた、Bの条件も正しい場合

処理される条件は正しいと処理されることになります。

 

一方で、

 

Aの条件が誤りまた、Bの条件は正しい場合

処理される条件は正しいと処理されます。

 

つまり、「~または~」の方は片方の条件が正しければ

全体の条件は正しいと言えるということになります

 

 

④switch文について

 

 

if文の条件分岐以外にも、switch文という条件分岐もあります。

 

表現方法としては、switch(条件の値){ }と表します。

これだけでなく、switch文の中にcaseというものを追加することで処理を分けることも可能になります。

忘れていけないのが、caseを追加したら必ずbreakで締めくくるルールもあるので忘れてはいけません。

 

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/1/1512032403180.png

引用元:

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/1/1512032403180.png

 

表し方はこのように表します。

 

また、caseと定数の値がどれも合致しない場合は

 

defaultというブロックを使い、出力します。

 

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/1/157430484370.png

引用元:

https://d2aj9sy12tbpym.cloudfront.net/progate/shared/images/slide/es6/study/1/157430484370.png

 

 

 

本日はここまで!!

 

明日から、また学習を頑張っていきたいと思います!!

 

 

それではまた~~~

 

 

バイバイバイ~