今回の目的 ~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等のデザイン面も、余白調整や挿入位置などがスムーズに修正できずに苦戦したため、勉強あるのみです。頑張っていきたいと思います。