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>タグを使う。
  • 変数変化できる数字単語のこと。
  • 変数数字を入れることができる。これを変数定義ていぎするという。
  • 変数には文字を代入できる。

うさタブ
うさタブ

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

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

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

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

先生やうさタブさんにすぐに聞ける環境じゃないから

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

それなら、やっぱり一番安心自宅近所の教室がよいッピ!

うさタブ
うさタブ
テレビや雑誌に紹介された超有名教室
QUREOプログラミング教室とかどうッピか?

うさタブ
うさタブ

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

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

うさタブ
うさタブ

全国2500教室もあるから、

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

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

ユウキ
ユウキ

なんだこれ! スゲーなっ

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

アイカ
アイカ

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

うさタブ
うさタブ
キュレオプログラミング教室は、
アメーバブログやアベマTV・バンドリをプロディースしている
サイバーエージェント」のグループ会社で、確かな実績があるッピ!

うさタブ
うさタブ

オンラインで授業を受けるなら

Tech Kids Online Coachingがオススメッピ!

こっちもサイバーエージェントのグループ会社が運営してるッピ!

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
 

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

小学2年生〜中学3年生 Scratch
HTML/CSS
JavaScript
全国各地
教室
無料体験◯
 

Tech Kids Online Coaching

小学1年生〜中学3年生 Scratch
C++
Unity
渋谷
またはオンライン
無料体験◯
 

Udemy

社会人 HTML/CSS
JavaScript
Python
講座購入
ブラウザ
アプリ
サンプル等◯
うさタブ
うさタブ

パパやママ、お兄ちゃんお姉ちゃん
就活や転職で役立つプログラミング知識を身につけたいなら
Udemy】で講座のコースを買ってみるのもオススメッピ!

動画付きの魅力的な教材が格安で、好きな時間に学べるッピ~

うさタブ
うさタブ

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

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

ユウキ
ユウキ

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

アイカ
アイカ

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

スポンサーリンク

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

先生やうさタブさんにすぐに聞ける環境じゃないから

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

プログラミング教室??

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

プログラミング教室は、やっぱり安心の近所の教室ッピ!

うさタブ
うさタブ

テレビや雑誌に紹介された超有名教室

プログラミング教室数国内No.1!「QUREOプログラミング教室」
とかどうッピか?

うさタブ
うさタブ

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

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

うさタブ
うさタブ

全国2500教室もあるから、

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

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

ユウキ
ユウキ

なんだこれ! スゲーなっ

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

アイカ
アイカ

そんなものがあるのね

うさタブ
うさタブ
「QUREOプログラミング教室」は、
アメーバブログやアベマTV・バンドリをプロディースしている
サイバーエージェント」のグループ会社で、実績があるッピ!

うさタブ
うさタブ

オンラインで授業を受けるなら

Tech Kids Online Coachingがオススメッピ!

こっちもサイバーエージェントのグループ会社が運営してるッピ!

教室名 対象 学習言語 無料体験・カウンセリング
 

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

小学2年生〜中学3年生
教室で授業を受けたい方
Scratch
C++
JavaScript
無料体験◯
 

Tech Kids Online Coaching

小学生~中学生
オンライン授業を受けたい方
Unity
C++
Scratch
無料体験◯
Udemy
社会人
講座コースで勉強したい人向け
HTML/CSS
JavaScript
Python
サンプル等◯

うさタブ
うさタブ

パパやママ、お兄ちゃんお姉ちゃん
就活や転職で役立つプログラミング知識を身につけたいなら
Udemy】で講座のコースを買ってみるのもオススメッピ!

動画付きの魅力的な教材が格安で、好きな時間に学べるッピ~

うさタブ
うさタブ

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

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

ユウキ
ユウキ

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

アイカ
アイカ

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

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