プログラミング英文法webアプリ-fasgram

【教師オリジナルアプリを作ろう】ソフトウェアキーボードで語句を入力する/クラスとオブジェクトの概念(JavaScript)

この連載では,スマホを使って生徒に英語のトレーニングを行わせるwebアプリを開発し,その作り方を学びます。今回は,ソフトウェアキーボードを表示して,空欄に当てはまる語句を入力させるwebアプリを作ります。使用する言語はJavaScriptです。

以前の記事を参考にすると,より理解が深まるでしょう。

また,実際に動作するサンプルページを用意しているので,動作を確認してみましょう。

https://mmsankosho.com/fasgram/filling.html

ad

クラスを定義する

これまでいくつかのwebアプリを作ってきましたが,コードの規模が小さく,とりあえず動けば良いという考えで作ってきたので,あまり良いコードとは言えませんでした。

そこで,クラスという概念を用いてコードをより構造化し,パーツとして使いまわしができるようにしていきます。

クラスとは,簡単に言えば,いくつかの機能を一つにまとめたものです。

例えば自動車をイメージしてみましょう。自動車の中にはエンジンや変速機,ブレーキなどいくつかのまとまった部品によって構成されています。そしてエンジンはさらに小さな部品によって作られています。

こうして,小さな部品を組み合わせて作ったエンジンのような部品を,ここではメソッドと言います。また,それらの部品をまとめたものを,クラスと言います。

ここでは,英文法のトレーニングを行う製品にFasgramという名前を付けます。これがクラスです。

そして,その中には英文を表示したり,ソフトウェアキーボードを表示するなど,それぞれ役割を持ったメソッドを定義していきます。

このように,いったんそれぞれの部品を作り,最終的にそれらの部品を呼び出すことで,プログラムとして実行していきます。

今回,作成していくクラスの概要を見てみましょう。

class Fasgram {         //クラス名
  constructor         //コンストラクタ
  filling {           //穴埋め問題
    input_processing  //文字入力時の処理
  }
  starting            //スタート画面
  closing             //終了画面
  button_home         //最初に戻るボタン
  button_confirm      //次に進むボタン
  keyboard            //ソフトウェアキーボード
}

クラスFasgramの中に,fillingstartingなどのメソッドが定義されています。fillingの中にはさらにinput_processingという関数が入っています。このようにメソッドの中にさらに部品を作ることもできます。もちろん,これをメソッドとして分離しても構いません。

クラスを作る際には,なるべくそれぞれの部品の役割が明確であり,構造として理解しやすいものを目指していくことになります。

ad

クラスを呼び出す

クラスを呼び出すコードを書いてみましょう。

async function main() {
    const texts = await load_texts('./data/filling.json'); //問題文の読み込み
    const selector = '#display';
    fasgram = new Fasgram(selector); //fasgramのインスタンス
    await fasgram.starting(); //スタート画面
    //穴埋め問題
    for(let i = 0; i < 3; i++) {
        await fasgram.filling(texts[i]);
    }
    await fasgram.closing(selector); //終了画面
    location.reload(); //ページを読み直して最初に戻る
}

プログラム全体の流れを関数main()の中に書きます。

asyncawaitはコードを非同期で行うための記述です。関数の前にawaitを付けておくと,処理をいったんストップして次に進まないようにできます。ここでは,たとえばボタンをクリックするなどの動作を行うと,ストップが解除され次に進むようになっています。その指示は関数の中に書きます。

中身を一つずつ見ていきましょう。

ad

データの読み込み

    const texts = await load_texts('./data/filling.json'); //問題文の読み込み

関数load_textsで問題文のjsonファイルを読み込みます。jsonファイルの中身は以下です。

filling.json

[
    {
        "ja_sentence": "彼は自分の親から自立したいと思っている。",
        "filling_sentence": "He # be independent of his parents.",
        "filling_answer": ["wants to"]
    },
    {
        "ja_sentence": "野外での長い徒歩のあと,私は冷たい飲み物が欲しかった。",
        "filling_sentence": "After a long walk in the fields I wanted something #.",
        "filling_answer": ["cold to drink"]
    },
    {
        "ja_sentence": "医者は患者にジョギングが体重を減らすのに良い方法であると説明した。",
        "filling_sentence": "The doctor explained to his patient that jogging is a good way #.",
        "filling_answer": ["to lose"]
    },
    {
        "ja_sentence": "私の母は私に自分の問題から目を背けないように言った。",
        "filling_sentence": "My mother told me # walk away from my problems.",
        "filling_answer": ["not to"]
    },
    {
        "ja_sentence": "ドアに鍵をかけないままにするとはあなたは不注意だ。",
        "filling_sentence": "It was careless # the door unlocked.",
        "filling_answer": ["of you to"]
    }
]

ja_sentenceが日本文です。filling_sentence英文で,あとで#の部分を下線に置き換えます。また,filling_answerは解答の文字列です。あとで,入力した文字列がこれに一致するかどうかで,正解と不正解を判定する仕組みです。

今回は問題を5つ用意しましたが,同じようにして継ぎ足していけば,問題数を増やすことができます。

async function load_texts(URL) {
    const data = await fetch(URL, {cache: "no-cache"});
    const obj = await data.json();
    const obj_json = JSON.stringify(obj); //json文字列に変換
    const texts = JSON.parse(obj_json); //配列に格納
    //データをシャッフル
    for(let i = 0; i < 1000; i++) {
        let a = Math.floor(Math.random() * texts.length);
        let b = Math.floor(Math.random() * texts.length);
        [texts[a], texts[b]] = [texts[b], texts[a]];
    }
    return texts;
}

問題文を読み込む関数です。読み込んだ文字列を配列に格納していき,シャッフルしてランダムに表示されるようにしています。

タイトルとURLをコピーしました