実務で使うかもしれない、最近JavaScriptで実装した5つの機能

この記事は[JavaScript Advent Calendar 2019](https://qiita.com/advent-calendar/2019/javascript)の6日目の記事です！
1日遅れてしまってすみません…

最近、クライアントワークで実装した機能を紹介します。
機能としては大きいものではないですが、何回か同じような機能を実装しているので、意外と使うことはあるかもしれないやつをまとめました。

- ライブラリやFWは使わずにPure JavaScriptで書いてます
- ES2015の書き方なので、そのままではIE11で動かない部分などがあります

# ラジオボタンの選択で活性・非活性が切り替わるセレクトボックス

選択した項目によって、さらに入力したり選択できるようにしたいというケースが結構あります。

<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="kandai" data-slug-hash="wvBaOPY" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="ラジオボタンで活性・非活性が切り替わるセレクトボックス">
  <span>See the Pen <a href="https://codepen.io/kandai/pen/wvBaOPY">
  ラジオボタンで活性・非活性が切り替わるセレクトボックス</a> by daichi (<a href="https://codepen.io/kandai">@kandai</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

これはセレクトボックスを非活性にしていますが、テキストエリアだったり、そもそも表示/非表示を切り替えるパターンなんかもよくあります。

# トースト(通知パネル)の表示

トースト(通知パネル)を表示させるJS。
表示の仕組み自体はCSSで位置を切り替えてるだけです。

<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="kandai" data-slug-hash="qBEbgQv" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Toast">
  <span>See the Pen <a href="https://codepen.io/kandai/pen/qBEbgQv">
  Toast</a> by daichi (<a href="https://codepen.io/kandai">@kandai</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

引数で表示する文字やトーストの色を変更できるようにしてます。

~~時間差で処理するために `setTimeout` を2回使っているのが個人的に気になっているので、もっと良い方法がないかなと思ってたりします。~~

2019/12/10 追記
コメントでCSSアニメーションを使う方法を提案していただいたので、そちらの方法に変更しました。
`animationend` イベント便利ですね。
https://developer.mozilla.org/ja/docs/Web/API/Document/animationend_event

# 指定した文字数で文字列を省略してもっと見るをつける

最近はCSSで文字を省略することも多いですが、場合によってはJSで処理するっていうこともまだあります。
指定した文字数で省略して、超えた場合は3点リーダーの表示と `もっと見る` で省略した部分を表示したいということがあったので作りました。

<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="kandai" data-slug-hash="MWYwRNO" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="指定した文字数でもっと見るを表示させる">
  <span>See the Pen <a href="https://codepen.io/kandai/pen/MWYwRNO">
  指定した文字数でもっと見るを表示させる</a> by daichi (<a href="https://codepen.io/kandai">@kandai</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# テキストボックスの値をモーダルで選択する

セレクトボックスで値を選択するのではなくて、モーダルで選択させたい！

ということだったので、テキストボックスをクリックしたらモーダル表示、モーダルの中のラジオボタンを選択したら元のテキストボックスに反映させます。

<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="kandai" data-slug-hash="GRgJVqz" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="テキストボックスの値をモーダルで選択する">
  <span>See the Pen <a href="https://codepen.io/kandai/pen/GRgJVqz">
  テキストボックスの値をモーダルで選択する</a> by daichi (<a href="https://codepen.io/kandai">@kandai</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

`<input type="text">` に `readonly` 属性を入れておくのがポイントです。

# 要素を複製する

同じような処理を何回か書いていたので、汎用的に使えるようにしてみました。

<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="kandai" data-slug-hash="OJPyVYx" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="要素を複製するJS">
  <span>See the Pen <a href="https://codepen.io/kandai/pen/OJPyVYx">
  要素を複製するJS</a> by daichi (<a href="https://codepen.io/kandai">@kandai</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

以前はJSの中でHTMLを組み立てていたのですが、変更に弱かったり、特定の要素の複製にしか使えなかったので汎用的に使えるようになってとても役に立ってます。

あと、HTMLのdata属性に複製できる最大数や最小値を持たせています。
data属性をうまく使うことで、JS側の処理をまとめたりできるので最近はよく使っています。

以上です！
大きな機能というよりは細かいものでしたが、よく使う機能の実装をストックしておいたり、汎用的に作っておくことで助かることは多いと思うので、誰かの参考になれば嬉しいです。