JavaScript | にんじんみるく

JavaScriptでボタンクリックで指定の要素にclass追加・削除を行う方法

シラツキ — Fri, 14 Oct 2022 17:11:51 +0000

Vanilla JS（JavaScript）を使用して、ボタンをクリックしたとき、指定の要素にclass追加・削除する方法を紹介します。
よくQ&Aなんかで見かける質問文をクリックすると回答が出てくる仕様なんかに使えます！

ボタンクリックで指定の要素にclass追加・削除する

まず今回使用するHTMLを用意します。


コンテンツが入ります。

続いてCSS。
非表示・表示のみの簡単なものにしていますが、必要に応じてアニメーションなどをつけてください。

.content{
  display: none;
}
.content.js-active{
  display: block;
}

今回メインのJavaScript。
「querySelector」で、ボタンと表示する部分を取得して使います。

const content = document.querySelector(".content");
const btn = document.querySelector(".js-btn");
       
btn.addEventListener("click", () => {
  content.classList.toggle("js-active");
});

The post JavaScriptでボタンクリックで指定の要素にclass追加・削除を行う方法 first appeared on にんじんみるく.

JavaScriptの結果をログで表示する方法【JS】

シラツキ — Sat, 05 Feb 2022 04:48:37 +0000

JavaScriptに書いたものやなにかしら処理した内容をログで表示する方法を紹介します。
途中のテストなどに使えるので、覚えておきたい内容です。

JavaScriptの結果をログで表示する方法

よくある技術書にあるやつ。

console.log('Hello JS!');

これでブラウザのコンソールログを確認すると「Hello JS!」が表示されるはずです。

書いた文字を直接表示させることができます。

ちなみに変数の中に入れているものを表示することができます。
例えば、

const a = 1;
const b = 2;
const c = a + b;
console.log(c);

出てくる結果は、「３」！

開発中に変数の中に何が入っているのか気軽に確認できるので便利ですね！

The post JavaScriptの結果をログで表示する方法【JS】 first appeared on にんじんみるく.

モーダルプラグイン「Remodal」で簡単にモーダルウィンドウを実装する方法

シラツキ — Sat, 05 Feb 2022 00:45:53 +0000

モーダルウィンドウを手軽に実装したいとき、「Remodal」を使うと簡単に実装できたので実装メモを残しておきます。
あまりごちゃごちゃしてないので、カスタマイズ性も高そう∠( ﾟдﾟ)／

モーダルプラグイン「Remodal」の使い方

「Remodal」をダウンロード

まずは「Remodal」をダウンロードしてきます。

Remodal公式サイト

「Download」をクリックするとGitHubに飛ばされるのでそこからダウンロードします。

必要なファイル

動作に必要なファイルは３つ！

・remodal.css
・remodal-default-theme.css
・remodal.min.js

これらをHTMLで読み込みます。
このプラグインは、ｊQueryを使用するので、必ずｊQueryも読み込んでください。

HTMLに記述

動作するように早速HTMLを書いていきます。

ボタン

コンテンツ
閉じる

・まずaタグにモーダルさせたい要素のIDを指定します。
・モーダルさせる要素に「data-remodal-id」で同じIDを指定します。
これで、ボタンを押したらモーダルの完成！

「data-remodal-action=”close”」を使うことで好きなように閉じるボタンも設定できるので必要な際は設定してください。

最低限の設定はこれで終わり！
オプションで、いろいろいじれますが詳しくはremodalのGitHubで！

The post モーダルプラグイン「Remodal」で簡単にモーダルウィンドウを実装する方法 first appeared on にんじんみるく.

JavaScriptを別ファイル（外部ファイル）に書く【JS】

シラツキ — Sat, 29 Jan 2022 18:57:32 +0000

JavaScriptは前回紹介した「JavaScriptをhtmlに書く方法【JS】」のようにhtml内に記述できます。
しかし、別ファイルで管理したほうが、全体の見通しが良くなるのでおすすめです。

では早速JavaScriptを別ファイルに書いていきましょう！

JavaScriptを別ファイル（外部ファイル）に書く

JavaScriptを別のファイルに書くには、JavaScript専用のファイルを作成する必要があります。
名前は自由なのですが、今回は「script.js」という名前で作成しようと思います。

最後の「.js」で、JavaScriptのファイルだよとわかります。

では早速前回と同じ内容を表示させてみます。
「script.js」に書く内容はこちら

alert('にんじんみるく！');

前回はscriptというタグで囲んでいましたが、今回は必要ありません。
こちらのほうがスッキリ書けますね。

JavaScriptのファイルを読み込む

このままだとhtmlに読み込んでいないので、JavaScriptは実行されません。
そこでhtmlにscrで作成したファイルを読み込みます。




  JSテスト

こんな感じ。
（htmlファイルと同一階層を想定）

これでhtmlを開いてみると同じく「にんじんみるく！」と表示されるはずです。

The post JavaScriptを別ファイル（外部ファイル）に書く【JS】 first appeared on にんじんみるく.

JavaScriptをhtmlに書く方法【JS】

シラツキ — Sat, 29 Jan 2022 17:59:34 +0000

最近JavaScriptをもっと勉強したい意欲が強いので、めちゃめちゃ基礎の部分からいろいろ操作することまでブログで書いてみようと思います。
これからJavaScriptを勉強したい人、これどうするればええんやって人の参考になれば・・・（むしろ教えてください。

ではまず書き方からやっていく〜！

JavaScriptをhtmlに書く

JavaScriptは、htmlに直にで書くことも、別ファイルとして書くこともできます。
今回は、htmlにJavaScriptを書く方法を紹介します。

では早速書いてみましょう！

こんな感じ！
JavaScriptは、scriptで囲むことでhtml内に記述することができます。

ちなみに最初の記述を追加することで、htmlを開くと「にんじんみるく！」と表示されるはずです。

HTMLに記載すると、すぐに試すことができるのでテストで行う際は楽ですね。

html内のJavaScriptの記述場所

基本的にどこにでも入れれますが、headかbody内に記述します。
最近だと「body」の最後に書くことが多いですね。

実際の本番環境の実装の際には、別ファイル化しておくほうが整理しやすいのと実行タイミングを図りやすいのでいいと思います。

「JavaScriptを別ファイル（外部ファイル）に書く【JS】」ではJavaScriptを別ファイルに記載する方法紹介しています。

The post JavaScriptをhtmlに書く方法【JS】 first appeared on にんじんみるく.

JSで動画を再生してみた！

シラツキ — Fri, 14 Jan 2022 16:16:57 +0000

サイト全体のローディング画面の読み込んだ後に動画を再生しないといけない事があったので、さらっと書いてみました。
次回も使えるようにメモとして残しておきます。

JSで動画を再生する

では早速書いていきます。

function playMv() {
	if ($('#player').length) {
		let video = $("#player video").get(0);
		video.play();
	}
}

「playMv」っていう関数を定義しました。
実行したいタイミングで、「playMv」を実行すればいいので、見た目もきれいに書けますね。

「#player」とIDについた中のvideoタグの情報を「video」という変数に入れて、「play()」で動画を再生します。

ただただ動画を自動再生させるだけならHTMLで実装できます。

「autoplay」「muted」をつけてあげれば、スマホでも自動再生されます！

The post JSで動画を再生してみた！ first appeared on にんじんみるく.

jQueryでclassを動的に追加・削除する方法

シラツキ — Wed, 29 Dec 2021 13:16:02 +0000

jQueryを使用して、HTMLのclassを追加したり、削除したりする方法を紹介します。
クリックしたときの動作やホバーしたときなど、使い方は色々。
では早速JQueryでclassを動的に追加・削除する方法を紹介していきます！

JQueryでclassを動的に追加・削除する方法

jQueryでclassを追加

要素にclassを追加します。

	
$('要素').addClass('class名');

jQueryでclassを削除

要素からclassを削除します。

$('要素').removeClass('class名');

jQueryでclassを追加・削除

要素から指定のclassがあれば削除、なければclassを追加します。

$('要素').toggleClass('class名');

The post jQueryでclassを動的に追加・削除する方法 first appeared on にんじんみるく.

webサイト制作でよく利用するjQueryパーツ集！楽に機能実装を！

シラツキ — Wed, 29 Dec 2021 10:09:00 +0000

jQueryオワコン説などもありますが、WordPressとかただのHTMLの静的サイトの制作ならまだまだｊQueryの使用率は高いです。
長く愛されているだけあってちょっと書けばすぐに実装できてしまうのがいいですよね。

ここでは、制作でよく使用する機能をまとめてコピペで実装してしまおうぜという僕得のページです。（
他にももし使いたい方がいればお使いください。

では早速行きます！！

よく利用するｊQuery

スムーススクロール

「jquery-easing」で、強弱のついたいい感じのスムーススクロールを実装します。
必要ない場合は、とっても可。

Page TOP

function smoothScroll() {
	$('a[href^="#"]').click(function () {
		var speed = 1500;
		var href = $(this).attr("href");
		var target = $(href == "#" || href == "" ? 'html' : href);
		var position = target.offset().top;
		$("html, body").animate({
			scrollTop: position
		}, speed, "easeInOutQuart");
		return false;
	});
}

メニュー実装

「#header-btn」をクリックすることで、メニュー「#header-menu」が開き、ボタン2「#header-btn_close」をクリックで閉じるメニューを実装できます。

function spMenu() {
	let btn = $('#header-btn');
	let close = $('#header-btn_close');
	let menu = $('#header-menu');
	btn.click(function () {
		menu.slideToggle();
	});
	close.click(function () {
		menu.slideToggle();
	});
}

文字数制限

PHPなどで制御してしまうことが多いですが、JSでも文字数を制御できます。
新着情報などJSを使用して指定の文字数以上の場合最後に「…」をつけて省略します。

function textCat() {
// SP時
	if (window.matchMedia("(max-width: 640px)").matches) {
		let count = 17;
		$('.text_limit').each(function () {
			var thisText = $(this).text();
			var textLength = thisText.length;
			if (textLength > count) {
				var showText = thisText.substring(0, count);
				var insertText = showText += '…';
				$(this).html(insertText);
			};
		});
	} else {
//PC時
		let count = 50;
		$('.text_limit').each(function () {
			let thisText = $(this).text();
			let textLength = thisText.length;
			if (textLength > count) {
				var showText = thisText.substring(0, count);
				var insertText = showText += '…';
				$(this).html(insertText);
			};
		});
	}
}

タブ切り替え

タブをいくら増えても対応可能で、index()で取得して切り替えます。

function tabSelect() {
	let tabs = $(".tab");
	$(".tab").on("click", function () {
		$(".active").removeClass("active");
		$(this).addClass("active");
		const index = tabs.index(this);
		$(".tab-content").removeClass("show").eq(index).addClass("show");
	})
}

クリックで展開するコンテンツ

ボタンをクリックすると、内容が出てくるコンテンツです。



ボタン

テストテストテストテストテストテストテストテストテストテストテストテスト

CSS

ul li .content{
display: none;
}

function btnDown() {
$(".btn").on("click", function () {
$(this).next().slideToggle();
});
}

お問い合わせフォームの実装

メールアドレスの一致

メールアドレスが一致しているかどうか判定します。
メールが一致しない場合は、「メールアドレスが一致しません。」と表示し、再入力を促します。

function CheckMail() {
	// 入力値取得
	let input1 = $("#mail01").val();
	let input2 = $("#mail02").val();
	// メール比較
	if (input1 !== input2) {
		window.alert("メールアドレスが一致しません。");
		return false;
	} else {
		return true;
	}
}

コレがあると便利では？など何かあればコメントください！

The post webサイト制作でよく利用するjQueryパーツ集！楽に機能実装を！ first appeared on にんじんみるく.

jQueryでclassの追加・削除する方法

シラツキ — Sat, 14 Aug 2021 14:19:34 +0000

jQueryを使用して、classを追加したり、削除したりする方法を紹介します。
動的な部分や動きをつけるときにclassを付けたりすると簡単に実装できるので必ず覚えておきたいjQueryの１つです。

jQueryでCSSの追加・変更・削除やclass追加をする方法

では、早速ｊQueryを使用して動的にCSSの追加や削除を行ってみます。

CSSを追加する

指定の要素にclassを追加します。

$('要素').addClass('class名');

CSSを削除する

指定の要素にclassを削除します。

$('要素').removeClass('class名');

classがあれば削除、なければ追加する

指定の要素に指定の要素に指定のclass名がついていれば削除、なければ追加する方法です。

$('要素').toggleClass('class名');

指定の要素がクリックされたら、指定のclassがあれば削除、なければ追加する

指定する要素に指定のclass名がついていれば削除、ない場合はclassを追加する方法です。

$('要素').click(function(){
  $(this).toggleClass('class名');
});

The post jQueryでclassの追加・削除する方法 first appeared on にんじんみるく.

フォームのメールアドレスが一致しているか確認する方法【jQuery】

シラツキ — Sun, 23 May 2021 05:09:44 +0000

フォームによくある「メールアドレス」、「メールアドレス確認」をｊQueryを使用してチェックします。
では早速やっていきます！

jQueryでフォームのメールアドレスが一致しているか確認する方法

まずは、HTMLを書いていく〜。

メールアドレス入力欄を作る

inputで入力欄を作って、「内容を確認する」を押した際に、チェックを行うように「onClick」を設定しておきます。

jQueryでvalue値の確認

事前に「input」にidを振っておき、jQueryでvalue値を取得します。
中の値が一致していれば、確認ページへ移動し、一致しない場合は、ウィンドウで「メールアドレスが一致しません。」と表示させます。

function CheckMail() {
    // 入力値取得
    var input1 = $("#mail01").val();
    var input2 = $("#mail02").val();
    // メール比較
    if (input1 !== input2) {
        window.alert("メールアドレスが一致しません。");
        return false;
    } else {
        return true;
    }
}

完成！

フォームのチェックボックスを必須にする方法も紹介しています。
フォームのチェックボックスを必須化！１つ以上チェックがないと送信できないようにする方法

The post フォームのメールアドレスが一致しているか確認する方法【jQuery】 first appeared on にんじんみるく.