ITCの普及に伴い，英語教育の現場でもコンピューターを使った教育の導入を検討する教員が増えてきました。さまざまなソフトウェアメーカーが教材の開発・販売をしており，その中から最も優れた選択肢を選ぶのも一つの方法です。
一方で，そうしたソフトウェアはあなたが生徒に提供したいものに完全に合致しているとは言えないでしょう。汎用性を考慮して作られた市販のソフトウェアは，それぞれの教員が生徒に提供したい教材のセットを１００パーセント実現できるわけではありません。
この問題の解決策の一つは，教員が自分でオリジナルのアプリを作成して生徒に提供することです。
しかしながら，それを実現するにはプログラミングの知識が必要であり，またそれをまったくの白紙の状態から用意することはかなりの労力を伴います。
そこで，教員がオリジナルのアプリを提供するためのフレームワークを構築してみよう，というのがこの投稿の趣旨です。
今回紹介するアプリは，フレームワークの部分だけで構成される，最もシンプルなソースコードです。見た目は質素ですが，次の投稿で見た目をアプリらしく整えていきます。今回はJavaScriptを使って，オリジナルアプリの基本構造を学んでいきます。
サンプルページ
サンプルページを公開しています。まずは実際にアプリに触れて，動作を確認してください。
https://mmsankosho.com/fasgram/index-min.html
次回の投稿で紹介する予定ですが，このアプリに様々な装飾を加えたものが以下のページになります。
https://mmsankosho.com/fasgram/index.html
見た目が違うだけでなく，スマホで表示した場合でも見やすいように調整され，効果音も加えられています。
装飾については後回しにして，まずは基本の部分を紹介していきましょう。
開発環境
XAMPPはローカル環境でwebサーバーを動かすために必要です。JavaScriptを動かす上では必ずしも必要ではありませんが，インストールしておくとブラウザから localhost と入力するだけでページにアクセスすることができるので，何かと便利です。あとでphpを使って機能を追加することなどを考えるとインストールしておいたほうが良いでしょう。
また，コードを書くためにVisual Studio Codeもインストールしておいた方が良いでしょう。エディタの中では安定性が高く，おすすめです。
JavaScript
JavaScriptはブラウザ上で動作するプログラミング言語です。webアプリを作成する上で重要な言語です。この記事ではJavaScriptについての細かい説明は省きます。
また，JavaScriptの記述を簡略化するためのツールとしてjqueryを使用しています。使い方については日本語リファレンスを参照してください。
jqueryは使いすぎるとアプリの動作が遅くなる欠点がありますが，このくらいの規模のアプリでは気にする必要はありません。コードを見たときに動作が分かりやすい長所もあるので，今回はjqueryを使っていきます。