今回の目的　~Webアプリでプロトタイプ！~

Webアプリケーションの学習を、数日前に始めたばかりの超初心者です。
前回の投稿記事のとおり、基本用語そのものが理解しきれずにスタートしているため、大苦戦中💦
わが子（幼児）が英語教室に通い始めたばかりなので、せっかくなら一緒に楽しく学べるツールのような何かを作ろうと思いました。

結果、まだまだ技術が足りず、まったく思い通りのプロトタイプにはなりませんでした。
ですが、日々アウトプットしていくことを大事にしているため、今回記事として発信します。

英単語カード（完成品）

以下、Netlifyで公開しているURLとなります。

使い方

①単語練習

英単語が読めるように練習しよう！ということで、日本語名・英語スペルを単語カード風に登録しました。
（わが子の性格上、これだけだと読めずにやる気を失ってしまいます。そこで、補助的に読み方（カナ）も登録したのがポイントです。）
子どもと一緒に、１つずつ読みながら練習することを想定しています。
単語は、実際の英語教室の宿題から抜粋しました。
カテゴリー別に、タブで切り替えられるようにしています。

②練習した単語の見える化

練習した単語は、カードリストに登録します。（ここは、親子で一緒に進めながら、私が登録していくことを想定しています）
リストに登録された単語は、見える化されるため、「10個できたね～」等と子どもを褒めるネタとして使います。
（モチベーションアップが狙い）

③ちょっとしたご褒美？

全部読めたら、このボタンを押すと、子どもが喜ぶ何かが起こるかも？！

作り方　～CodePen～

まず、「CodePen」を片っ端から調べて、よさそうなPenをフォークしてみます。
※「CodePen」の使い方は、こちらの記事が参考になります。
今回は、単語カードとタブ・リストを使いたかったので、イメージに合いそうなPenをフォークしたうえで中身を確認し、HTML・CSS・JSを組み合わせて修正していきます。
また、今回使用したJavascriptライブラリ・CSSフレームワークは、以下のとおりです。

分類	名称
JS	Vue.js
JS	Bootstrap
JS	anime.js
CSS	Bootstrap
※「anime.js」は、初心者にも手軽にアニメーションが設定できるライブラリです。とにかく練習のために使ってみよう！と思い、軽く動きを入れてみました。

やりたいけど、できなかったこと

実際に使ってみると、子どもは喜んでいましたが、使い勝手としてはイマイチでした。
以下のようなアイデアは浮かんでいましたが、なかなか実装ができず・・・。
次回に向けて技術面をレベルアップさせて、改良してみたいと思います。

単語の見える化は、リストへの入力ではなく、チェックボックスにしたい
フラッシュカードのように次々とランダムで問題が出題されるようなゲーム要素を入れたい
アニメーションで単語カードを反転させ、クイズができるようにしたい

（以下、クイズ形式の試作品を作ってみました。）

See the Pen テスト by kokano23 (@kokano23) on CodePen.

まとめ

「CodePen」はたくさんのPenが公開されていて、大変便利。
これをうまく使って自由自在に編集できれば、短時間でいろいろなWebアプリが作れそうです。
ただ、私のような超初心者には、コードを解読するのに時間を取られてしまって精一杯・・・。自分で思い通りに修正するには、基本知識と読解力が必要だと感じました。
CSS等のデザイン面も、余白調整や挿入位置などがスムーズに修正できずに苦戦したため、勉強あるのみです。頑張っていきたいと思います。

参考にした記事

▶CodePenの使い方(知らない人向け)
▶【基本用語まとめ】「Webアプリケーション」超初心者向け（メモ）