フロントエンドエンジニアを目指している、まゆ(@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
まず、
- constは定数なので変わらない数値で使うもの
- letは変数で変わる数値で使うもの
ということから上記のコードは、
- game内容は変わらないもので
- pScoreとcScoreはそれぞれプレイヤーとコンピュータの得点を意味し、勝負をすると数値は変化するためlet
を用いているのかな?
で演算子である「=」や「=>」があるから
- =:変数に値を代入
- =>:?
>=や<=ならあるけど=>は記載されていない…これはなんだ…
=は変数に値を代入し、>のみだと左辺が右辺より大きい場合は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) クラスのオン/オフを切替
こちらもまだ理解はできていないので今ここではメモ程度に書いています。
一つづつ進むためにももりけん先生の初学者向けの問題をやってから解読していった方が良いかな?
もりけん先生の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 trueArray.isArray(arry) //true //arry instanceof Array //true //instanceof比較は継承しているオブジェクトのインスタンス比較なので // aryy instanceof Objectでもtrueが返ってくる
んー…まだ不明なところが多いので本格入門としまぶーさんの動画でJavaScriptについて学ぶことが先のような気がする…!
またチャレンジしてみます。
おわりに
JavaScriptについての自分自身の理解度レベルが今回実際にコードを読むことでわかりました。
初歩の初歩だというスタートなので本や動画、コードを読んで打ってを繰り返し意味を理解していこうと思います。
もりけん塾(@terrace_tech)