JavaScript入門講座|リストを作ろう ~変数の配列を使ってみよう~

JavaScript
この記事で学べること
  • 変数の配列(リスト)の書き方
  • 変数の配列から要素の取り出し方

変数の配列(リスト)について学ぼう

うさタブ
うさタブ

今回は変数配列を勉強するッピ!

ユウキ
ユウキ

変数の配列

うさタブ
うさタブ

変数の中にたくさんのデータ入れて、それを取り出す作業ッピネ~

ユウキ
ユウキ

ふーん・・・ まあやっていけば分かるかな

変数のリストを作ってみよう

必要なもの
メモ帳
  • メモ帳
  • パソコン
  • ネットを見るブラウザアプリ
うさタブ
うさタブ

さっそくリストを作ってみるッピよ~。

今回は下のサンプルコードを元に勉強していくッピ

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

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


	let animal = ["猫","犬","うさぎ"];

	document.write( animal[0] + "/" );
	document.write( animal[1] + "/" );
	document.write( animal[2] + "/" );


</script>
<!-- ここまで! -->

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

リストを作る命令文はこんな感じッピ

let animal = ["猫","犬","うさぎ"];

で、[ 猫 ] と [ 犬 ] [ うさぎ ] というリストを作ったッピよ~

うさタブ
うさタブ

次の

document.write( animal[0] + "/" );
document.write( animal[1] + "/" );
document.write( animal[2] + "/" );

で、中身を書き出しているッピ!

【 + “/” 】はわかりやすいように区切りをつけてるために入れてるッピネ~

うさタブ
うさタブ

リストは【先頭】から順番に 0, 1, 2, 3, 4, 5, …. と自動的に番号が振られてるッピ。

わかりやすく分解するなら

let animal = [];

animal[0] = "猫" ;
animal[1] = "犬" ;
animal[2] = "うさぎ" ;

ッピね~。 ↑の文でも問題なく使えるッピよ!

ユウキ
ユウキ

なんで [ 0 ] からはじまるの? フツー [ 1 ] からじゃない?

うさタブ
うさタブ

プログラミングの世界では、だいたい [ 0 ] からはじまるッピ!

これはもう、こういうものだと覚えていくしかないッピね・・・

うさタブ
うさタブ

変数配列の使い方をおさらいするッピ!

let 変数名 = [ データ0 , データ1 , データ2 ]

[ データ0, データ1, データ2 ] …. 【 , カンマ 】のうち忘れに気をつけるッピよ!

うさタブ
うさタブ

書き出すときは

変数名[ 0 ] , 変数名[ 1 ] , 変数名[ 2 ]で呼び出すッピ。

先程の例でいうと、

 document.write( animal[2] );書き出して animal の [2] を 

みたいな感じッピね~。

余談ッピが、この[ 0 ]や[ 1 ]の内容を要素、呼び出すときには引数と呼ぶッピよ~!

うさタブ
うさタブ

JavaScriptには他にも色んな機能があるッピね!

順次紹介していくッピから、楽しみにしているッピよ~

学習のポイント
  • 変数にはたくさんのデータをつめこむことができる
  • 複数ふくすうのデータをまとめた変数を、リスト(または配列)という
  • リストの中身は、変数名[ 0 ], 変数名[ 1 ], 等で呼び出すことができる

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

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

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

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

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

うさタブ
うさタブ
テレビ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をコピーしました