当サイトでも、今まで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で検索を行います。サーバーのデータベースにアクセスはしない形での検索です。
