programming seminar#1

プログラミングの学び方

伏見遼平

最初に大切なこと

なぜ プログラミング?

最初に大切なこと

ラクして仕事ができる

最初に大切なこと

複雑な計算もラクチン

最初に大切なこと

まったく違う世界の 言葉を知り、

書けるようになる

最初に大切なこと

その言葉で 世界と通じ合える

最初に大切なこと

なにより楽しい

最初に大切なこと

プログラマ= プログラムを書いて

お金をもらう人

最初に大切なこと

なんでみんな やらないの?

最初に大切なこと

答 : むずかしいから

最初に大切なこと

ひとりでプログラムを 始めるのは遠回り

最初に大切なこと

自転車

最初に大切なこと

自転車 •  熟練者の動きを見る •  やってみる •  コケる (フィードバックを得る) •  少しできるようになる •  達成感！！

最初に大切なこと

プログラミング •  周りに熟練者がいない •  やってみるまでがタイヘン •  フィードバックがない （どこでエラーが起きてるのか分からない） •  できるようにならない •  できても達成感がない

プログラミング言語

•  いきなり一人でプログラミングを勉強する

•  自転車に乗ってる人を見たこと 　ないまま自転車を練習する

•  ロシア語の教科書を一冊持って 　ソビエトに乗り込む

プログラミング言語

あなたが最初に学ぶべきなのは、 「フョードルの子供は何人いますか?」でも 「彼の名前はスメルジャコフです」でもなく、

「辞書の引き方」「文法間違いの探し方」 　＝ 学び方

プログラミング言語

•  学び方が分かると、先に進めるはず！

最初に大切なこと

まず、学び方を学ぶ

プログラミング言語

•  あなたが最初に学ぶべきなのは、 「フョードルの子供は何人いますか?」でも 「彼の名前はスメルジャコフです」でもなく、

「辞書の引き方」「文法間違いの探し方」です

プログラムとは 「こんにちは、と表示しろ」

•  「こんにちは」とは何か? •  「、」とは何か? •  「表示しろ」とはどのような命令か? •  どのようなフォントで、どこに表示すれば良いのか?

プログラムとは

自然言語はすごく曖昧

翻訳

自然言語

機械語

「こんにちは」と表示しろ！！

「0010 1101 0011 0111 …」

翻訳

翻訳

機械語に翻訳するのは すごくめんどくさい

翻訳

自然言語

プログラミング言語

「こんにちは」と表示しろ！！

「0010 1101 0011 0111 …」 機械語

print “こんにちは”;

機械が担当

人間が担当

バイナリ 001010010010100101010001010101011 0010101001010010010100101010001010 0101100101001001010010101000101010 0110010101001010100101001001010010 0100010101010110010101001010010010 001010100010101010110010101

-> Hello, World

バイナリ 0000 : 0 0001 : 1 0010 : 2 0011 : 3 … 1001 : 9 1010 : A 1011 : B 1100 : C 1101 : D 1110 : E 1111 : F

0111 0000 0000 1101

0000 0000 0000 0000

0111 11110010 0000

7 0 0 D

0 0 0 0

7 F 2 7

機械語 •  7001 0000 7002 0000 •  1210 800D 1220 800C •  F000 0002 7120 7110 •  000C •  0048 0065 006C 006C •  006F 0020 0077 006F •  0072 006C 0064 0021

-> Hello World!

アセンブリ •  OUT TEXT,LEN •  LEN DC 12 •  TEXT DC “Hello World!”

-> Hello World! ちょっと読めるかも…?

プログラミング言語 C #include <stdio.h> main(){ printf("Hello World\n"); }

プログラミング言語 Java public class HelloWorld { public static void main (String[] args) { System.out.println("Hello World !!"); } }

プログラミング言語 Ruby

print “Hello, world!”

プログラミング言語 JavaScript

Document.write(“Hello, world!”);

プログラミング言語

同じ処理を表すのに複数の表記法がある

まず基礎知識

前提 お作法 道具

前提

• 今回扱うのは「JavaScript」 – Webブラウザの中で動く – Webサイトの中で使われる – 覚えやすくて、奥が深い – 最近注目されている

前提

• 他のプログラミング言語とはちょっと違う点も – C,Java – php,Ruby

前提

• テキストエディタで編集

前提 •  JavaScriptのファイルを、 　テキストエディタで編集 → 保存

前提 •  そのJavaScriptを読み込むように指定した 　HTMLを、Safariで実行

前提 •  ウインドウ開きっぱなしでいったりきたりする

前提 •  基本的には全部「半角」で書く！ カッコ（）とか、＆＜＞｛｝とか

　もちろん、スペース (空白) もダメ

特にスペースは見えないので分かりにくい

前提

前提

前提 •  コンピュータは神経質

– カッコをひとつ閉じわすれる – ひとつスペルミスする – セミコロンをわすれる

　　　　　→絶対に動きません！！

•  でも、動かない理由を教えてくれる

前提 •  テキストエディタのつかいかた

前提 •  コピペしまくろう

– プログラマはコピペが大好きです – ショートカットは必ずおぼえよう

•  Ctrl + X … キリトリ, カット (コピーして消去) •  Ctrl + C … コピー •  Ctrl + V … 貼り付け, ペースト • これだけでなんかカッコイイ ←これ重要

お作法

実践

道具

package/0_basic/main.js

idiom/basic.js

お作法 •  ダウンロードしよう http://bit.ly/

•  画面に「こんにちは！」と表示させる

道具

• 覚えるのは4つ – 数字 – 文字 – 関数 (?) – オブジェクト (??)

数値 •  そのまんま書くだけ •  カンタン

number = 1; money = 10000; height = 176.5;

number = 3000 + money;

文字列 •  ひとつの文字列は “” で囲います •  じゃないと、プログラムと見分けがつかない

name = “ふしみ”; string = ‘こんにちは’;

str = ‘私の名前は’ + name + ‘です’

関数

f(x) = 3x + 2

関数 •  基本的には一緒

f(x)  =  3x  +  2

f(x)  =  3x  +  2

8

f(x)  =  3x  +  2

2

3 11

5y 15y + 2

関数 •  プログラミングにおける関数は 「手続きを定義するもの」と拡張して扱われる

f(x)  =  3x  +  2

function f(x){ var result = 3 * x + 2; return result }

関数 •  何かを受け取ったり、渡したりしなくても良い

– 「叫ぶ」という手続きを関数にしてみる

function shout(){ alert(‘ahhhh !!’);

}

shout();

関数 •  「名前を名乗る」という手続きを関数にする

function say(name){ alert(‘私の名前は’ + name + ‘です’);

}

say(“伏見”); say(“田中”);

関数 •  関数は「動作を束ねたモノ」

function 関数の名前 (受け取るモノ) { やること やること return 返すモノ; }

関数

覚える必要は ありません

関数

コピペでOK 慣れたら覚える

関数 • 数値… そのまんま • 文字列 … そのまんま • 関数 … 「手続きを束ねたモノ」

• オブジェクト … ?

オブジェクトとは

Object : 物体

オブジェクトとは

Object : 物体 ????

オブジェクトとは

•  ここがプログラミングのキモ

•  最近の言語は「オブジェクト指向」 •  とにかくオブジェクトがみんな大好き

オブジェクト

昔々あるところに 田中くんがいました

オブジェクト var name = “たなかたろう” var money = 1000 var height = 170 var weight = 60

function say(str){ document.write (“わたしは” + str + ”です”) }

オブジェクト

そこに鈴木君がやってきました

オブジェクト var TANAKAname = “たなかたろう” var TANAKAmoney = 1000 var TANAKAheight = 170 var TANAKAweight = 60

function say(str){ document.write (“わたしは” + str + ”です”) }

オブジェクト var SUZUKIname = “すずきいちろう” var SUZUKImoney = 3000000 var SUZUKIheight = 180 var SUZUKIweight = 70

function say(str){ document.write (“わたしは” + str + ”です”) }

オブジェクト

そこに花子さんが…

オブジェクト

無理

オブジェクト

田中君の身長 鈴木君の名前

「の」が必要

オブジェクト

あるオブジェクト (ex. 鈴木君, 田中君) に属する 変数や関数をひとまとめにするもの

オブジェクト

オブジェクト

鈴木君 を表す suzuki というオブジェクトを用意

suzuki.money = 10000 suzuki.name = ‘すずきいちろう’ suzuki.height = 160

…ちょっとスッキリ?

オブジェクト

「suzuki」はオブジェクトなので、代入もできる var suzuki2 = suzuki

alert(‘私の名前は’ + suzuki2.name + ‘です’);

オブジェクト

関数はオブジェクトも受け取れる

function sayName(person) { alert(‘私の名前は’ + person.name + ‘です’); }

sayName (suzuki); sayName (tanaka);

オブジェクト

オブジェクトを変更する関数

function giveMoney(person) { person.money = person.money + 100;

}

giveMoney (fushimi);

オブジェクト

関数も束ねられる

tamura.shout = function () { alert(‘ahhhhhh!!!!!!’);

}

tamura.shout()

オブジェクト

いろいろ できる

オブジェクト

あとは慣れです

道具 • 数値… そのまんま • 文字列 … そのまんま • 関数 … 「手続きを束ねたモノ」

• オブジェクト … 　「変数とか関数を束ねたモノ?」

道具

実践

道具

自分の オブジェクト

を作ろう

道具

package/1_object/main.js

道具

var fushimi = {}

構造

•  次にやるのは 「10回繰り返す！！」とか 「もし○○ならこれをやる！」とか

構造

1. 条件分岐 2. ループ

構造

idiom/basic.js を見ながらでも良いかも

道具

• 条件分岐

if (条件) { 　やること }

道具

if (条件1) { 　やること }else if (条件2) { やること }else{ 　やること }

道具

whileループ

while (条件) { 　やること }

道具

forループ

for (初期化; 継続条件; ループ処理) { 　やること }

構造

結論 コピペしろ

道具

実践

道具

ループを使って 何か作ろう

道具

お題： 3の倍数と、

3のつく数字だけ バカになるプログラム

道具 •  3の倍数と3のつく数字だけ「!」をつける

–  1 2 3!!! 4 5 6!!! 7 8 9!!! 10 11 12!!! 13!!! …

•  素数を数え上げる •  フィボナッチ数列を延々と列挙

ヒント 3で割った余り … number % 3 3で割り切れるとき… if ( number % 3 == 0 ) 3で割った商 … Math.floor( number / 3 )

道具

package/2_loop/main.js

実践

実践その3

電卓を つくろう

実践その3

一気に難しい 課題！！

ヒョエー

実践その3

電卓は どう動くのか?

実践その3

変数は 何がいくつ必要か

実践その3

プログラムを 書く前が難しい課題 ＝モデリングの部分

実践その3

電卓として動けば、 どう動いてるかは関係ない

電卓に何を求めるのか??

実践その3

•  株価の値動きをシミュレートする •  10ヶ月後の生存個体数を予測する •  RPGの戦闘でダメージを計算する

モデルを作る

実践その3

まず考えてみよう！

実践その3

まず考えてみよう！ そのあと作ってみよう！

実践その3 •  HTML部分は用意しました

– 押しても何も動きません…

実践その3 •  ボタンを押すと何か関数を呼びます •  関数の名前は「index.html」の中に書く

　… onclick = “myfunc(1)” >

訳：クリックしたときにmyfunc(1)を実行してね

実践その3

やってみよう

実践その3

できたかな?

実践その3

sample/calc/index.html

実践その3 13 + 26 = ? [1][3] … 「13」を覚える [+] … 「13」をどこかによけて、「+」を覚える [2][6] …「26」を覚える [=] … 「+」なので、「13」と覚えた「26」を足す

•  表示する数字 •  よけておく数字 •  演算の種類 ３つの変数が必要

実践その3 number … オモテの数字 stack … ウラの数字 operator … 演算の種類

input … オモテの数字を変更 setOperator … 演算の種類を指定 calc … 計算する clear … ぜんぶ消す

実践その4

最終課題

実践その4

ゲームを つくろう

実践その4

なぜゲームか

実践その4

•  作る過程が楽しい・人を楽しませられる •  条件分岐・ループ・数学計算・グラフィック処理とか、いろいろ使う

•  プログラミングの学習には最適！

実践その4

ただし

ゲームは複雑

実践その4

そこで、サンプルを いくつか用意しました

実践その4 bear.addEventListener('enterframe', function(e) {

if (game.input.up) {

this.y -= 3;

} else if (game.input.down) {

this.y += 3;

}

if (game.input.right) {

this.x += 3;

} else if (game.input.left) {

this.x -= 3;

}

}

);

実践その4

サンプル参照

プログラミングの学び方 おわり 伏見遼平