そもそもJavaScriptで表示できるものって何？
文字や画像にポップアップなどを表示する方法が知りたい
さまざまなメソッドを活用してWebコンテンツを表示したい
JavaScriptでWeb開発をするにあたり、画面に文字や画像を表示できるように勉強することを避けては通れませんよね？
リッチなコンテンツをWebサイトに盛り込むことは、今や常識になりつつあります。
しかし、どこから勉強を始めたら良いのか困っている方も少なくないのではないでしょうか？
こんにちは！ライターのマサトです。
この記事では、初心者でも今日からJavaScriptで多彩なコンテンツを表示する方法について分かりやすく解説していきますので、ぜひ最後まで読んで理解を深めて頂ければ幸いです。
この記事はこんな人のために書きました
- JavaScriptでの表示方法を学習したい方
- 文字や画像など多彩な表示方法を知りたい方
- さまざまなメソッドの活用方法を学びたい方
JavaScriptで表示できるもの
Webサイトを構成するもっとも基本的な言語としては、HTML / CSS / JavaScriptがあります。
なかでもJavaScriptは、それ自体でHTMLもCSSも制御できるプログラミング言語なので活用次第ではWebサイトを自由自在に制御することが可能になります。
最近はJavaScriptフレームワークなども活発にリリースされており、文字や画像だけでなくポップアップなどのダイアログも簡単に表示できます。
つまり、Webで表示できるものはJavaScriptでも表示・操作することが可能であるということです。
本記事ではさまざまなコンテンツの表示方法について学習していきますので、ぜひ参考にしてみてください！
文字列の表示
この章では、基本的な文字列をどのように表示したら良いのかを見ていきましょう！
主に、document.write、innerHTMLメソッドを活用した表示・非表示の手法について学んでいきます。
document.writeで文字を表示する
document.writeはJavaScriptで文字を表示するための基本的なメソッドになります。
引数に表示したい文字列を指定するだけなので、次のように記述すれば画面に好きな文字を表示することが可能です。
document.write('こんにちは！');
実行すると画面に「こんにちは！」という文字列が表示されるのが分かります。
また、文字列だけでなくHTMLタグも認識することができるので、次のような記述も可能です。
document.write('こんにちは！
');
この例では、h1タグを付与して文字列を指定しました。
そのためh1タグを認識するので、少し大きめの文字列が表示されるというわけです。
innerHTMLで文字を表示する
次に、innerHTMLを使った文字表示を見ていきましょう！
innerHTMLはJavaScriptからDOM要素(HTML要素)を取得したあとに使えるようになるメソッドです。
そのため、document.getElementByIdなどを利用して最初にDOM要素を取得してから利用する必要があるという点に注意しましょう。
<body>
</body>
この例では、まず最初にp要素を取得してからinnerHTMLを利用しているのが分かりますね。
innerHTMLも文字列だけでなくHTMLタグを認識させることが可能です。
文字列を表示・非表示する
JavaScriptでは表示だけでなく、当然ながら非表示にすることも可能です。
もっとも基本的な非表示にする方法はHTML要素のCSSを操作する方法になります。JavaScriptではHTML要素のCSSをstyleメソッドで制御することができるのです。
例えば、CSSのdisplayプロパティをnoneに設定するには次のように記述します。
text.style.display = 'none';
textはあらかじめ取得したHTML要素になります。
そのため、任意のHTML要素を非表示にするには次のような記述になります。
const text = document.getElementById('text');
text.style.display = 'none';
タイマーを活用すれば設定した時間に再度HTML要素を表示することも可能でしょう。
setTimeout(function() {
text.style.display = 'block';
}, 2000)
これは2秒後に非表示にしていたHTML要素を表示する例です。
この仕組みを活用すれば、表示・非表示を交互に繰り返す処理も簡単に作れます。
const text = document.getElementById('text');
let state = true;
text.style.display = 'none';
setInterval(function() {
if(state) {
text.style.display = 'block';
} else {
text.style.display = 'none';
}
state = !state;
}, 1000)
この例では、setIntervalを利用して1秒間隔で表示と非表示を繰り返しています。
変数stateの中身をtrue / falseで切り替えることで、条件分岐させているわけです。
画像の表示
この章では、JavaScriptで画像を表示する方法について見ていきましょう。
主に、基本的な画像の表示方法とImageオブジェクトを活用した方法について学んでいきます。
基本的な画像の表示方法について
javaScriptで画像を表示するもっとも基本的な方法としては、document.writeの引数へそのままimgタグを指定することです。
document.write('
');
これで、画面に指定した画像が表示されます。
もちろん、前章と同じくinnerHTMLも利用できます。
DOM要素.innerHTML = '
これらの方法は手軽で簡単なのですが、少し複雑なことをしようとするとバグの原因となりかねません。
そこで、次章で紹介するImageオブジェクトを利用した方法が一般的には利用されています。
Imageオブジェクトを使った表示方法
JavaScriptは標準でImageオブジェクトを提供しており、これのインスタンスを作成することでさまざまな画像処理を行うことができます。
document.writeやinnerHTMLだとimgタグを作成するだけなので、JavaScript側で制御しづらいわけです。
しかし、Imageオブジェクトを利用すると画像要素をJavaScript側で自由に制御することが可能になります。
次のサンプル例を見てください
const img = new Image(); img.src = ‘/image/sample.jpg'; console.log(img.width); document.body.appendChild(img);
Imageオブジェクトのインスタンスを作成したあとに、画像のファイルパスを指定して画像サイズをコンソールログに出力することも簡単に実現できます。
ただし注意が必要なのは、画像サイズが大きいと読み込み処理に時間が掛かってしまいサイズが取得できないケースがあります。
そこで、onloadを使って画像が読み込まれたあとに画像サイズを取得するという処理を作ることもできます。
const img = new Image();
img.src = ‘/image/sample.jpg';
console.log(img.width);
img.onload = function() {
console.log(img.width);
};
document.body.appendChild(img);
このようにImageオブジェクトを使うと細かい制御が可能になるのでオススメです。
ポップアップの表示
この章では、JavaScriptで画面にポップアップを表示する方法について見ていきましょう！
主に、Alertによるポップアップと自作のダイアログを表示させる方法について学んでいきます。
Alertでポップアップを表示する
JavaScriptによるポップアップと言えば、代表的なのがalertによるものでしょう。
例えば、任意の文字列をポップアップするには次のように記述します。
alert('こんにちは');
実行すると次のような表示になります。
引数に指定した文字列を自由に表示することができるわけです。
文字列の中に n を挿入することで改行を付けることもできます。
alert('こんにちは。nこれはサンプルメッセージです');
実行すると次のような表示になります。
また、文字列だけでなく数値を表示したり、計算結果を出力することも可能です。
alert(30 * 30);
実行すると次のような表示になります。
このようにalertを使うと手軽にポップアップを表示できるので便利です。
ちなみに、alertの基本から応用技までを次の記事で体系的にまとめているのでぜひ参考にしてみてください。
自作のダイアログを表示する
alertなどJavaScriptが標準で提供しているポップアップのメソッドは、開発者がカスタマイズをできないように設計されています。
そこで、オリジナルのダイアログを表示したい場合は自作をする必要があります。作り方としてはHTMLとCSSでダイアログを作成して、それをJavaScriptで制御するという方法が簡単です。
はい・いいえ のボタンを持ったダイアログの骨組みをまずはHTMLで作成します。
ボタンをクリックしてください
次に、CSSでテキストやボタンの配置を調整します。
#dialog {
width: 250px;
margin: auto;
margin-top: 40vh;
padding: 30px 20px;
text-align: center;
border: 1px solid #aaa;
box-shadow: 2px 2px 4px #888;
}
すると、以下のようなダイアログが表示できます。
あとは、JavaScriptからダイアログのボタンを取得して任意の処理を実行させれば完成です。
var yes = document.getElementById('yes');
var no = document.getElementById('no');
//「はい」がクリックされたら
yes.addEventListener('click', function(){ console.log('yes') });
//「いいえ」がクリックされたら
no.addEventListener('click', function(){ console.log('no') });
また、ダイアログの表示・非表示に関してはJavaScriptから次のような処理を記述します。
- 表示：style.display = ‘none’
- 非表示：style.display = ‘block’
ダイアログ要素を取得したあとに、上記の処理を切り替えることで表示・非表示を制御することができるわけです。
まとめ
今回は、JavaScriptでさまざまなコンテンツを表示・非表示する手法について学習しました。
最後に、もう一度ポイントをおさらいしておきましょう！
・文字列などを表示するにはdocument.writeやinnerHTMLがある
・画像を表示するにはImageオブジェクトを利用するのが良い
・ポップアップを表示するにはalertがある
上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！
