実務でよく使うJavaScriptのソースコード集—現場で役立つテクニックを徹底解説

<!-- HTML例 -->
<p id="example">元のテキスト</p>

// JavaScriptコード
const element = document.getElementById('example');
element.textContent = '新しいテキスト';

<!-- HTML例 -->
<div class="item">アイテム1</div>
<div class="item">アイテム2</div>
<div class="item">アイテム3</div>

// JavaScriptコード
const items = document.getElementsByClassName('item');
for(let i = 0; i < items.length; i++) {
    items[i].style.color = 'blue';
}

// JavaScriptコード
const newElement = document.createElement('p');
newElement.textContent = '追加されたテキスト';
document.body.appendChild(newElement);

// JavaScriptコード
fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error('エラーが発生しました:', error);
    });

// JavaScriptコード
const data = { name: '太郎', age: 30 };

fetch('https://api.example.com/users', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
})
.then(response => response.json())
.then(result => {
    console.log('成功:', result);
})
.catch(error => {
    console.error('エラー:', error);
});

// JavaScriptコード
async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('エラーが発生しました:', error);
    }
}

fetchData();

<!-- HTML例 -->
<button id="myButton">クリックしてね</button>

// JavaScriptコード
const button = document.getElementById('myButton');
button.addEventListener('click', () => {
    alert('ボタンがクリックされました！');
});

<!-- HTML例 -->
<input type="text" id="myInput" placeholder="入力してください">
<p id="display"></p>

// JavaScriptコード
const input = document.getElementById('myInput');
const display = document.getElementById('display');

input.addEventListener('input', () => {
    display.textContent = input.value;
});

// JavaScriptコード
document.addEventListener('keydown', (event) => {
    console.log(`キーが押されました: ${event.key}`);
});

// JavaScriptコード
function greet(name) {
    return `こんにちは、${name}さん！`;
}

console.log(greet('花子')); // 出力: こんにちは、花子さん！

// JavaScriptコード
const square = function(number) {
    return number * number;
};

console.log(square(5)); // 出力: 25

// JavaScriptコード
const multiply = (a, b) => a * b;
console.log(multiply(4, 5)); // 出力: 20

// JavaScriptコード
try {
    let result = riskyFunction();
    console.log(result);
} catch (error) {
    console.error('エラーが発生しました:', error.message);
}

// JavaScriptコード
function checkAge(age) {
    if (age < 18) {
        throw new Error('18歳未満は利用できません。');
    }
    return '利用可能です。';
}

try {
    console.log(checkAge(16));
} catch (error) {
    console.error(error.message); // 出力: 18歳未満は利用できません。
}

// JavaScriptコード
try {
    // エラーが発生する可能性のあるコード
} catch (error) {
    // エラー処理
} finally {
    console.log('このメッセージは必ず表示されます。');
}

// Reactコンポーネントの例
import React from 'react';

function Greeting(props) {
    return <h1>こんにちは、{props.name}さん！</h1>;
}

export default Greeting;

// jQueryコード
$(document).ready(function(){
    $('#myButton').click(function(){
        alert('ボタンがクリックされました！');
    });
});

<!-- Vue.jsの例 -->
<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>

// JavaScriptコード
new Vue({
    el: '#app',
    data: {
        message: 'こんにちは、世界！'
    }
});

// utils.js
export default function greet(name) {
    return `こんにちは、${name}さん！`;
}

// main.js
import greet from './utils.js';

console.log(greet('太郎')); // 出力: こんにちは、太郎さん！

// JavaScriptコード
const numbers = [1, 2, 3, 4, 5];
const squared = numbers.map(n => n * n);

console.log(squared); // 出力: [1, 4, 9, 16, 25]

// JavaScriptコード
const greet = (name = 'ゲスト') => `こんにちは、${name}さん！`;

console.log(greet()); // 出力: こんにちは、ゲストさん！
console.log(greet('花子')); // 出力: こんにちは、花子さん！