コードを見ていく-part1-

Contents

1. 構成
- 1.1. 流れを把握する
2. use strict
- 2.1. メリット
3. const、let、var
4. 参照

構成

流れを把握する

①初期画面はどうするか（何を表示させておけばいいか）
②どのようなアクションでゲーム開始するか（クリック）
③どういうルールにするか（どういう単語を使うか（文字の羅列か、意味のある単語か）、制限時間あり、タイプ数を記録、タイプミスを記録、1単語入力で1点、%で正確性を表示）
④ゲームの終了はどうするか（制限時間が来たら終了）
※htmlファイルの<script>タグに直接書くか、jsファイルを作り呼び出すか（動作確認とか練習なら直接書いてもいい。実務は分けた方がよさそう。）

use strict

'use strict’;
これは厳格モードのこと。エラーチェックが細かくなるので、少々注意が必要。

メリット

メリットは、MDNでは以下のように記されてる。 ECMAScript(エクマスクリプト)はJavaScriptの標準規格のこと。strictモードにするとjavaやcに近くなるようなので、そちらの経験者ならば設定した方が分かりやすくなるかもしれない。初心者にしてみれば、安全なコードを書く上で使えるが、過信するのも良くは無いし、非厳格モードと比較してみていった方が勉強になるのかもしれない。

第一に strict モードでは、JavaScript でエラーではないが落とし穴になる一部の事柄を、エラーが発生するように変更することで除去……、
第二に strict モードでは、JavaScript エンジンによる最適化処理を困難にする誤りを修正、
第三に strict モードでは、将来の ECMAScript で定義される予定の構文を禁止
https://developer.mozilla.org/ja/ （最終閲覧2020/03/31）

const、let、var

ハマるところはみんな大体一緒。疑問に思うことは既に誰かが疑問に思ってる。どう違うのだろう。
どう使い分けるのだろう。
const(定数)は初期値を設定する。const words = [ 'apple’, 'sky’, 'blue’,]; みたいに。
letは初期値は要らず、let word;とかでも書ける。もちろん、let isPlaying = false;のように、
初期値にfalseを設定することで、false/trueでonとoffを表現する方法もある。

const target = document.getElementById('target’);
targetという定数を指定している。
document.getElementByIdはdocumentのgetElementById()メソッドのこと。以下が構文。

var element = document.getElementById(id);
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementById （最終閲覧2020/03/31）

HTMLの特定のidに直接アクセスし、elementオブジェクトを返す。つまり、以降で、elem.style.color = newColor;とかとして、色を指定してやれば、検索したidに対してそのelementオブジェクトに指定したもの返すことができる。

公式に分かりやすい例があった。特定のidのテキスト部分を抜き出し、逆にテキストを設定することもできる。

//対象のhtml <div id="divA">This is <span>some</span> text!</div>
let text = document.getElementById('divA').textContent;
document.getElementById('divA').textContent = 'This text is different!';

長くなりそうなんで続きは次回。