10進数と2進数の変換を素早くできるようになるにはどうすればいいか考えていたら、カヲル君の言葉が頭に浮かびました。
反復練習さ。同じ事を何度も繰り返す。自分が"いいな"って感じられるまでね。それしかない。
ヱヴァンゲリオン新劇場版：Qより
そんなわけで、反復練習ツールを作りました。パソコンとスマートフォンの両方に対応しています。
経緯
- 10進数->2進数を素早くするために、反復練習をしたい
- Web 上で動くプログラムを作りたい
- サーバを借りて何かしたい
-> 作ってみるか。
完成品
taidalab という Web サイト上で利用できます。
HTML + CSS + JavaScript で作りました。レンタルサーバを借りたのも、インターネット上で動くプログラムを作ったのも、まともに JavaScript で書いたのも、全て初めてです。何か間違っていたらこっそり教えてください。
機能
- 10進数から2進数への変換問題を出し続けます。
- 「2のn乗」や「エンドレス」など複数のコースがあります。
- コースによっては、ヒントやちょっとした解説が付いています。
使い方
- にアクセスしてください。
- 解きたい問題のボタンを押してください。
- 10進数が表示されます。
- その数の2進数を入力して、[確認] ボタンを押すか、[Enter] キーまたは [return] キーを押してください。
- 結果が表示されます。正解なら次の10進数が表示され、不正解なら再挑戦できます。
利用について
- 著作権は作成者（私）が有しています。
- 利用に必要な通信料は利用者の負担となります。
- 当ツールを使用したことにより、コンピュータウィルス等による被害やデータの損失、その他いかなる不利益が発生した場合も、作成者は一切の責任を負いません。
- ソースコードの利用は可能ですが、再頒布時には著作権表示とライセンス表示を消さずに残しておいてください。
ご感想やエラーの報告などありましたら、この記事のコメント欄にいただけますと私がたいそう喜びます。
勉強に使った書籍
1冊ですべて身につくHTML & CSSとWebデザイン入門講座
著者：Mana
出版社：SB Creative
レスポンシブデザインについてよくわかりました。
結び
ツールが完成したらたくさん練習しようと思っていたのですが、制作中の動作チェックで何度も解いたので、もはやそれが練習になってしまいました。
情報教員の採用試験を受けるときに作ったらよかったなー。
参考
- Webアプリケーションを作ろう
- 安全なウェブサイトの作り方 - 1.5 クロスサイト・スクリプティング | 情報セキュリティ | IPA 独立行政法人 情報処理推進機構
- https://developer.cybozu.io/hc/ja/articles/201850320-JavaScript%E3%81%A7%E3%82%BB%E3%82%AD%E3%83%A5%E3%82%A2%E3%81%AA%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E3%82%92%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AB%E6%B0%97%E3%82%92%E3%81%A4%E3%81%91%E3%82%8B%E3%81%93%E3%81%A8
- CSSで作る！押したくなるボタンデザイン100（Web用）
- inputのtypeのtextでENTER押したら飛ぶようにしたい | OKE2GOU
- 【CSS】buttonタグのスタイルを初期化する方法 | PRAWN COCKTAIL(プロウンカクテル)
- parseInt() - JavaScript | MDN
- Number.prototype.toString() - JavaScript | MDN
- 正規表現（RegExp） - とほほのWWW入門
- 正規表現 - JavaScript | MDN
