知らなきゃ損するIT教室
Web、アプリ制作、プログラミングを楽しむ個人ブログ
作ったアプリ紹介

【アプリ作成】脳トレアプリ「反転タイピング」を作りました。

JavaScriptでブラウザアプリを作りました。

反転した文字を読むトレーニングアプリ「読めるかな?」です。

アルファベットと数字が反転して表示されるので、フォームに答えを打ち込む脳トレアプリです。

読めるかな?

 

アプリの全体像

このアプリのポイントは以下です。

  1. ランダムな文字を表示する。
  2. 文字を反転させて表示する。
  3. 入力フォームの値をチェックする。

 

①CSSで文字を反転する

文字の反転は、CSSで行います。

.text {
  transform: scaleX(-1);
}

 

②ランダムな文字を表示

ランダムな文字を表示するには、

  1. 表示させたい文字を配列にセットしておきます。
  2. メソッドを使って、乱数(ランダムな数)を出力します。
  3. セットしておいた配列の「乱数番目」の文字を表示します。

 

①文字セットを作る

表示させたい文字を、以下のようにセットしておきます。

const text = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];

 

乱数

乱数は以下のメソッドで取得できます。

これで、0から25の乱数(文字セットの要素数)を取得できます。

Math.floor( Math.random() * text.length )

 

③入力フォームの値をチェックする

入力フォームに入力された文字が正解かどうかの判定をします。

表示した文字(正解)と入力した文字を変数に入れてif文で比較します。

 

 

アプリを作ってみてわかったこと

  • 入力フォームには文字数の制限をつけることができる。
  • 最大の文字数まで入力されたら、次のフォームにカーソル移動する機能もある=オートフォーカス。
  • br(改行)の幅は変えることができる。
  • プログラムは「関数(機能)を作る→関数(機能)を組み合わせる」の流れで作ると作りやすい。
  • 作りたいアプリの1番重要な機能(核となる機能)から順に作っていくと作りやすい。