Help us understand the problem. What is going on with this article?

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

この記事はJavaScript Advent Calendar 2019の6日目の記事です!
1日遅れてしまってすみません…

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

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

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

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

See the Pen ラジオボタンで活性・非活性が切り替わるセレクトボックス by daichi (@kandai) on CodePen.

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

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

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

See the Pen Toast by daichi (@kandai) on CodePen.

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

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

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

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

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

See the Pen 指定した文字数でもっと見るを表示させる by daichi (@kandai) on CodePen.

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

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

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

See the Pen テキストボックスの値をモーダルで選択する by daichi (@kandai) on CodePen.

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

要素を複製する

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

See the Pen 要素を複製するJS by daichi (@kandai) on CodePen.

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

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away