JavaScript初心者必見！簡単ライブラリの作成・活用方法15選

const myLibrary = { property: 'value', method: function () { return this.property; } };

const myLibrary = (function () { const privateVar = 'private'; function privateFunc() { return privateVar; } return { publicVar: 'public', publicFunc: function () { return privateFunc(); } }; })();

const myLibrary = { module1: { method1: function () { return 'module1'; } }, module2: { method2: function () { return 'module2'; } } };

const myLibrary = { getElement: function (selector) { return document.querySelector(selector); }, setText: function (element, text) { if (element) { element.textContent = text; } } }; const element = myLibrary.getElement('#target'); myLibrary.setText(element, '変更後のテキスト');

const myLibrary = { addEventListener: function (element, type, callback) { if (element) { element.addEventListener(type, callback); } } }; const button = document.querySelector('#button'); myLibrary.addEventListener(button, 'click', function () { alert('ボタンがクリックされました'); });

const myLibrary = { ajax: function (url, callback) { const xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { callback(xhr.responseText); } }; xhr.open('GET', url, true); xhr.send(); } }; const url = 'https://api.example.com/data'; myLibrary.ajax(url, function (response) { console.log('取得したデータ: ', response); });

const myLibrary = function (options) { const defaultOptions = { color: 'red', fontSize: '16px' }; const mergedOptions = Object.assign({}, defaultOptions, options); this.changeStyle = function (element) { if (!element) return; element.style.color = mergedOptions.color; element.style.fontSize = mergedOptions.fontSize; }; }; const customOptions = { color: 'blue', fontSize: '20px' }; const libInstance = new myLibrary(customOptions); const targetElement = document.querySelector('#target'); libInstance.changeStyle(targetElement);

const myLibrary = function () { this.plugins = {}; }; myLibrary.prototype.registerPlugin = function (pluginName, pluginFunc) { this.plugins[pluginName] = pluginFunc; }; myLibrary.prototype.runPlugin = function (pluginName) { if (this.plugins[pluginName]) { this.plugins[pluginName](); } else { console.error('プラグインが存在しません。'); } }; const libInstance = new myLibrary(); libInstance.registerPlugin('samplePlugin', function () { console.log('プラグインが実行されました。'); }); libInstance.runPlugin('samplePlugin');

class SlideShow { constructor(container, options) { this.container = container; this.slides = this.container.querySelectorAll('.slide'); this.currentSlide = 0; this.options = options || {}; this.interval = this.options.interval || 3000; this.autoPlay = this.options.autoPlay || false; this.timer = null; if (this.autoPlay) { this.startAutoPlay(); } } nextSlide() { this.slides[this.currentSlide].classList.remove('active'); this.currentSlide = (this.currentSlide + 1) % this.slides.length; this.slides[this.currentSlide].classList.add('active'); } startAutoPlay() { this.timer = setInterval(() => { this.nextSlide(); }, this.interval); } stopAutoPlay() { clearInterval(this.timer); this.timer = null; } } const slideShowContainer = document.querySelector('.slideshow-container'); const slideShow = new SlideShow(slideShowContainer, { interval: 2000, autoPlay: true });

class Modal { constructor(trigger, options) { this.trigger = trigger; this.modalId = this.trigger.getAttribute('data-modal'); this.modal = document.getElementById(this.modalId); this.closeButton = this.modal.querySelector('.close'); this.options = options || {}; this.init(); } init() { this.trigger.addEventListener('click', () => { this.open(); }); this.closeButton.addEventListener('click', () => { this.close(); }); } open() { this.modal.classList.add('active'); } close() { this.modal.classList.remove('active'); } } const modalTriggers = document.querySelectorAll('.modal-trigger'); modalTriggers.forEach((trigger) => { new Modal(trigger); });

class TabMenu { constructor(tabMenu, options) { this.tabMenu = tabMenu; this.tabs = tabMenu.querySelectorAll('.tab'); this.contents = tabMenu.querySelectorAll('.content'); this.options = options || {}; this.init(); } init() { this.tabs.forEach((tab, index) => { tab.addEventListener('click', () => { this.switchTab(index); }); }); } switchTab(index) { this.tabs.forEach((tab) => { tab.classList.remove('active'); }); this.contents.forEach((content) => { content.classList.remove('active'); }); this.tabs[index].classList.add('active'); this.contents[index].classList.add('active'); } } const tabMenus = document.querySelectorAll('.tab-menu'); tabMenus.forEach((tabMenu) => { new TabMenu(tabMenu); });

class AccordionMenu { constructor(menu, options) { this.menu = menu; this.items = menu.querySelectorAll('.item'); this.options = options || {}; this.init(); } init() { this.items.forEach((item) => { const header = item.querySelector('.header'); header.addEventListener('click', () => { this.toggleItem(item); }); }); } toggleItem(item) { const content = item.querySelector('.content'); content.classList.toggle('active'); } } const accordionMenus = document.querySelectorAll('.accordion-menu'); accordionMenus.forEach((menu) => { new AccordionMenu(menu); });

function onDragStart(event) { event.dataTransfer.setData('text/plain', event.target.id); } function onDragOver(event) { event.preventDefault(); } function onDrop(event) { event.preventDefault(); const draggableElementId = event.dataTransfer.getData('text/plain'); const draggableElement = document.getElementById(draggableElementId); event.target.appendChild(draggableElement); } const draggableItems = document.querySelectorAll('.draggable'); const dropZones = document.querySelectorAll('.drop-zone'); draggableItems.forEach((item) => { item.addEventListener('dragstart', onDragStart); }); dropZones.forEach((zone) => { zone.addEventListener('dragover', onDragOver); zone.addEventListener('drop', onDrop); });

<!DOCTYPE html><html lang='ja'><head><meta charset='UTF-8'><title>インフィニットスクロール</title><style>.item { width: 100%; padding: 20px; border: 1px solid #ccc; margin-bottom: 10px; }</style></head><body><div id='container'></div><script>let page = 1; async function fetchAndDisplayItems() { const response = await fetch(`/api/items?page=${page}`); const items = await response.json(); const container = document.getElementById('container'); items.forEach(item => { const newItem = document.createElement('div'); newItem.className = 'item'; newItem.textContent = item.content; container.appendChild(newItem); }); page++; } function onScroll() { const scrollTop = window.pageYOffset || document.documentElement.scrollTop; const scrollHeight = document.documentElement.scrollHeight; const clientHeight = document.documentElement.clientHeight; if (scrollTop + clientHeight >= scrollHeight - 50) { fetchAndDisplayItems(); } } fetchAndDisplayItems(); window.addEventListener('scroll', onScroll);</script></body></html>

<!DOCTYPE html><html lang='ja'><head><meta charset='UTF-8'><title>パララックススクロール</title><style>body { margin: 0; font-family: Arial, sans-serif; } .parallax-section { position: relative; height: 100vh; overflow: hidden; } .parallax-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; } .content { position: relative; text-align: center; padding-top: 30%; color: white; }</style></head><body><div class='parallax-section'><div class='parallax-image' id='image1' style='background-image: url(image1.jpg);'></div><div class='content'><h1>パララックススクロール</h1><p>立体的な効果を生み出すテクニックです。</p></div></div><script>function parallaxScroll() { const image1 = document.getElementById('image1'); const scrollTop = window.pageYOffset || document.documentElement.scrollTop; image1.style.transform = `translateY(${scrollTop * 0.5}px)`; } window.addEventListener('scroll', parallaxScroll);</script></body></html>

<!DOCTYPE html><html lang='ja'><head><meta charset='UTF-8'><title>ショッピングカート</title><style>body { font-family: Arial, sans-serif; } .products, .cart { display: flex; flex-direction: column; } .product, .cart-item { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } button { margin-left: 10px; }</style></head><body><h1>ショッピングカート</h1><div class='products'><h2>商品一覧</h2><div class='product' data-price='1000'><span>商品A</span><button onclick='addToCart(this)'>カートに追加</button></div><div class='product' data-price='2000'><span>商品B</span><button onclick='addToCart(this)'>カートに追加</button></div><div class='product' data-price='3000'><span>商品C</span><button onclick='addToCart(this)'>カートに追加</button></div></div><div class='cart'><h2>カート内商品</h2><div class='cart-items'></div><div class='total'>合計金額: <span id='total-price'>0</span>円</div></div><script>const cartItems = document.querySelector('.cart-items'); const totalPrice = document.getElementById('total-price'); function addToCart(button) { const product = button.parentElement; const productName = product.querySelector('span').textContent; const productPrice = parseInt(product.getAttribute('data-price'), 10); const cartItem = document.createElement('div'); cartItem.className = 'cart-item'; cartItem.innerHTML = `<span>${productName} - ${productPrice}円</span><button onclick='removeFromCart(this)'>カートから削除</button>`; cartItems.appendChild(cartItem); const currentTotal = parseInt(totalPrice.textContent, 10); totalPrice.textContent = currentTotal + productPrice; } function removeFromCart(button) { const cartItem = button.parentElement; const itemPriceText = cartItem.querySelector('span').textContent.split(' - ')[1]; const itemPrice = parseInt(itemPriceText.slice(0, -1), 10); cartItems.removeChild(cartItem); const currentTotal = parseInt(totalPrice.textContent, 10); totalPrice.textContent = currentTotal - itemPrice; }</script></body></html>

<!DOCTYPE html><html lang='ja'><head><meta charset='UTF-8'><title>サンプルコード14：カレンダー</title><link rel='stylesheet' href='styles.css'></head><body><div id='calendar'></div><script src='script.js'></script></body></html>

#calendar { display: inline-block; text-align: center; } #calendar .days-header { display: flex; justify-content: space-between; } #calendar .date-cell { width: 14.28%; padding: 5px; box-sizing: border-box; } #calendar .today { background-color: #f3f3f3; }

function displayCalendar() { const now = new Date(); const year = now.getFullYear(); const month = now.getMonth(); const today = now.getDate(); const calendar = document.getElementById('calendar'); const daysHeader = document.createElement('div'); daysHeader.className = 'days-header'; const days = ['日', '月', '火', '水', '木', '金', '土']; for (let i = 0; i < days.length; i++) { const dayHeader = document.createElement('div'); dayHeader.className = 'date-cell'; dayHeader.textContent = days[i]; daysHeader.appendChild(dayHeader); } calendar.appendChild(daysHeader); const firstDate = new Date(year, month, 1); const lastDate = new Date(year, month + 1, 0); for (let i = 1 - firstDate.getDay(); i <= lastDate.getDate(); i++) { const dateCell = document.createElement('div'); dateCell.className = 'date-cell'; if (i > 0 && i <= lastDate.getDate()) { dateCell.textContent = i; if (i === today) { dateCell.classList.add('today'); } } calendar.appendChild(dateCell); } } displayCalendar();

<!DOCTYPE html><html lang='ja'><head><meta charset='UTF-8'><title>サンプルコード15：入力チェック</title><style>.error { color: red; }</style></head><body><form id='sample-form'><label for='username'>ユーザー名：</label><input type='text' id='username' name='username'><span class='error' id='username-error'></span><br><label for='email'>メールアドレス：</label><input type='text' id='email' name='email'><span class='error' id='email-error'></span><br><input type='submit' value='送信'></form><script src='script.js'></script></body></html>

const form = document.getElementById('sample-form'); function showError(elementId, message) { const errorElement = document.getElementById(elementId); errorElement.textContent = message; } function clearErrors() { showError('username-error', ''); showError('email-error', ''); } function validateForm(e) { e.preventDefault(); clearErrors(); const username = form.username.value.trim(); const email = form.email.value.trim(); let hasError = false; if (username === '') { showError('username-error', 'ユーザー名を入力してください。'); hasError = true; } if (email === '') { showError('email-error', 'メールアドレスを入力してください。'); hasError = true; } else if (!email.match(/^[^@]+@[^@]+.[^@]+$/)) { showError('email-error', '正しいメールアドレスを入力してください。'); hasError = true; } if (!hasError) { form.submit(); } } form.addEventListener('submit', validateForm);