「シンプル」かつ「便利」HTML5

2021/02/21

phpによるバックエンド実装を中心としてきたエンジニアです。

久しく触れていなかったフロントエンド実装において、今更ではありますがHTML5に触れる機会が最近ありました。

HTML5に触れてみての印象は「シンプル」かつ「便利」です。

今回は、特に印象的だったタグについて備忘録も兼ねて記しておきたいと思います。

1. アコーディオン実装(<details><summary>)

これまでアコーディオンはjQuery及びCSS等で実装するものと考えていましたが、<details><summary>で簡単に実装ができました。

デフォルトで矢印の開閉もつけてくれるので、見易さも担保してくれ便利です。

例えば、よくある質問等のQ&Aをアコーディオンで実装する際、<details><summary>を使えば以下のように実装ができる。

<div class="qes-container">

    <section class="qes-and-ans">

        <h2 class="cmn-title">よくある質問</h2>

        <div class="cmn-cont">     

            <details>

                <summary><span class="qes">Q. ○○○とは何ですか?</span></summary>

                <span class="ans">A. △△△となります</span>

            </details>

        </div>

    </section>

</div>

もし、矢印が要らない場合などは

<style type="text/css">

    summary.icon-none{display: block;}

    summary.icon-none::-webkit-details-marker {display: none;}

</style>

などといったスタイルを追加すれば良い。

また、初めからアコーディオンが開いた状態としたい場合は、<details open> と指定すれば良い。

一方、jQueryで実装した場合は

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>

<script>

    $(function () {

        $(".qes").click(function () {

            $(".qes").not(this).next().slideUp();

            $(this).next().slideToggle();

        });

    });

</script>

<div class="qes-container">

    <section class="qes-and-ans">

        <h2 class="cmn-title">よくある質問</h2>

        <div class="cmn-cont">

            <span class="qes">Q. ○○○とは何ですか?</span>

            <div class="ans-content" style="display: none;">

                <span class="ans">A. △△△となります</span>

            </div>

        </div>

    </section>

</div>

のようになる。

実際の表示を比較してみよう。「よくある質問」の上がHTML5、下がjQueryで実装した場合となる。

また、それぞれQ.~部分を押下すると右のように開閉する。

HTML5では開閉の矢印がデフォルトで入るが、こちらでは実装をする必要がある。

HTML5であれば、<details><summary>だけでシンプルに実装することができるので非常に楽だ。

2. カレンダー実装(<input type="date">)

日付等の検索や指定のフロント実装にてDatepickerを使用することが多かったが、

HTML5では<input type="date">を指定するだけで実装が可能だ。

<div class="date-container">

    <section class="date-calendar">

        <h2 class="cmn-title">年月日</h2>

        <div class="cmn-cont">     

            <input type="date" id="date_from" name="date_from">

            <input type="time" id="time_from" name="time_from">

        </div>

    </section>

</div>

実装後のUIも直感的でわかりやすい。

時刻等を指定したい場合は、<input type="time">を使えば良い。こちらも時計のアイコンを出してくれたりと分かりやすい。

開閉の矢印がデフォルトで入るが、こちらでは実装をする必要がある。

一方、Datepickerで実装した場合は

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<script>

    $('#datepicker').datepicker({dateFormat: 'yy / mm / dd',});

    $(function () {

        $("#datepicker").datepicker();

    });

</script>

<div class="date-container">

    <section class="date-calendar">

        <h2 class="cmn-title">年月日</h2>

        <div class="cmn-cont">     

            <input type="text" id="datepicker" name="date_from">

        </div>

    </section>

</div>

実際の表示を比較してみよう。上がHTML5、下がDatepickerで実装した場合となる。

こちらついても、HTML5での実装で十分そうだ。

そして何よりも楽だ。ライブラリを読み込む必要もなく実装ができる。

3. まとめ

今回、実際にHTML5に触れてみて特に印象的だったのはこの1.と2.で使用したタグであったが、

他にも動画再生の<video>や、サジェスト機能を追加してくれる<datalist>など便利なものが多々ある。

昨年終了となったflashの代替案としての有力候補でもあったHTML5。

今更ながらではあるが、今回業務にてその便利さについて気付かされた。

改めて今後も効率よく活用していきたい。