日曜エンジニアのIT道場
ITを学び、DXに備える
    JavaScript

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

    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文で比較します。

     

     

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

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

     

     

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

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