1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. JavaScript
  6. »
  7. JavaScriptで画像を表示してみよう! 小学生からのプログラミング入門

JavaScriptで画像を表示してみよう! 小学生からのプログラミング入門

みなさんこんにちは。今日もプログラミングの勉強をはじめていきましょう。

前回、「JavaScriptで今月の残り日数を計算してみよう! 小学生からのプログラミング入門」では、JavaScriptをつかって、今月の残りの日数を調べる方法を紹介しました。

今回は、ゲーム開発かいはつへ、もう一歩んで、JavaScriptジャバスクリプト画像がぞう表示ひょうじする方法を学んでいきます。

また、画像の移動について知りたい場合は、次回の記事「JavaScriptで画像を移動してみよう! 小学生からのプログラミング入門」をご覧ください。

アル

うーん……

りこ

あ、アル。プログラムの勉強は進んだ?

アル

あ、りこちゃん。やっぱりゲームなんだから画像がぞう表示ひょうじさせたいんだけど、やり方が分からないんだ

りこ

それなら山田先生にききに行きましょ!

目次
  1. プロローグ
  2. 今回使う画像がぞうと、その保存場所ほぞんばしょについて
  3. HTMLで画像がぞう表示ひょうじしてみよう
  4. JavaScriptジャバスクリプト画像がぞう表示ひょうじしてみよう
  5. まとめ

プロローグ

アル

先生! また来たよ

りこ

来ちゃった

山田

おう、アルくん、りこちゃん。よく来たべな

アル

ねぇ、JavaScriptジャバスクリプト画像がぞう表示ひょうじさせたいんだけど、どうやるの?

りこ

ゲームに画像を使いたいんだって

山田

そうだべか……じゃあ今日は、画像の表示についてくわしく教えていくべ

今回使う画像がぞうと、その保存場所ほぞんばしょについて

では、まずは、今回使う画像がぞうその保存場所ほぞんばしょについてです。

山田

もし、表示したい画像が手元にない場合は、こちらを使って欲しいんだべ
りこちゃんのドット絵画像だべ

りこ
りこ

きゃー! 私がちっちゃくなっちゃった

山田

この画像を右クリックして、「名前を付けて画像を保存」で保存するべ

りこ

どこに保存すればいいかな……

山田

今回はシンプルに、次のように保存してほしいんだべ

game/
├ index.html
└ rico.png
りこ

えっと、gameフォルダを作って、その中にrico.pngファイルを保存すればいいのね!

山田

そうだべ。そして画像と同じ場所に、index.htmlファイルも作っておいてほしいんだべ

HTMLで画像がぞう表示ひょうじしてみよう

さて、JavaScriptジャバスクリプト画像がぞう表示ひょうじさせていきたいのですが、そのまえに、HTMLエイチティーエムエルでの画像を表示させる方法を学んでおきましょう。

山田

まずはHTMLで画像を表示するほうほうだべ
そのやり方はもう知ってるべよ、って人は、ここは飛ばしても大丈夫だべよ

画像を表示させるためのHTMLタグは、<img>です。
画像のファイル名が「rico.png」の場合は、このようにします。

<img src="rico.png">
山田

このsrcってとこに、画像ファイルまでのパスを入力するんだべ

アル

パスってなぁに?

りこ

あれじゃない? バスケとかで……

アル

ああ、ボールを渡すんだ!

山田

てやんでぇ、べらぼうめ! そのパスじゃないべよ!

りこ

え、ちがうの?

山田

パスっていうのは、ファイルまでの場所ばしょのことだべ
パスのくわしい書き方は「パスの書き方を覚えよう。絶対パス、相対パス、ルート相対パスの違い」を見て欲しいべよ

今回は、index.htmlファイルとrico.pngファイルが同じ場所にあるべから、ただファイル名を入力するだけでOKだべ

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>キャラクターの表示</title>
</head>
<body>
	<img src="rico.png">
</body>
</html>

これでブラウザにりこちゃんの画像が表示されます。

キャラクターの表示
りこ

わたしが表示されたよ!

JavaScriptジャバスクリプト画像がぞう表示ひょうじしてみよう

つづいて、JavaScriptジャバスクリプトによって画像がぞう表示ひょうじする方法です。

山田

こんどはJavaScriptを使って、画像を表示してみるべよ
こんなふうに書くんだべ

document.write( '<img src="rico.png">' );
アル

なんだかむずかしいよ……

りこ

あれ、でもさっきのimgタグが、かっこの中に書かれてるよ!

山田

ふっふっふ、document.write()は、画面に文字などのデータを表示させることができるものだべ
画像を表示させるimgタグを書けば、それが画像としてブラウザに表示されるんだべよ

りこ

へぇ、そうなんだ

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
 	<meta charset="UTF-8">
	<title>キャラクターの表示</title>
</head>
<body>
	<script>
		document.write( '<img src="rico.png">' );
	</script>
</body>
</html>

index.htmlをブラウザで確認すると、さきほどと同じようにりこちゃんの画像が表示されます。

まとめ

今回はJavaScriptでの、画像の表示のしかたを学びました。
まだ動いたりはしませんが、今後こんご記事きじで自由に移動できる方法も紹介しょうかいしていきます。

山田

今回は画像の表示方法を学んだべよ

アル

やっぱり画像が表示されると楽しいね

りこ

私、方向キーで操作そうさできるようにしたい!

山田

それはまた後日の記事で紹介するから、もう少し待つべよ

りこ

うん! 楽しみ!

アル

うん!

この企画の一覧はこちら

  1. 小学生からのプログラミング入門。プログラミングってなぁに?
  2. Scratchの使い方と、ゲーム作りの基礎知識を学ぼう! 小学生からのプログラミング入門
  3. Scratchでじゃんけんゲームを作ろう! 小学生からのプログラミング入門
  4. Scratchでシューティングゲームを作ろう! 小学生からのプログラミング入門
  5. Scratchでピアノ鍵盤を作って音を鳴らそう! 小学生からのプログラミング入門
  6. JavaScriptでおみくじを作ろう! 小学生からのプログラミング入門
  7. JavaScriptで今月の残り日数を計算してみよう! 小学生からのプログラミング入門
  8. JavaScriptで画像を表示してみよう! 小学生からのプログラミング入門
  9. JavaScriptで画像を移動してみよう! 小学生からのプログラミング入門
  10. 【JavaScript】キー入力でキャラを動かしてみよう! 小学生からのプログラミング入門
  11. 【JavaScript】ファイルを分けて管理してみよう! 小学生からのプログラミング入門
  12. 【JavaScript】オブジェクトを使ってみよう! 小学生からのプログラミング入門
  13. 【JavaScript】ゲームのメインループを作ってみよう! 小学生からのプログラミング入門
  14. 【JavaScript】キャラを決まった間隔ずつ動かす! 小学生からのプログラミング入門
  15. HTML5とCanvasを使ってみよう! 小学生からのプログラミング入門
  16. 【JavaScript】迷路やRPGで使えるマップを作ってみよう! 小学生からのプログラミング入門
  17. 【JavaScript】マップでキャラを動かせるようにしよう! 小学生からのプログラミング入門
  18. 【JavaScript】クラスの概念をしっかりと理解しよう! 小学生からのプログラミング入門
  19. 【JavaScript】プログラム全体をクラスを使って作ってみよう! 小学生からのプログラミング入門
  20. 【JavaScript】文字を表示するクラスを作ってみよう! 小学生からのプログラミング入門
  21. 【JavaScript】改行と一文字ずつ画面に表示する方法! 小学生からのプログラミング入門
  22. 【JavaScript】ノベルゲーム風にキー入力で文字を切り替える方法! 小学生からのプログラミング入門

スポンサードリンク

関連コンテンツ

オススメ記事

【enchant.js入門】ガンシューティングゲームの作り方を完全解説!

enchant.jsを使ってガンシューティングゲームの開発を行なっていきます。 enchant.jsはゲームを作るのに特化したJavaScriptフレームワークです。 これを使うことで、Jav

java

Javaでじゃんけんゲームを作ろう。サンプルコードあり!

※追記(2018/8/29) より分かりやすい記事になるよう修正しました。 今回はJavaを使って、じゃんけんゲームを作る方法を紹介します。 eclipseがインストールされており、Java

キーボードで画像を動かすよ!

【JavaScript】キー入力でキャラを動かしてみよう! 小学生からのプログラミング入門

小学生からのJavaScript《ジャバスクリプト》入門講座《にゅうもんこうざ》、今回もはじめていきましょう! 前回は、りこちゃんの画像をクリックすると、前に一歩動くというのをJavaScri

ファイルを分けるべよ!

【JavaScript】ファイルを分けて管理してみよう! 小学生からのプログラミング入門

小学生からのJavaScript《ジャバスクリプト》入門講座《にゅうもんこうざ》、第5弾です。 前回はりこちゃんを方向キーで操作《そうさ》することができるようになりました。しかしプログラムを作

【Android Studio】 GridLayout の使い方。複雑なレイアウトを表現する方法

スマホの充電がいつの間にか無くなっている@It_is_Rです。 Androidアプリ開発、10回目となりました。 前回、様々なレイアウトの使い方を紹介しましたが、今回はその中でもちょっと難しい

【Mac】ローカルにWebサーバを立ち上げる超簡単な方法!

JavaScriptを使ってWebページなどの開発をしていると、Google ChromeやSafariなどのブラウザでうまく開けない場合が稀にあります。 そんな時、ローカルにWebサーバを立ち上げ

Homebrew

Homebrewの使い方。よく使うコマンド一覧と詳しい解説まとめ

※追記 この記事は2018/04/30に最新の情報に書き直しました。 人生をもう一度やり直したいとつくづく思う@It_is_Rです。 今回はHomebrewについての記事を書いて

キャラを決まった間隔ずつ動かすよ!

【JavaScript】キャラを決まった間隔ずつ動かす! 小学生からのプログラミング入門

小学生からのプログラミング入門講座《にゅうもんこうざ》、第8弾です。 前回は、キャラクターの画像《がぞう》をスムーズに動かす方法でしたが、スピードが速すぎたので、画像の移動間隔《いどうかんかく

WordPress|特定カテゴリーに属する記事を一覧表示させる方法!!

今まで、何度かに分けて書いた記事でも、その一覧がなかったので見にくいなーと思っていた@It_is_Rです。 昨日、記事の一覧表示をするショートコードを作って、記事の一覧が欲しい記事にだけ貼り付けてみ

小学生からのプログラミング入門。プログラミングってなぁに?

小学校でプログラミングを勉強しなくてはいけないことになり、「プログラミングなんてやったことないし、そもそもプログラミングってなんなんだろう」と思う方も多いのではないでしょうか。 といっても、「

コメントをどうぞ!(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です