プログラミング基礎講習１

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

本日の予定 18:15 〜 講習会開始 19:30 〜 遊ぶ時間 〜20:00 終わり スライド以外にPDFverも配ります。 各位休憩を適宜とって下さい。

用意して欲しいもの ・Processing コードを実行させつつ進めていきます。 手元で遊びながら聞いてね。

目次 ・プログラミングis何 ・フローチャートとは ・調べ方 ・エラー・バグへの接し方 ・質問をするということ

1 プログラミングis何

プログラミングis…? > 何かを実現させるために、様々な言語で命令を書くこと

2 フローチャートとは

フローチャートとは > 実行したいことのために行う工程を、表現した図

商品購入の工程

合計値を出す工程

なにがうれしいの。 > フローチャートをイメージすることによって、 コードを書くときの思考の流れが追いやすくなる

複雑になると…

あとは書くだけ。 言語で命令を順番通りに書いてあげるだけ。 どう命令すれば良いか考えるのも大変。

質問タイム 14

3 Hello World!

Hello World!（儀式） 技術系の人間は新しい言語を触るとき、 とりあえず「Hello World!」と出力します。

print(“Hello World!”);

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

3 サンプルコード

void setup(){ size(500,500); } int x=0; void draw(){ background(255); circle(x,250,100); x = x + 1; }

3 コードの調べ方

1. ネットで調べる この世で信じられるのはリファレンスだけです。

https://processing.org/reference/

[言語名 関数名]

注意 複数の記事を参考にしよう。

2. コメントアウトで調べる processingには//でその行をプログラムと関係ない行にす ることができます。 例）backgroundをコメントアウトする //background(255);

3. コードを変えて調べる わからない関数も書き換えてしまえばどう動いてたかわかる はず！！ 例）直接数字を変えてみる。（関数size()を10倍に） size(5000, 5000);

実践 各関数がどのような動きをしているのか、 遊びながら調べてみましょう。

解説 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たす }

4 エラーへの接し方

エラーのでるタイミング ・実行前（セミコロンないよ、かっこが足りないよ） ・実行後

間違ったコード void setup(){ size(500,500); } int x=0; void draw(){ circle(x,250,100); x = x + 1; background(255) }

実行前のエラー Processingではある程度のエラーは実行する前に教えてくれ ます。エラーが出たまま実行しても動きません！

● エラータブに詳細（行、エ ラー内容） ● エラーのある箇所に赤い 波線

修正 エラーを見つめてるだけで消えるなら苦労しない！ 指定された箇所を確認して、修正しましょう。 background(255) //修正前 background(255); //修正後

実行後のエラー コンソールにエラー内容が出て、引っかかった箇所に黄色の ラインが引かれます。 英語だからって怯えないで！

エラーが出たまま実行すると… ● コンソールにエラーログ ● 止まったところに黄色のラ イン

ぴえん

4 バグへの接し方

ぴえん

原因究明への順番 1. どこまで正しく動いているのかを調べる 2. 変数の中身を調べる 3. それ以外の可能性を調べる

どこまで動いてる？

画面からわかること ● 関数size(500,500)は動いている ● 関数background(255)は動いている

画面からわからないこと ● 変数xが動いているかわからない ● 関数circleが動いているかわからない

変数の中身 変数にどのような値が入っているのか、print()や println()で確認できる。

void setup() { size(500, 500); } int x=0; void draw() { println(x); circle(x, 250, 100); x = x + 1; background(255); }

コードの順番 変数が間違っていないとき、 コードの順番がおかしい可能性があります。

void setup() { size(500, 500); } int x=0; void draw() { circle(x, 250, 100); x = x + 1; background(255); } background()の順番が…？

void setup() { size(500, 500); } int x=0; void draw() { background(255); circle(x, 250, 100); x = x + 1; }

5 あそぼう。

あそべ〜 ● ● ● ● 色つけたり 背景変えたり 四角形にしたり 二個動かしたり

質問タイム 52

6 質問をするということ。

伝えるべきこと ● 何をしたいのか（実現したいこと） ● 何をした（どうコードを書いたなど） ● 何に困ったのか（どんなエラーが出たのかなど）

どんどん聞こう。 知識がないことは罪じゃない！ 向き合い方がとてもだいじ。

6 次回予告

お品書き（予定） ● 命名規則 ● 変数のスコープ ● if文for文という概念

おわり。 感想くれ。 58