部活用に作成した資料です。 「#1 基本的なプログラム」を理解してから見ることをお勧めします https://www.slideshare.net/ZOIdayo/1-257348878 「変数の型」「連想配列」「JSON」「ドット演算子」「アロー関数」あたりを説明しています

1. プログラミング講座
#2 複雑なデータの扱い
@ZOI_dayo

2. この章での目標
変数には何が入れられるのか、そしてどうやってその値を使うことができるのか
分かるようになること!
※ #1「基本的なプログラム」は理解しておいてください

3. プログラムって何を入れられるの?
前回は
let i = 10;
let s = “test_test”;
let a = [123, 456, 789];
let b = true;
ってことで、「数字」「文字列」「配列」「真偽値」が入れられる、と話した

4. プログラムって何を入れられるの?
そして、こんなふうに使える
let a = 10;
let b = 10;
let c = a + b;
ここまでは普通

5. プログラムって何を入れられるの?
じゃあこれは?
let a = 10;
let b = “あああ”;
let c = a + b;
実は、これはJavaScriptなら c == ”10あああ” になる
(数字+文字はおかしいから、自動で文字
+文字としてくれた)

6. プログラムって何を入れられるの?
こんなのもあった
let a = [5, 3, 7];
let b = a.length;
もちろんb == 3 になる

7. プログラムって何を入れられるの?
じゃあこれは?
let a = 5;
let b = a.length;
JavaScriptならundefinedになる(何それ?!)(あとで解説)

8. プログラムって何を入れられるの?
実はこんなのもある
let a = [5, 3, 7];
let b = a.includes(3);
b == true になる

9. プログラムって何を入れられるの?
これは?
let a = 5;
let b = a.includes(3);
JavaScriptではエラーになる

10. 今までの例、何がおかしい?
例えば最後の
let a = 5;
let b = a.includes(3);
なら、「aに数が入っているのに、配列だと思って使ったから」
(配列).includes()はエラーが起きないのに(配列以外).includes()はエラーが起きる
→ (見た目は同じでも) 変数の中身によってできる操作が違う
?!

11. 今までの例、何がおかしい?
これを「変数の型」と呼ぶ
ここは言語によっていろいろだけれど、例えば
JavaScriptなら
数字 5
文字列 “aaa”
真偽値 true
undefined undefined
null null
このほかにもいろんなものがある(nullやundefinedはあとで解説)

12. 「型」の扱い方
基本的に、「この変数はこの型だな」と意識することが大切
単に「a+b」と書いてあっても、a、bが文字だったり数字だったりすると違う結果になる
こんなのいちいち意識できないよ、機械なんだから
PCが覚えててよ、と思う人は
(JavaScriptではできないけど) C++、Java、Rustなどに手を出してみても楽しいかも
?

13. (余談) 静的型付け言語
C++などの言語では、let a=1;ではなく、int a=1;と書く
しかし、let s=”aaa”; は string s=”aaa”;と書く
つまり、中身に応じて「let」部分を変える!
(整数ならint、文字列ならstring、真偽値ならbool、...)
こうすれば、まともなエディタなら「変数
sはstringなのか〜」と判断し、
stringにできない操作をしようとした時に赤線を引いて教えてくれる
! (便利)
こういう、変数宣言の時に型を明示する言語は「静的型付け言語」と呼ばれる
(C++、Java(Android)、Rust、TypeScript、C#(Unity)、Swift(iPhone)、ほか色々...)

14. (余談) 静的型付け言語
ただ、書くのがめんどくさかったり、型の制限で逆に作りにくい時もある
→ 「今作って終わり」の小さなプロジェクトでは動的型付け
(JavaScript、Python、...)、
これからもアップデートやメンテナンスをする大きなプロジェクトでは
静的型付けを使うと良いかも
静的型付けは、書くのが多少面倒だけど、あとで見返したときに
「あーこの関数は文字を返すんだな」とすぐに分かるという利点がある
コード全体を覚えれる量(or期間)かどうかで決めても良いかも

15. map型 (連想配列)
余談終わり! JavaScriptの世界に戻ってきました
今まで使ってきた配列とかの進化版として、「連想配列」というのがある
まずは比較から

16. map型 (連想配列)
let a = [2, 5, 3, 7];
これは、a[0] == 2、a[1] == 5、みたいになる(中身は数字以外でもOK)
連想配列は、これの[ ]の中に数字以外も入れられるようにしたもの、というイメージ

17. map型 (連想配列)
let b = {
“test”: 13,
“aaa”: 873,
}
これが連想配列
b[“test”] == 13 みたいに使えるし、
b[“bbb”] = 847 とするとそれ以降b[“bbb”] == 847として扱える
(「“bbb”: 847,」という行が追加された感じ
?)
[]の中身をKey、b[]で出てくる値をValueという(Key: Value となっている)

18. map型 (連想配列)
ちなみに、登録されていないものを見ようとすると、
b[“aaaabbbbcccc”] == undefined
と、undefinedが帰ってくる
「undefined」とは、直訳では「未定義」、つまり「そんなのないよ」というメッセージ
あまり良いことではないから、
undefinedが出てきたらバグってる可能性が高いので注意

19. map型 (連想配列)
このmap型、Keyは文字列以外でもいいし、
Valueも数字以外でもいい
つまり、こんなこともできる
let tom = {
“name”: “Tom”,
“job”: “Programmer”,
“age”: 35,
}

20. map型 (連想配列)
これに加えて、なんと「連想配列の中に連想配列を入れる」こともできる !
(まあ普通の配列でもできるんだけどね )
これは連想配列の中に「連想配列の配列」を入れたもの (連想配列は{}、配列は[])
let tom = {
“name”: “Tom”,
“job”: “Programmer”,
“age”: 35,
“children”: [
{
“name”: “Alex”,
“age”: 2,
}
]
}

21. map型 (連想配列)
let tom = {
// 略
“children”: [
{
“name”: “Alex”,
“age”: 2,
}
]
}
tom[“children”] == [{“name”: “Alex”, “age”: 2}]
みたいに使えるので、
tom[“children”][0] == {“name”: “Alex”, “age”: 2}
、
tom[“children”][0][“name”] == “Alex” という感じで値を見れる! (書き換えもOK)

22. (余談) コメント
コード書いてると、たとえ変数名決めるのを頑張っても、「あとでここ忘れそうだなあ」
みたいなところがある
日本語で残しておきたいけど、適当に書いたらエラーになる
...
そのための機能「コメント」
コードに「//」があれば行末まで完全に無視されるし、「
/*」があれば「*/」まで無視されるので日本語でメ
モを書いておける!

23. JSON
話を戻す
さっき連想配列で、なんかいろんな情報をまとめられそうな感じになった
(let tom_age = 35; let tom_first_children_age = 2;、みたいに変数祭りにならない
)
こんなふうな書き方でデータをやりとりできたら楽かも
...? → JSON!

24. JSON
JSONは、連想配列の書き方そっくりのデータフォーマット
(JSONのJSはJavaScriptのJS)
JavaScriptは広く使われてるし、読みやすいし、使いやすいし、ということで
何にでも使われてる

25. JSON
例えば、(最近使いにくくなったけど) Twitter API とか... (もう多少読めるんじゃない
?!)
Webの通信は大体JSON
サービスのAPI使えば、
Bot作ったり自動化したり
色々できる

26. 「.」(ドット演算子)
さっきb[“aaa”] == 13 みたいな感じでデータを見に行ったけれど、
実は b.aaa == 13 みたいにドットで見に行くこともできる
!
(言語によってできない時もあるけど
...)
これを使うと、ちょっと面白いことができる

27. 変数をJSONとして見る
例えば、let a = [2, 5]; の場合、
a[0] == 2、a.length == 2、みたいなことができる
これって下のように表せるんじゃ
?!
a {
0: 2,
1: 5,
length: 2,
}
※ これを見たら、let a = 1;に対してなぜa.length == undefined なのか分かるはず!

28. 変数をJSONとして見る
こんなふうに、色々表してみたい
ところで、a.includes()はどうやって表そう...? (なんか括弧ついてるし)
a {
0: 2,
1: 5,
length: 2,
includes: ???
}

29. 「関数型」
もしかして、includes()という「関数」を「変数」としてみれば解決する
...?!
a {
0: 2,
1: 5,
length: 2,
includes: function includes(val) { /*探すコード */ },
}

30. 「関数型」
でも、functionのあとのincludesって文字(関数名)、前に書いてるし、いらないよね
...
ってことで省略
a {
0: 2,
1: 5,
length: 2,
includes: function (val) { /* 探すコード */ },
}

31. 「関数型」
functionって書くの面倒くさくない?
ってことで省略+「valをもらってなんか処理する」というイメージで矢印書く
a {
0: 2,
1: 5,
length: 2,
includes: (val) => { /* 探すコード */ },
}

32. アロー関数
って感じで、「関数を変数として」「めちゃくちゃ省略して」書く方法がある
矢印があるからアロー関数と呼ばれる(「ラムダ式」、「インライン関数」とも
)
a {
0: 2,
1: 5,
length: 2,
includes: (val) => { /* 探すコード */ },
}

33. アロー関数
ちなみに実行は簡単、括弧つけるだけ
let f = (a, b) => {console.log(a + b);}
f(10, 20); // 30と出力される
f(2, 8); // 10と出力される
これを使えば、例えば関数の引数に関数を渡すとかできる

34. コールバック関数
配列には「find()」という関数もある
使い方はこんな感じに、引数に条件を判定する関数を書く
(こういう、引数に書く関数をコールバック関数と呼ぶ
)
let a = [3, 4, 7, 2];
let result = a.find((elem) => {return elem > 3});
ちなみに色々省略できる(引数が1つなら()を、{}の中身がreturnだけなら{}とreturnを省略可)
let result = a.find(e => e > 3);
結果はresult == 4 (はじめに見つかった、条件を満たす値を返す
)

35. まとめ
ってなわけで、「型」、「連想配列」、「
JSON」、そして「関数型」の話でした
(めっちゃ内容濃かった...)
型の話はC++とかやったらオブジェクト指向とかいうのが出てきてもっと面白くなるよ
JSONは、めちゃくちゃ綺麗に情報をまとめられるから、ほんとにいつでも役立つ
関数型は使いこなすとコード量を減らして綺麗にできるから、ぜひ知っといてほしい
ってわけで、今回の知識を使うとかなり面白いことになります
! 楽しみにしててください!

36. 終わり