JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

テーブル

グラフ

背景

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

openBD

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

JavaScriptのDate().toLocaleString()で現在時刻を取得して要素に追加

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

Date().toLocaleString()

JavaScriptのDate().toLocaleString()で現在時刻を取得して要素に追加

JavaScriptのDate().toLocaleString()で現在時刻を取得して要素に追加

JavaScriptの .addEventListener のクリックトリガーと、Date().toLocaleString() の日時取得をして、最後に指定したブロックに要素を追加します。

スニペット自体は単独で使うことはなく、ユーザーの操作に日時をセットにして返していきます。

Date().toLocaleString()

JavaScriptの Date().toLocaleString() は、「言語に合わせた日時」の文字列を返すメソッドです。

let posttime = new Date().toLocaleString();

構文は dateObj.toLocaleString([locales[, options]]) で、locales と options の引数により、アプリケーションは使用される書式変換の言語の指定や、関数の振る舞いのカスタマイズをすることができるみたいです。

かかかず
かかかず

タイムゾーンは、ローカルの環境で設定されているタイムゾーンが使用されます。

この記事では、Date().toLocaleString() で取得した文字列を要素にして挿入します。

現在時刻を取得して要素に追加するサンプル

早速サンプルです。

ブロックの下部に「現在時刻を取得」のボタンがあります。このボタンをクリックすると、クリックした日時の要素がボタンをクリックする度に表示されます。

    クリックする度にブロック下部に要素が追加されていき、一番新しく追加された要素には日時とセットで「NEW」のアイコンが表示されます。

    かかかず
    かかかず

    要素を追加する度に、スクロールも下方向に追従して表示します。

    実装の手順と方法

    手順と方法

    コードの解説の前に、実装の手順と方法について解説していきます。

    HTMLを記述

    まずはじめに、設置したい表示したい場所へコードを記述します。

    <ul id="timeList"></ul>
    
    <button id="createBtn">現在時刻を取得</btn>
    JavaScriptを記述

    次に、JavaScriptでSwiperのオプションを記述します。

    コードは <body>〜</body>で、</body> の閉じタグ(クロージングタグ)の前に記述しましょう。

    const timelist = document.getElementById('timeList');
    document.getElementById('createBtn').addEventListener('click', () => {
      let item = document.createElement("li");
      // 現在時刻を取得
      let posttime = new Date().toLocaleString(); 
      // 現在時刻をHTMLに挿入
      item.innerHTML = '<time>' + posttime + '</time>';
      // ulタグに追加
      timelist.appendChild(item);
      // 下に追加してスクロールを最下部で追従
      timelist.scrollTo(0, timelist.scrollHeight);
    });
    CSSを記述

    最後にCSSを記述して、見た目を整えます。

    ul#timeList {
        border: none;
        height: 300px;
        overflow-y: scroll;
        margin: 0 0 20px;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    ul#timeList li {
        padding: 0;
        background: #eee;
        animation: fadeIn 0.7s ease 0s 1 normal;
    }
    ul#timeList li:last-child {
        background: #efdb3f;
    }
    ul#timeList li time {
        color: #555;
        display: block;
        padding: 8px 18px;
    }
    ul#timeList li:last-child time:after {
        content: "NEW";
        background: #707070;
        color: #FFF;
        font-size: 0.8rem;
        vertical-align: 2px;
        padding: 1px 10px;
        margin-left: 7px;
        border-radius: 9999px;
    }
    
    @keyframes fadeIn {
      0% {
          opacity: 0;
          transform: translateY(-30px);
      }
         100% {
         opacity: 1;
      }
    }

    ざっくりとしたコードの解説

    コードは、HTML・JavaScript・CSSの3種類です。HTMLは「要素を追加するオブジェクトとボタン」。JavaScriptは「イベントで要素を追加」と、CSSはレイアウトと見た目を整える内容です。

    順に解説していきます。

    HTML

    HTMLは、idが「timeList」のついた ul タグとボタンの2つです。

    <ul id="timeList"></ul>
    
    <button id="createBtn">現在時刻を取得</btn>

    後述のJavaScriptのコードでボタンクリック毎に li タグを、このul タグに挿入していきます。

    JavaScript

    JavaScriptは、はじめにid名「timeList」の ul タグを取得して、.addEventListener の中に処理内容を書いていきます。

    全体の各コードの流れと詳細はコメントアウトに記載した通りですが、はじめに li タグを作り、現在時刻を取得して ul タグの中へ要素を追加していきます。

    const timelist = document.getElementById('timeList');
    document.getElementById('createBtn').addEventListener('click', () => {
      let item = document.createElement("li");
      // 現在時刻を取得
      let posttime = new Date().toLocaleString(); 
      // 現在時刻をHTMLに挿入
      item.innerHTML = '<time>' + posttime + '</time>';
      // ulタグに追加
      timelist.appendChild(item);
      // 下に追加してスクロールを最下部で追従
      timelist.scrollTo(0, timelist.scrollHeight);
    });

    一番最後の行にある timelist.scrollTo(0, timelist.scrollHeight); は、この一文で要素を下に追加していく時にスクロールを追従させていきます。逆に、これがないとスクロールが追従せず、挿入された要素が枠外に見切れていってしまうので、このスニペットでは重要なコードになります。

    CSS

    「timeList」のid名が付く ul タグには overflow-y: scroll;height: 300px; をセットで記述して、挿入する要素が沢山増えても、ブロック自体が伸びて行かないようにしています。

    ul#timeList {
        border: none;
        height: 300px;
        overflow-y: scroll;
        margin: 0 0 20px;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    ul#timeList li {
        padding: 0;
        background: #eee;
        animation: fadeIn 0.7s ease 0s 1 normal;
    }
    ul#timeList li:last-child {
        background: #efdb3f;
    }
    ul#timeList li time {
        color: #555;
        display: block;
        padding: 8px 18px;
    }
    ul#timeList li:last-child time:after {
        content: "NEW";
        background: #707070;
        color: #FFF;
        font-size: 0.8rem;
        vertical-align: 2px;
        padding: 1px 10px;
        margin-left: 7px;
        border-radius: 9999px;
    }
    
    @keyframes fadeIn {
      0% {
          opacity: 0;
          transform: translateY(-30px);
      }
         100% {
         opacity: 1;
      }
    }

    fadeIn のアニメーションを @keyframes で作り、ボタンクリックで挿入される li タグに当てて、表示される際に上から下に落ちてくるアニメーションで表示させます。

    さいごに

    全体的に動く仕様割に、コード量も少なく簡単な内容だったと思います。

    ついで、今回のコードに要素の挿入位置や、挿入要素をクリックで非表示等々入れれば何か作れそうな感じもします。ですが、本題とは少しずれてしまいそうなので、この辺にしておきます。

    UI

    • 他のウィンドウが開くことができないポップアップのUIです。

      モーダル

      モーダル

    • 並列な関係を持つ情報を1つずつ格納するUIです。

      タブ

      タブ

    • サイドから全体を覆うほど大きいメニュー表示するUIです。

      ドロワー

      ドロワー

    • 画像などのコンテンツをスライド表示させるUIです。

      スライダー

      スライダー

    • スクロールで表示が変化するスニペットです。

      スクロール

      スクロール

    • クリックすると隠れていた部分が開閉するUIです。

      アコーディオン

      アコーディオン

    • ページのhタグを取得して目次を生成するスニペットです。

      目次

      目次

    • ページの読み込み時にアニメーションをするスニペットです。

      ローディングアニメーション

      ローディングアニメーション

    • マウスオーバーした際に表示される補足説明です。

      ツールチップ

      ツールチップ

    • ページ内上部にあるナビゲーションUIです。

      ヘッダー

      ヘッダー

    • 行と列の組み合わせでできているUIです。

      テーブル

      テーブル

    • データを表やグラフで可視化して見せるUIです。

      グラフ

      グラフ

    • 背景をアニメーションで動かすスニペットです。

      背景

      背景

    フォーム

    • ラジオボタン、チェックボックス、ドロップダウンリストなどを通じて、ユーザーが入力できるUIです。

      フォーム

      フォーム

    文字

    • 文字列をJavaScriptで装飾・動きをつけるスニペットです。

      文字の装飾

      文字の装飾

    • 文字列の操作をして、置換・変更を行うスニペットです。

      文字の操作

      文字の操作

    • 文字列をカウントして表示などを行うスニペットです。

      文字のカウント

      文字のカウント

    • 数字の要素を取得して、変更するスニペットです。

      数字の操作

      数字の操作

    ウィンドウ

    classの操作

    • 要素を取得して、classを追加・削除するスニペットです。

      classの操作

      classの操作

    要素の操作

    API

    • WordPressのAPIを取得して表示するスニペットです。

      WP REST API

      WP REST API

    • Google Books APIsで書籍の情報を表示するスニペットです。

      Google Books APIs

      Google Books APIs

    • 楽天市場のAPIを取得して表示するスニペットです。

      楽天市場API

      楽天市場API

    • openBDのAPIを取得して表示するスニペットです。

      openBD

      openBD

    画像・動画

    • 画像を取得して、アニメーションなどの変化を加えるスニペットです。

      画像の操作

      画像の操作

    • YouTubeの動画を表示するスニペットです。

      YouTube

      YouTube

    リンク

    • ページ内のリンクを取得して変更・操作するスニペットです。

      リンク

      リンク

    • Google Analyticsとの連携をするスニペットです。

      Google Analytics

      Google Analytics

    cookie

    • ブラウザのcookieを利用するスニペットです。

      cookie

      cookie

    検索

    • 指定した要素の中から検索を行うスニペットです。

      検索

      検索