JavaScriptで配列要素を抽出して文字サイズを変更する方法｜初心者向け解説

JavaScriptでは、配列から特定の要素を抽出して、その内容をHTMLに表示し、スタイルを変更することが簡単にできます。この記事では、配列要素を選択して文字サイズを変更する方法を初心者向けに解説します。

配列から要素を抽出する方法
関数式に変数を代入して利用する
関数式を呼び出してHTMLに出力
応用例：任意の要素とサイズを選択
まとめ

配列から要素を抽出する方法

通常、配列の要素は0から始まるインデックス番号で指定します。最後の要素を取得したい場合は配列の長さを使うと便利です。

例として、配列 ['あ','い','う','え','お'] の最後の要素を取得する方法は次の通りです。

const arr = ['あ','い','う','え','お'];
const lastElement = arr[arr.length - 1];

関数式に変数を代入して利用する

抽出した要素を引数として関数に渡し、文字サイズを変更してHTMLに出力する例です。

const displayText = function(element, size) {
    const p = document.createElement('p');
    p.textContent = element;
    p.style.fontSize = size + 'px';
    document.body.appendChild(p);
};

関数式を呼び出してHTMLに出力

先ほどの関数式を呼び出し、抽出した要素と希望の文字サイズを渡します。

displayText(lastElement, 24); // 最後の要素を24pxで表示
displayText(arr[0], 16);    // 最初の要素を16pxで表示

応用例：任意の要素とサイズを選択

配列の任意のインデックスを指定して、文字サイズも動的に変更可能です。

例えば、インデックス番号を入力させる簡単な関数を作れば、ユーザーが自由に要素を選んで表示できます。

function showElementAtIndex(index, size) {
    if(index < 0 || index >= arr.length) {
        console.log('範囲外のインデックスです');
        return;
    }
    displayText(arr[index], size);
}