プログラミングで暮らしをハック
ITで暮らしを便利にするブログ
作ったアプリ紹介

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

JavaScriptでブラウザアプリを作ってみました!!

 

脳トレアプリ「読めるかな?」

 

反転した文字を読む脳トレアプリです!

 

 

プログラムの全体像を説明

このアプリのプログラムについて説明します。

大きく分けて3つの機能から成り立っています。

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

 

①文字を反転して表示する

文字の反転は、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'];

 

②乱数をもらう

Math.random()メソッドを使うと、乱数がもらえます。

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

 

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

「入力フォームの値が正しいか」判定をします。

両者ともに変数に入れて、if文で比較します。

 

 

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

  • 入力フォームには「文字数の制限」をつけることができる。
  • 最大の文字数まで入力されたら、次のフォームにカーソル移動する機能もある=オートフォーカス
  • プログラムのコツ「関数(機能)を作る→関数(機能)を組み合わせる」
  • そのプログラムのいちばん重要な機能から作ると進みが早い。

 

記事を読んでくださりありがとうございました。 当サイトは「好きなんだから、日曜エンジニアでもいいじゃない」をテーマにしたエンジニアの交流サイトです。非IT企業の私ですが、Webが好きで「ITエンジニアと繋がりたい」という思いからブログをはじめました。この記事が参考になった、おもしろかったという方は、広告をクリックしていただけると励みになります。これからもよろしくお願い致します。