JavaScriptでタグのランダム選択アプリを作ろう!

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

実装するもの

今回は、ユーザーがカンマ区切りで入力した文字列をタグにして、ランダムに選択するアプリケーションを実装します。

demoは「こちら」で確認できます。

環境構築

簡単な環境構築をお願いします。

必要なファイルは、以下の通りです。

ページ(HTML)の作成

最初にページを作成しましょう。

このHTMLをブラウザ上で表示すると以下のようになります。

スタイル(CSS)を装飾

次にスタイルを記述しましょう。

ここまで実装すると以下のようになります。

JavaScriptの実装

準備はできたので、早速ランダム処理を実装していきましょう!

要素の取得

JavaScriptで制御すべき要素が2つあります。最初にこれらの要素を取得します。

textareaへフォーカス

アプリへアクセスした時、textareaにカーソルがフォーカスされるようにしましょう。

HTMLElement.focus() メソッドは、指定された要素にフォーカスを設定できる場合、フォーカスを設定します。

keyupイベントの登録

続いて、keyupイベントを登録しましょう。これは、キーボードのKeyが離された時に発生するイベントです。

タグの生成

カンマ区切りで文字を打ち込んだら、タグが生成されるようにします。

ここまで実装するとラベルがページ上に表示されます。

EnterKeyイベントの検知

EnterKeyが押下された時、ラベルの選択処理が実行される必要があるので、EnterKeyイベントを検知できるようにします。

ランダム選択処理の実装

続いて、タグをランダムに選択する処理を実装します。

この処理の実現には、次の処理が必要です。

必要な処理 1. タグの中からハイライトするタグを選択する
2. ハイライト(css)を付与/除去
3. タグのハイライトをランダムに付け替える
4. textareaに入力した文字列を削除する

それぞれを実装しましょう。

ラベルの中からハイライトするラベルを選択する

Math.floor(Math.random() * tags.length)は、ランダムの数値を返してくれる便利な処理です。イディオムだと思って覚えてください。

ハイライト(css)を付与/除去

tagクラスが付与されたhtmlに「highlight」クラスを追加するとタグがハイライトされます。

3番目のタグがハイライトされた例

タグのハイライトをランダムに付け替える

続いて、タグのハイライトをランダムに付け替える処理を実装します。

setInterval / setTimeout 処理があるため、少し難しく感じるかもしれませんが、できる限りコメントをつけました。

textareaに入力した文字列を削除する

最後に、textareaに入力した文字列を削除する処理を実装します。

ラベルを洗濯後もtextareaに文字列が残り続けてしまう

これで完成です。

おわりに

今回のJavaScriptは、少し難しかったですね。HTMLの要素の作成/追加、setInterval/setTimeoutの実装など盛りだくさんでした。

これらの処理は現場でもよく実装するので、覚えておいて損はないと思います^^

それでは、また!

JavaScriptまとめ

JavaScript ソースコード

コメントを残す