プログラミング講座 #1 基本的なプログラム

1.1K Views

April 13, 23

スライド概要

部活用に作成した資料です。
プログラミングを全く経験したことがない人向けです。
変数・ループ・条件分岐・関数など初歩的な内容の解説を行なっています。

profile-image

ZOIといいます。Web系のプログラミングとかが多少得意かもです。よろしくお願いします。

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

プログラミング講座 #1 基本的なプログラム @ZOI_dayo

2.

この章での目標 プログラムの基本的な文法を覚えて、 簡単なコードを「読める」ようになること! 例えばこんなコード →

3.

読んでみる よくわからん(当たり前) ()[]{}とか色々あるし、なんか色ついてる 1行目の数字は素数...?

4.

文法その1 「変数」 プログラムでは「変数」というものが使える 数学で出てくる変数よりは、「タイトル付き付箋」というイメージの方が近い ? 名前をつけた付箋を作って、そこに数字を書き込む(書き換えもできる)

5.

文法その1 「変数」 使い方は言語によって変わるけど... 例えばJavaScriptでは、 let a = 1; で「aという名前の変数を作り、1と書き込む」の意味

6.

文法その1 「変数」 値の変更もできる let a = 1; a = 3; だと、「変数a(値1)を作る」→「aの中身を3にする」の意味 (aに3を代入する、と呼ぶ) 数学の=ではなく、右辺を左辺に代入する、という意味

7.

文法その1 「変数」 ちなみに、こんな書き方もできる let a; a = 1; a = 3; これの省略形、と考えてもいいかも?

8.

文法その1 「変数」 計算もできる! 四則演算... + - * / a/bのあまり... a%b a = a + 2; は a += 2; と省略できる! (他の演算も大体OK) (数学的にはおかしい式だけど、a+2をaに代入、という処理なだけ) さらに、a = a + 1; は a++; と省略できる! (++、--以外はないかも)

9.

読んでみる 「変数」を覚えたので、3行目が読める! 1と4、なにこれ? 6にもletってあるけど何?

10.

文法その1 「変数」 実は、変数に入れられる(プログラムで扱える)「値」は数字だけじゃない 色々あるけど、とりあえず「文字列」、「配列」、「真偽値(ブーリアン)」を覚えとく 順にこんな感じ 「” ”」で挟むと文字列で文章、「[ ]」で挟むと配列で数列(数以外もOK) trueかfalseで真偽値(それぞれ「はい」「いいえ」を表す)(どこで使うかは後) let s = “test_test”; let a = [123, 456, 789]; let b = true;

11.

読んでみる 「変数」を覚えたので、3行目が読める! 1・4行目はそれぞれ配列と真偽値でOK 6行目、forとは...?

12.

文法その2 「ループ」 プログラムでは、ループして何回も実行できるような機能がある 例えば... while, forなど (この二つ覚えとけばとりあえずOK)

13.

文法その2 「ループ」 whileの使い方... while(){}で、()の中に真偽値、{}の中に実行するものを入れる let a = 0; while(true) { a++; } このコードではaが永久に増え続ける(終わりはない) ※ whileの{}の中を2文字右にずらしてるのは見やすいためです

14.

文法その2 「ループ」 ()の中には条件を入れてもOK 条件... a<b、a<=b、a==b など... (「aとbが等しい」は==、つまり=を2つ繋げて表す) (でないと代入になる) let a = 0; while(a < 5) { a++; } 「aが5未満の間、aを1増やし続ける」の意味 終了時にはaは5 (a==4 → ループ突入 → a==5 → ループ突入しない → 終了!)

15.

文法その2 「ループ」 forの使い方... 色々応用できるけど、「10回繰り返す」場合 let a=0; for(let i=0; i<10; i++) { a += i; } forの()の中が;で3つに分かれているのに注目 1つ目 … 最初の1回実行 2つ目 … ループ突入の条件 (whileの()みたいな感じ) 3つ目 … ループごとに毎回実行する処理

16.

文法その2 「ループ」 let a=0; for(let i=0; i<10; i++) { a += i; } つまり、 「a==0, i==0 → i<10なのでループ突入 → aにi(==0)を足す → a==1 → ループ1終 →a==1, i==1 → i<10なのでループ突入 → i++ (i==1に) → aにi(==1)を足す → …」 となり、aは最後には0+1+2+...+9=45になる

17.

文法その2 「ループ」 for(let i=0; i<10; i++) { } つまり、上の書き方で、 「iを0~9まで動かしながら{}の処理を1回づつ実行する」という意味 {}の中でiを使わないなら、「{}の中身が10回実行される」と考えてもいい

18.

読んでみる となると、6~10行目はループっぽい 回数を入れるところに「primes.length」 これは「primesの長さ (== 8)」を表す 7~9行目、ifとは?

19.

文法その3 「条件分岐」 if文を使うことで、特定の場合だけ実行するようにできる if(条件) {条件を満たした時のみ実行} または if(条件) {条件を満たした時のみ実行} else {条件を満たしていない時のみ実行} 3つ以上の時は if(条件1) {条件1の時} else if(条件2) {条件1でない、かつ条件2の時} else {条件2でない時}

20.

読んでみる primes[i]はprimesの(i+1)番目 (注意! 1つめは[0]、2つめは[1]、とずれる) つまり、 「primesの要素数、以下をループ: primesの(i-1)番目がaと同じなら: a_isprimeにtrueを代入」 という意味

21.

読んでみる もう少し簡単に書くと、 「primesを一つづつ見て、 aと同じものがあればa_isprimeをtrueにする」 つまり、aがprimesに含まれていれば a_isprimeがtrueになり、 含まれていなければfalseになる

22.

読んでみる あとは12〜13行目だけ! console.log()って?

23.

文法その4 「関数」 console.log(“aaa”)のように、name(値)となっているものを「関数」と呼ぶ 数学のf(x)みたいな感じで、xの部分を少しずつ変えながら実行できる 自分で作る場合こんな感じ(f(x) = x^2 - 2x +1 ) function f(x) { return x*x - 2*x + 1; } returnで結果を返す

24.

文法その4 「関数」 let a = f(10); とすればaは81、 let b = f(5); とすればbは16になる f(x)の部分が計算結果に置き換わる、と考えると、 let c = f( f(3) + f(5) ); → f( 4 + 16 ) → f(20) → 361 になる 1ステップずつ考えると楽!

25.

文法その4 「関数」 (x)の部分 (引数と呼ぶ) を増やすこともできるし、関数内で処理をすることもできる function g(x, y) { let a = x+y; return a*a; } この時、let a = g(2,5); とするとa==49

26.

文法その4 「関数」 あと、値を返す方ではなく「処理をする」方に焦点を当てたものもある 例えばconsole.log() (これはJavaScriptに元々あるので準備なしに使えます) console.log(“aaa”) と文字列を渡せば、コンソールに「aaa」と表示してくれる! let a = console.log(”aaa”) みたいにはしない つまり、「計算結果」は捨ててる

27.

文法その4 「関数」 これを使えば、何回も出てくる処理に名前をつけて使う、みたいなこともできる 例えばxについての情報を喋らせたり... function print(x) { console.log(x + “についての情報を表示します”); console.log(“x * x == ” + (x*x)); if(x>0) console.log(“x>0です”); else if(x==0) console.log(“x==0です”); else console.log(“x<0です”); }

28.

文法その4 「関数」 ちなみに、ifの後ろの波括弧は後ろが1処理だけの時は省略できる これはOK↓ if(a < 0) console.log(“a<0です”); if(a < 0) a = -a; これはNG↓ (NGではないけど思うようには動かない) if(a<0)console.log(“a<0なのでせいにしておきます”); a = -a;

29.

読んでみる ここまでやれば読めるようになったはず! ※ 何してるコードか考えてみて

30.

読んでみる これは素数判定コード...のつもりです もちろん23は素数でないと言うし無茶苦茶 …ってわけで、もし暇だったら 「どんな整数でも素数か判定できるコード」 を作ってみてください!

31.

おまけ 途中で「配列の長さを取得する」ってとこで出てきた「primes.length」、 関数のところで出てきた「console.log()」の話です どちらも「.」がついていますが、これは左の変数(primesやconsole)に付属してる値や関数を持ってくる という意味です 例えばprimes.lengthは、primesと言う変数(中身は配列)の中の「length」と言う変数を見に行ってる わけです console.log()は、consoleと言う変数(JavaScriptが勝手に作ってます)の中のlog()と言う関数を実行し てるわけです 変数に関連する処理(配列なら長さが知りたい、要素を増やしたいなど)が(変数).(それっぽい名前)と なっていることが多いので、「.」が出てきたら、とりあえず右側の変数名or関数名を見て「あーこんな処 理かな?」と見当をつけてみてください(lengthなら長さ、など)

32.

終わり