JavaScript入門講座|プログラミングをはじめよう! ~変数に挑戦してみよう~

JavaScript

【JavaScript】の基礎を学ぼう!

うさタブ
うさタブ

今日から本格的なプログラミング、

JavaScript】を学んでいくッピ!

ユウキ
ユウキ

おっ、やっとプログラミングを勉強できるのか。

楽しみだ~!

この記事で学べること
  • 【JavaScript】で文字を表示する
  • 【変数】について
  • 【変数】での文字表示
  • 【変数】での計算

【JavaScript】のコード(命令文)を書いてみよう

うさタブ
うさタブ
必要なもの
  • メモ帳

が必要になるっぴ!

うさタブ
うさタブ

今回は【文字を表示させる命令文を入力するッピ。

さっそくメモ帳を開くッピよ~

ユウキ
ユウキ

オッケー!

<script>タグを入力してみよう

うさタブ
うさタブ

ホームページで【JavaScript】を使うには、

HTMLファイルに<script> タグ(命令文)を組み込む必要があるッピ!

<!-- 見えない部分 -->
<html>
<head>

</head>

<!-- ↓ここから見える部分↓ -->
<body>

</body>
</html>
うさタブ
うさタブ

まずは上の文をコピーして、メモ帳に貼り付け。

<body></body>の間に、<script> </script>タグを入力するッピよ~!

うさタブ
うさタブ

<!– –>は、画面には表示されないから大丈夫ッピ!

ユウキ
ユウキ

できた~!

うさタブ
うさタブ

いい感じッピ!

【JavaScript】で文字を表示してみよう

うさタブ
うさタブ

次は、<script> </script> の間に命令文を入力するッピネ!

うさタブ
うさタブ
<script>
	document.write("Hello World");
</script>

と入力するッピヨ~!

これはJavaScript文字表示する命令文ッピ。

うさタブ
うさタブ

これは

document.writeホームページに書き出して(“Hello world”);

という意味ッピ!

手動で命令文を入力するときは、【 ; 】の入力を忘れがちです。

; 】を忘れずに入力しましょう!

<!-- 見えない部分 -->
<html>
<head>

</head>
<!-- ↓ここから見える部分↓ -->
<body>

<!-- ↓この下に入力してね!↓ -->
<script>
	document.write("Hello World");
</script>

</body>
</html>
うさタブ
うさタブ

これを【名前をつけて保存】するッピ。

ファイル名は『2nd.html』にして、ファイルの種類を【すべてファイル】にするッピね~。

最後は作ったファイルをダブルクリックして確認してみるッピ!

ファイル→名前をつけて保存
ファルの種類→すべてのファイル→2nd.html→保存
ユウキ
ユウキ

できた~!

変数を使ってみよう!

ユウキ
ユウキ

でもコレ、この前やったことと変わんなくない?

変な文字増えただけだし、意味ないじゃん!

うさタブ
うさタブ

ふふふふ!!

お主、プログラミングの凄さを知らないッピね~!

うさタブ
うさタブ

プログラミングのスゴいところは、

ズバリ【 変数を使えることッピ!!

ユウキ
ユウキ

変数~~!?

ユウキ
ユウキ

ってなんだ?

うさタブ
うさタブ

百聞は一見に如かずッピ。

まずは実際に 変数 を使って覚えていくッピよ~!

変数を使って計算してみよう!

うさタブ
うさタブ

まずは『 メモ帳 』で開くッピ!

下の文をコピーするッピよ~

<!-- 見えない部分 -->
<html>
<head>

</head>
<!-- ↓ここから見える部分↓ -->
<body>

<!-- ↓この下に入力してね!↓ -->
<script>

</script>

</body>
</html>
ユウキ
ユウキ

オッケー!

うさタブ
うさタブ

先程と一緒で<sprict>~</script>の間に、命令文を書くッピ。

<script>
	let a;
	a = 1;
	document.write(a);
</script>

と書くッピヨ!

<!-- 見えない部分 -->
<html>
<head>

</head>
<!-- ↓ここから見える部分↓ -->
<body>

<!-- ↓この下に入力してね!↓ -->
<script>
	let a;
	a = 1;
	document.write(a);
</script>

</body>
</html>
うさタブ
うさタブ

let a;】これは、

a という変数を使うので、覚えておいてね」とコンピュータに教える命令文ッピ。これを変数宣言するというッピヨ~。

忘れるとトラブルの元になりやすいから気をつけるッピネ!

うさタブ
うさタブ

次の【a = 1;】・・・

これはa 1 だよ」と、コンピュータに教える命令文ッピ!

document.write(a);は、【a】を表示してねという命令文ッピ。

うさタブ
うさタブ

つなげていうと

let a;変数 a を使います

a = 1;a は 1 です

document.write(a);a をホームページに書き出してください

という意味ッピネ!

うさタブ
うさタブ

書けたら名前をつけて保存するッピ。

作ったファイルを確認してみるッピネ~!

ユウキ
ユウキ

できたけど・・・

ユウキ
ユウキ

あれだけ色々書いたのに、数字の【】しか書かれてないってなんかなぁ・・・

うさタブ
うさタブ

ふふふふふ!

これからがプログラミングの魔法ッピ!

うさタブ
うさタブ

この 【 a = 1; 】 にたし算をするッピヨー!

うさタブ
うさタブ

a = 1+3 ;

と入力して、『3をたす』ッピよ~!

<!-- 見えない部分 -->
<html>
<head>

</head>
<!-- ↓ここから見える部分↓ -->
<body>

<!-- ↓この下に入力してね!↓ -->
<script>
	let a;
	a = 1+3;
	document.write(a);
</script>

</body>
</html>
ユウキ
ユウキ

できたー! 確認するぞ

ユウキ
ユウキ

スゲエエエ! 計算できてる!!

うさタブ
うさタブ

まだまだ、こんなものでは終わらないッピよ!

変数に文字を入れてみよう

うさタブ
うさタブ

この変数には文字入力できるッピネ!

<script>
	let a;
	let b;
	a = "Hello World";
	b = 2020;
	document.write(a+b);
</script>
うさタブ
うさタブ

今度は 【a = ●●●;】に文字を入れるッピ。

a = “Hello World”;

と入力するッピネ。 ” “を忘れてはいけないッピよ~!

変数同士を合体させよう

うさタブ
うさタブ

a = “Hello World”; に加えて、さらに

b = 2020;

document.write(a+b);

と入力するッピ。

+bの入れ忘れに注意するッピ!

<script>
	let a;
	let b;
	a = "Hello World";
	b = 2020;
	document.write(a+b);
</script>
<!-- 見えない部分 -->
<html>
<head>

</head>
<!-- ↓ここから見える部分↓ -->
<body>

<!-- ↓この下に入力してね!↓ -->
<script>
	let a;
	let b;
	a = "Hello World";
	b = 2020;
	document.write(a+b);
</script>

</body>
</html>
ユウキ
ユウキ

おおお! なんか増えてる!

うさタブ
うさタブ

ふふふふ、これがプログラミングのちからッピ!

文字や数字を自由に改造して、正しく表示できているかいろいろ試して遊んでみるッピ!

うさタブ
うさタブ

次のからは、

今回使った変数命令文について解説するッピヨ~!

変数ってなあに?

ユウキ
ユウキ

ずっと聞けなかったんだけど、そもそも変数って何なの?

うさタブ
うさタブ

変数の説明でよく使われるのは、変数という表現ッピね~。

の中にお手紙があって、手紙に書かれている内容や、手紙の枚数を調べて取り出すことができるッピ!

ユウキ
ユウキ

うーん、なんだか想像つかないなぁ・・・

うさタブ
うさタブ

そうッピね・・・

ユウキくんはいま何才なんさいッピ?

ユウキ
ユウキ

え? 10さいだけど・・・

うさタブ
うさタブ

では、来年何才なんさいッピか?

ユウキ
ユウキ

11さい

うさタブ
うさタブ

なるほど。

ユウキ】くんは、いま 10歳。来年は、11歳ッピ。

そしてその次は、12歳、13歳、1415・・・人間毎年年齢としを取っていくッピネ?

うさタブ
うさタブ

このように減ったり増えたりする何か』・・・

変化できる『数字』や『単語』を、

プログラミング用語で 変数 というッピヨ~!

ユウキ
ユウキ

むむむ、なんだか余計にわからなくなったよ~な・・・?

変数を使いこなしてみよう

うさタブ
うさタブ

今言ったことをプログラミングで表現してみるッピネ~

<script>
	let name;
	let age;
	name = "ユウキ";
	age = 10;
	document.write(name + "は" + age + "才");
</script>
<!-- 見えない部分 -->
<html>
<head>

</head>
<!-- ↓ここから見える部分↓ -->
<body>

<!-- ↓この下に入力してね!↓ -->
<script>
	let name;
	let age;
	name = "ユウキ";
	age = 10;
	document.write(name + "は" + age + "才");
</script>

</body>
</html>
うさタブ
うさタブ

まず【 let を前に置くことで、『name名前』『age年齢』という変数を使うとコンピューターに宣言したッピ。

うさタブ
うさタブ

ユウキくんは、10歳。

とこれをプログラム上で【name = “ユウキ“;】【age =10;】と表現したッピ!

ユウキ
ユウキ

name名前 = ユウキ

age年齢 = 10(ってことだな!

うさタブ
うさタブ

そのとおりッピ!

こんな風に変数名前数字結びつけることを、変数定義ていぎするというッピ。

うさタブ
うさタブ

定義ていぎというのは、これこうだよ!」と決めること。

たとえば【water = 2;】だったら、2リットルあるよ~」コンピュータ教えてあげることッピ!

ユウキ
ユウキ

お~! なんとなくわかってきたかも?

うさタブ
うさタブ

では【問題】ッピ!

<script>
	let name;
	let age;
	name = "ユウキ";
	age = 10;
	document.write(name + "は" + age + "才");
</script>

このプログラムコード・・・もし、ユウキくんさい 年を取った表現するには、どうするッピ?

ユウキ
ユウキ

え!? きゅ、急に言われても・・・

ユウキ
ユウキ

うーん。

この【age = 10;】に1を足して、【age = 10+1;】にするとか?

うさタブ
うさタブ

ムフフ、データを書き換えて試してみるッピよ~!

ユウキ
ユウキ

できたあ~~!

学習のポイント
  • JavaScriptを使うには<script></script>タグを使う。
  • 変数変化できる数字単語のこと。
  • 変数数字を入れることができる。これを変数定義ていぎするという。
  • 変数には文字を代入できる。

うさタブ
うさタブ

次は足し算だけでなく、かけ算わり算にチャレンジするッピ。

楽しみにしているッピよ~!

スポンサーリンク
スポンサーリンク
スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング講座がオススメッピね~

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

 

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

ちびっこのみんなは、キュレオプログラミング教室がオススメッピ!

実際の教室で自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えておサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
コース買い切り
講座によってサンプル○
Unityゲーム講座アリ
 

「QUREOプログラミング教室」

小学2年生〜中学3年生 Scratch 全国各地
2500教室
無料体験◯
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
東京都,神奈川,埼玉県,千葉
オンライン
無料体験◯
3Dプリントなどの講座によっては別途料金

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング講座がオススメッピね~

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

ちびっこのみんな、キュレオプログラミング教室を受けて
自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えて
おサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

先生やパパママにほめられて、学習効率が最高にグングン↑↑ッピよ~~♪

うさタブ
うさタブ

未来都市キュレオを舞台に、魅力的なキャラクターがたくさん登場する・ゲーム感覚で楽しく学べるプログラミング教室ッピ!

困ったことも先生に直接聞けるのが最高ッピ~!

うさタブ
うさタブ

全国2500教室もあるから、

きっとみんなの近くにも教室があるッピ。

公式サイト近くに教室があるかチェックしてみるとよいッピ!

ユウキ
ユウキ

なんだこれ! スゲーなっ

ゲームみたいにやってるうちに、自然と勉強できてるみたいな感じ?

アイカ
アイカ

そんなものがあるのねっ!

うさタブ
うさタブ

ロボットをプログラミングしてみるなら

LITALICOワンダーがオススメッピ!

JavaScriptも勉強できるッピよ~!

教室名 対象 学習言語 無料体験/教室場所
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
講座によってサンプル○
「QUREOプログラミング教室」
小学2年生〜中学3年生 Scratch 教室によって無料体験◯
全国各地の教室
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
無料体験◯
3Dプリントなどの講座によっては別途料金
東京周辺
オンライン

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

JavaScriptJS基礎プログラミング入門の最初のページ
学んで遊んでジャンケンポン!
タイトルとURLをコピーしました