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


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


オブジェクト

そこに花子さんが…

オブジェクト

無理

オブジェクト

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

「の」が必要

オブジェクト

あるオブジェクト (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

サンプル参照

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

programming seminar#1

Documents