【脱jQuery】簡単コピペでページをリッチにするネイティブなJavaScriptネタ帳まとめ

3分

JSまとめ

SHARE

当サイトでも、今までjQueryの記事を色々書いてきましたが、JavaScriptの勉強がてら、jQueryで使っていたスニペットをネイティブなJavaScriptに置き換えました。

そこでこの記事では、初心者でも実装が簡単で、LPやサイトの味付けによく使うJavaScriptのスニペットを色々とご紹介します。

随時更新中の記事です。

この記事は、記事の追加に応じて随時更新中です。

かかかず
かかかず

詳細のコードはそれぞれのリンク先で見れるので、是非参考にしてみてください。

UI

モーダルや、タブ・アコーディオンなど、Webサイトやアプリによく組み込まれるUI（ユーザー インターフェース）についてのスニペットです。

モーダル

このモーダルは、ユーザーに重要な操作や確認を促したりするときに用いられることが多いUIです。ですが、強制力が強くユーザーにストレスを与える可能性のあるUIでもあるので、注意して使うようにしましょう。

タブ

タブを使うことで、画面全体を遷移する必要がない為ユーザーの負担を減らすことができ、限られたスペースに複数のコンテンツを表示することができます。

クリックしなければ中身を見れないので、その特徴を理解して使うようにしましょう。

ドロワー

ドロワーは、画面の上部に設置されたボタンをタップすることで、全体を覆うメニューを表示するUIです。メニューを操作しないときにはメニュー画面を隠しておくことができるので、スマホでよく見かけるUIです。

スライダー

スライダーは、コンパクトに表示できるため、情報量が多いページでは縦向きのスクロール数を少なくして表示できるメリットがあります。

かかかず
かかかず

よく言う、カルーセルもスライダーと同義です。

スクロール

画面のスクロールは、ユーザーがページ閲覧中に最も行う動作とも言えると思います。

スクロールしていったとき、いろんなアニメーションをJavaScriptで動かすことができるので、その動かし方を解説しています。

アコーディオン

アコーディオンは、情報量をユーザーが表示・非表示のコントロールができることで、欲しい情報を過度にスクロールすることなく効率的に辿り着くことができます。

ですが、クリックしないと気づかないUIなので、メニューや見出しの作り方は工夫するようにしましょう。

目次

ブログでよく見る目次も、JavaScriptで作ることができます。目次は、ページ内の h タグを取得して出力しますが、出力するレイアウトやデザインが色々あるので、自分好みのものを見つけてみてください。

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

ローディングアニメーションの実装は結構難しそうに見えますが、仕組みとしてはとてもシンプルで、簡単です。基本はHTMLとCSSで作り、タイミングをJavaScriptで調整していく感じです。 

ツールチップ

ツールチップはモバイルファースト全盛なので、あまり見かけなくなったUIですが、入力フォームの項目にHELPとして使うなど、まだまだいろんな使い道があります。

ヘッダー

グローバルナビゲーションを置くヘッダーにもいろんなデザインがあります。どのページでも共通して表示されるので、ヘッダー以外のブロックが見やすいよう、可変等々させると見やすくなります。

フォーム

ユーザーから情報を集めるフォームについて、JavaScriptで入力チェックが可能です。

フォーム

登録フォームには、いくつかのフォームフィールドと決定ボタンがあります。最後の完了画面まで、ユーザーの補助になるようなものを、JavaScriptで色々制御することができます。

文字

いわゆる文字列をJavaScriptでいじります。いろんな方法やメソッドがあり、覚えておくと便利なものが多いです。

文字の装飾

単なる文字の装飾はCSSだけでOKですが、「徐々に」や「ゆっくりと」のアニメーションを指定したタイミングで実行させるにはJavaScriptを使うと良いでしょう。

文字の操作

文字列を指定した位置に挿入したり、文字列を含む要素にclassを付与したり、文字をJavaScriptで色々いじるスニペットです。

文字のカウント

JavaScriptで指定要素の中の文字列をカウントして、何か新しく要素を追加したり変化を加えます。

数字の操作

要素の中にある数字を取得して、要素の中などを操作・変更します。

ウィンドウ

JavaScriptで、ブラウザのウインドウを操作したり、ページ遷移時にアニメーションを付けたりするスニペットです。

ウィンドウ操作

ページの更新や、ブラウザが保持している前後のページの情報を利用して操作を行います。

タイトルの操作

閲覧中ページの title タグを操作します。

ページ遷移時の動き

ページ遷移の時にフェードインしながらコンテンツが表示されるアニメーションを、JavaScriptで実装します。遷移時に演出をつけたい、少しだけ動きをつけてページをリッチにしたい時にオススメのスニペットです。

class

要素のclassの追加・削除の付けかえを、JavaScriptで行います。

classの操作

要素のclassの追加・削除の付けかえをJavaScriptで操作します。

要素

ページ内の要素をJavaScriptで操作します。

要素の操作

指定した要素をJavaScriptで操作します。

要素の追加

JavaScriptで要素の追加を行います。

API

APIでデータを受け取り、JavaScriptで配置させHTMLで表示します。

コードを色々書いたりする必要がなく、既存プログラムをそのまま利用できるので、空いた時間で他のことに時間を使えるので、重宝します。

WP REST API

WP REST APIとは、WordPressのデータベースの情報をJSON形式で取得できるAPIで、WordPress4.7から標準搭載されています。そんなWP REST APIを使って、他サイトにあるWordPressの記事を表示させます。

Google Books APIs

Google Books APIsは、「Google ブックス」から好みのキーワードを指定して本を検索することができるAPIです。そんなGoogle Books APIsをJavaScriptで利用して表示させます。

楽天市場API

楽天市場もAPIを提供しています。楽天市場商品について情報を取得できるAPIを、JavaScriptで表示させます。

画像・動画

画像・動画ファイルをJavaScriptで操作します。

画像の操作

画像ファイルをJavaScriptで操作します。

YouTube

YouTubeの動画をJavaScriptで操作します。

リンク

a タグのリンクをJavaScriptで操作します。

リンク

リンクにJavaScriptで属性などを追加します。

Google Analytics

Googleが無料で提供しているアクセス解析「Google Analytics」で、色々と便利になるものをJavaScriptで操作します。

Cookie

ブラウザに保存されるテキストデータ「Cookie」を、JavaScriptで操作します。

Cookie

ブラウザからアクセスした時に送受信される「Cookie」をJavaScriptで操作します。ここでは、このCookieの読み書き・削除を行います。

検索

サーバー側でなく、フロント側で検索を作りJavaScriptで動かします。

検索

JavaScriptで検索を行います。サーバーのデータベースにアクセスはしない形での検索です。

前の記事

swiperの縦スライダー
JavaScriptのライブラリSwiperを使って縦方向のス…

次の記事

JavaScriptの.classList.toggleでスマ…

関連記事

カテゴリーのイラスト

同じカテゴリの記事一覧

ボタンの影

まとめ記事

Article

About

Summary

OTHER

DUB DESiGNはデザインをテーマにしたメディアです。Webデザインに関するHow-toや、WordPressのスニペットなど、デザインの話を中心に、仕事を楽しむすべての方を対象に記事を配信しています。

＞＞ 詳しくはこちら