【もりけん塾71記事】JavaScriptの変数定数、データ型について実際のコードをみて考える

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

フロントエンドエンジニアのもりけん（@terrace_tech）先生のツイートで現場でよく作る機能が以下のものが多いようです。

現場でよく作る機能

・ログインログアウト
・登録、パスワード忘れ、メルアド変更
・検索
・ページネーション
・エラートースト、確認モーダル
・各種保存時バリデーション
・お知らせ
・お気に入り
・ファイルアップロード、ダウンロード
・バーチャライゼーション
・DnDでの並び替え、カスタマイズ

— フロントエンドエンジニア (@terrace_tech) August 21, 2020

目標物として意識してJavaScriptを学んでいこうと思います。

今日は上記のものには遠いですが基礎的な部分

が実際にコードでどのように使われているのかを見ていこうと思います！

また上記を用いてもりけん（@terrace_tech）先生の問題も解いていけたらと思っています。

じゃんけんゲームのコードで変数・定数・データ型はどのように使われているのか

以前このコードを写経しましたが、JSについてさっぱりでした。

実際のコードはGitHub上に掲載されているので閲覧が可能ですが…コードの内容について調べながらまとめていこうと思います。

JavaScriptのコード①

ではJavaScriptのコードを見ていこうと思います。

 JavaScript
const game = () => {
let pScore = 0;
let cScore = 0;

引用：GitHub

まず、

ということから上記のコードは、

を用いているのかな？

で演算子である「=」や「=>」があるから

>=や<=ならあるけど=>は記載されていない…これはなんだ…

=は変数に値を代入し、>のみだと左辺が右辺より大きい場合はtrueとある。

んーゲーム内容は()で{}内の値を変数に入れて、()内よりも大きい場合はtrueになる？

じゃんけんするとあいこではない限りスコア0が1に変化するから、そういった場合は正しいよってことかな？んー一旦ここまでで次にいってみよう。

JavaScriptのコード②

次のコードへ。

 JavaScript
//Start the Game
const startGame = () => {
const playBtn = document.querySelector(".intro button");
const introScreen = document.querySelector(".intro");
const match = document.querySelector(".match");
playBtn.addEventListener("click", () => {
introScreen.classList.add("fadeOut");
match.classList.add("fadeIn");
});
};

引用：GitHub

コメントの「//」からゲームスタートと記載があるので、じゃんけんゲームがスタートしたときのJavaScriptと推測。

constでゲームスタートというものは変化しないので定数。

もし変数を使うと勝手にゲームが始まってしまうバグが生じるのかな。

続いてplayのボタンを押すことでdocument.querySelector…

document.querySelector

指定したセレクターに一致する、文書内で最初の要素ノードを返します。

引用：MDN

だからplayボタンを押すと指定したセレクタに一致する？？

んーわからない。

ドットインストールをやってみます。

ドットインストールでJavaScript

ドットインストールで上記のような宝探しゲームや

ボタンを押すとおみくじの結果がでる動画学習をしました。

ここで学んだこと気がついたことをまとめていきます。

document

JSで表示されていた「.document」はdocument全体を指すことだということがわかりました。

ただまだ深く分かっていない状態です。

エラーメッセージの読み方

次にエラーメッセージの読み方としてデベロッパーツールでConsole画面を開くと

を特定してくれています。

classListプロパティ

addはオンにすることができ、toggleはオンとオフの切替ができるclassListプロパティ。

他にも以下のものがあります。
（addやtoggleも加えた方が個人的に頭の整理がしやすいので表に加えています。）

 

メンバー	概要
length	リストの長さ
item（index）	インデックス番目のクラスを取得
contains（clazz）	指定したクラスが含まれているか
add（clazz）	リストにクラスを追加
remove（clazz）	リストからクラスを削除
toggle（clazz）	クラスのオン/オフを切替

引用：改訂新版JavaScript本格入門 山田祥寛　p341

こちらもまだ理解はできていないので今ここではメモ程度に書いています。

一つづつ進むためにももりけん先生の初学者向けの問題をやってから解読していった方が良いかな？

もりけん先生のJS初学者問題

もりけん先生のHPで公開されているJavaScript練習問題。

じゃんけんゲームはまだ先な気がするので、こちらをやってみよう…

問1

const a = {a: 'a'}とconst b = {b: 'b'} をマージしたc を出力してください e.g{a:'a',b:'b'}

const a = {a: 'a'};
const b = {b:'b'};
const c = Object.assign(a, b);
c //{a: 'a', b: 'b'}

問2

const arry = ['aa','bb','cc','dd','ee','ff','gg'];

のdd,ee,ffを新たな配列として返してください

const newArry = arry.slice(-4,-1);
//or
const newArry = arry.slice(3,-1);

問3

const arry = ['a','b’] の要素をconsole出力してください e.g 'a'と'b'

const arry = ['a','b'];
arry.forEach(function(elem,i){
 console.log(elem)
})
//'a'
//'b'

問4

const arry = ['a', 'b']の各要素にindex値を足した文字列を出力してくださいe.g 'a0'と'b1'

const arry = ['a','b'];
arry.forEach(function(key,i){
 console.log(key + i)
})
//'a0'
//'b1'

問5

const arry = [1,2]と定義して配列かどうかを評価してください e.g true

Array.isArray(arry) //true
//arry instanceof Array //true
//instanceof比較は継承しているオブジェクトのインスタンス比較なので
// aryy instanceof Objectでもtrueが返ってくる

引用：【JavaScript】JavaScript練習問題集385問(脱初心者/中級者)2020/4/18更新

んー…まだ不明なところが多いので本格入門としまぶーさんの動画でJavaScriptについて学ぶことが先のような気がする…！

またチャレンジしてみます。

おわりに

JavaScriptについての自分自身の理解度レベルが今回実際にコードを読むことでわかりました。

初歩の初歩だというスタートなので本や動画、コードを読んで打ってを繰り返し意味を理解していこうと思います。

もりけん塾（@terrace_tech）

Thanks：もりけんさん

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