JavaScript

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

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

 

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

 

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

 

 

目次
  1. プログラムの全体像を説明
  2. アプリを作ってみてわかったこと

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

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

大きく分けて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文で比較します。

 

 

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

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

 

 

JavaScript初心者におすすめの本はこちら

https://taiyosite.com/recommend-javascript-book

関連記事