こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
<目次>
実装するもの
今回は、ユーザーがカンマ区切りで入力した文字列をタグにして、ランダムに選択するアプリケーションを実装します。
demoは「こちら」で確認できます。
環境構築
簡単な環境構築をお願いします。
必要なファイルは、以下の通りです。
|
1 2 3 4 5 6 |
$ tree . ├── index.html ├── script.js └── style.css |
CSS版
ページ(HTML)の作成
最初にページを作成しましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>Random Choice Picker</title> </head> <body> <div class="container"> <h3>Enter all of the choices divided by a comma (','). <br> Press enter when you're done</h3> <textarea placeholder="Enter choices here..." id="textarea"></textarea> <div id="tags"></div> </div> <script src="script.js"></script> </body> </html> |
このHTMLをブラウザ上で表示すると以下のようになります。
スタイル(CSS)を装飾
次にスタイルを記述しましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); * { box-sizing: border-box; } body { background-color: #2b88f0; font-family: 'Muli', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } h3 { color: #fff; margin: 10px 0 20px; text-align: center; } .container { width: 500px; } textarea { border: none; display: block; width: 100%; height: 100px; font-family: inherit; padding: 10px; margin: 0 0 20px; font-size: 16px; } .tag { background-color: #f0932b; color: #fff; border-radius: 50px; padding: 10px 20px; margin: 0 5px 10px 0; font-size: 14px; display: inline-block; } .tag.highlight { background-color: #273c75; } |
ここまで実装すると以下のようになります。
JavaScriptの実装
準備はできたので、早速ランダム処理を実装していきましょう!
要素の取得
JavaScriptで制御すべき要素が2つあります。最初にこれらの要素を取得します。
|
1 2 3 |
// 要素を取得する const tagsEl = document.getElementById('tags') const textarea = document.getElementById('textarea') |
textareaへフォーカス
アプリへアクセスした時、textareaにカーソルがフォーカスされるようにしましょう。
|
1 2 3 4 |
// 要素を取得する ... // textareaにフォーカス textarea.focus() |
HTMLElement.focus() メソッドは、指定された要素にフォーカスを設定できる場合、フォーカスを設定します。
keyupイベントの登録
続いて、keyupイベントを登録しましょう。これは、キーボードのKeyが離された時に発生するイベントです。
|
1 2 3 4 |
// keyupイベントを登録する textarea.addEventListener('keyup', (event) => { }) |
タグの生成
カンマ区切りで文字を打ち込んだら、タグが生成されるようにします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
textarea.addEventListener('keyup', (event) => { // event.target.valueは、textareaに打ち込んだ文字列を取得できる createTags(event.target.value) }) function createTags(input) { // 文字列をコンマ区切りで分割し、配列に格納する // choice1,choice2,choice3 => ["choice1","choice2","choice3"] let tags = input.split(',') // スペースを打ち込まれた時対策 // 空文字の場合は除外する tags = tags.filter(tag => tag.trim() !== '').map(tag => tag.trim()) // タグを表示するエリアを初期化 // keyupイベントが発生するたびに、タグを作り直すため tagsEl.innerHTML = '' // tag毎にループ tags.forEach(tag => { // htmlのspan要素を要素を作成(タグになる) const tagEl = document.createElement('span') // tagクラスを追加 tagEl.classList.add('tag') // タグ要素にラベルを追加 tagEl.innerHTML = tag // "tagsEl"であることに注意：子要素として追加 tagsEl.appendChild(tagEl) }) } |
ここまで実装するとラベルがページ上に表示されます。
EnterKeyイベントの検知
EnterKeyが押下された時、ラベルの選択処理が実行される必要があるので、EnterKeyイベントを検知できるようにします。
|
1 2 3 4 5 6 7 8 |
textarea.addEventListener('keyup', (event) => { // event.target.valueは、textareaに打ち込んだ文字列を取得できる ... // EnterKeyイベントを検知する if(event.key === 'Enter') { } }) |
ランダム選択処理の実装
続いて、タグをランダムに選択する処理を実装します。
|
1 2 3 4 5 6 7 8 9 |
// EnterKeyイベントを検知する if(event.key === 'Enter') { randomSelect() } }) // タグをランダムに選択する関数 function randomSelect() { } |
この処理の実現には、次の処理が必要です。
必要な処理
1. タグの中からハイライトするタグを選択する
2. ハイライト(css)を付与/除去
3. タグのハイライトをランダムに付け替える
4. textareaに入力した文字列を削除する
2. ハイライト(css)を付与/除去
3. タグのハイライトをランダムに付け替える
4. textareaに入力した文字列を削除する
それぞれを実装しましょう。
ラベルの中からハイライトするラベルを選択する
|
1 2 3 4 5 6 7 8 9 |
// タグをランダムに選択 function pickRandomTag() { // tagクラスがついている全てのHTML要素を習得 // 配列で格納する const tags = document.querySelectorAll('.tag') // Math.randomは、ランダムの数値を返してくれる // 配列はインデックスを指定すると値が取得できる => tags[0]とかtags[1] return tags[Math.floor(Math.random() * tags.length)] } |
Math.floor(Math.random() * tags.length)
|
1 2 3 |
const tags = ["choice1", "choice2", "choice3"] console.log(Math.floor(Math.random() * tags.length)) // 0 ~ 4の数値が返却される |
ハイライト(css)を付与/除去
tagクラスが付与されたhtmlに「highlight」クラスを追加するとタグがハイライトされます。
|
1 2 3 4 5 6 7 8 9 10 11 |
// タグにハイライトをつける function highlightTag(tag) { // highlightクラスを付与 tag.classList.add('highlight') } // タグからハイライトを消す function unHighlightTag(tag) { // highlightクラスを除去 tag.classList.remove('highlight') } |
タグのハイライトをランダムに付け替える
続いて、タグのハイライトをランダムに付け替える処理を実装します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
// タグをランダムに選択する関数 function randomSelect() { // ハイライト付け替え処理の時間 const times = 30 // ハイライトを付け替えする処理 // JavaScriptは、変数内に関数を格納できる const doOnOff = () => { // タグをランダムに選択 const randomTag = pickRandomTag() // 選択したタグにハイライトをつける highlightTag(randomTag) // 100ミリ秒経過後、タグのハイライトを消す setTimeout(() => { unHighlightTag(randomTag) }, 100) } // 100ミリ秒単位でdoOnOffを実行する const interval = setInterval(doOnOff, 100); // intervalの停止 setTimeout(() => { // intervalを停止させる clearInterval(interval) // 最終的に一つのタグをハイライトする setTimeout(() => { const randomTag = pickRandomTag() highlightTag(randomTag) }, 100) }, times * 100) // => 30 * 100ミリ秒 => 3秒後停止 } |
setInterval / setTimeout 処理があるため、少し難しく感じるかもしれませんが、できる限りコメントをつけました。
textareaに入力した文字列を削除する
最後に、textareaに入力した文字列を削除する処理を実装します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
textarea.addEventListener('keyup', (event) => { // event.target.valueは、textareaに打ち込んだ文字列を取得できる ... // EnterKeyイベントを検知する if(event.key === 'Enter') { // 10ミリ秒後にtextareaの文字列を空にする setTimeout(() => { event.target.value = '' }, 10) randomSelect() } }) |
これで完成です。
おわりに
今回のJavaScriptは、少し難しかったですね。HTMLの要素の作成/追加、setInterval/setTimeoutの実装など盛りだくさんでした。
これらの処理は現場でもよく実装するので、覚えておいて損はないと思います^^
それでは、また！
JavaScriptまとめ
JavaScript ソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 |
// 要素を取得する const tagsEl = document.getElementById('tags') const textarea = document.getElementById('textarea') // textareaにフォーカス textarea.focus() // keyupイベントを登録する textarea.addEventListener('keyup', (event) => { // event.target.valueは、textareaに打ち込んだ文字列を取得できる createTags(event.target.value) // EnterKeyイベントを検知する if(event.key === 'Enter') { // 10ミリ秒後にtextareaの文字列を空にする setTimeout(() => { event.target.value = '' }, 10) randomSelect() } }) function createTags(input) { // 文字列をコンマ区切りで分割し、配列に格納する // choice1,choice2,choice3 => ["choice1","choice2","choice3"] let tags = input.split(',') // スペースを打ち込まれた時対策 // 空文字の場合は除外する tags = tags.filter(tag => tag.trim() !== '').map(tag => tag.trim()) // タグを表示するエリアを初期化 // keyupイベントが発生するたびに、タグを作り直すため tagsEl.innerHTML = '' // tag毎にループ tags.forEach(tag => { // htmlのspan要素を要素を作成 const tagEl = document.createElement('span') // tagクラスを追加 tagEl.classList.add('tag') // タグ要素にラベルを追加 tagEl.innerHTML = tag // "tagsEl"であることに注意：子要素として追加 tagsEl.appendChild(tagEl) }) } // タグをランダムに選択する関数 function randomSelect() { // ハイライト付け替え処理の時間 const times = 30 // ハイライトを付け替えする処理 // JavaScriptは、変数内に関数を格納できる const doOnOff = () => { // タグをランダムに選択 const randomTag = pickRandomTag() // 選択したタグにハイライトをつける highlightTag(randomTag) // 100ミリ秒経過後、タグのハイライトを消す setTimeout(() => { unHighlightTag(randomTag) }, 100) } // 100ミリ秒単位でdoOnOffを実行する const interval = setInterval(doOnOff, 100); // intervalの停止 setTimeout(() => { // intervalを停止させる clearInterval(interval) // 最終的に一つのタグをハイライトする setTimeout(() => { const randomTag = pickRandomTag() highlightTag(randomTag) }, 100) }, times * 100) // => 30 * 100ミリ秒 => 3秒後停止 } // タグをランダムに選択 function pickRandomTag() { // tagクラスがついている全てのHTML要素を習得 // 配列で格納する const tags = document.querySelectorAll('.tag') // Math.randomは、ランダムの数値を返してくれる // 配列はインデックスを指定すると値が取得できる => tags[0]とかtags[1] return tags[Math.floor(Math.random() * tags.length)] } // タグにハイライトをつける function highlightTag(tag) { // highlightクラスを付与 tag.classList.add('highlight') } // タグからハイライトを消す function unHighlightTag(tag) { // highlightクラスを除去 tag.classList.remove('highlight') } |
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。