ChatGPTで自作の英単語用フラッシュカードウェブアプリを尋常じゃなく早く作れた件

ガジェット

この記事にはプロモーションが含まれています。

記憶定着に欠かせないフラッシュカード

英単語を覚えるのって中々大変ですよね。一朝一夕では身に付かず、記憶を定着させるために何回も見直していく地味な作業の繰り返しで眠くなってしまいます。

僕はアメリカに来てから新しく出会った単語や表現をエクセルに記録して、単語帳代わりとして使っています。

このようなエクセルです↓↓

英語の単語を見る→隣の列の和訳や英語の定義を確認するという勉強法でこの単語帳を使っているのですが、隣の列が視界に入ってしまったりして回答を一つずつ集中して考えて出しにくいやり方でした。つまり単なるエクセル上のリストだったので、システマチックに勉強できなかったのです。

リーマンくん
リーマンくん

気が散るなあ、、

そこでフラッシュカードのような方法で勉強したいなと思っていました。要するにランダムで英単語を一つ選択して、その意味を確認するということを繰り返す方法です。この方法なら一つ一つの単語により集中することができ、より効率的で効果的です。フラッシュカードと言っても下記のような実際の紙のフラッシュカードを手書きで作るのはかなり手間ですし、管理しにくいのでアプリのようなものでできればと考えていました。

予想はしていましたが、ググるとフラッシュカードのアプリは世の中にたくさんあります。いくつか実際にインストールして試してみましたが、どれも痒いところに手が届かないのです。。

具体的には一部のアプリはエクセルからの単語リストインポートに対応しているものの最新のリストを使うには毎回エクセルインポートの作業が必要でした。毎日更新される単語帳でこの作業を毎日行うのはちょっと面倒です。また、僕の単語帳は英語の表現のカテゴリーや記録した時期をそれぞれ専用の列に記録しており、単語帳をフィルタリングする目的で使用しています。フラッシュカードもこれらの項目でフィルタリングしながら使いたいのですが、このような複数の項目でフィルタリングできる機能を備えたアプリは見つかりませんでした。

リーマンくん
リーマンくん

おしいアプリはあるのになあ

これはもう自分でプログラムを書いて解決するしかないなと思いました。プログラミングはたま～に趣味程度に行う程度ですが、アプリやガジェットには興味はあるのでこの課題は良い素材だなと思い、チャレンジする方向で進めてみることにしました。

自作アプリについてChatGPTに相談してみる

そんな状況でChatGPTに相談したところ、ウェブアプリを自作するというアイデアが有力候補として出てきました。さすがG P T！！！

Google版のExcelであるGoogleスプレッドシートとGoogleのアプリに対して自動化のロジックが組めるGoogle Apps Scriptを組み合わせてウェブアプリを作るのがハードルが低くて要件を満たせそうでした。

今回最低限欲しい機能は次の通りです。

  • 毎日追加していく単語を自動で反映できる
  • ランダムでリスト内の単語を表示できる
  • 複数の条件でフィルタリングできる
  • PCやスマホ、どこでも使えるようにする（ウェブベースが望ましい）
  • 間違えた単語をブックマークできるようにする

このGoogle Apps ScriptはローコードプラットフォームでJavaScriptやHTMLで、Googleスプレッドシートの読み書きなどGoogleのアプリを操作したり、自作したウェブアプリを動作できます。

今回の件に取り組み始めるまで、Google Apps Scriptの存在を全く知りませんでした。最近巷で流行りのローコード／ノーコードってやつですかね。

そして、ローコードとはいえ多少プログラムを書く必要がありました。僕はpythonをちょこっと触ったことがあるくらいで、JavaScript は全く触ったことがありません。いずれにしてもプログラミング自体初心者に毛が生えた程度です。

きっと初歩的なところでつまづいてかなり時間がかかるんだろうなと思いながらもチャレンジしてみることにしました。

ChatGPTのコーディング力に頼りほぼコピペ

結論から言うと、コーディングはほぼ100%ChatGPTが行いました。さすがG P T！！！

僕が行ったのは、コード内のパラメーターの入力、ChatGPTへの指示、ウェブアプリのテストだけです。

ざっくりとした開発の流れは下記です。

  1. ExcelをGoogleスプレッドシートに変換
  2. Google Apps ScriptでJavaScriptのプログラム作成
  3. Google Apps ScriptでHTMLのプログラム作成
  4. ウェブアプリをデプロイ
  5. 動作確認

簡単な機能から始めて、2〜5を繰り返しながら徐々に機能付け足し・バグ修正をしていきました。

ExcelをGoogleスプレッドシートに変換

Google Apps ScriptはExcelでは動作しないので、Google版のExcelであるGoogleスプレッドシートに変換してあげます。

GoogleスプレッドシートはGoogle Chromeなどブラウザベースで動作しGoogleのアカウントを持っている人であれば誰でも無料で使えます。Google Apps Scriptも同様です。
Googleスプレッドシートで対象のExcelファイルを開き、保存するときに.gsheetファイルで保存するだけでファイルを変換できます。こちらにもっと詳しい説明があります。Google Apps ScriptはGoogle Drive上のファイルでないと動作しないため、ファイルの保存先はGoogle Drive上のフォルダとしました。

下記は変換したファイルですが、見た目はほぼ元のExcelと同様です。（E列には後述するBookmarkの列を追加しています。）

Google Apps ScriptでJavaScriptのプログラム作成

Googleスプレッドシートでファイルを開いた後、拡張機能→Apps ScriptからGoogle Apps Scriptを使い始めることができます。

Apps Scriptの初期画面は下記のようになっています。コード.gsファイルに必要なjavascriptのプログラムを書いていきます。今回は欲しい機能を指定してChatGPTに書いてもらったプログラムをそのままコピペし、プログラム内の参照するGoogleスプレッドシートのシート名だけ修正が必要だったため、自分で修正しました。

Google Apps ScriptでHTMLのプログラム作成

続いて、ウェブアプリ用のhtmlファイルを作成、htmlでプログラムを書きます。これは100%ChatGPTが出してきたものをコピペです。

ウェブアプリをデプロイ

いよいよプログラムは一旦完成です。WebアプリのURL を発行し、実際に使えるようにするためデプロイします。右上のデプロイボタンを押して進めていくと発行されるURLを手に入れることができます。

動作確認

URLをWebブラウザに貼り付けて、実際に動作確認します。実際のjavascript、htmlのプログラムは少しずつ機能を付けたりながら、少しずつ複雑化していきました。機能を付け加える度にその機能が使えるかどうか動作確認しています。例えば、ランダムに英単語を表示機能のみ→単語が全体の何番目か表示できる機能追加→フィルタリング機能追加→Bookmarkフラグ機能追加（YesかNoの値を元のスプレッドシートE列の保存）→見た目の調整といった感じです。
プログラムに最初から全ての機能を入れ込んでしまうと、動作確認でバグを発見したときに、問題を特定して修正しづらいと考えたからです。いわゆるアジャイル開発というやつですかね。まあ、これは人間だけの問題であってAIにとって順序は関係ないのかもしれませんが、少なくともこまめに修正指示するタイミングがあるのは、人間にとって扱いやすいかと思います！

完成

上記の手順を合計で15回以上繰り返し完成です！こちらがアプリの見た目です。市場で出回っているアプリ比べられないほど作りが淡泊ですが。。

完成に要した時間は合計２時間ほどです。思ったよりめちゃくちゃ速いですね。正直、作り始めるときは２週間くらいかかることを覚悟していました。。

必要最低限の超シンプルアプリ

完成したアプリは僕が欲しい最低限の機能のみを備えています。あれば便利な機能を更に付け足すこともできるとは思いますが、機能を付け足すほどプログラムが複雑になり思わぬバグが増えそうなので最低限にしています。

ウェブアプリなのでスマホでもPCでも好きなときに使えるので、空き時間にアプリを開いて勉強するようにしています。

また、日々Googleスプレッドシートに追加していく単語が自動的に反映されていくので、特に追加の手作業も必要ありません。

このアプリのおかげで余計な作業をせずに英単語を繰り返し見直す仕組みができ、記憶定着が捗っています。何より自分オリジナルのアプリなので、愛着が湧きアプリを触るモチベーションアップにも繋がっています！

ChatGPTの力で驚くほど簡単に作れましたので、みなさんも自分なりにカスタマイズしたフラッシュカードを作ってみてはいかがでしょうか？

コメント