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

1K Views

April 19, 21

スライド概要

サークルでProcessingを使ったプログラミング基礎講習会を行った時の資料です。

profile-image

公立はこだて未来大学複雑系学部3年

シェア

またはPlayer版

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

(ダウンロード不可)

関連スライド

各ページのテキスト
1.

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

2.

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

3.

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

4.

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

5.

1 プログラミングis何

6.

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

7.

2 フローチャートとは

8.

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

9.

商品購入の工程

10.

合計値を出す工程

11.

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

12.

複雑になると…

13.

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

14.

質問タイム 14

15.

3 Hello World!

16.

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

17.

print(“Hello World!”);

18.

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

19.

3 サンプルコード

20.

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

21.

3 コードの調べ方

22.

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

23.

https://processing.org/reference/

24.

[言語名 関数名]

25.

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

26.

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

27.

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

28.

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

29.

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

30.

4 エラーへの接し方

31.

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

32.

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

33.

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

34.

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

35.

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

36.

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

37.

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

38.

ぴえん

39.

4 バグへの接し方

40.

ぴえん

41.

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

42.

どこまで動いてる?

43.

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

44.

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

45.

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

46.

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

47.

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

48.

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

49.

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

50.

5 あそぼう。

51.

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

52.

質問タイム 52

53.

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

54.

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

55.

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

56.

6 次回予告

57.

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

58.

おわり。 感想くれ。 58