Web プログラミング

【もりけん塾86記事】JavaScriptですごろくゲームができない理由は?

フロントエンドエンジニアを目指している、まゆ(@Ymayu_it)です。

 

JavaScriptですごろくゲームができない理由を考えました。

 

基礎…基礎ができていないからや…

 

基礎に戻るために今日はJavaScriptの本を読んでまとめていきます。

 

JavaScriptで基礎的な動画を見る

JavaScriptの入門動画でこのお三方には非常にお世話になっています…!

 

ただ腹落ちしていないことと、基礎部分が理解できていないので何度も何度も繰り返して見ていく必要があるとも同時に思いました…

 

ではどこで基礎的部分を補うのか?

 

本かなと。

 

友人たちは本を読まずにコードいじっていたら間隔でできたとか天才的なことを言っている2名がいましたが、私は凡人なので本を一度読んでからつつこうと思います。

JavaScriptの本で基礎部分を具体的に理解を深める

JavaScriptの本を読んでいるだけでは、理解も深まらないと思うので実際に

  • GoogleChromeの「about:blank」で
  • デベロッパーツールを開いて
  • コンソールに書いて

実際にどうかを見ていこうと思います。

 

ちなみにコンソール画面では

clear()

でこれまで書いてきたコードが消せます。

 

==演算子と===演算子のちがい

==演算子と===演算子の評価基準が異なるようなのでまとめます。

 

==演算子 ===演算子
評価基準 オペランドに異なるデータ型が指摘された場合は以下4つに分類 データ型を含めて等しい
①組み合わせが数値と文字列の場合
→文字列を数値に変換して比較
②組み合わせに論理値が含まれている場合
数値に変換
③組み合わせがオブジェクトと数値または文字列の場合
→オブジェクトをtoString()メソッドやvalueOf()メソッドなどを利用
プリミティブ型の値に変換してから比較
④組み合わせがnullやundefinedの場合
等しいと判定
名前 等価演算子 厳密等価演算子

 

プリミティブ型ってなんだっけ?

メモ

プリミティブ型は、

  • 数値
  • 文字列
  • 論理値
  • null
  • 未定義値(undefined)

が当てはまる!
プリミティブ型とは違う参照型もあって

  • オブジェクト
  • 配列
  • 関数

がありプリミティブ型と参照型をデータ型という!

 

独学JavaScriptの37ページにデータ型についての記述がありました^^!

 

プリミティブ型と参照型のちがいは何があるんだろう?

メモ

  • プリミティブ型の変数は値そのものが格納される
  • 参照型の変数ではオブジェクトへの参照が格納される

 

データ型は基礎中の基礎だと、おさないさん(@YorozuyaOsanai)が動画でおっしゃっていたのでコードに出会って、その都度最初は本を読んで行こうと思います。

 

【問題あり】if文を実際に作成してみよう!

if文で実際にコードを書いてみました!

 

問題に行く前にif文についての説明を入れておきます。

メモ

if文とは条件によって処理を分岐させるもの。

 

例えば、

もし今食べているごはんがオムライスだった場合はconsol.logで「美味しい」と表示させるなど

 

ifは英語で「もし〜ならば」なのでそういったときに使うもの。

 

 

独学JavaScriptの本に掲載されていたifの問題を解いてみました!

成績を表す変数scoreに応じた評価を求めるプログラムを作成しなさい。なお、評価は80点以上をA、70点以上80点未満をB、60点以上70点未満をC、60点未満をDとする。

引用:独学JavaScriptの問題 p76 練習問題3.2

 

とあり、答えは以下のものになります。

 

 JavaScript
const score = 50;
if (score >= 80){
alert(score + '点はA評価です');
} else if (score >= 70){
alert(score + '点はB評価です');
} else if (score >= 60){
alert(score + '点はC評価です');
} else {
alert(score + '点はD評価です');
}

最初は解答を見ることなく作成しましたが、50点なのにD評価になってしまいました…

 

理由は、

 JavaScript
const score = 50;
if (score >= 80){
alert(score + '点はA評価です');
} else if (70 <=score < 80){
alert(score + '点はB評価です');
} else if (60 <= score < 70){
alert(score + '点はC評価です');
} else {
alert(score + '点はD評価です');
}

としていたからです。

 

if文でもし、80点ならばという記載があるにも関わらずそれを無視していたなぁと反省。

 

上から順々に評価について述べているのに数字を何度も記載することはちがうことが分かったので、次から気をつけていこうと思います。

 

(学生時代D判定ばっかりだった点数だったなぁと思いつつコードを書いた今日)

 

【問題あり】for文を実際に作成してみよう!

for文の問題を解いてみました!

 

その前にfor文についてメモ書きしていきます。

メモ

for文はプログラムで同じ処理を繰り返し実行させたい場合に使うもの。

注意点としてエンドレスで実行に

 

for文の型は以下のとおりです。

 JavaScript
for(初期化式; 条件式; 更新式) 文

 

また無限ループにできる方法は以下のとおりです。

 JavaScript
for( ; ; ){
}

無限ループの場合、条件式なども必要ないようです。

 

おわりに

基礎が分かっていないとすごろくゲームで分かったので動画学習ではなく、本を読んで進めていきました。

 

動画もとってもわかりやすいんですが本でやることも理解が深まる気がする…

 

もっと読めるようになってスラスラ書ける様になりたい…

 

もりけん塾(@terrace_tech

Thanks:もりけんさん

 

もりけんさんの『武骨日記』へ

 

-Web, プログラミング

© 2020 Mayu_Yamada