1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. JavaScript
  6. »
  7. HTML5とCanvasを使ってみよう! 小学生からのプログラミング入門

HTML5とCanvasを使ってみよう! 小学生からのプログラミング入門

小学生からのプログラミング講座こうざ、第9弾です。

これまでの講座こうざでは、JavScriptの基本きほんについて学び、キャラクターの操作そうさができるようになりました。
ここからはゲーム開発かいはつ中級編ちゅうきゅうへんへと入っていきます。すこし内容ないようむずかしくなりますが、ここまでの講座をしっかり勉強べんきょうしてきた君ならできるはず!

山田

諸君しょくん……よくここまで頑張った……べ

りこ

はっ、なんか、山田先生がいつもと雰囲気ふんいきがちがう!

アル

なんだなんだ

山田

これまで、この講座こうざはJavaScript入門としておこなってきた……べ。しかし、これからは中級編ちゅうきゅうへんに入る……べ

アル

必死ひっしに「べ」って言わないようにしてるのに、言っちゃってる

山田

てやんでぇ、べらぼうめ! 言ってない……べ。これからはもう少し深いところまで、解説かいせつしていくべ。ついてくるべ

りこ

はーい!

アル

はーい!

目次
  1. ディレクトリについて
  2. HTML5について
  3. Canvasキャンバスを使ってみよう!
  4. Canvasで画像を表示してみよう!
  5. メインループを作ろう!
  6. りこちゃんのオブジェクトをImageオブジェクトと組み合わせて作ろう!
  7. キーボードでりこちゃんを操作そうさできるようにしてみよう!
  8. りこちゃんの残像ざんぞうのこらないようにしよう!
  9. まとめ

ディレクトリについて

まずは、今回からcanvasを使って開発かいはつしていくしていくための、ディレクトリ構成こうせいをみていきましょう。

アル

ディレクトリってなぁに?

山田

ディレクトリってのは、フォルダのことだべ。なので、ディレクトリ構成は、フォルダやファイルがどのように置かれているかということだべ

ディレクトリ構成は以下のように作っていきます。

game
├ index.html
├ img/
│ └ rico.png
└ js/
  └ script.js

rico.pngは、こちらをお使つかいください。

りこ

HTML5について

これまでの講座では、HTMLについてあまり解説していませんでした。
HTMLにはバージョンがあり、今ではHTML5を使うのが当たり前になっています。

なにやらとてもむずかしいことを言っているようですが、ぜんぜん難しくはありません。
HTML5を使いたいと思ったら、一番最初さいしょ<!DOCTYPE html>入力にゅうりょくしてあげるだけです。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>HTML5を使ってみよう!</title>
</head>
<body>

</body>
</html>

<!DOCTYPE html>というのは「これがHTML5で書かれてますよ」という宣言せんげんです。

また、文字エンコーディングの指定していもしておきましょう。

<head>タグ内に<meta charset="UTF-8">というタグを入れます。
これは文字エンコーディングを指定していするものです。多くのサイトではUTF-8が使われていますので、「UTF-8」に設定せっていします。
これをすることで、ページを公開こうかいしたときの文字化けをふせぐことができます。

アル

HTMLにバージョンがあるなんて、覚えられないよ

山田

今はもうほとんどのサイトがHTML5で作られているから、HTML5だけ覚えればいいと思うべよ

Canvasキャンバスを使ってみよう!

今回からはCanvasキャンバスを使ったゲーム開発かいはつ方法にうつっていきたいと思います。
CanvasをJavaScriptと合わせて使うことで、ブラウザ上に簡単に図形を表示したり、画像をあつかいやすくしたりすることができるようになります。

Canvasを使うには、bodyタグ内に、canvasタグを書いてあげればOKです。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Canvasを使ってみよう!</title>
</head>
<body>
	<canvas id="canvas"></canvas>
</body>
</html>

さらに、canvasタグの下にJavaScriptファイルを読み込むためのScriptタグをかいていきます。

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Canvasを使ってみよう!</title>
</head>
<body>
	<canvas id="canvas"></canvas>
	<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
山田

これでCanvasを使う準備じゅんびができたべよ

りこ

まだまだ、むずかしくないね

次に、JavaScriptを書いてみましょう。
2行目〜4行目で、Canvasの設定せっていをします。
7行目でコンテキストを取得しゅとくします。
10行目でx座標ざひょうが0、y座標が0の位置いちに、縦横たてよこ30pxの正方形せいほうけいを描きます。

js/script.js

//canvasの設定(せってい)
var canvas = document.getElementById('canvas');
canvas.width = 640;	//canvasの横幅(よこはば)
canvas.height = 640;	//canvasの縦幅(たてはば)

//コンテキストを取得(しゅとく)
var ctx = canvas.getContext('2d');

//x=0, y=0 の位置(いち)に縦横(たてよこ)30pxの正方形(せいほうけい)を描く
ctx.fillRect(0, 0, 30, 30);
Canvasを使ってみよう!
りこ

黒い正方形が描かれてる!

アル

コンテキストってなぁに?

山田

色んな意味いみで使われる言葉ことばだべからな。この場合ばあい、プログラムを動かすのに必要ひつよう情報じょうほうのことだべ

Canvasキャンバスはこのように、図形ずけいを描くことができるものですが、これを使うとゲーム開発がとてもやりやすくなります。

Canvasで画像を表示してみよう!

では、Canvasを使って画像がぞうを読み込んでみましょう。
Canvasを使った画像表示がぞうひょうじにはdrawImage();を使います。

ここで、ひとつ注意点ちゅういてんがあります。
例えば、以下のようにしても画像は表示されません

js/script.js

//canvasの設定(せってい)
var canvas = document.getElementById( 'canvas' );
canvas.width = 640;		//canvasの横幅(よこはば)
canvas.height = 640;	//canvasの縦幅(たてはば)

//コンテキストを取得(しゅとく)
var ctx = canvas.getContext( '2d' );

//画像(がぞう)のオブジェクトを作成
var img = new Image();
img.src = 'img/rico.png';

//画像の表示
ctx.drawImage( img, 0, 0 );

これは画像のロードに時間がかかり、drawImage();までに画像を読み込めていないからです。
なので画像の表示は、画像の読み込みが完了かんりょうするまで待つ必要ひつようがあります。

そんな時は、addEventListeneronloadを使います。
今回はaddEventListenerを使った方法ほうほう紹介しょうかいします。

js/script.js

//canvasの設定(せってい)
var canvas = document.getElementById( 'canvas' );
canvas.width = 640;		//canvasの横幅(よこはば)
canvas.height = 640;	//canvasの縦幅(たてはば)

//コンテキストを取得(しゅとく)
var ctx = canvas.getContext( '2d' );

//画像(がぞう)のオブジェクトを作成
var img = new Image();
img.src = 'img/rico.png';

//ページと依存(いぞん)している全てのデータが読み込まれたら、画像を表示
addEventListener('load', function() {
	ctx.drawImage( img, 0, 0 );
}, false);

無事ぶじ、画像が表示ひょうじされました。

Canvasを使ってみよう!
山田

drawImage()は画像がぞうを表示するものだべだけど、画像がロードされるのに時間がかかるべから、それまで待たなきゃダメなんだべ

りこ

むむっ、ちょっとむずかしいけど、とにかく待つ必要ひつようがあるってことね

メインループを作ろう!

では、第10回目講座こうざと同じように、メインループを作っていきましょう。

画像表示がぞうひょうじ部分ぶぶんは、このメインループの中に入れます。
また、メインループは、addEventListenerを使って呼び出します。

function main() {
	//画像を表示
	ctx.drawImage( img, 0, 0 );

	requestAnimationFrame( main );
}
ページと依存(いぞん)している全てのデータが読み込まれたら、メインループ開始
addEventListener('load', main(), false);

script.js全体はこのようになっています。

js/script.js

//canvasの設定(せってい)
var canvas = document.getElementById( 'canvas' );
canvas.width = 640;		//canvasの横幅(よこはば)
canvas.height = 640;	//canvasの縦幅(たてはば)
 
//コンテキストを取得(しゅとく)
var ctx = canvas.getContext( '2d' );
 
//画像(がぞう)のオブジェクトを作成
var img = new Image();
img.src = 'img/rico.png';
 
//メインループ
function main() {
	//画像を表示
	ctx.drawImage( img, 0, 0 );
 
	requestAnimationFrame( main );
}
//ページと依存(いぞん)している全てのデータが読み込まれたら、メインループ開始
addEventListener('load', main(), false);
りこ

画像表示がぞうひょうじをループさせてるだけだから、うごきは今のところ変わらないね

りこちゃんのオブジェクトをImageオブジェクトと組み合わせて作ろう!

まずは第9回目でりこちゃんのオブジェクトを作ったときと同様どうように、オブジェクトを作ってみましょう。

var rico = new Object();
rico.x = 0;
rico.y = 0;

それをImageオブジェクトと組み合わせて使ってみましょう。

var rico = new Object();
rico.img = new Image();
rico.img.src = 'img/rico.png';
rico.x = 0;
rico.y = 0;

するとdrawImage()は以下のようにえることができます。

ctx.drawImage( rico.img, rico.x, rico.y );
山田

りこちゃんのオブジェクトを作って、その「rico.img」にImageオブジェクトを作っているんだべ。そうすると、実際じっさい画像がぞう表示ひょうじしたときに分かりやすくなるべよ

script.js全体はこのようになります。

js/script.js

//canvasの設定(せってい)
var canvas = document.getElementById( 'canvas' );
canvas.width = 640;		//canvasの横幅(よこはば)
canvas.height = 640;	//canvasの縦幅(たてはば)
 
//コンテキストを取得(しゅとく)
var ctx = canvas.getContext( '2d' );
 
//りこちゃんのオブジェクトを作成
var rico = new Object();
rico.img = new Image();
rico.img.src = 'img/rico.png';
rico.x = 0;
rico.y = 0;
 
//メインループ
function main() {
	//画像を表示
	ctx.drawImage( rico.img, rico.x, rico.y );
 
	requestAnimationFrame( main );
}
//ページと依存(いぞん)している全てのデータが読み込まれたら、メインループ開始
addEventListener('load', main(), false);

キーボードでりこちゃんを操作そうさできるようにしてみよう!

つづいて、キーボード入力でりこちゃんを操作できるようにします。
第11回目紹介しょうかいした方法で、りこちゃんを操作そうさできるようにしていきます。

まず、どれだけりこちゃんを動かしたいかというプロパティを、りこちゃんのオブジェクトに追加します。

var rico = new Object();
rico.img = new Image();
rico.img.src = 'img/rico.png';
rico.x = 0;
rico.y = 0;
rico.move = 0;	//追加

キーボードのオブジェクトも作ります。

var key = new Object();
key.up = false;
key.down = false;
key.right = false;
key.left = false;
key.push = '';

メインループのなかに、キーボードが押されたときと、はなされたときの関数かんすうを呼び出すお願いを書きます。

addEventListener("keydown", keydownfunc, false);
addEventListener("keyup", keyupfunc, false);

メインループのなかに、りこちゃんが移動いどうするためのお願いを書きます。

//方向キーが押されている場合(ばあい)は、りこちゃんが移動する
if ( rico.move === 0 ) {
	if ( key.left === true ) {
		rico.move = 32;
		key.push = 'left';
	}
	if ( key.up === true ) {
		rico.move = 32;
		key.push = 'up';
	}
	if ( key.right === true ) {
		rico.move = 32;
		key.push = 'right';
	}
	if ( key.down === true ) {
		rico.move = 32;
		key.push = 'down';
	}
}
//rico.moveが0より大きい場合は、4pxずつ移動(いどう)を続ける
if (rico.move > 0) {
	rico.move -= 4;
	if ( key.push === 'left' ) rico.x -= 4;
	if ( key.push === 'up' ) rico.y -= 4;
	if ( key.push === 'right' ) rico.x += 4;
	if ( key.push === 'down' ) rico.y += 4;
}

最後(さいご)に、キーボードが押された時に呼び出される関数(かんすう)を書きます。

//キーボードが押されたときに呼び出される関数(かんすう)
function keydownfunc( event ) {
	var key_code = event.keyCode;
	if( key_code === 37 ) key.left = true;
	if( key_code === 38 ) key.up = true;
	if( key_code === 39 ) key.right = true;
	if( key_code === 40 ) key.down = true;
	event.preventDefault();
}

//キーボードが放(はな)されたときに呼び出される関数
function keyupfunc( event ) {
	var key_code = event.keyCode;
	if( key_code === 37 ) key.left = false;
	if( key_code === 38 ) key.up = false;
	if( key_code === 39 ) key.right = false;
	if( key_code === 40 ) key.down = false;
}

script.js全体はこのようになります。

js/script.js

//canvasの設定(せってい)
var canvas = document.getElementById( 'canvas' );
canvas.width = 640;		//canvasの横幅(よこはば)
canvas.height = 640;	//canvasの縦幅(たてはば)
 
//コンテキストを取得(しゅとく)
var ctx = canvas.getContext( '2d' );
 
//りこちゃんのオブジェクトを作成
var rico = new Object();
rico.img = new Image();
rico.img.src = 'img/rico.png';
rico.x = 0;
rico.y = 0;
rico.move = 0;

//キーボードのオブジェクトを作成
var key = new Object();
key.up = false;
key.down = false;
key.right = false;
key.left = false;
key.push = '';
 
//メインループ
function main() {
	//塗(ぬ)りつぶす色を指定(してい)
	ctx.fillStyle = "rgb( 0, 0, 0 )";
	//塗(ぬ)りつぶす
	ctx.fillRect(0, 0, 640, 640);

	//画像を表示
	ctx.drawImage( rico.img, rico.x, rico.y );

	addEventListener("keydown", keydownfunc, false);
	addEventListener("keyup", keyupfunc, false);

	//方向キーが押されている場合(ばあい)は、りこちゃんが移動する
	if ( rico.move === 0 ) {
		if ( key.left === true ) {
			rico.move = 32;
			key.push = 'left';
		}
		if ( key.up === true ) {
			rico.move = 32;
			key.push = 'up';
		}
		if ( key.right === true ) {
			rico.move = 32;
			key.push = 'right';
		}
		if ( key.down === true ) {
			rico.move = 32;
			key.push = 'down';
		}
	}
	//rico.moveが0より大きい場合は、4pxずつ移動(いどう)を続ける
	if (rico.move > 0) {
		rico.move -= 4;
		if ( key.push === 'left' ) rico.x -= 4;
		if ( key.push === 'up' ) rico.y -= 4;
		if ( key.push === 'right' ) rico.x += 4;
		if ( key.push === 'down' ) rico.y += 4;
	}
 
	requestAnimationFrame( main );
}
//ページと依存(いぞん)している全てのデータが読み込まれたら、メインループ開始
addEventListener('load', main(), false);

//キーボードが押されたときに呼び出される関数(かんすう)
function keydownfunc( event ) {
	var key_code = event.keyCode;
	if( key_code === 37 ) key.left = true;
	if( key_code === 38 ) key.up = true;
	if( key_code === 39 ) key.right = true;
	if( key_code === 40 ) key.down = true;
	event.preventDefault();
}

//キーボードが放(はな)されたときに呼び出される関数
function keyupfunc( event ) {
	var key_code = event.keyCode;
	if( key_code === 37 ) key.left = false;
	if( key_code === 38 ) key.up = false;
	if( key_code === 39 ) key.right = false;
	if( key_code === 40 ) key.down = false;
}
アル

これで、前回まで作った部分ぶぶんを、HTML5とCanvasで作れたんだ……ってあれ!?

Canvasを使ってみよう!
りこ

きゃー、私が列になってる!

山田

ふっふっふ、君たち、わだずが講座こうざ第2回目おしえたことを覚えているべか?

アル

なんだっけ?

山田

ゲームは画面を表示する、消す、表示する、消す……というのをすごいはやさで何度も繰り返しているんだべ。これでは画面を表示だけして、消すというのをやっていないんだべ!

りこちゃんの残像ざんぞうのこらないようにしよう!

ゲームでは画面がめん表示ひょうじする、す、表示する、消す……というのをすごいはやさで繰り返しています。
ですので、画面を消すお願いが必要ひつようになります。

今回は640×640でCanvasを作っていますので、fillRect()で(0, 0 〜 640, 640)までの四角形を作ってりつぶします。

//塗(ぬ)りつぶす色を指定(してい)
ctx.fillStyle = "rgb( 0, 0, 0 )";
//塗(ぬ)りつぶす
ctx.fillRect(0, 0, 640, 640);

fillStyle()で塗りつぶす色を指定していできます。
rgb()のなかの数を変更へんこうすることで、色が変わります。今回は黒にしたかったので、(0, 0, 0)を指定しています。

script.js全体はこのようになります。

js/script.js

//canvasの設定(せってい)
var canvas = document.getElementById( 'canvas' );
canvas.width = 640;		//canvasの横幅(よこはば)
canvas.height = 640;	//canvasの縦幅(たてはば)
 
//コンテキストを取得(しゅとく)
var ctx = canvas.getContext( '2d' );
 
//りこちゃんのオブジェクトを作成
var rico = new Object();
rico.img = new Image();
rico.img.src = 'img/rico.png';
rico.x = 0;
rico.y = 0;
rico.move = 0;

//キーボードのオブジェクトを作成
var key = new Object();
key.up = false;
key.down = false;
key.right = false;
key.left = false;
key.push = '';
 
//メインループ
function main() {
	//塗(ぬ)りつぶす色を指定(してい)
	ctx.fillStyle = "rgb( 0, 0, 0 )";
	//塗(ぬ)りつぶす
	ctx.fillRect(0, 0, 640, 640);

	//画像を表示
	ctx.drawImage( rico.img, rico.x, rico.y );

	addEventListener("keydown", keydownfunc, false);
	addEventListener("keyup", keyupfunc, false);

	//方向キーが押されている場合(ばあい)は、りこちゃんが移動する
	if ( rico.move === 0 ) {
		if ( key.left === true ) {
			rico.move = 32;
			key.push = 'left';
		}
		if ( key.up === true ) {
			rico.move = 32;
			key.push = 'up';
		}
		if ( key.right === true ) {
			rico.move = 32;
			key.push = 'right';
		}
		if ( key.down === true ) {
			rico.move = 32;
			key.push = 'down';
		}
	}
	//rico.moveが0より大きい場合は、4pxずつ移動(いどう)を続ける
	if (rico.move > 0) {
		rico.move -= 4;
		if ( key.push === 'left' ) rico.x -= 4;
		if ( key.push === 'up' ) rico.y -= 4;
		if ( key.push === 'right' ) rico.x += 4;
		if ( key.push === 'down' ) rico.y += 4;
	}
 
	requestAnimationFrame( main );
}
//ページと依存(いぞん)している全てのデータが読み込まれたら、メインループ開始
addEventListener('load', main(), false);

//キーボードが押されたときに呼び出される関数(かんすう)
function keydownfunc( event ) {
	var key_code = event.keyCode;
	if( key_code === 37 ) key.left = true;
	if( key_code === 38 ) key.up = true;
	if( key_code === 39 ) key.right = true;
	if( key_code === 40 ) key.down = true;
	event.preventDefault();
}

//キーボードが放(はな)されたときに呼び出される関数
function keyupfunc( event ) {
	var key_code = event.keyCode;
	if( key_code === 37 ) key.left = false;
	if( key_code === 38 ) key.up = false;
	if( key_code === 39 ) key.right = false;
	if( key_code === 40 ) key.down = false;
}
Canvasを使ってみよう!
りこ

私の残像ざんぞうえて、ちゃんと動くようになったね!

山田

とにかく、基本きほんは表示する、消す、をすごいはやさで何度も繰り返しているんだべ

まとめ

今回は、いままで学んできたことをCanvasを使ってやってみました。
やっていることは今までと同じなので、分からない部分ぶぶんがあれば今までの講座こうざをもう一度、復習ふくしゅうしてみてください。

山田

こんかいはHTML5とCanvasを使ってみたべよ

アル

もう普通に「べ」って言っちゃってるね

りこ

ほんとだ

山田

……はっ! だべ! しまったべ

アル

ねぇ、もっと、ゲームっぽいの作りたいよ!

りこ

こらアル、じっくりと色んなこと勉強べんきょうしながら作っていくんだから、あせっちゃだめよ!

アル

なんだよ……ちぇ

山田

……諸君しょくん、これからももっと色々学んでいくから、しっかりとついてこいよ……

りこ

はっ、「べ」って言ってない

山田

……だ……べ

アル

言った

山田

てやんでぇ、べらぼうめだべ! とにかく、これからも頑張るべ!

りこ

はーい!

アル

はーい!

この企画の一覧はこちら

  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】ノベルゲーム風にキー入力で文字を切り替える方法! 小学生からのプログラミング入門

スポンサードリンク

関連コンテンツ

オススメ記事

GitHubのアカウントを作成する方法

Gitを使うとバージョン管理が簡単になりますが、それ以前に自分の頭の中を管理するのが大変な@It_is_Rです。 Gitの使い方をいくつかの記事に分けて紹介していきたいと思います。まず今回はG

zsh

zsh のインストール方法と、うまく起動しない時の対処法。

かっこいいものが大好きな@It_is_Rです。 そこで今回は、ターミナルをかっこよくする為の方法を、何回かの記事に分けて書いてみたいと思います。 今回、第一回目は zsh ( Z Shell

WordPressのテーマを自作してみよう。テーマ開発の方法を徹底解説!

WordPressテーマの自作方法を紹介していきます。 今回はテーマ作成における知識や、ツール、ファイル構成、実際の作り方などを書いていきます。 WordPressのテーマを自作する上

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。背景を変更する。

三度の飯よりも好きなものが多すぎて比較にならない@It_is_Rです。 FC2ブログ"最強"カスタマイズ入門講座の続きですね。最強にカスタマイズしていきましょう。 今回は背景色の変更をメインに

Gitの使い方。バージョン管理する流れを、実際にやってみよう

こんにちは。@It_is_Rです。 前回「【Mac】Gitのダウンロードとインストールの手順」では、Gitのインストーラを公式サイトからダウンロードしてインストールする方法と、Homebrew

文字を表示するクラスを作ろう!

【JavaScript】文字を表示するクラスを作ってみよう! 小学生からのプログラミング入門

小学生からのJavaScript講座です。このシリーズでは、ゲームをつくりながらJavaScriptの使い方を学んでいきます。シリーズの一覧はこちらをご覧ください。 さて、ゲーム作成で重要なキ

java

Javaのクラスとメソッドの違いとは?ゲーム風に解説。

この頃小説を読んでいなく、何か読みたいなと思っている@It_is_Rです。 Javaを勉強し始めたばかりの人は、何やら難しい単語に混乱する人も多いでしょう。その中で、クラスとメソッドって一体何が

【Xcode7】Storyboardを使ってMacアプリ開発に挑戦。

何だか今日はトイレが近い。@It_is_Rでございます。 現在開発中の人魚のゲームは今ストーリーを練っている所です。まだまだ時間がかかりそうです。 さて、Rは今、Macアプリ開発を勉強中なので

webpack-dev-serverの基本的な使い方と設定方法の詳しい解説

あとで見ようとブラウザのタブを開きすぎて、どれがどれだか分からなくなる@It_is_Rです。 webpack-dev-serverを使えば、とても簡単にwebpackでの開発サーバーを立ち上げる

java

【Java】スーパクラス、サブクラスとは?継承について。

猿も木から落ちますが、Rは木から落ちません。だって登らないから。 @It_is_R です。いや、登ろうと思っても登れません。 Javaを使っていると継承という言葉をよく耳にしますよね。どういうも

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

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