JavaScript~クイズゲーム 修正2~

今日は、以前のタイピングゲームの修正です。

上記が以前のコードです。

ここの117行目のところが原因で、最後の問題を解いた後に、正常であれば、結果が出るのですが、それがでません。

まず、何が原因なのか考えるため、
console.log(“3”, typeof question[random] === “undefined”);
をしています。
”3”には特に意味がありません。(見やすくしているだけです笑)

これを実行したところ三問目を解いた後に、undifinedになりました。

理由としては、
読み込まれる順番として、quizStart()→counter()→count > maxだった場合textDeleat()→result()となるのですが、
問題をランダムに表示して、問題がかぶらないようにするために、
97行目で

function randomNotInclude() {
for (let k = min; k <= max; k++) {
while (true) {
let tmp = intRandom(min, max);
if (!randoms.includes(tmp)) {
randoms.push(tmp);
break;
}
}
}

で設定したとうりで、randoms.push(tmp);
より、randoms配列にかぶらない数字を入れています。
なので、問題も1〜4(配列ではindexの番号は0〜3)しかないので、結果画面に移っても、コードは実行されているので5問目(配列indexの番号が4のとき)のときは、値がないのでundefinedになるということでした。

JavaScript~クイズゲーム 修正1回目~

JSのクイズゲームでエラーがでたので、先生に質問しました。

問題のコードがこれです。↓↓

エラーを起こすときは、
問題をスタートして、ラジオボタンが表示されて、問題に答えるためにラジオボタンにクリックしたときに、change is not definedになりました。

理由としては、HTMLのフォームのラジオボタンの要素に、onchange=”change(this.value)” としていることが原因でした。

これの何が原因かというと、 ブラウザでJSが読み込まれる際に、DOMを生成してからJSが読み込まれます。HTMLにonchangeが記載されているため、ここでJSが発動し、index.jsが読み込まれる前に、onchangeが発動するためのエラーでした。

なので、これの解決方法として
・HTMLにonchangeを書くのではなく、index.jsにaddEventListernerを使い、設定する
ここでもうひとつ疑問に思ったのが、
index.jsが読み込まれる前に発動しているのなら、<head>内にindex.jsを入れればいいのでは?と考えました。

しかし、これは、getElementByIdが読み込まれる前、つまり、DOMを生成する前に、読み込まれるため、エラーがおきます。
この解決策が、前回記事にした、DOMContedLoadedです。

LoadがDOMを含め、画像など全ての外部ファイルなどを読み込むまで起動しないのに対して
DOMContedLoadedは、DOMを読み込んで、記載されている関数を読み込みます。

これを使うことで、getElementByIdが読み込みエラーを起こさずに、JSを読み込むことができます。

以上です。

もりけん塾
もりけん先生ブログ

JavaScript~LoadとDOMContentLoadedの違い~

今日は、javascriptのLoadとDOMContentLoadedについて記事にします。

先生に質問した時に、先生の解答から調べたもでしたが、意外とブラウザでjavascriptやHTML、CSS、画像等がいつ読み込まれるのかが理解できていないと?になりました。

まず、javascriptがブラウザでどういう順番で読み込まれるのかについてです。
このリファレンスに書いてあります。

サーバにリクエストし、htmlの情報がブラウザに届いてから表示されるまで、JavaScriptはどのように処理されるか。

  1. ブラウザがhtmlを読むと最初にWindowオブジェクトが生成されます。
    windowオブジェクトは各ページまたはタブごとに生成されます。
  2. windowオブジェクトのプロパティとしてDocumentオブジェクトが生成され、htmlの中身を解釈してDOMツリーを構築しようとします。
    Documentオブジェクトには、文書の読み込み状況を示す文字列を返すreadyStateプロパティがあり、このときreadyStateプロパティの値は最初の「loading」になっています。
  3. htmlは記述順にしたがって構文解析(パース)されて、Documentオブジェクトに要素オブジェクト(<head><div>などの要素)やテキストノード(ブラウザ画面上に配置して表示できる文字列、改行、空白など)が追加されていきます。
  4. この時script要素があるとそのコードをパースし、エラーがなければそこでコードを同期実行します。
    つまりJavaScriptが実行されるまでhtmlのパースは一時停止します。
  5. htmlの中身がすべてパースされてDOMツリーの構築が完了するとdocument.readyStateプロパティ値は「interactive」になります。
  6. ブラウザはDocumentオブジェクトに対してDOMツリーの構築完了を告げる「DOMContentLoaded」イベントを発生させます。
  7. img要素などの外部リソース(サブリソース)を読み込みます。
  8. すべての読み込みが完了した時点でdocument.readyStateプロパティ値は「complate」になります。
  9. 最後にブラウザはWindowオブジェクトに対してloadイベントを発生させます。
  10. ここからユーザー定義イベントなど様々なイベントを受けつけて、イベントが発生するとイベントハンドラ非同期で実行されます。

これを軽く読んだ上で、

Loadについては、DOMから、画像まで読み込んでから実行されます。→全てが読み込まれてからWindowオブジェクトに対してLoadイベントが発火する。
DOMContentLoadedについては、DOMが読み込まれてから実行されます。

JavaScriptでDOMを操作する方法【初心者向け】

もりけん塾
もりけん先生ブログ

JavaScript~クイズゲーム2~

JavaScriptのクイズゲームを作ってます。
今回は、以前の話の
3、コードの解説
4、わからなかったところ、調べたところ

まず、コードです

3、コードの解説
最初は
Fisher-Yates アルゴリズムについてです
これは、配列の順番をランダムに変更させる関数です。
理論上もっとも高速で、確率が偏らないものみたいです

次にアクションから順に説明していきます。
・クイズスタートボタンをクリックしたら、ゲームが始まります(198行目)

・randomNotInclude()が読み込まれ、その中身は

function randomNotInclude() {
for (let k = min; k <= max; k++) {
while (true) {
let tmp = intRandom(min, max);
if (!randoms.includes(tmp)) {
randoms.push(tmp);
break;
}
}
console.log(randoms);
}
}
となっています。
この関数は、ランダム数字を表示する際に、重複しないような関数です。
ランダムに表示したとき、数字が重複しないように変数minで最小範囲、変数maxで最大範囲を決めています。
その後、for文でminがmaxより大きくなるまでの間、
さらに、

while (true) {
let tmp = intRandom(min, max);
if (!randoms.includes(tmp)) {
randoms.push(tmp);
break;
}
}
while文で、
trueの間、intRandom(min,max)関数を実行し、変数tmpに代入しています。
もし、配列変数randomsにtmpと同じ文字が入れば、randoms.push(tmp)で配列から同じ数字を削除して、while文を抜けます。

関数intRamdom(min,max)についてですが
min以上max以下の整数値の乱数を返します。

この段階で、配列randomsには、重複しないmin以上max以下の乱数が格納されています。

・quizStart()の中身は

function quizStart() {
console.log(“正解” + molecule);
console.log(“問題の数” + denominator);
counter();
random = randoms[count];
questionScreen.textContent=question[random];
console.log(random);
console.log(question[random]);
screenWrite(random);
}
となっています
クイズスタートが読み込まれると
counter()が読み込まれます

・counter()の中身としては
counter()が読み込まれるたびに、count変数を+1しています。
一旦if文の解説は後回しにします。(後半で)

この1ずつ増やしていったcount変数を重複していないrandom数字が格納されている配列の一つずつを呼び出すのに使用します。
random = randoms[count]

これでquestionScreen.textContent = question[random]で
問題をランダムに表示することができるようになりました。

・screenWrite(random)ですが変数randomの値を引数として使い
関数の中は、switch文を使用してます。
簡単に解説すると
先ほどのrandom数字を問題の配列questionと結び付けることで、randomが0のときはquestion[0]より
問題文は “現在の内閣総理大臣は?”,となります。
randomが0のときは、switch文のnumにも0が入っているので、
case 0、つまり questionArray = president.shuffle();
が読み込まれます。
配列presidentは問題文の “現在の内閣総理大臣は?”,の答えなので、それをshuffle関数をつかって、回答をバラバラにして、ラジオボタンに表示しています。
これをすることで、毎回同じ、問題の順番で表示されないということです。

・次に、次の問題にをクリックした時のことですが…
基本的には、コードに書いてある通りです。笑

ラジオボタンをクリックした時の値が、else if文の中身と一致していれば、変数molecule,denominatorを+1していきます。
一致していなければ、denominatorの+1をして、変数countが+1されていき、変数maxを超えたら、ゲームを終了し(”textdeleat()”)、結果を表示します(”result()”)

4、調べたところ
inclueds():特定の要素が配列に含まれているかどうかを true または false で返します。与えられた要素が見つかるかどうかを計算するために、 SameValueZero (ゼロの同値) アルゴリズムを使用します。
リファレンス:MDN

以上です

もりけん塾
もりけん先生ブログ

JavaScript~クイズゲーム~

JavaScriptを本気で勉強し始めてから、論理的に筋道立てて考えられるようになってきたような感じがするのは気のせいかな?

作品のほうも、クイズゲームができたので、少しずつ、スライドショーや、ドロワーメニュー、検索ボックス、※ページネンションを作っていきたいと思います。

ページネーションとは、長くなってしまった文章を複数のページに分割して、情報を読み取りやすくするナビゲーションのことを指します。

今日は、クイズゲームを作成してみました。

まずは、作品から…

1、クイズゲームをどう考えて作ったのか
2、全体的な流れ
3、コードの解説
4、わからなかったところ、調べたところ

で、進めていこうと思います。

1、クイズゲームをどう考えて作ったのか
・クリックするとゲームが開始される
・問題を表示する
・ラジオボタンを用い、回答を提示する
・次へのボタンをクリックすると、次の問題へ
・次へのボタンを押した時に、問題があっていれば、点数をいれる
・問題を終えたら、問題の結果を表示するようにする

作るにあたってこう考えました。

2、全体的な流れ
1、と重複するかもしれませんが
・ゲームスタートボタンをクリックしたらゲームスタート
・問題が表示されると同時にラジオボタンと3択の回答問題が表示される。
・ラジオボタンは何もチェックされていない状態からスタート
・ラジオボタンにチェックがなかった場合は、アラートで、’選択して下さい’を表示させる
・ラジオボタンにチェックがあれば、得点1を与える
・問題が終了したら、得点を計算して表示させる

これが大まかな流れです

今日は、一旦ここまでにします。
次回、コードの解説とわからなかったところを記事にしていきます。

以上です。

もりけん塾
もりけん先生ブログ

React~render( )について~

renderには2種類のrenderメソッドがあります。

ReactDOM.render()はReactエレメントをドキュメント(生成されるHTML等の文書)にレンダリングする役割です。
Reactコンポーネントのクラスで呼び出されているrenderでは、JSXなどで定義されたReactエレメントを返す処理を行っています。

レンダリング(コードから、画像や動画、文字を生成すること)が目的のメソッドなので、その他の処理を持たせないようにすることが大事!!

・render()で返すコンポーネントは、単一の親でなければならない。

renderメソッドで返すのは単一の親のコンポーネントであり、複数の親のコンポーネントを返すことはできません。
必ず1つの親になるように包みましょう。

// エラーになる
render(){
  return(
    <div>aaa</div>
    <div>bbb</div>
  );
}

// 正常
render(){
  return(
    <div>
      <div>aaa</div>
      <div>bbb</div>
    </div>
  );
}

・renderで空を返す
子コンポーネントで親から渡されたデータによって空のコンポーネントを返したい場合があります。
そんな時は、空のHTML要素を使わなくてもnullかfalseで返せます。(ただし、undefinedは使えません)

など色々なやり方?があるようです。

参考文献:https://qiita.com/endam/items/1bde821c4b29f9b663da

https://mabui.org/react-render-description/

以上です。

もりけん塾
もりけん先生ブログ

React~useStateとは~

useStateの意味がよくわからなかったので、記事にします。

useStateとは、クラスコンポーネントを書かずに関数コンポーネントでstateとほぼ同じ機能ができる機能のようです。

stateの意味の前に、
Reactコンポーネントがデータを受け取ったり、ハンドリング(データを捕まえたり)、表示するための主要な方法として、StateとPropsがあります。

1、State:そのコンポーネントが持っている状態
2、Props:親コンポーネントから渡されたプロパティ

1、State(状態)
Stateは可変のデータであること。仮想DOMとの差分をとり、実際のDOMを更新し、コンポーネントを再描画するための基本的な方法

2、Props(プロパティ)
Propsは、一般的に、親コンポーネントから子コンポーネントに渡される値。

StateとPropsの使い分け
コンポーネントは必要に応じて内部のStateを自由に使用できますが、いい意味ではUI体験のために、直接外部のStateに接続する場合にはPropsで受け取るべきであるとのこと

参考文献:https://qiita.com/kyrieleison/items/78b3295ff3f37969ab50

では、本題のuseStateについて
useStateとは、基本のフックである。
基本のフック(Hook)とは、React 16.8で追加された新機能である。StateなどのReact機能を、クラスを書かずに使えるようになった。

useStateの初期値は、なんでも良い!!
0でも1でも、boolean系、文字列なんでもOK!!

※ただし、オブジェクトはだめ!!
例:

const [test, setTest] = useState({
   test1: 1,
   test2: 2
 });

const countUp = () => {
    console.log("countUp-test", test);
    setTest({ test1: 3 });
  };

  return (
    <div className="App">
      <button className="buttonView" onClick={countUp}>{`ボタン`}</button>
    </div>
  );

testオブジェクトのtest1の値を更新しようとするとそのプロパティだけ更新されますが、他が消えてしまう!!

もし、React Hookでオブジェクトを管理するならuseReducerで管理する←今はよくわかりません。

また、Reactを勉強してわかり次第記事にします。

以上です。

もりけん塾
もりけん先生ブログ

React~関数コンポーネントの更新関数について~

最近蒸し暑い2020/6/26現在。
さらに、色々バタバタしていて、体重増加と、お腹が出てきたT^T

少し、復讐です。

Reactは、JavaScriptで作られた物をまとめたものになります。
さらに、Reactを使うことで、SPA(シングルページアプリケーション)を容易に行うことができる。
つまり、一回読み込まれるごとに、全てのページを更新しなくて済むので、サーバー、ユーザーなどに負荷がかかりにくい。
さらに、Node.jsなどを使うとサーバーサイドの分野までカバーできる。

こんな感じです…

本題で、今日は、以前先生に質問した。
更新関数についてです。


useState は何を返すのか? 
現在の state と、それを更新するための関数とを、ペアにして返します。
これが const [count, setCount] = useState() という書き方をした理由です。

このJavaScript構文は、”分割代入”と呼ばれています。
これが意味するところは、count,setCountと言う2つの変数を作って、useStateから返される値のうち1つ目をconstに、2つ目をsetCountに代入すると言うこと。

つまり、state変数を宣言する際、ペア、つまり2つの要素を含んだ配列が返されます。1つ目の要素はstateの現在の値、2つ目の要素はそれを更新するための関数です。
これらには、特定の意味があるので、アクセスするのに[0]や[1]を使うのではわかりづらくなります。だから分割代入を使うと言うわけです。←最後の2行については、自分もまだ理解できていません。笑

多分、この辺りは、Reactを触り始めたら、つまづいて、調べることになりそうです。

今回の参考文献:https://ja.reactjs.org/docs/hooks-state.html

以上です。

もりけん塾
もりけん先生ブログ

JavaScript~Node.js(非同期通信)やReact.js Vue.js(ライブラリ)やnmp,yarn(パッケージ)について調べたこと~

お久しぶりです。
母がなくなってから1週間を迎えようと言うところ…
ふとしたときに実感が湧く、「あぁ、いないんだな」と…
本当に不思議な感じです笑

今日は、JSで色々とお仕事を探していると、Node.jsやReact,Vueやnmp,yarnについての理解がないといけなくなりそうなので調べたことを記述します。

1、Node.jsについて
Node.jsは非同期通信を使うのに使われるそうです。
非同期通信とは、例挙げるのならば、相手(サーバー等)にアクセスした状態でも他の処理を行うことができると言う感じです。
つまり、マルチタスク的なことが可能になる感じです。
一方、同期通信は、サーバーに依頼してから全ての情報が自分の手元に届くまで、処理ができません。
まとめると、
非同期通信は、「これして」とお願いしつつも他のことしている感じ。
同期通信は、「これして」とお願いしたら、できるまで待つ感じです。
なので、同期通信は、かなり、時間が無駄になります。

2、React.js Vue.jsについて
JSをまとめたものが、jQueryと思っていたのですが、実際は、まだ他にあるようです。
私が以前作った、ストップウォッチ、タイピングゲームを他の人が最初から作らなくても、僕が作ったものを使って新しいものを作ればいいと言うのが、React.js Vue.js jQueryなどのライブラリと言うものです。(これだけ他のライブラリがある理由は、それぞれ利点と欠点があるからです。それについては、今後また記事にします。)

話を戻すと、プログラムしていて、
今後、100時間かかるコードを書くときに、自分で1から作れば100時間かかるけど、
他人が作ったコードを利用して書けば、20時間ですむとなるとそちらを使うし、さらには、自分で作るのってもしかしたら、バグとか出てきたら大変と言うことで、多くの人が使っているライブラリを使えばバグは少ないのではないかと言う考え方があります。
まとめると、ライブラリは、JSで作ったものをまとめてみんなが使いやすいようにまとめているものです。ライブラリはパソコンで言うフォルダみたいなものなので、まとめると言う意味だと考えると、想像しやすいです。

3、nmp,yarnについて
これは、初めて耳にして???となったものでした。
上記で書いたReact.js Vue.jsなどはライブラリと言うものですが、これを自分のコードにインストールしたり、更新したり、アンインストールするのはすごく大変みたいです(みたいと言うのは、やったことまだないから…笑)
で、これらを楽にしようというのが、nmp,yarnの役目みたいです。これらは、パッケージと言うみたいです。
これを使うことで、プログラマーやライブラリを使う人が楽になるようです笑(ようです…使ったことないからねー)

今日は以上です。

もりけん塾
もりけん先生ブログ

JavaScript~ストップウォッチ完了~

最近、なかなか時間を作ることが難しくなってきました。

今日は、ようやくストップウォッチができたので、記事にします!!(作るまで長かった笑)

基本的な流れをまず記載して、その後、実際のコード、解説、調べたことの順に書いていきます。

1、全体的な流れとして
・ゲームスタートをクリックすると、ゲームが開始される。
・クリックされたら、クリックしたバーが消えて、問題、制限時間が表示される。
・キーを入力して、問題の文字とあっていれば、次の問題へ変更される。
・制限時間を迎えたら、強制的にゲーム終了。
・クリアした問題の数とタイプミスした回数を表示する。

です!

2、実際のコード

です!!

3、解説
♦︎まず、クリックしてから、文字を入力できるようにしたいので
20行目 btn.addEventListener(“click”, () => {
のなかに、
25行目 window.addEventListener(“keypress”, e => {
を入れています。

クリックボタンを入力したら、startGame(),startTimer()関数が呼び出されます。
一つずつ見て行くと
・startGame()の中身は、ランダムで問題を表示させたいので、random()関数を使ってランダムに表示できるようにしています。
calc()関数を使って、文字列を分解して、文字に変更して配列questionLetterArryに挿入しています。
・次にstarTimer()の中身は、
function startTimer() {
const now = Date.now();
stopwatch = Math.floor((timeLimit – now + clickTime) / 1000) % 60;
console.log(stopwatch);
timer.textContent = `残り ${stopwatch}秒`;
if (stopwatch === 0) {
timer.remove(); }
}
こうなっています。
まず、インスタンス化をして、変数stopwatchで秒を取得することと、10秒カウントダウンを作っています。
その後、if文でstopwatchが0になったとき、タイマーの表示を無くします。

♦︎ window.addEventListener(“keypress”, (e) => {省略}
のなかにあるif文はタイピングした時に、一回間違えるごとにカウントしたり、
逆に正解していれば、配列letterArryに入力した文字を挿入します。さらに表示するのに文字を連結して表示するために、join()を使っています。

♦︎setIntervalをキャンセルするために、addEventListenerを使いボタン機能に機能を追加し、さらに変数let intervalにsetIntervalを代入しています。

以上です。

もりけん塾
もりけん先生ブログ