今日やったこと
- ドットインストール「詳解JavaScriptDOM編」復習
- ドットインストール「初めてのJavaScript」復習
- ドットインストール「JavaScriptでおみくじを作ろう」復習
- ドットインストール「JavaScriptでタイピングゲームを作ろう」復習
- パングラムの単語を取り入れたタイピングゲーム作成
基礎文法復習
基礎文法の復習として、DOM編を３倍速で復習してみました。
DOM編は今日で3周目なので、３倍速でも問題なく理解できました。
３周してみて、大体理解できたので、DOM編の復習は今日で終わりにしたいと思います。
「はじめてのJavaScript」
基礎文法編、オブジェクト編、DOM編をそれぞれ３周した後に「はじめてのJavaScript」の動画を見てみたら、ヌルヌル理解できました。
やはりいくらプログラミングは作りながら身につけていくとはいえ、最低限の基礎知識はないとダメですね。
divタグの作り方だったり、toggle等の理解が深まりました。
あと、わかっているようでわかっていなかったdatasetもDOM編をしっかりやったおかげでわかるようになりました。
datasetを使うと、好きな名前で属性をつけることができるので、これが使えるようになると作れるものの幅も格段に広くなります。
「JavaScriptでおみくじを作ろう」
「JavaScriptでおみくじを作ろう」もヌルヌル理解できました。
おみくじの確率の調整方法だけ強いて言えば少し難しいかな〜ぐらいであとは基礎編をやっていれば簡単ですね。
「JavaScriptでタイピングゲームを作ろう」
また、最初に「JavaScriptでタイピングゲームを作ろう」で理解できなかったsubstringも理解できるようになりました。
タイピングゲームの仕組みが理解できたので、全体をちょっとだけいじってアレンジしてみました。
フォントは、WindowsではTimes New Roman、MacではTimesが表示されるようにしました。
時間は3秒だと短すぎるので、30秒にしました。
そして、出てくる単語をパングラムに出てくる単語にすることで、A〜Zまでを全て含んだタイピングゲームにしました。
パングラムとは、A〜Zまでが全て含まれている文章です。
日本語では「いろはにほへと」の歌がパングラムとして知られています。
参考にしたパングラムの文章は以下のものです。
The quick brown fox jumps over the lazy dog.
これにより、このタイピングゲームを繰り返しプレイすることで、日本語ではあまり使わないQやLを打つ練習ができます。
実際にタイピングゲームで遊んでる様子を撮ってみました。
https://youtu.be/lNOiiM5LjxQ
ソースコードはこちらです。
https://github.com/yuta-kinu/MyTypingGame
自分なりにコードの解説を書いてみたら、頭の中が整理されてよかったです。
関数が増えてきて、コードが複雑になってきてもコードの意味を日本語で書いてコメントアウトしておけば、理解しやすくなることに気づきました。
現代文や英語の問題を解いている時のような感覚で翻訳しながら進めていくのがいい気がします。
今日はいろいろできてよかったです。
明日も引き続き頑張ります。
おわり