はじめに
今回は、私が簡単なサイトを作るにあたって詰まったところを整理するために記事にして書き殴る その２です。その１はこちら。
早速難しかったところを書いていきます。
Array.slice()
配列というものは便利でもあり、扱うのが難しいものです。初めに挫けるのは多分、変数に代入するときに訪れるでしょう。
配列を扱うときの注意点
配列を変数に代入するとき、値だったら変数ごとに値が与えられますが、配列の場合は配列の入った変数を違う変数に代入した場合、同じ配列が与えられるのではなく、配列が入ったメモリを参照する形になります（処理を軽くするため）。
const aList = ['apple', 'banana', 'grape'];
let bList = aList;
aList.pop(); // 配列の末尾の要素 'grape' を削除
console.log(aList); // 結果: ['apple', 'banana']
console.log(bList); // 結果: ['apple', 'banana']
// bList も aList と同じ値になる。（配列の入っている場所を参照しているから)
そうは言っても、同じ配列が欲しい！そんなときは、Array.slice()を使いましょう。
slice()を使うと配列をコピーすることができます。
const aList = ['apple', 'banana', 'grape'];
let bList = aList;
bList = aList.slice(); // bList に aList をコピーする。
aList.pop();
console.log(aList); // 結果: ['apple', 'banana']
console.log(bList); // 結果: ['apple', 'banana', 'grape']
こうすることでコピーすることができます。
私の場合は、英単語が1000語入った配列があり、そこからslice()で範囲を指定して、その範囲をタイピングゲームに入れるというような形にして使いました。
因みに blist = [...alist];でもいけるはず。(詳細は スプレッド構文 で検索)
addEventListener()をまとめて書きたい！
document.getElementById('id');を全部書いて全部にaddEventListenerを書くのは少なければいいけど、多いと見づらくなるし、大変です。そこで見つけたこの記事。
コメントにとてもすっきりとしたコードがあります。
これを使うことによって一つforEach文を書くだけで全てかけちゃいました。ありがとうです。
いつも忘れる\\＼＼\\バックスラッシュくん
option + ¥です。\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\これでいっぱい打てるね。
.class::afterにアイコンを入れるときの注意点
font-familyを'Font Awesome 5 Free'にします。
contentに入れたいアイコンのUnicodeを入れます。
font-weightを入力する。 ここ重要!!
私の場合はfont-weightを入力したら正しく表示されました。SOLIDは「900、REGULARとBRANDSは「400、LIGHTは「300」です。 なぜか表示されない場合はこれをやってみるといいかも！
空白を入れるための特殊文字
デザイン上、空白を入れたいとき、ありますよね？でもmarginでも入れづらいし、文字の頭を少しだけ後ろに持っていきたい、スペース一文字分くらい文字の頭を空けたい、そんな時は特殊文字が有効です！
スペースを入れるための特殊文字
挿入した箇所の前後の改行を禁止する役割のある空白
  半角スペースより少し広い空白
  全角スペースとほぼ同じ大きさの空白
  の空白より小さい空白
また、特殊文字を用いて半角スペースを入れるのであれば を使うことは問題ないらしい。
eval関数を使おうとした話
eval関数は変数の定義に変数を使用する時などに使える関数です。私は配列に名前を入れて、forEachで名前にgetElementByIdを代入してコードを少なくしようとして検索しました。
結論から言うと使わないほうがいいみたい。セキュリティリスクがあるから使わないのと、evalがなくても大体コードは書けるから。eval is evil.
文字をクリックしても反応するラジオボタンの作り方
<label>
<input type="radio" name="unit" value="1-1-25">
<p class="unit-list"> 1 ~ 25 </p>
</label>
labelタグで囲むことで、文字（上の場合は「1~25」)をクリックしてもラジオボタンが押されたことになる。
ほんとは、labelタグにfor="unit"を入れて>1~25</label>と書くのが正しい。（labelで囲むやり方は簡単だが、対応していないブラウザもあるから）
ラジオボタンなどのデザインを変更するために
いくつか参考にしたいサイトを載せておこう。自分が見返すためにね。
参考にしたいサイト
参考にしたいサイト
参考にしたいサイト
実数を整数にするための方法
Math.ceil() ...小数点繰り上げ。
Math.floor()...小数点繰り下げ(主にMath.randomと一緒に使われる)。
Math.round()...四捨五入。しかし負数の場合は-3.51 => -4 というように、少々動きが変。
ParseInt()...小数点を無かったことにする。
しっかり使い分けれるようになりたい！
最後に
ここまで読んでくれた方ありがとうございました。これからも壁にぶち当たりながら少しずつ成長していきたいと思います。完璧主義なのでわからないことがあったら調べないと気が済まない人なので、まぁー成長速度は遅いですが、着実に上手くなります！