配列について学ぼう
みなさん、こんにちは！今日はプログラミングで頻繁に使われる配列について学びます。配列とは何でしょうか？一緒に見ていきましょう。
配列って何？
まず、配列とは何かを説明します。配列は複数のデータをひとまとめにして管理するための特別な箱です。
単一の変数と配列の違い
通常の変数は1つのデータしか持てません。たとえば、次のようなイメージです。
単一の変数: name = 吉田
つまり、nameという箱には吉田というデータが入っています。一方、配列は複数のデータを一つの変数で管理できます。
配列のイメージ
配列の例: ------------------------------------------ | 0 | 1 | 2 | 3 | | 吉田 | 田所 | 三年 | 伊藤 | ------------------------------------------
このように、配列の中には複数のデータが格納されており、それぞれに番号（インデックス）が割り当てられています。インデックスは0から始まります。
配列の基本操作
複数のデータを管理
配列の基本操作として、データを取得したり追加したりする方法をご紹介します。例えば、次の配列があるとしましょう。
students = ["吉田", "田所", "三年", "伊藤"]
データの取得
配列のデータは、インデックスを使って取得できます。田所を取り出したい場合は次のようにします。
students[1]
このコードは田所を取得します。配列のインデックスは0から始まるため、1番目に位置する田所を取得しています。
配列の操作方法
データの追加
新しいデータを配列に追加するには、pushメソッドを使えます。
students.push("安川")
このコードを実行すると、配列は次のようになります。
students = ["吉田", "田所", "三年", "伊藤", "安川"]
手動でデータを追加
もちろん、直接インデックスを指定してデータを追加することも可能です。
students[4] = "安川"
この方法でも同じ結果が得られます。
実際の例を見てみよう
ここからは実際のコードを使って、配列の操作をブラウザで確認します。
新しいHTMLファイルを作成
まず、新しいHTMLファイルを作成し、次のように書きます。
<!DOCTYPE html>
<html>
<head>
<title>配列の例</title>
</head>
<body>
<div id="display"></div>
<script>
// 配列を作成
let students = ["吉田", "田所", "三年", "伊藤"];
// 配列の内容を取得し、表示する
document.getElementById("display").innerHTML = students[1];
</script>
</body>
</html>
このコードを実行すると、ブラウザで配列の2番目のデータ「田所」が表示されます。
配列の操作を追加
新しいデータを追加し、表示する例です。
<!DOCTYPE html>
<html>
<head>
<title>配列の例</title>
</head>
<body>
<div id="display"></div>
<script>
// 配列を作成
let students = ["吉田", "田所", "三年", "伊藤"];
// 新しいデータを追加
students.push("安川");
// 配列の内容を取得し、表示する
document.getElementById("display").innerHTML = students[4];
</script>
</body>
</html>
これで「安川」が表示されるようになります。
まとめ
今回は、配列について基本的な操作を学びました。配列は、データを効率よく管理するための非常に便利なツールです。以下のように、感覚的に配列とは「データがたくさん入る箱」と覚えておきましょう。
[ 🍎, 🍌, 🍊, 🍇 ]
→ [ 吉田, 田所, 三年, 伊藤 ]
次回はさらに詳しい配列の操作や、応用的な使い方について学びます。それでは、またお会いしましょう！
タイムスタンプ
1 00:00:01,310 --> 00:00:09,969 [音楽]
2 00:00:12,429 --> 00:00:23,140 配列に行きましょう
3 00:00:15,349 --> 00:00:25,170 配列ね変数やりましたけどねスってえっと1つの箱だったじゃないですか
4 00:00:23,140 --> 00:00:28,140 これがねぇ
5 00:00:25,170 --> 00:00:30,530 まあ name =吉田みたいな感じね
6 00:00:28,140 --> 00:00:36,380 ネームって箱に吉田が入っ
7 00:00:30,530 --> 00:00:43,700 配列はこの箱が複数あると思ってください
8 00:00:36,380 --> 00:00:47,219 それぞれ入っています例えばす宮殿ツっていうこの辺入れての中に吉田たところ3年
9 00:00:43,700 --> 00:00:49,850 糸が入ってるわけですね
10 00:00:47,219 --> 00:00:53,600 これが配列
11 00:00:49,850 --> 00:00:55,719 で配列の特徴としては番号がふられています
12 00:00:53,600 --> 00:01:02,100 これさらにまあ大きな
13 00:00:55,719 --> 00:01:07,959 配列の箱があって student つってね箱がその中に
14 00:01:02,100 --> 00:01:11,099 01230番目に吉田が入ってて一番目にた所に番目に見え3番目に移動が入っている
15 00:01:07,959 --> 00:01:11,099 というイメージ
16 00:01:11,840 --> 00:01:22,400 でその中身を参照する場合は8その番号を指定するよっていうことね
17 00:01:18,620 --> 00:01:24,990 例えばイトーを取り出したい場合だったら
18 00:01:22,400 --> 00:01:31,049 ここえっと配列名
19 00:01:24,989 --> 00:01:35,629 2年配列メイト括弧の中に番号を入れてあげる
20 00:01:31,049 --> 00:01:35,630 そうすると伊藤が取り出され
21 00:01:36,760 --> 00:01:46,550 じゃあ新しいデータを追加するとき安川っていう人スティレットに加えるとしたらどう
22 00:01:42,819 --> 00:01:53,530 するかというと普通レンズよ
23 00:01:46,549 --> 00:01:56,798 新しいね普通レンズ4っていうのを作ってそこに安変わっているだけだ
24 00:01:53,530 --> 00:01:59,859 もしくは番号がちょっとよくわかんなかったら
25 00:01:56,799 --> 00:02:03,470 student .プッシュ
26 00:01:59,859 --> 00:02:10,419 で丸括弧のダブルコーテーション安川
27 00:02:03,469 --> 00:02:10,419 って書いてあげても ok こっちの方が下のほうがやりやすいかもしれないですね
28 00:02:10,879 --> 00:02:18,680 まあこれが配列もっともっとあるんですけど基本的な考え方はこんな感じです
29 00:02:17,300 --> 00:02:24,280 さあ
30 00:02:18,680 --> 00:02:28,180 それではですね8配列のでも行ってみましょうか
31 00:02:24,280 --> 00:02:29,490 では新規ファイルを作りましょう
32 00:02:28,180 --> 00:02:33,510 まず保存
33 00:02:29,490 --> 00:02:36,670 で範囲で都度という子てメールでいいですかね
34 00:02:33,509 --> 00:02:43,000 ここで html を書きまして
35 00:02:36,669 --> 00:02:45,799 この中に作っていきますでですねちょっと表示しながらやりたいのでで自分の id の
36 00:02:43,000 --> 00:02:52,129 ここで何かを表示するねっ
37 00:02:45,800 --> 00:02:54,180 配列の内容を表示する箇所をつくってでここにじゃあスクリプト書いていきましょうか
38 00:02:52,129 --> 00:02:57,009 スクリプト
39 00:02:54,180 --> 00:03:00,480 でスクリプトと
40 00:02:57,009 --> 00:03:05,609 はいでは準備ができました
41 00:03:00,479 --> 00:03:10,199 まずですね配列を作る時っていうのはこの資格の格好に
42 00:03:05,610 --> 00:03:15,480 囲みますなかにはその文字列とか
43 00:03:10,199 --> 00:03:21,780 ここだと音を知らであるとかこの文字列であるとかダブルコーテーションはない場合だ
44 00:03:15,479 --> 00:03:27,959 と1とか2とかこういうふうに配列でね番号もジオン
45 00:03:21,780 --> 00:03:30,189 数値か数字を入れていくこともできますねえ文字と数字を混在させることもできる
46 00:03:27,959 --> 00:03:35,449 今回はこの中にです
47 00:03:30,189 --> 00:03:38,639 音も家を出ていきますねこれはじゃあ生徒を
48 00:03:35,449 --> 00:03:41,810 あ所で
49 00:03:38,639 --> 00:03:43,089 8その次が3年
50 00:03:41,810 --> 00:03:46,840 ねっ
51 00:03:43,090 --> 00:03:48,830 伊藤とまぁこんなのがあったとしましょう
52 00:03:46,840 --> 00:03:53,270 で4人の生徒が
53 00:03:48,830 --> 00:03:57,700 うつ状態ですでまずここまでを
54 00:03:53,270 --> 00:04:01,150 ではえーっどこのブラウザで見てみましょうか
55 00:03:57,699 --> 00:04:04,869 技で配列ありました
56 00:04:01,150 --> 00:04:06,590 これ見てみるとまぁ何も表示されないんですよね
57 00:04:04,870 --> 00:04:13,870 まぁ当然ですね
58 00:04:06,590 --> 00:04:17,780 でじゃあこれ作っていますねここの配列を今度は変数に入れます
59 00:04:13,870 --> 00:04:19,639 あの子宮殿つ
60 00:04:17,779 --> 00:04:25,038 行こう
61 00:04:19,639 --> 00:04:28,879 これ変数に入りましたこの変数を入れたところで見てみるこれももちろん
62 00:04:25,038 --> 00:04:30,919 表示されないんですよね今回じゃあこの this プっていうところで表示してみ
63 00:04:28,879 --> 00:04:39,980 たいんですけれども
64 00:04:30,920 --> 00:04:43,199 でこの配列の中身をドキュメントねあそこドキュメントのドキュメントと get a
65 00:04:39,980 --> 00:04:44,968 冷麺と場合
66 00:04:43,199 --> 00:04:48,110 ad の
67 00:04:44,968 --> 00:04:50,480 デイディスプですねディスプ
68 00:04:48,110 --> 00:04:55,069 シングルコーテーション
69 00:04:50,480 --> 00:04:57,129 の中にの中っていうのはいいんだなぁ
70 00:04:55,069 --> 00:05:02,029 html ですね
71 00:04:57,129 --> 00:05:07,210 の中にですね=で justy 誘電つ入れてみましょうか
72 00:05:02,029 --> 00:05:08,329 そうすると a まこの中に入ってるはずなんでどうなるでしょうか
73 00:05:07,209 --> 00:05:10,138 う
74 00:05:08,329 --> 00:05:11,269 これねでました
75 00:05:10,139 --> 00:05:14,629 はいっ
76 00:05:11,269 --> 00:05:18,589 でえっと今4人いますよね
77 00:05:14,629 --> 00:05:26,540 そうそうそうそうでスチューデンツの中の
78 00:05:18,589 --> 00:05:27,979 例えばじゃあこのた所を取り出したいっていうときには普通田角括弧これは0番目1番
79 00:05:26,540 --> 00:05:28,560 目2番目3番目
80 00:05:27,980 --> 00:05:30,280 ねっ
81 00:05:28,560 --> 00:05:32,220 ここが0
82 00:05:30,279 --> 00:05:37,649 1
83 00:05:32,220 --> 00:05:39,350 さんですよねなのでここには1と書いてあげる
84 00:05:37,649 --> 00:05:41,549 そうすると
85 00:05:39,350 --> 00:05:44,849 田所と
86 00:05:41,550 --> 00:05:48,629 抜き出すことができましたねっ
87 00:05:44,848 --> 00:05:49,889 年もちろん校にすると
88 00:05:48,629 --> 00:05:52,968 3年
89 00:05:49,889 --> 00:05:52,968 さんにすると
90 00:05:52,990 --> 00:05:59,968 糸になりますでよりするとどうなるんでしょうか
91 00:05:56,379 --> 00:06:04,899 4年にするとアンディファインと
92 00:05:59,968 --> 00:06:05,879 それは定義されてませんよっていうことになりますね
93 00:06:04,899 --> 00:06:12,509 じゃあ
94 00:06:05,879 --> 00:06:12,839 89スチューデンツにですねこの4番はそのままにして普通電通度とプッシュでもう1
95 00:06:12,509 --> 00:06:17,180 人
96 00:06:12,839 --> 00:06:21,848 加えてみましょうかここにはで安川
97 00:06:17,180 --> 00:06:28,780 を加えてみますこうするとどうなるか
98 00:06:21,848 --> 00:06:31,180 を4番目できたので andy find ではなく安川になりました
99 00:06:28,779 --> 00:06:35,769 これでうまくいきました
100 00:06:31,180 --> 00:06:37,259 プッシュの方法もあるしここを4番目
101 00:06:35,769 --> 00:06:40,528 には
102 00:06:37,259 --> 00:06:45,870 えっと4番メニューは=見だな
103 00:06:40,528 --> 00:06:47,659 こういう格好じゃないですねこんな感じでも同様に入れられる
104 00:06:45,870 --> 00:06:51,848 はずですで
105 00:06:47,660 --> 00:06:53,900 これでも絶叫が見てみましょうこれ保存して
106 00:06:51,848 --> 00:07:00,149 やっぱりやスカートになってますね
107 00:06:53,899 --> 00:07:06,269 それよりもここ番号を指定しないでプッシュで行ったほうがいいね
108 00:07:00,149 --> 00:07:10,609 こんなな子でも追加できるじゃないですかだからこっちの方がいいかなと思います
109 00:07:06,269 --> 00:07:12,479 けれどまあまあやり方として覚えておいてください
110 00:07:10,610 --> 00:07:18,800 はいで
111 00:07:12,480 --> 00:07:18,800 えっとそうですね配列は以上になります