JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで出力を表示する4つの方法を徹底解説

JavaScriptには、処理結果を画面やコンソールに表示するための方法が主に4つあります。それぞれの特徴と使い方を、実際のコード例とともにわかりやすく解説します。

1. innerHTML属性を使ってHTML要素に表示する

あらかじめHTML側に用意した要素のidを指定し、innerHTMLプロパティに値を代入することで、ページ内の任意の場所に出力結果を表示できます。Webページの一部を動的に書き換えたい場合に最もよく使われる方法です。

コード例

<html>
<body>
<p id="display"></p>
<script>
   document.getElementById("display").innerHTML = 10 + 10;
</script>
</body>
</html>

実行結果

20

2. document.write()を使って表示する

document.write()は、呼び出された位置に直接テキストを出力するシンプルな方法です。ただし、ページの読み込み完了後に実行すると既存のコンテンツが上書きされてしまうため、現在ではテスト用途以外での使用は推奨されていません。

コード例

<html>
<body>
<script>
   document.write(2 + 3);
</script>
</body>
</html>

実行結果

5

3. console.log()でコンソールに表示する

console.log()は、ブラウザの開発者ツール（デバッガーコンソール）に値を出力する方法です。ページの見た目に影響を与えず、変数の中身や計算結果を手軽に確認できるため、開発時のデバッグに欠かせない定番の手段です。

コード例

<html>
<body>
<script>
   console.log(2 + 3);
</script>
</body>
</html>

デバッガーコンソールへの出力

5

4. alert()でアラートボックスに表示する

alert()を使うと、ポップアップ形式のダイアログボックスにメッセージを表示できます。ユーザーに注意を促したい場面などで便利ですが、表示のたびに「OK」ボタンを押す必要があるため、頻繁な出力には向いていません。

コード例

<html>
<body>
<script>
   alert(2 + 3);
</script>
</body>
</html>

アラートウィンドウへの出力

5

使い分けのポイント

JSON文字列や配列などの大きなデータを扱う場合は、構造化された状態でそのまま確認できるconsole.log()が最適です。ページへの反映にはinnerHTML、ユーザーへの通知にはalert()といったように、目的に応じて適切な方法を選びましょう。

  1. JavaScriptでテキストボックスの入力値を取得して表示する方法

    JavaScriptでは、valueプロパティを使ってテキストボックスに入力された値を取得し、innerHTMLを使うことでその値を段落（<p>要素）に表示することができます。この仕組みは、フォームの入力内容をリアルタイムに画面へ反映させたい場合などによく使われる基本的なテクニックです。 コード例 以下が実際のサンプルコードです。 <!DOCTYPE html> <html lang="en"> <head>    <meta charset="UTF-8">  

  2. 【Android】TextViewでHTMLを表示するには？HtmlCompat.fromHtml()の使い方を解説

    AndroidのTextViewでHTMLを表示する方法Androidアプリ開発では、HTML形式の文字列を取得して、そのままテキストとして画面に表示したい場面があります。本記事では、TextViewにHTMLを表示するためのシンプルな実装方法を、サンプルコード付きでステップごとに解説します。Step 1：プロジェクトを新規作成するまず、Android Studioで新しいプロジェクトを作成します。メニューから「File」→「New Project」を選択し、必要な項目をすべて入力してプロジェクトを作成しましょう。Step 2：レイアウトファイルにTextViewを追加する次に、res/lay