--- title: プログラミング基礎講習１ tags: author: [加藤まる](https://www.docswell.com/user/marbou090) site: [Docswell](https://www.docswell.com/) thumbnail: https://bcdn.docswell.com/page/ML7LRX27R1.jpg?width=480 description: サークルでProcessingを使ったプログラミング基礎講習会を行った時の資料です。 published: April 19, 21 canonical: https://www.docswell.com/s/marbou090/YK96XK-2021-04-19-132207 --- # Page. 1 ![Page Image](https://bcdn.docswell.com/page/ML7LRX27R1.jpg) プログラミング基礎講習 第一回 at FUN AI 2020/5/11 # Page. 2 ![Page Image](https://bcdn.docswell.com/page/54EMRL9JW1.jpg) 本日の予定 18:15 〜 講習会開始 19:30 〜 遊ぶ時間 〜20:00 終わり スライド以外にPDFverも配ります。 各位休憩を適宜とって下さい。 # Page. 3 ![Page Image](https://bcdn.docswell.com/page/ZPERRK9E9L.jpg) 用意して欲しいもの ・Processing コードを実行させつつ進めていきます。 手元で遊びながら聞いてね。 # Page. 4 ![Page Image](https://bcdn.docswell.com/page/NP7XRL37XY.jpg) 目次 ・プログラミングis何 ・フローチャートとは ・調べ方 ・エラー・バグへの接し方 ・質問をするということ # Page. 5 ![Page Image](https://bcdn.docswell.com/page/637KRLNJDY.jpg) 1 プログラミングis何 # Page. 6 ![Page Image](https://bcdn.docswell.com/page/4LJ383Z75P.jpg) プログラミングis…? > 何かを実現させるために、様々な言語で命令を書くこと # Page. 7 ![Page Image](https://bcdn.docswell.com/page/V8JDM44JGD.jpg) 2 フローチャートとは # Page. 8 ![Page Image](https://bcdn.docswell.com/page/4VEPRMVJ86.jpg) フローチャートとは > 実行したいことのために行う工程を、表現した図 # Page. 9 ![Page Image](https://bcdn.docswell.com/page/L27VR9REQW.jpg) 商品購入の工程 # Page. 10 ![Page Image](https://bcdn.docswell.com/page/Z5JGMZ6JLR.jpg) 合計値を出す工程 # Page. 11 ![Page Image](https://bcdn.docswell.com/page/V47QRL2JP5.jpg) なにがうれしいの。 > フローチャートをイメージすることによって、 コードを書くときの思考の流れが追いやすくなる # Page. 12 ![Page Image](https://bcdn.docswell.com/page/DKE48DP71Q.jpg) 複雑になると… # Page. 13 ![Page Image](https://bcdn.docswell.com/page/PL712ZXJGD.jpg) あとは書くだけ。 言語で命令を順番通りに書いてあげるだけ。 どう命令すれば良いか考えるのも大変。 # Page. 14 ![Page Image](https://bcdn.docswell.com/page/8G7WR9KJ26.jpg) 質問タイム 14 # Page. 15 ![Page Image](https://bcdn.docswell.com/page/W4JZR9NE3Y.jpg) 3 Hello World! # Page. 16 ![Page Image](https://bcdn.docswell.com/page/KYE6RK97VZ.jpg) Hello World!（儀式） 技術系の人間は新しい言語を触るとき、 とりあえず「Hello World!」と出力します。 # Page. 17 ![Page Image](https://bcdn.docswell.com/page/5GE58PDE48.jpg) print(“Hello World!”); # Page. 18 ![Page Image](https://bcdn.docswell.com/page/V972KZMJRX.jpg) 便利コマンド紹介 ● ctrl + R : 実行 ● ctrl + T : 自動フォーマット ● ctrl + S : 保存 # Page. 19 ![Page Image](https://bcdn.docswell.com/page/5DJYNRPEM9.jpg) 3 サンプルコード # Page. 20 ![Page Image](https://bcdn.docswell.com/page/2V7NXDMJ8K.jpg) void setup(){ size(500,500); } int x=0; void draw(){ background(255); circle(x,250,100); x = x + 1; } # Page. 21 ![Page Image](https://bcdn.docswell.com/page/GYJ98GW73P.jpg) 3 コードの調べ方 # Page. 22 ![Page Image](https://bcdn.docswell.com/page/5GJ88VRJDR.jpg) 1. ネットで調べる この世で信じられるのはリファレンスだけです。 # Page. 23 ![Page Image](https://bcdn.docswell.com/page/MLJLR52JR1.jpg) https://processing.org/reference/ # Page. 24 ![Page Image](https://bcdn.docswell.com/page/547MR39EW1.jpg) [言語名 関数名] # Page. 25 ![Page Image](https://bcdn.docswell.com/page/ZP7RRQ979L.jpg) 注意 複数の記事を参考にしよう。 # Page. 26 ![Page Image](https://bcdn.docswell.com/page/NPJXR53JXY.jpg) 2. コメントアウトで調べる processingには//でその行をプログラムと関係ない行にす ることができます。 例）backgroundをコメントアウトする //background(255); # Page. 27 ![Page Image](https://bcdn.docswell.com/page/63JKR6NEDY.jpg) 3. コードを変えて調べる わからない関数も書き換えてしまえばどう動いてたかわかる はず！！ 例）直接数字を変えてみる。（関数size()を10倍に） size(5000, 5000); # Page. 28 ![Page Image](https://bcdn.docswell.com/page/4LE386ZJ5P.jpg) 実践 各関数がどのような動きをしているのか、 遊びながら調べてみましょう。 # Page. 29 ![Page Image](https://bcdn.docswell.com/page/V8EDMV4EGD.jpg) 解説 void setup(){ size(500,500); //ウィンドウサイズ } int x=0; //円のx座標 void draw(){ background(255); //全面に塗る circle(x, 250, 100); //x座標、y座標250に半径100の円を描く。 x = x + 1; //x座標を1たす } # Page. 30 ![Page Image](https://bcdn.docswell.com/page/4V7PRVVE86.jpg) 4 エラーへの接し方 # Page. 31 ![Page Image](https://bcdn.docswell.com/page/L2JVRZR7QW.jpg) エラーのでるタイミング ・実行前（セミコロンないよ、かっこが足りないよ） ・実行後 # Page. 32 ![Page Image](https://bcdn.docswell.com/page/Z5EGM46ELR.jpg) 間違ったコード void setup(){ size(500,500); } int x=0; void draw(){ circle(x,250,100); x = x + 1; background(255) } # Page. 33 ![Page Image](https://bcdn.docswell.com/page/V4JQRG2EP5.jpg) 実行前のエラー Processingではある程度のエラーは実行する前に教えてくれ ます。エラーが出たまま実行しても動きません！ # Page. 34 ![Page Image](https://bcdn.docswell.com/page/DK7485PJ1Q.jpg) ● エラータブに詳細（行、エ ラー内容） ● エラーのある箇所に赤い 波線 # Page. 35 ![Page Image](https://bcdn.docswell.com/page/PLJ12WXEGD.jpg) 修正 エラーを見つめてるだけで消えるなら苦労しない！ 指定された箇所を確認して、修正しましょう。 background(255) //修正前 background(255); //修正後 # Page. 36 ![Page Image](https://bcdn.docswell.com/page/8GJWR6KE26.jpg) 実行後のエラー コンソールにエラー内容が出て、引っかかった箇所に黄色の ラインが引かれます。 英語だからって怯えないで！ # Page. 37 ![Page Image](https://bcdn.docswell.com/page/W4EZRYN73Y.jpg) エラーが出たまま実行すると… ● コンソールにエラーログ ● 止まったところに黄色のラ イン # Page. 38 ![Page Image](https://bcdn.docswell.com/page/KY76RD9JVZ.jpg) ぴえん # Page. 39 ![Page Image](https://bcdn.docswell.com/page/5G7583D748.jpg) 4 バグへの接し方 # Page. 40 ![Page Image](https://bcdn.docswell.com/page/V9J2KKMERX.jpg) ぴえん # Page. 41 ![Page Image](https://bcdn.docswell.com/page/5DEYNNP7M9.jpg) 原因究明への順番 1. どこまで正しく動いているのかを調べる 2. 変数の中身を調べる 3. それ以外の可能性を調べる # Page. 42 ![Page Image](https://bcdn.docswell.com/page/2VJNXXME8K.jpg) どこまで動いてる？ # Page. 43 ![Page Image](https://bcdn.docswell.com/page/GYE988WJ3P.jpg) 画面からわかること ● 関数size(500,500)は動いている ● 関数background(255)は動いている # Page. 44 ![Page Image](https://bcdn.docswell.com/page/5GE888REDR.jpg) 画面からわからないこと ● 変数xが動いているかわからない ● 関数circleが動いているかわからない # Page. 45 ![Page Image](https://bcdn.docswell.com/page/MLELRR2ER1.jpg) 変数の中身 変数にどのような値が入っているのか、print()や println()で確認できる。 # Page. 46 ![Page Image](https://bcdn.docswell.com/page/54JMRR97W1.jpg) void setup() { size(500, 500); } int x=0; void draw() { println(x); circle(x, 250, 100); x = x + 1; background(255); } # Page. 47 ![Page Image](https://bcdn.docswell.com/page/ZPJRRR9J9L.jpg) コードの順番 変数が間違っていないとき、 コードの順番がおかしい可能性があります。 # Page. 48 ![Page Image](https://bcdn.docswell.com/page/NPEXRR3EXY.jpg) void setup() { size(500, 500); } int x=0; void draw() { circle(x, 250, 100); x = x + 1; background(255); } background()の順番が…？ # Page. 49 ![Page Image](https://bcdn.docswell.com/page/63EKRRN7DY.jpg) void setup() { size(500, 500); } int x=0; void draw() { background(255); circle(x, 250, 100); x = x + 1; } # Page. 50 ![Page Image](https://bcdn.docswell.com/page/4L7388ZE5P.jpg) 5 あそぼう。 # Page. 51 ![Page Image](https://bcdn.docswell.com/page/V87DMM47GD.jpg) あそべ〜 ● ● ● ● 色つけたり 背景変えたり 四角形にしたり 二個動かしたり # Page. 52 ![Page Image](https://bcdn.docswell.com/page/4VJPRRV786.jpg) 質問タイム 52 # Page. 53 ![Page Image](https://bcdn.docswell.com/page/L2EVRRRJQW.jpg) 6 質問をするということ。 # Page. 54 ![Page Image](https://bcdn.docswell.com/page/Z57GMM67LR.jpg) 伝えるべきこと ● 何をしたいのか（実現したいこと） ● 何をした（どうコードを書いたなど） ● 何に困ったのか（どんなエラーが出たのかなど） # Page. 55 ![Page Image](https://bcdn.docswell.com/page/V4EQRR27P5.jpg) どんどん聞こう。 知識がないことは罪じゃない！ 向き合い方がとてもだいじ。 # Page. 56 ![Page Image](https://bcdn.docswell.com/page/DKJ488PE1Q.jpg) 6 次回予告 # Page. 57 ![Page Image](https://bcdn.docswell.com/page/PLE122X7GD.jpg) お品書き（予定） ● 命名規則 ● 変数のスコープ ● if文for文という概念 # Page. 58 ![Page Image](https://bcdn.docswell.com/page/8GEWRRK726.jpg) おわり。 感想くれ。 58 # Page. 59 ![Page Image](https://bcdn.docswell.com/page/W47ZRRNJ3Y.jpg) # Page. 60 ![Page Image](https://bcdn.docswell.com/page/KYJ6RR9EVZ.jpg)