「英語学習にプログラミングを活用！」パート❷ －簡単に分かるJavaScriptでのWeb APIの呼び出し方－「英単語1000本ノック」の基礎コーディングを解説！

2020年10月5日 08:10

今回始まった「英語学習にプログラミングを活用する」シリーズは、プログラミングを活用してTOEICなど英語学習をぐんと効率よく行うアプローチを紹介していきます。前回のパート１では、シリーズを通して開発していくWebアプリ、「TOEIC英単語1000本ノック」の基礎部分のコードを紹介しました。

これからさらに機能を追加していく前に、その基礎アプリのコーディングについて、初心者の方でも分かるように解説をしていきます。

このアプリでは次の４つの種類のファイルで構成されています。

● HTMLファイル（index.html）
● スタイルシート（style.css）
● JavaScriptファイル（speech,ja, training.js）
● 画像ファイル（background.jpg, engback.jpg）

それぞれについて、特に初心者の方がどうやって取り組むべきか、詳しく説明していきます。

解説１：HTML初心者はまずコードで遊ぶ！

ベースとなるHTMLコードはとてもシンプルなものです。それを理解するために、まず新しいプロジェクトフォルダを作り（例えば名前をWebSiteEitangoTestとします）、それをVisual Studio Codeで開いてみて下さい。

Visual Studio Codeを使ってHTML、CSS、JavaScriptなどを作成する基本情報は全シリーズのこの記事をご覧ください。

プロジェクトフォルダができたら、そこにindex.htmlだけをコピペしてみてください。VSCodeではこんな感じになります。

これをCntl + Shift + LでPreview of Web Serverを起動するとこんなページが出てきます。

画面にはタイトルのテキスト、単語帳を選ぶラジオボタン、翻訳表示を選択するチェックボックス、そしてボタンが３つ。HTMLを1日も勉強すれば、どうやってこんなページを作るかはすぐに理解できると思います。

HTMLになじみがあまりなくて、即席でコードを理解したい場合は、次のサイトを参考にしてみてください。まずはHTMLとは何かを理解したい場合はここが参考になります。

基礎をしっかり理解することは大切ですが、もっと大切なのは自分でコードを”いじってみる”ことです。もう一度index.htmlのコードを見てみます。

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="style.css">
   <title>英単語 1000本ノック</title>
</head>
<body>
   <section class="wholesecion">
       <div class="content">
           <h1>英単語1000本ノック</h1>
           <div class="source-selection">
               <span class="sources">単語帳：</span> 
               <label><input type="radio" class="nes-radio" name="source" value="TOEIC" checked="true" /><span>TOEIC</span></label>
               <label><input type="radio" class="nes-radio" name="source" value="SAT" /><span>SAT</span></label>
               <label><input type="radio" class="nes-radio" name="source" value="MYLIST" /><span>マイリスト</span></label>
               <br/>
               <label><input class="nes-checkbox" type="checkbox" id="show-trans" /><span>訳文も表示する</span></label>
               <br/><br/>
          </div>

           <div id="term-box" class="selected-term"></div>
           <div id="sample-box" class="display-samples"></div>
           <button id="run-train" class="rounded-corner" onclick="RunTraining();">スタート</button>
           <button id="run-train" class="rounded-corner" onclick="RestartTraining();">最初から</button>
           <button id="re-start" class="rounded-corner" onclick="RerunTraining();">次の単語</button>
       </div>
   </section>

   <script src="./speech.js"></script>
   <script src="./training.js"></script>
</body>
</html>

これを実際のページと突き合わせると、単語帳のラジオボタンとその下にある、訳を表示させるチェックボックスにあたるコードは次の箇所だとわかります。

 <div class="source-selection">
     <span class="sources">単語帳：</span> 
     <label><input type="radio" class="nes-radio" name="source" value="TOEIC" checked="true" /><span>TOEIC</span></label>
     <label><input type="radio" class="nes-radio" name="source" value="SAT" /><span>SAT</span></label>
     <label><input type="radio" class="nes-radio" name="source" value="MYLIST" /><span>マイリスト</span></label>
     <br/>
     <label><input class="nes-checkbox" type="checkbox" id="show-trans" /><span>訳文も表示する</span></label>
     <br/><br/>
 </div>

そこで、適当にこの部分を変更して遊んでみます。失敗すれば取り消せばよいだけですので恐れることはありません。例えば、３つあるラジオボタンに１つ追加してみます。３つ目をコピペしてその下に加えるだけです。

<label><input type="radio" class="nes-radio" name="source" value="TOEIC" checked="true" /><span>TOEIC</span></label>
<label><input type="radio" class="nes-radio" name="source" value="SAT" /><span>SAT</span></label>
<label><input type="radio" class="nes-radio" name="source" value="MYLIST" /><span>マイリスト</span>/label>
<label><input type="radio" class="nes-radio" name="source" value="MYLIST" /><span>追加</span></label>

四つ目の行の中で「マイリスト」となっていところを適当に「追加したよ」とかに変更してみてください。

<label><input type="radio" class="nes-radio" name="source" value="MYLIST" /><span>追加したよ</span></label>

これでファイルを保存し、ページを見てください。追加したラジオボタンが表示されているはずです。

HTMLはとにかくサンプルを見ながら自分でコードに変更を加えてどんな風に変わるかを見ていくと基礎的なところはすぐに身に付きます。是非やってみてください。

解説２：スタイルシートはとても奥が深い

さて、HTMLだけだとこの殺風景なウェブページにしかならないのですが、実際のサイトはもっときれいな仕上がりでした。これはすべてスタイルシートによってデザインが指定されていからです。

そこで、HTMLしか入っていないWebSiteEitangoTestフォルダに、style.cssファイルをコピペして入れてみてください。そしてページを更新（Reload)するとこんな感じでちょっとよい感じになります。

このページのデザインを指定するのがCSSファイルです。スタイルシートは難しくはないのですが、ページデザインで非常に細かいところまで指定できるため、勉強しようと思えばいくらでも時間をかけられるものです。とりあえず基礎を理解したい場合は次のサイトを参考にしてみてください。

さて、テキストが中央に集まり、ボタンにも色はついたのですが、まだ殺風景さが残ります。その理由は画像ファイルが入っていないからです。そこで、前回のフォルダから２つの画像ファイルをコピーしてWebSiteEitangoTestフォルダに入れて、ページを更新してください。

これで前と同じようなデザインになりました。これだけ”変身”したのもすべてCSSのおかげです。きれいに見えるウェブサイトにはCSSの技術が不可欠だということがよくわかると思います。

解説３：ウェブサイトに”アクション”をぶち込むJavaScript

さて、ここまでHTMLとCSSだけでサイトを作ってきましたが、このままだとボタンを押しても何も起こりません。ウェブサイトの外見はHTMLとCSS（画像も含む）完成していすが、”アクション”、つまり動作がまったくないのです。それをやるのがJavaScriptです。

まずJavaScriptの基本を理解したい方は次のサイトを参考にしてみてください。

今回のアプリではJavaScriptは二つのファイルに分けています。

１．speech.jsは音声合成と音声認識のメソッドだけが入っています。
２．training.jsは実際の例文表示やWeb APIの呼び出しをします

このアプリでは英語の例文が表示されるとそれを自動的に読みます。これが音声合成ですが、まさにアクションの１つです。

Webブラウザで音声認識や音声合成を使う仕組みは以前にも解説した通り、Web Speech APIというものを利用しています。

これを利用すると、Chromeブラウザの中ではフルに音声機能を使えるようになります。そしてそのコードはとても簡単です。speech.jsで音声合成（ブラウザにテキストを読ませる）をする関数は次の通り。

function Speak (text, locale) {
   let voice = new SpeechSynthesisUtterance();
   voice.text = text;
   voice.volume = 1;
   voice.rate = 1;
   voice.pitch = 1;
   voice.lang = locale;
   window.speechSynthesis.speak(voice);
}

Speak関数は読ませるテキストと、その言語（日本語はja-JP、英語はen-US）を渡すだけです。中身はたったの７行ですが、よく見ると読ませるスピードやピッチなども変更できます。１というデフォルトの数値を変えて遊んでみてください。

解説４：音声認識はコールバックという複雑な仕組みを利用

一方、音声認識のRecognize関数はちょっとトリッキーです。

function Recognize(locale, callback) {                 
   var recognition = new SpeechRecognition();
   recognition.continuous = false;
   recognition.lang = locale;
   recognition.interimResults = false;
   recognition.maxAlternatives = 1;
   recognition.start();
   recognition.onresult = function(event) {
     var recoText = event.results[0][0].transcript;
     //コールバック関数を呼び出す
     callback(recoText);
 }
}

音声認識はマイク入力された音声をテキストに変換します。ですので、しゃべった内容がどの言語かを指定する必要があります。そのパラメータはSpeak関数と同様localeです。ではもう一つのcallbackというのは何なのでしょう。

音声合成はウェブサイトがしゃべればそれで終わりですが、音声認識の場合は結果のテキストが出てくるまで待っていないといけません。そこで、音声認識の結果が出てきたら「この関数を呼び出してね」とアクションを予約しておく仕組みが必要となってきます。

これは「非同期処理」という仕組みで、詳しくは前回シリーズの最終回で解説していますので、是非そちらをご覧ください。

ということで、Recognize関数を使う場合は、認識終了後に処理する関数をcallbackに指定する必要があります。

ここは次回に「発音トレーニング機能」を追加する際に具体的な使い方を解説します。

解説５：「スタート」ボタンを押すとこうなる！

まずサイトにある「スタート」ボタンをクリックするとどんなことがプログラム内で起きるのか、詳しく解説していきます。

まずはボタンのHTMLを見ています。

<button id="run-train" class="rounded-corner" 
         onclick="RunTraining();">スタート</button>

ここで注目してほしいのはonclickのところです。ボタンタグの中の属性の一つですが、これは「クリックすると・・・」という意味です。そこにRunTraining();というJavaScriptみたいなコードが入っています。つまり、クリックした際にはこの関数を実行してくださいという指定をしているのです。HTMLのタグのほとんどにこのonclickを指定することができます。「テキストがクリックされたら」、「チェックボックスがクリックされたら」、「表の中のある一行がクリックされたら」など、ユーザーのクリック操作をトリガーにして何かをしたいという場面はよくあります。そんな時にこのonclick属性を使います。

ではそのRunTraining関数を見てみます。

//スタートボタンを押した際のトレーニング開始メソッド
function RunTraining() {
   var tangocho = document.querySelector('input[name="source"]:checked').value;
   GetSamples(tangocho);
}

この1行目は、ラジオボタンでTOEIC、SAT、MYLISTのうちどの単語帳が選択されたかを抽出して、その結果をtangocho変数に入れています。"source"というのはラジオボタンの名前です。それをdocument.querySelector（これはJQueryのメソッドです）を使って探し当て、どの単語帳が選択されているかをチェックしているのです。

<label><input type="radio" class="nes-radio" name="source" value="TOEIC" checked="true" /><span>TOEIC</span></label>
<label><input type="radio" class="nes-radio" name="source" value="SAT" /><span>SAT</span></label>
<label><input type="radio" class="nes-radio" name="source" value="MYLIST" /><span>マイリスト</span></label>

では2行目のGetSamplesを見てみます。

コードを理解しやすくするため、実際のものよりも簡素化したコードをご覧ください。

//単語をもとにサンプル文章のJSONデータを取得するメソッド
const GetSamples = function (listtype) {
//1：ロード中のメッセ＝時を表示ｓるう
       document.getElementById("term-box").innerHTML = "サンプル文章をロードしています・・・";
//２：ここからWeb APIの呼び出し
       var oRequest = new XMLHttpRequest();
       oRequest.open("GET", "https://magicwandapi.azurewebsites.net/api/eitango/"  + listtype);
//３：単語データが取得された時の処理をonloadに書く
       oRequest.onload = function () {
         if (oRequest.status >= 200 && oRequest.status < 400) {
             SamplesJSON = JSON.parse(this.response);
             //４：セレクトされた単語を表示する
             document.getElementById("term-box").innerHTML = SamplesJSON.term;
             //５：例文を表示する
             DisplaySample();
             //６：ボタンのテキストを「次を表示」に変更する
             document.getElementById("run-train").innerHTML = "次を表示";
         }
       };
       oRequest.send();
}

このGetSamplesの中でやっていることを次のステップです。

❶ まずロードに時間がかかるので、「ロード中」というメッセ＝時を表示してユーザーに待機してもらう
❷ Web APIにTOEICかSATの単語帳名を渡し、ランダムに単語を選んでもらう
❸ 例文データをロードし終わった際の処理をする
❹ 選択された単語をまずは表示する
❺ DisplaySampleという関数を読んで最初の例文を表示する
❻ ボタンは「スタート」ではなく「次を表示」に変更する

Web API呼び出しの基本：Open/Onload/Send

ここで一番重要なのは、ステップ２の、単語データを取得するWeb APIを呼び出す場面です。そのコアの部分は次の２行です。

var oRequest = new XMLHttpRequest();
oRequest.open("GET", "https://magicwandapi.azurewebsites.net/api/eitango/"  + listtype);

ステップ１：[OPEN] XMLHttpRequestでエンドポイントを指定

まずはXMLHttpRequestというオブジェクトを使って、そのopenメソッドにWeb APIのURL(エンドポイント）を指定するだけです。

パート1で解説しましたが、今回用意した英単語と例文データを取得するWeb APIはこれです。

"https://magicwandapi.azurewebsites.net/api/eitango/[単語帳タイプ]"

他のWeb APIを呼び出したい場合はこのエンドポイントを変えるだけです。なお、XMLHttpRequestの詳細についてはこちらをご覧ください。

ステップ２：[ONLOAD] 呼び出しが完了した時の処理を書く

oRequest.onload = function () {
  if (oRequest.status >= 200 && oRequest.status < 400) {
      ・・・呼び出し完了時の処理を書く・・・
  }
};

次にXMLHttpRequestのonloadに呼び出し後の処理関数を指定します。。ここでリクエストの"status"をチェックし、呼び出しがエラーなく完了した場合に限ります。値が200以上で、400未満だったらステータスコードは成功を意味するのでこの条件文を指定します。ステータスコードについてはこちらを参考にしてください。

ステップ３：[SEND] リクエストを送信

エンドポイントと、呼び出し後の処理が指定できらあとはリクエストを創生するだけです。

 oRequest.send();

このOpen - Onload - Sendの３ステップでWeb APIを呼び出すことができると覚えておいてください。

例文の表示をするコーディング: DisplaySample

ここでもう一つミソなのはサンプル表示をDispalySampleという関数にまとめた点です。

ではそのDisplaySample関数を見てみます。これも簡素化したバージョンを見てください。

//サンプル文章をDIVに表示させるメソッド
function DisplaySample () {
   //１：Jsonからサンプル英文を取得
   var engsentence = SamplesJSON.samples[SampleIndex].sentence;       
   //２：例文テキストの表示
   document.getElementById("sample-box").innerHTML 
       += "<div class=eng-sentence>" + engsentence + "</div>" 
   //３：音声で読み上げる
   Speak(SamplesJSON.samples[SampleIndex].sentence, "en-US");

   SampleIndex++; //例文インデックスを一つ繰り上げる
}

Web APIを呼び出すと、ランダムに選ばれた英単語を含む例文がJson形式のテキストになって返ってきます。これは前の関数でSampleJSONという変数にそのまま入っていました。ここから最初の例文を取り出すには最初のインデックス、０を指定して取り出せばよいです。SampleIndexは最初は０に設定されています。

英語の例文が取得できたら、それをHTMLに加えます。これが、sample-boxという要素のHTML(innerHTML)に新たなeng-sentenceというセクションを追加し、そこにengsentence変数に入っている英文を指定します。

document.getElementById("sample-box").innerHTML
+= "<div class=eng-sentence>" + engsentence + "</div>"

処理の最後はSampleIndexの数字を１つ繰り上げておきます。これで次にこのDisplaySampleを呼び出したら次の例文（インデックスは１）が追加表示されることになります。

解説６：その他のコーディングのポイント

例文の表示は実際にはさらに複雑なものになっています。これはtraining.js全体を見るとわかります。その理由には次のようなものがあります。

１．辞書サイトへのリンクを追加

例部の下には辞書サイトのリンクが常に表示され、単語の意味をチェックｓたい場合はそこをクリックするだけで辞書ページが表示されるようになっています。このためDisplaySample関数にはリンク表示のコードも入って慰安す。

２．訳文の表示・非表示を切り替える

「訳も表示する」チェックボックスによって訳文も表示できるようになります。ただ、デフォルトでは英文だけを見ながらやってほしいのでこれはオフになっています。後にオンにした場合、Jsonオブジェクトに入っている訳文も表示されるようにしないといけません。

３．例文をクリックすると音声で読み上げるようにする

例文が表示されると自動的に音声で読み上げますが、もう一度聞きたい場合は例文そのものをクリックすると再度読み上げることができます。このopnclick操作も追加している。

４．最初からもう一度できるようにする

一通り英語の例文を聞いて意味を推測できたら、今度は訳文も一緒に見ながら最初からもう一度例文をチェックしていきます。この”リスタート”のロジックも必要となる。

詳しくは機能を追加していく過程でまた取り上げます。今の段階ではスクリプトの大まかな流れだけを理解するようにしてください。

次回は・・・

では次回からは機能を追加していきながら、JavaScriptでのコーディングの基礎についてさらに触れていきます。

乞うご期待！

【👇次のパート3はこちら👇】

この記事が気に入ったらサポートをしてみませんか？