---
title: プログラミング基礎講習２
tags: 
author: [加藤まる](https://www.docswell.com/user/marbou090)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/5GJ588DJ48.jpg?width=480
description: サークルでProcessingを使ったプログラミング基礎講習会を行った時の資料です。
published: April 19, 21
canonical: https://www.docswell.com/s/marbou090/EZL84K-2021-04-19-132250
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/5GJ588DJ48.jpg)

1 18時15分開始 お待ちくだせぇ

# Page. 2

![Page Image](https://bcdn.docswell.com/page/4LE38GQJ5P.jpg)

プログラミング基礎講習 第二回 at FUN AI 2020/5/18

# Page. 3

![Page Image](https://bcdn.docswell.com/page/V8EDM1WEGD.jpg)

本日の予定 18:15 〜 講習会開始 〜20:00 終わり 面倒なのでPDF作ってないです。テヘペロ。 各位休憩を適宜とって下さい。

# Page. 4

![Page Image](https://bcdn.docswell.com/page/4V7PRQXE86.jpg)

予定変更 来週は私のブロック崩しコードを リファクタリングします！ リファクタリングとは プログラムの外部から見た動作を変えずにソースコードの内部構造を整理すること

# Page. 5

![Page Image](https://bcdn.docswell.com/page/L2JVR537QW.jpg)

用意して欲しいもの ・Processing サンプルコードを手元に持ってきて遊んでみてね。

# Page. 6

![Page Image](https://bcdn.docswell.com/page/Z5EGM6YELR.jpg)

本日のテーマ「可読性」 ・可読性とは ・命名規則 ・変数のスコープ ・コメントアウト ・関数 ・制御フロー ・関数の副作用

# Page. 7

![Page Image](https://bcdn.docswell.com/page/V4JQR46EP5.jpg)

1 可読性

# Page. 8

![Page Image](https://bcdn.docswell.com/page/DK748QMJ1Q.jpg)

可読性とは > コードの読みやすさ・わかりやすさの指標

# Page. 9

![Page Image](https://bcdn.docswell.com/page/PLJ12PYEGD.jpg)

可読性とは > なにが目的でどんな工程を踏んでいるのか > どの変数が何の役割をしているのか

# Page. 10

![Page Image](https://bcdn.docswell.com/page/8GJWR21E26.jpg)

なんで気にするの？ ・チーム開発する際に余計なコストがかからずに済む ・あとから改修がしやすくなる

# Page. 11

![Page Image](https://bcdn.docswell.com/page/W4EZRDX73Y.jpg)

1 変数とのお付き合い

# Page. 12

![Page Image](https://bcdn.docswell.com/page/KY76R1PJVZ.jpg)

変数と和解せよ > 変数と雑な付き合いするとあとで辛い思いしますよ。

# Page. 13

![Page Image](https://bcdn.docswell.com/page/5G7584P748.jpg)

2 サンプルコード

# Page. 14

![Page Image](https://bcdn.docswell.com/page/V9J2KVZERX.jpg)



# Page. 15

![Page Image](https://bcdn.docswell.com/page/5DEYN3N7M9.jpg)

3 命名規則

# Page. 16

![Page Image](https://bcdn.docswell.com/page/2VJNXVVE8K.jpg)

命名規則とは > 変数に名前をつける時に守るお約束ごと

# Page. 17

![Page Image](https://bcdn.docswell.com/page/GYE986VJ3P.jpg)

キャメルとスネーク >単語の先頭を大文字にする(StateTitle, UpWord) >単語の間にアンダーバーを入れる (left_word)

# Page. 18

![Page Image](https://bcdn.docswell.com/page/5GE88Z4EDR.jpg)

統一感のある命名 > rectX,rectYなど、同じ処理に使用するなら名前を似せ る

# Page. 19

![Page Image](https://bcdn.docswell.com/page/MLELRDVER1.jpg)

大文字と小文字で変数を分けない > rectXとRectXを別変数として扱う > XrectとrectXとか順番で区別もよくない

# Page. 20

![Page Image](https://bcdn.docswell.com/page/54JMRPN7W1.jpg)

上書きしない > もうすでに役目のあるお名前は使わない

# Page. 21

![Page Image](https://bcdn.docswell.com/page/ZPJRR14J9L.jpg)

システム変数 > もうすでに役目がある変数たち。 > 上書き可能（するな） 例）mouseX, width

# Page. 22

![Page Image](https://bcdn.docswell.com/page/NPEXRYZEXY.jpg)

予約語 > もうすでに役目があり、上書きが不可 例）int, float

# Page. 23

![Page Image](https://bcdn.docswell.com/page/63EKR3V7DY.jpg)

関数の名前を使わない > もうすでに役目のある関数の名前も使わない 例）rect,random,circle

# Page. 24

![Page Image](https://bcdn.docswell.com/page/4L738LQE5P.jpg)

シンタックスハイライト > コードが見やすくなるように色がついている > 色がついたらすでに役割があるので使わない！

# Page. 25

![Page Image](https://bcdn.docswell.com/page/V87DMNW7GD.jpg)

・濃い青：void関数 ・緑：void ・ピンク：システム変数 ・薄い青：組み込み関数

# Page. 26

![Page Image](https://bcdn.docswell.com/page/4VJPR5X786.jpg)

変数名の変えかた >

# Page. 27

![Page Image](https://bcdn.docswell.com/page/L2EVRP3JQW.jpg)

変数楽に変えられるよ >

# Page. 28

![Page Image](https://bcdn.docswell.com/page/Z57GMPY7LR.jpg)

便利サイト 日本語入力すると良い感じに英語にして返してくれる！ codic : https://codic.jp/

# Page. 29

![Page Image](https://bcdn.docswell.com/page/V4EQR267P5.jpg)

修正前 修正後

# Page. 30

![Page Image](https://bcdn.docswell.com/page/DKJ48LME1Q.jpg)

変数名綺麗にしたコードだが… →変数が多い…💦

# Page. 31

![Page Image](https://bcdn.docswell.com/page/PLE12LY7GD.jpg)

4 変数の削除

# Page. 32

![Page Image](https://bcdn.docswell.com/page/8GEWRV1726.jpg)

検討するポイント > 特に処理を行わないで値を渡していないか？ > 定数ではないか？

# Page. 33

![Page Image](https://bcdn.docswell.com/page/W47ZR4XJ3Y.jpg)

・backColorは必要？ ・rectConstantは必要？ ・Low,Highは必要？ ・directionChangeは必要？

# Page. 34

![Page Image](https://bcdn.docswell.com/page/KYJ6R3PEVZ.jpg)

用法の確認 >

# Page. 35

![Page Image](https://bcdn.docswell.com/page/5GJ58LPJ48.jpg)

確認できること ・どこで宣言したのか ・何に使ってるか ・何を代入されてるか VSCodeではcommand+Fで検索できる ので、それで見ると󰢐

# Page. 36

![Page Image](https://bcdn.docswell.com/page/V9E2KLZ7RX.jpg)

・変数名をわかりやすくした ・不要な一時変数を削除 →だいぶ見やすくなった！🤗

# Page. 37

![Page Image](https://bcdn.docswell.com/page/5D7YNQNJM9.jpg)

1 変数のスコープ

# Page. 38

![Page Image](https://bcdn.docswell.com/page/2VENXKV78K.jpg)

スコープとは >変数のスコープは変数が使える有効範囲のこと >宣言する場所でスコープが変わる

# Page. 39

![Page Image](https://bcdn.docswell.com/page/GY798VVE3P.jpg)

スコープとは >有効範囲を狭めることを「スコープを狭める」と言う

# Page. 40

![Page Image](https://bcdn.docswell.com/page/5G788P47DR.jpg)

例）正しいスコープ >>> marumarumarumarumarumaru… と出力される

# Page. 41

![Page Image](https://bcdn.docswell.com/page/4VEPRNXJ86.jpg)

例) スコープを間違えると… >>> エラー：maruがいません

# Page. 42

![Page Image](https://bcdn.docswell.com/page/Z5JGMQYJLR.jpg)

イメージ >{}で囲まれた範囲＝有効範囲

# Page. 43

![Page Image](https://bcdn.docswell.com/page/DKE48PM71Q.jpg)

用語解説 ・グローバル変数：完全にお外で宣言 ・ローカル変数：中で宣言

# Page. 44

![Page Image](https://bcdn.docswell.com/page/8G7WRQ1J26.jpg)

なんで気にしなきゃダメなの？ > どこで変数の上書きがされてるか把握しづらい > 変数が変更されればされるほど中身を追いにくい

# Page. 45

![Page Image](https://bcdn.docswell.com/page/W4JZRWXE3Y.jpg)

なんで気にしなきゃダメなの？ > 変数名の競合を防ぐ。全部一意の名前にするのきつい べ。

# Page. 46

![Page Image](https://bcdn.docswell.com/page/KYE6RGP7VZ.jpg)

なんで気にしなきゃダメなの？ > データを扱う際はメモリ消費が気になる gc.collect()!!!!!!!!

# Page. 47

![Page Image](https://bcdn.docswell.com/page/5GE58VPE48.jpg)

注意ポイント > draw()は何度も回ってるので、宣言で初期化されて困る ものは影響が出ない場所で宣言する！

# Page. 48

![Page Image](https://bcdn.docswell.com/page/V972K3ZJRX.jpg)

・verX,verY,rectX,rectYは中身が 動いてほしいのでスコープ小さくできな い。 ・backcolorは定数として扱っている のでスコープを狭めていい

# Page. 49

![Page Image](https://bcdn.docswell.com/page/5DJYN1NEM9.jpg)

1 インデント

# Page. 50

![Page Image](https://bcdn.docswell.com/page/2V7NX2VJ8K.jpg)

インデントとは void draw(){ aaaif(maru){ aaaaaprint(“まる！”); aaa} } {}は同じインデントに揃える！

# Page. 51

![Page Image](https://bcdn.docswell.com/page/NPJXR4ZJXY.jpg)

便利コマンド紹介 ● ctrl + R : 実行 ● ctrl + T : 自動フォーマット ● ctrl + S : 保存

# Page. 52

![Page Image](https://bcdn.docswell.com/page/4LE38XQJ5P.jpg)

Pythonではインデント命 > スコープについて、Pythonではインデントで判断される > Processingは{}があるとはいえ気にしよう

# Page. 53

![Page Image](https://bcdn.docswell.com/page/4V7PR1XE86.jpg)

7 コメントアウト

# Page. 54

![Page Image](https://bcdn.docswell.com/page/Z5EGM9YELR.jpg)

コメントアウトとは Processingでは// Pythonだと#

# Page. 55

![Page Image](https://bcdn.docswell.com/page/DK748KMJ1Q.jpg)

使い道 ・処理の解説 ・開発のメモ（//あとで修正しよう）

# Page. 56

![Page Image](https://bcdn.docswell.com/page/8GJWRN1E26.jpg)

一連の処理へのコメントアウト /*---------Mecabの準備----------*/ t = MeCab.Tagger('/usr/local/lib/mecab/dic/mecab-ipadic-neologd') t.parse('')

# Page. 57

![Page Image](https://bcdn.docswell.com/page/W4EZR3X73Y.jpg)

一連の処理へのコメントアウト #Mecab t = MeCab.Tagger('/usr/local/lib/mecab/dic/mecab-ipadic-neologd') t.parse('')

# Page. 58

![Page Image](https://bcdn.docswell.com/page/KY76RXPJVZ.jpg)

１行に対してコメントアウト twitter = OAuth1Session(CK, CS, AT, ATS) # 認証処理 url = "https://api.twitter.com/1.1/statuses/home_timeline.json" タイムライン取得エンドポイント #

# Page. 59

![Page Image](https://bcdn.docswell.com/page/5G758XP748.jpg)

7 関数

# Page. 60

![Page Image](https://bcdn.docswell.com/page/V9J2KXZERX.jpg)

関数とは 一連の処理をまとめて定義すること。

# Page. 61

![Page Image](https://bcdn.docswell.com/page/NPEXR9ZEXY.jpg)

int a=0; void draw(){ //...long process a++; } aを+1し続ける処理を 関数にしよう

# Page. 62

![Page Image](https://bcdn.docswell.com/page/4L7384QE5P.jpg)

int a=0; void draw(){ //... returnがある関数は a = add(a) 値を返すよ } 例）random,mouseX int addition(int x){ return x+1; }

# Page. 63

![Page Image](https://bcdn.docswell.com/page/4VJPRLX786.jpg)

int a=0; void draw(){ //... addition(a); } （これはうまく動かんです） void addition(int x){ x=x+1; } void の関数は上から下に 流れるだけだよ。 例）void mousePressed()

# Page. 64

![Page Image](https://bcdn.docswell.com/page/Z57GMWY7LR.jpg)

関数の引数 void add(int x)とかint add(int x)の int xを関数の引数という。 rect(10,10,10,10)の”10”も関数の引数です。

# Page. 65

![Page Image](https://bcdn.docswell.com/page/V4EQR367P5.jpg)

何が嬉しい？ 繰り返しが防げる →書く手間が省ける →使わないと変更点が出ると全部書き直さなきゃいけない 場合がある（addが+1ではなく+2にしたいなど）

# Page. 66

![Page Image](https://bcdn.docswell.com/page/DKJ481ME1Q.jpg)

何が嬉しい？ 関数名をつけることで何の処理かわかりやすくなる →コードをべたに書くよりもわかりやすくなる

# Page. 67

![Page Image](https://bcdn.docswell.com/page/PLE12GY7GD.jpg)

7 制御フロー

# Page. 68

![Page Image](https://bcdn.docswell.com/page/8GEWRK1726.jpg)

制御フローとは > 実行される順序のこと > 条件やループなどに出会わない限り、コードは最初の行 から順に最後の行まで順番に実行する。

# Page. 69

![Page Image](https://bcdn.docswell.com/page/W47ZRZXJ3Y.jpg)

制御フロー できるだけ「自然」にする。

# Page. 70

![Page Image](https://bcdn.docswell.com/page/KYJ6RZPEVZ.jpg)

自然？？ フローチャートを思い出そう。

# Page. 71

![Page Image](https://bcdn.docswell.com/page/L2JVRQP7QW.jpg)

int sum=0; int n=1; while(n<=10){ sum = sum + n; n++; } print(sum);

# Page. 72

![Page Image](https://bcdn.docswell.com/page/V4JQR3WEP5.jpg)

int sum=0; sumを定義 int n=1; while(n<=10){ sum = sum + n; sumに1~10まで足す n++; } print(sum); sumを出力

# Page. 73

![Page Image](https://bcdn.docswell.com/page/PLJ12G5EGD.jpg)

int sum=0; int n=0; while(n<=10){ sum = sum + n; if(n==10){ print(sum); } n++; }

# Page. 74

![Page Image](https://bcdn.docswell.com/page/W4EZRZ273Y.jpg)

int sum=0; int n=0; sumを定義 while(n<=10){ sum = sum + n; if(n==10){ sumに1~10まで足す print(sum); } n++; } sumを出力

# Page. 75

![Page Image](https://bcdn.docswell.com/page/KY76R86JVZ.jpg)

気付きにくい。 > 具体的に考えれば考えるほど上記のようなことが起きや すい > 定期的に自分がそもそも何を書きたかったのかを思い出 そう

# Page. 76

![Page Image](https://bcdn.docswell.com/page/V9J2K2GERX.jpg)

if文 if (a == b) { // Case One ... } else { // Case Two ... }

# Page. 77

![Page Image](https://bcdn.docswell.com/page/2VJNXP8E8K.jpg)

if文 if (a != b) { // Case Two ... } else { // Case One ... }

# Page. 78

![Page Image](https://bcdn.docswell.com/page/5GE88M9EDR.jpg)

つまり > 否定的ではなく肯定的ケースに対処する

# Page. 79

![Page Image](https://bcdn.docswell.com/page/MLELR3MER1.jpg)

ついでに > より注目させたい処理を先に書く →判別させたいことは何か、何の処理をさせたいのか →エラー処理なら否定で入った方が良い

# Page. 80

![Page Image](https://bcdn.docswell.com/page/54JMRD67W1.jpg)

ネスト とは > 入れ子構造のこと if(){ if(){ if(){ } } } //...

# Page. 81

![Page Image](https://bcdn.docswell.com/page/ZPJRR4NJ9L.jpg)

ネストが深すぎると… > あとから読んだときになにが起きたらどこに入りどこで 抜け出すのか追いにくい →「自然」じゃない

# Page. 82

![Page Image](https://bcdn.docswell.com/page/NPEXR28EXY.jpg)

if(hoge!=0){ //超長い }else{ return hoge; } API使ってる人とかこうなって ませんか。私はなりました。

# Page. 83

![Page Image](https://bcdn.docswell.com/page/4L738Y6E5P.jpg)

if(hoge==0){ return hoge; } //長い処理 さっさとreturnさせる。

# Page. 84

![Page Image](https://bcdn.docswell.com/page/V87DM5M7GD.jpg)

if(hoge!=0){ //... if(hoge>5){ //hoge操作 if(hoge>100){ //hogeを操作 hoge=fuga; } //hoge操作 } } hogeの操作のみの場所があるなら

# Page. 85

![Page Image](https://bcdn.docswell.com/page/L2EVR6PJQW.jpg)

piyo=hoge_calculation(hoge) int hoge_calculation(int piyo){ //ここに一連の処理を書き return piyo; } まとめてしまった方が良い。

# Page. 86

![Page Image](https://bcdn.docswell.com/page/V4EQRQW7P5.jpg)

なにが嬉しい > 「これどんな条件分岐だっけ？」を防げる > あとで書き足しやすい＆修正しやすい

# Page. 87

![Page Image](https://bcdn.docswell.com/page/PLE12557GD.jpg)

7 関数の副作用

# Page. 88

![Page Image](https://bcdn.docswell.com/page/W47ZRN2J3Y.jpg)

副作用のない関数とは > いついかなる時、場所でも同じ引数なら同じ振る舞いを する関数

# Page. 89

![Page Image](https://bcdn.docswell.com/page/KYJ6R96EVZ.jpg)

副作用のある関数とは > 副作用のない関数以外の関数全て

# Page. 90

![Page Image](https://bcdn.docswell.com/page/V9E2K5G7RX.jpg)

副作用とみなされる行為 ・グローバル変数を読む、あるいは書く ・標準入力または標準出力を使う ・副作用のある関数を呼ぶ

# Page. 91

![Page Image](https://bcdn.docswell.com/page/ML7LRLM7R1.jpg)

なぜ副作用がいけない？ > 単体テストができないから。 →関数外に依存要素があるから単体でテストが行えない

# Page. 92

![Page Image](https://bcdn.docswell.com/page/54EMRM6JW1.jpg)

なぜ副作用がいけない？ > リファクタリングするときに範囲を定めにくい →他のところも改修しなきゃいけなくなる

# Page. 93

![Page Image](https://bcdn.docswell.com/page/ZPERRVNE9L.jpg)

出力予想できますか？

# Page. 94

![Page Image](https://bcdn.docswell.com/page/NP7XRZ87XY.jpg)

nestMaru:0 marumaru:2 nestMaru:2 marumaru:2

# Page. 95

![Page Image](https://bcdn.docswell.com/page/637KR8LJDY.jpg)

同じ関数を呼んだのに出力 が違う →副作用がある

# Page. 96

![Page Image](https://bcdn.docswell.com/page/4LJ382675P.jpg)

8 次回予告

# Page. 97

![Page Image](https://bcdn.docswell.com/page/V8JDMZMJGD.jpg)

お品書き（予定） ● 実演 私が去年作ったブロック崩しをリファクタリング しながら学んだ内容の復習します。

# Page. 98

![Page Image](https://bcdn.docswell.com/page/4VEPRDQJ86.jpg)

おわり。 感想くれ。 98